/* --- RESET & BASICS --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Courier New", Courier, monospace; /* Terminal Font */
  background-color: #000;
  color: #00ff00; /* Hacker Green */
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* --- CRT SCANLINE EFFECT --- */
body::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 9999;
  pointer-events: none;
}

/* --- BACKGROUND CANVAS (Three.js) --- */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000;
}

/* --- UI LAYER --- */
#ui-layer {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* We keep flex here for non-absolute children, but intro text is now handled absolutely */
}

.interactive-ui {
  pointer-events: auto;
}

.hidden {
  display: none !important;
}

/* --- START OVERLAY (LOCK SCREEN) --- */
#start-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 1s ease;
  pointer-events: auto;
  color: #00ff00;
  font-family: "Courier New", monospace;
  border: 2px solid #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
  max-width: 600px;
  max-height: 400px;
  margin: auto;
  top: 50%; /* Center overlay */
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0a0a0a;
}

#lock-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 0 0 10px #00ff00;
}

#timer {
  font-size: 1.5rem;
  margin: 20px 0;
  color: #fff;
  background: #003300;
  padding: 5px 10px;
  border: 1px dashed #00ff00;
}

#start-btn {
  background: #000;
  color: #00ff00;
  border: 2px solid #00ff00;
  padding: 10px 30px;
  font-size: 1.2rem;
  font-family: "Courier New", monospace;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.2s;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

#start-btn:disabled {
  border-color: #333;
  color: #333;
  box-shadow: none;
  cursor: not-allowed;
}

#start-btn:not(:disabled):hover {
  background: #00ff00;
  color: #000;
  box-shadow: 0 0 20px #00ff00;
}

/* --- SECTION 1: INTRO TEXT (FIXED CENTERING) --- */
.intro-text {
  font-size: 2.5rem;
  font-weight: bold;
  color: #00ff00;
  text-shadow: 0 0 8px #00ff00;
  opacity: 0;

  /* FIX: Force precise centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90%; /* Ensure text doesn't touch edges */
  pointer-events: none;
  text-align: center;
}

.cursor::after {
  content: "█";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.intro-text.visible {
  opacity: 1;
}

/* --- SECTION 2: CAKE UI --- */
#cake-ui-section {
  opacity: 0;
  transition: opacity 1.5s ease;
  position: absolute;
  bottom: 15%; /* Moved up slightly */
  width: 100%;
  z-index: 20;
  text-align: center;
}

.cake-instruction {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
  background: rgba(0, 0, 0, 0.7);
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid #00ffff;
}

.blow-btn {
  background: #000;
  border: 2px solid #ff00ff;
  color: #ff00ff;
  padding: 12px 30px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
}

.blow-btn:hover {
  background: #ff00ff;
  color: #000;
  box-shadow: 0 0 15px #ff00ff;
}

/* --- SECTION 3: MESSAGES --- */
#message-section {
  /* FIX: Force precise centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90%;
  max-width: 900px;
  text-align: left;
  font-family: "Courier New", monospace;
}

.message-text {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #00ff00;
  opacity: 0;
  transition: opacity 1s ease;

  /* Ensure child occupies full relative space */
  position: absolute;
  width: 100%;
  left: 0; /* Reset left align relative to container */
  top: 0; /* Reset top align relative to container */

  background: rgba(0, 10, 0, 0.95);
  padding: 30px;
  border: 1px solid #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
}

/* To ensure messages stack on top of each other in the centered container */
#message-section .message-text {
  position: relative; /* Change back to relative flow or absolute stack */
  display: none; /* Hide by default, show via class */
}
#message-section .message-text.visible {
  display: block;
  opacity: 1;
}
/* Note: The JS adds .visible class which controls opacity. 
 To keep transitions smooth we keep them absolute or handle display carefully.
 Let's stick to the previous ABSOLUTE method inside the CENTERED container. */

#message-section {
  height: 300px; /* Give container height for centering */
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-text {
  position: absolute; /* Stack on top of each other */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.code-comment {
  color: #00aaaa;
  display: block;
  margin-bottom: 15px;
  font-size: 1rem;
  text-transform: uppercase;
  border-bottom: 1px solid #00aaaa;
  width: fit-content;
}

/* --- SECTION 4: SLIDESHOW --- */
#slideshow-section {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide-container {
  width: 90%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.photo-wrapper {
  opacity: 0;
  position: absolute;
  transition: all 1.5s ease-in-out;
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.photo-wrapper.active {
  opacity: 1;
}

.photo-frame {
  background: #000;
  padding: 5px;
  box-shadow: 0 0 15px #00ffff;
  border: 1px solid #00ffff;
  transform: scale(0.9);
  transition: transform 5s linear;
  max-width: 45%;
  position: relative;
}

.photo-frame::before {
  content: "IMG_DATA_ASSET";
  position: absolute;
  top: -20px;
  left: 0;
  color: #00ffff;
  font-size: 0.8rem;
}

.photo-wrapper.active .photo-frame {
  transform: scale(1);
}

.single-photo .photo-frame {
  max-width: 80%;
  max-height: 70vh;
}

.photo-frame img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  display: block;
  /* Filter removed for clear, vibrant photos */
}

/* --- ENDING SECTION --- */
#ending-section {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 2s ease;
  z-index: 20;
}

.final-msg {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #00ff00;
  text-shadow: 0 0 10px #00ff00;
}

.replay-btn {
  background: transparent;
  border: 1px solid #00ff00;
  color: #00ff00;
  padding: 10px 25px;
  cursor: pointer;
  font-size: 1rem;
  font-family: "Courier New", monospace;
  transition: all 0.3s;
  margin-top: 30px;
  text-transform: uppercase;
}

.replay-btn:hover {
  background: #00ff00;
  color: #000;
}

/* --- MUSIC PLAYER --- */
#youtube-player {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .intro-text {
    font-size: 1.5rem;
  }
  .message-text {
    font-size: 1.2rem;
  }
  .photo-frame {
    padding: 3px;
  }
  .photo-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .photo-frame {
    max-width: 90% !important;
    max-height: 40vh;
  }
  .final-msg {
    font-size: 1.5rem;
  }
  #cake-ui-section {
    bottom: 15%;
  }
  #start-overlay {
    width: 90%;
  }
}