/* ============================================
   GLOBAL
============================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@300;400;600&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #ffeaff;
  font-family: "IBM Plex Mono", monospace;
  overflow: hidden;
}

/* ============================================
   SCENE ROOT (background changes per scene)
============================================ */

#scene {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 50px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: background 0.6s ease-in-out, filter 0.6s ease-in-out;
}

/* Mall Atrium */
.scene-atrium {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.55)),
    url("https://i.pinimg.com/736x/63/98/4c/63984c3b6082c8c4b4326a805ecb38e1.jpg");
  filter: brightness(0.9) saturate(1.1);
}

/* Movie Theatre Lobby (same mall bg but darker) */
.scene-lobby {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.75)),
    url("https://i.pinimg.com/736x/63/98/4c/63984c3b6082c8c4b4326a805ecb38e1.jpg");
  filter: brightness(0.75) saturate(1.2);
}

/* Movie Theatre Interior */
.scene-theatre {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.9)),
    url("https://i.pinimg.com/1200x/d2/64/53/d2645311810e470eeb2618a1a96c7c3c.jpg");
  filter: brightness(0.55) saturate(1.1);
}

/* Signal Lost */
.scene-signal {
  background: black;
}

/* ============================================
   CRT OVERLAY
============================================ */

#crtOverlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 3px
    );

  mix-blend-mode: soft-light;
  opacity: 0.35;
}

/* VHS distortion bar */
#crtOverlay::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,0,255,0.08),
    transparent
  );
  animation: vhsSlide 4s linear infinite;
}

@keyframes vhsSlide {
  0% { top: -20%; }
  100% { top: 120%; }
}

/* ============================================
   SECURITY CAM UI
============================================ */

#camUI {
  position: fixed;
  top: 12px;
  left: 14px;
  z-index: 50;
  font-family: "VT323", monospace;
  font-size: 18px;
  color: #ffb3ff;
  text-shadow: 0 0 6px #ff66ff;
  opacity: 0.9;
}

/* ============================================
   SPRITES
============================================ */

#sprites {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: 20px;
  z-index: 20;
}

.sprite {
  width: 260px;
  filter:
    drop-shadow(0 0 10px rgba(255,182,255,0.6))
    drop-shadow(0 0 20px rgba(255,102,255,0.4));
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sprite.active {
  opacity: 1;
  transform: translateY(0px);
}

.sprite.inactive {
  opacity: 0.25;
  transform: translateY(10px);
}

/* ============================================
   DIALOGUE BOX (NGO × OMORI)
============================================ */

#dialogueBox {
  width: 80%;
  max-width: 900px;
  background: rgba(0,0,0,0.75);
  border: 3px solid #ffb3ff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 20px #ffb3ff;
  font-size: 20px;
  line-height: 1.5;
  z-index: 30;
}

#nameplate {
  font-family: "VT323", monospace;
  font-size: 24px;
  color: #ffb3ff;
  margin-bottom: 8px;
  letter-spacing: 2px;
  text-shadow: 0 0 6px #ff66ff;
}

#text {
  min-height: 100px;
  white-space: pre-wrap;
  color: #ffeaff;
  text-shadow: 0 0 4px #ff99ff;
}

#hint {
  margin-top: 6px;
  font-size: 14px;
  color: #b3b3ff;
  text-align: right;
  opacity: 0.7;
}

/* ============================================
   CHOICE BOX
============================================ */

#choiceBox {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 40;
}

.choiceBtn {
  background: linear-gradient(90deg, #ff66ff, #b366ff);
  border: 2px solid #ffeaff;
  padding: 12px 20px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  color: white;
  border-radius: 10px;
  text-shadow: 0 0 4px #ffb3ff;
  box-shadow: 0 0 10px #ff66ff;
  transition: 0.2s;
}

.choiceBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px #ff99ff;
}

/* ============================================
   TITLE CARD
============================================ */

#titleCard {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: black;
  color: #ffb3ff;
  font-family: "VT323", monospace;
  font-size: 48px;
  letter-spacing: 4px;
  text-shadow: 0 0 12px #ff66ff;

  opacity: 0;
  z-index: 200;
  transition: opacity 2s ease-in-out;
}
/* Start hidden, but allow JS to override */
#Elystria,
#Lucira {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* When revealed */
.show-girl {
  opacity: 1 !important;
  pointer-events: auto;
}