/* style.css - Hybrid edge pan UI (static overlay fixed) */

/* Reset / base */
* { box-sizing: border-box; }
html,body {
  height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* GLOBAL STATIC OVERLAY (used for menu + cameras) */
.staticFX {
  position: fixed;
  inset: 0;
  pointer-events: none !important;
  z-index: 999;
  opacity: 0.18;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  animation: staticFlicker 0.12s infinite;
}

@keyframes staticFlicker {
  0% { opacity: 0.12; }
  50% { opacity: 0.22; }
  100% { opacity: 0.12; }
}

/* TITLE SCREEN */
#titleScreen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

#titleScreen img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  cursor: pointer;
  transform: none !important;
}

/* Transparent static.gif overlay for title */
#titleScreen .menuStatic {
  position: absolute;
  inset: 0;
  background: url("static.gif");
  background-size: cover;
  background-repeat: repeat;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none !important;
  z-index: 61;
}

/* CUTSCENE SCREEN */
#cutsceneScreen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
  z-index: 50;
}

#cutsceneScreen img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* Viewer */
#viewer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  display: block;
}

/* Image is centered; SCALE = 1 (no zoom) */
#viewer img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.02s linear;
  max-width: none;
  max-height: none;
}

/* Overlays */
#staticOverlay, #blackoutOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  z-index: 200;
  transition: opacity 180ms linear;
}

/* Camera static overlay (visible while viewing cameras) */
#staticOverlay {
  opacity: 0.25 !important;
  mix-blend-mode: screen;
  animation: staticFlicker 0.12s infinite;
  pointer-events: none !important;
}

/* Blackout overlay */
#blackoutOverlay {
  background: #000;
  opacity: 0;
}

/* Camera menu (animated) */
#cameraMenu {
  position: fixed;
  right: 18px;
  top: 18px;
  width: 320px;
  max-width: calc(100vw - 36px);
  background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(6,6,6,0.95));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  border-radius: 10px;
  transform-origin: top right;
  transform: translateY(-12px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  overflow: hidden;
}

/* Transparent static.gif overlay for camera menu */
#cameraMenu .menuStatic {
  position: absolute;
  inset: 0;
  background: url("static.gif");
  background-size: cover;
  background-repeat: repeat;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none !important;
  z-index: 41;
}

/* Visible state */
#cameraMenu.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Menu header */
#menuHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

#menuTitle {
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 13px;
  color: #e6e6e6;
}

.menuBtn {
  background: transparent;
  border: none;
  color: #ddd;
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
}

/* Body */
#menuBody {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#cameraGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.camBtn {
  background: linear-gradient(180deg,#0b0b0b,#0f0f0f);
  border: 1px solid rgba(255,255,255,0.06);
  color: #ddd;
  padding: 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.camBtn:hover { transform: translateY(-3px); }

.camBtn.active {
  border-color: #2ecc71;
  color: #2ecc71;
  background: linear-gradient(180deg,#07120a,#08160b);
}

/* Footer */
#menuFooter {
  display:flex;
  justify-content: flex-end;
  gap: 8px;
}

.menuAction {
  background: #111;
  border: 1px solid rgba(255,255,255,0.06);
  color: #ddd;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.menuAction:hover { transform: translateY(-2px); }

/* Menu toggle button */
.menuToggle {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 45;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  color: #ddd;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform 120ms ease, background 120ms ease;
}

.menuToggle:hover { transform: translateY(-3px); }

/* Small screens: full width menu */
@media (max-width: 420px) {
  #cameraMenu {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 18px;
    width: auto;
    transform-origin: bottom center;
  }
  .menuToggle {
    right: 12px;
    top: 12px;
  }
}

/* HUD */
#hud {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 300;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Night display styling */
#nightDisplay {
  font-weight: 700;
  font-size: 20px;
  color: #ffd166;
}

/* Camera offline */
#camOffline {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: red;
  opacity: 0;
  z-index: 400;
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* Jumpscare */
#jumpscare {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 500;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 120ms ease;
}

#jumpscare img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* Night select */
#nightSelect {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
}

#nightSelect h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 1px;
}

.nightRow {
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.nightBtn {
  padding: 12px 20px;
  background: #111;
  color: #fff;
  border: 1px solid #444;
  cursor: pointer;
  font-size: 18px;
  border-radius: 8px;
}

/* locked state helper */
.nightBtn.locked {
  opacity: 0.45;
  pointer-events: none;
}

/* Utility hidden class */
.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Safety net: ensure hidden overlays never intercept touches */
#titleScreen.hidden,
#cutsceneScreen.hidden,
.menuStatic.hidden {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}