/* FNAF security camera feed + jumpscare */
.fnaf { background: #040404; }
.fnaf-feed {
  position: relative; margin: 10px; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  background: #000; border: 2px solid #1b1b1b; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.fnaf-feed:focus-visible { box-shadow: 0 0 0 2px #fff; }
.fnaf-cam {
  display: block; width: 100%; height: 100%;
  filter: saturate(0.35) sepia(0.18) contrast(1.15) brightness(0.95) hue-rotate(40deg);
}
/* scanlines + CRT vignette */
.fnaf-feed::before, .fnaf-feed::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.fnaf-feed::before {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.32) 2px 3px);
  animation: fnafRoll 6s linear infinite;
}
.fnaf-feed::after { box-shadow: inset 0 0 60px 18px rgba(0, 0, 0, 0.8); }
@keyframes fnafRoll { to { background-position: 0 60px; } }

.fnaf-hud { position: absolute; inset: 0; pointer-events: none; z-index: 1; font-family: var(--f-retro); color: #fff; text-shadow: 0 0 3px rgba(255, 255, 255, 0.55), 1px 1px 0 #000; line-height: 1; }
.fnaf-hud > * { position: absolute; }
.fnaf-rec { top: 7%; left: 5%; font-size: clamp(16px, 4.6cqw, 28px); display: flex; align-items: center; gap: 0.3em; letter-spacing: 0.06em; }
.fnaf-rec i { width: 0.62em; height: 0.62em; border-radius: 50%; background: #f11; box-shadow: 0 0 8px #f22; animation: fnafBlink 1s steps(1) infinite; }
@keyframes fnafBlink { 50% { opacity: 0; } }
.fnaf-clock { top: 6%; right: 5%; text-align: right; font-size: clamp(22px, 6.4cqw, 40px); }
.fnaf-clock small { display: block; font-size: 0.55em; margin-top: 0.15em; }
.fnaf-power { left: 5%; bottom: 6%; font-size: clamp(14px, 3.8cqw, 22px); }
.fnaf-power i { display: inline-block; width: 0.5em; height: 0.85em; margin-left: 0.15em; vertical-align: -0.1em; background: #7bdc3b; }
.fnaf-power i:nth-child(4) { background: #e8e23a; }
.fnaf-power i:nth-child(5) { background: #e23a2a; }
.fnaf-camname { right: 4%; bottom: calc(6% + 25cqw); text-align: right; font-size: clamp(15px, 4.2cqw, 26px); }
.fnaf-camname small { display: block; font-size: 0.72em; opacity: 0.85; margin-top: 0.1em; }
.fnaf-map { right: 4%; bottom: 5%; width: 25cqw; height: auto; opacity: 0.92; }
.fnaf-map path { fill: none; stroke: #fff; stroke-width: 1.6; }
.fnaf-map rect { fill: #3a3a3a; stroke: #fff; stroke-width: 1.4; }
.fnaf-map rect.on { animation: fnafCam 0.9s steps(1) infinite; }
@keyframes fnafCam { 0% { fill: #7d9a2a; } 50% { fill: #3a3a3a; } }
.fnaf-map text { fill: #fff; font: 10px var(--f-retro); text-anchor: middle; text-shadow: none; }
.fnaf .fnaf-feed { container-type: inline-size; }
.fnaf-feed.is-down { animation: fnafDown 0.35s ease-in forwards; }
@keyframes fnafDown { to { transform: translateY(12%) scaleY(0.9); opacity: 0.2; } }

.fnaf-close {
  display: block; width: calc(100% - 20px); margin: 0 10px; padding: 8px 6px 7px;
  font: 18px/1 var(--f-retro); letter-spacing: 0.12em; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
.fnaf-close:hover, .fnaf-close:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; }
.fnaf-phone { margin: 8px 12px 12px; font: 17px/1.2 var(--f-retro); color: #cfcfcf; }
.fnaf-phone b { color: #fff; font-weight: 400; }

/* full-screen jumpscare */
.fnaf-scare { position: fixed; inset: 0; z-index: 2147483000; background: #000; cursor: default; touch-action: none; }
.fnaf-scare canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fnaf-six {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: #000;
  font-family: var(--f-retro); color: #fff; opacity: 0; transition: opacity 0.35s;
}
.fnaf-six.show { opacity: 1; }
.fnaf-six.out { opacity: 0; transition-duration: 0.45s; }
.fnaf-time { display: flex; align-items: flex-start; font-size: clamp(72px, 16vw, 150px); line-height: 1; text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); }
.fnaf-digit { display: inline-block; height: 1em; overflow: hidden; }
.fnaf-digit span { display: block; height: 1em; transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1); }
.fnaf-six.tick .fnaf-digit span { transform: translateY(-100%); }
.fnaf-am { margin-left: 0.32em; }
.fnaf-sub { margin: 0; font-size: clamp(20px, 4.6vw, 30px); color: #bdbdbd; opacity: 0; transition: opacity 0.6s 0.9s; text-align: center; padding: 0 16px; }
.fnaf-six.tick .fnaf-sub { opacity: 1; }

@media (max-width: 760px) {
  .fnaf { order: 8; }
  .fnaf-feed { margin: 8px; }
  .fnaf-close { width: calc(100% - 16px); margin: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fnaf-feed::before { animation: none; }
  .fnaf-digit span { transition-duration: 0.01s; }
}