body {
	background-color: black;
	cursor: url('cursor_normal.png') 16 16, auto;
}

#stage {
	position: relative;
  width: 1200px;
	height: 600px;
	margin: auto;
	position: relative;
	overflow: hidden;
	background-color: black;
	text-align: center;
}

@font-face {
	font-family: 'RoyaltyCriminals';
	src: url('Fonts/RoyaltyCriminals.ttf') format('truetype');
}

@font-face {
  font-family: 'dogica';
  src: url('Fonts/dogica.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'dogica';
  src: url('Fonts/dogicabold.ttf') format('truetype');
  font-weight: bold;
}

#backgroundimage {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

h1 {
	font-family: 'RoyaltyCriminals', sans-serif;
	font-size: 135px;
	font-weight: normal;
	text-align: center;
	color: black;
	user-select: none;
	position: relative;
	z-index: 5;
  text-shadow: 
   0 0 5px rgba(48, 202, 46, 0.5),
   0 0 10px rgba(48, 202, 46, 0.6),
   0 0 15px rgba(48, 202, 46, 0.7),
   0 0 20px rgba(48, 202, 46, 0.8),
   0 0 30px rgba(48, 202, 46, 0.9),
   0 0 40px rgba(48, 202, 46, 1);
}

#decodeText {
  letter-spacing: 2px;
  text-shadow: 0 0 5px #30ca2e;
}

button, .slot {
  cursor: url('cursor_pointer.png') 16 16, pointer;
}

button {
  cursor: url('cursor_pointer.png') 16 16, pointer;
  position: relative;
  width: 250px;
  height: 60px;
  margin-top: 50px;
  background-color: #035d04;
  z-index: 6;
  color: white;
  border: 2px #30ca2e;
  font-family: 'dogica', sans-serif;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.3s ease;
  border-radius: 10px;
}

button:hover {
  z-index: 7;
  transform: translateY(-5px);
  box-shadow: 0 0 20px #30ca2e;
  background-color: #067305;
}

#unmuteButton {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(3, 93, 4, 0.8);
  color: white;
  border: 2px solid #30ca2e;
  border-radius: 50%;
  font-size: 24px;
  font-family: 'dogica', sans-serif;
  z-index: 10;
  cursor: url('cursor_pointer.png') 16 16, pointer;
  transition: all 0.3s ease;
}

#unmuteButton:hover {
  background-color: rgba(6, 115, 5, 1);
  box-shadow: 0 0 10px #30ca2e;
}

/* Opening Page */
#matches:hover, #torch:hover, #camera:hover {
  cursor: url('cursor_pointer.png') 16 16, pointer;
}

#matches {
  width: 120px;
  height: 67.5px;
  left: 229px;
  top: 174px;
  position: absolute;
  z-index: 30;
}

#torch {
  width: 120px;
  height: 67.5px;
  left: 408px;
  top: 75px;
  position: absolute;
  z-index: 30;
}

#camera {
  width: 120px;
  height: 67.5px;
  left: 542px;
  top: 282px;
  position: absolute;
  z-index: 30;
}

#satchel {
  user-select: none;
  -webkit-user-drag: none;
  width: 200px;
  height: 200px;
  right: 220px;
  top: 129px;
  position: absolute;
  z-index: 5;
}

#inventoryPanel {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 120px;
  height: 400px;
  background-color: #2b1e16;
  border: 3px solid #5c4433;
  padding: 10px;
  z-index: 10;
  font-family: 'dogica', sans-serif;
  color: #e0d2c0;
  text-align: center;
  image-rendering: pixelated;
}

#inventoryTitle {
  user-select: none;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 1px;
  line-height: 1.4;
  color: #e0d2c0;
}

#inventory {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.slot {
  width: 70px;
  height: 70px;
  background-color: #3a2a20;
  border: 2px solid #5c4433;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  overflow: hidden; /* ensures images stay inside */
  image-rendering: pixelated;
}

.slot:hover {
  cursor: url('cursor_pointer.png') 16 16, pointer;
  background-color: #4a372a;
}

.slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
  image-rendering: pixelated;
}

#itemCollected {
  display: none;
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 18px; 
  color: #e0d2c0; 
  background-color: rgba(43, 30, 22, 1); /* Dark background for contrast */
  padding: 8px 16px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(93,68,52,255);
  z-index: 20;
  opacity: 0;
  animation: popUpZoomInOut 2s ease-out forwards;
}

@keyframes popUpZoomInOut {
  0% {
      opacity: 0;
      transform: translateX(-50%) scale(0.5);
  }
  50% {
      opacity: 1;
      transform: translateX(-50%) scale(1.2);
  }
  100% {
      opacity: 0;
      transform: translateX(-50%);
  }
}

#veraDialogue {
  user-select: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(43, 30, 22, 1);
  border: 3px solid #5c4433;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  max-width: 600px;
  z-index: 30;
  font-family: 'dogica', sans-serif;
  color: #e0d2c0;
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 1.8;
  text-align: left;
  image-rendering: pixelated;
}

#veraPortrait {
  user-select: none;
  pointer-events: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  image-rendering: pixelated;
}

#veraText {
  user-select: none;
  flex-grow: 1;
}

#doctorDialogue {
  user-select: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(43, 30, 22, 1);
  border: 3px solid #5c4433;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  max-width: 600px;
  z-index: 30;
  font-family: 'dogica', sans-serif;
  color: #e0d2c0;
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 1.8;
  text-align: left;
  image-rendering: pixelated;
}

#doctorPortrait {
  user-select: none;
  pointer-events: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  image-rendering: pixelated;
}

#doctorText {
  user-select: none;
  flex-grow: 1;
}

#nextButton {
  position: absolute;
  bottom: 20px;
  right: 100px;
  padding: 10px 20px;
  font-family: 'dogica', sans-serif;
  font-size: 14px;
  background-color: #035d04;
  color: #e0d2c0;
  border: 2px solid #30ca2e;
  border-radius: 10px;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
}

#nextButton:hover {
  cursor: url('cursor_pointer.png') 16 16, pointer;
  background-color: #067305;
  box-shadow: 0 0 10px #30ca2e;
}

/* Page 2 & 3 */

#invisiBox1 {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#invisiBox1:hover {
  opacity: 1;
}

#fadeOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 2s ease;
}

.invisiBox {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: transparent;
  cursor: url('cursor_pointer.png') 16 16, pointer;
  z-index: 100;
}

.invisiBox:hover {
  background: radial-gradient(
     circle, 
     rgba(48, 202, 46, 0.8) 0%,
     rgba(48, 202, 46, 0.4) 40%,
     rgba(48, 202, 46, 0) 70%
   );
   transition: all 0.3s ease;
}

/* Page 4 */

.invisiTorch {
  position: absolute;
  width: 200px;
  height: 200px;
  z-index: 100;
}

.invisiTorch:hover {
  cursor: url('cursor_pointer.png') 16 16, pointer;
}

#invisiBox1 {
  background: radial-gradient(
    circle, 
    rgba(255, 0, 0, 0.8) 0%,     /* red */
    rgba(255, 0, 0, 0.4) 40%, 
    rgba(255, 0, 0, 0) 70%
  );
}

#invisiBox2 {
  background: radial-gradient(
    circle, 
    rgba(0, 0, 255, 0.8) 0%,     /* blue */
    rgba(0, 0, 255, 0.4) 40%, 
    rgba(0, 0, 255, 0) 70%
  );
}

#invisiBox3 {
  background: radial-gradient(
    circle, 
    rgba(255, 255, 0, 0.8) 0%,   /* yellow */
    rgba(255, 255, 0, 0.4) 40%, 
    rgba(255, 255, 0, 0) 70%
  );
}

#invisiBox4 {
  background: radial-gradient(
    circle, 
    rgba(255, 0, 255, 0.8) 0%,   /* magenta */
    rgba(255, 0, 255, 0.4) 40%, 
    rgba(255, 0, 255, 0) 70%
  );
}

/*Page 5 */

#gameContainer {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40px;
  color: #5c4433;
  margin: 0 auto;
  z-index: 40;
}

#balanceBar {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #2b1e16;
  border-radius: 10px;
  overflow: hidden;
}

#safeZone {
  position: absolute;
  left: 40%;
  width: 20%;
  height: 100%;
  background-color: #e0d2c0;
  opacity: 0.5;
  border-radius: 10px;
}

#marker {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 30px;
  background-color: #30ca2e;
  border-radius: 3px;
  pointer-events: none;
}

#gameMessage {
  user-select: none;
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(43, 30, 22, 1);
  border: 3px solid #5c4433;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  max-width: 600px;
  z-index: 10;
  font-family: 'dogica', sans-serif;
  color: #e0d2c0;
  font-size: 12px;
  letter-spacing: 0px;
  line-height: 1.8;
  text-align: left;
  image-rendering: pixelated;
}

#retryButton {
  cursor: url('cursor_pointer.png') 16 16, pointer;
  width: 250px;
  height: 60px;
  margin-top: 50px;
  background-color: #035d04;
  z-index: 6;
  color: white;
  border: 2px #30ca2e;
  font-family: 'dogica', sans-serif;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
  border-radius: 10px;
}

/* Page 6 */

#choiceButtons {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 40;
}

#choiceButtons button {
  width: 200px;
  height: 60px;
  background-color: #035d04;
  color: white;
  font-family: 'dogica', sans-serif;
  font-size: 14px;
  border: 2px solid #30ca2e;
  border-radius: 10px;
  cursor: url('cursor_pointer.png') 16 16, pointer;
  transition: all 0.3s ease;
}

#choiceButtons button:hover {
  background-color: #067305;
  box-shadow: 0 0 10px #30ca2e;
}

#takePhotoButton button {
  width: 200px;
  height: 60px;
  background-color: #035d04;
  color: white;
  font-family: 'dogica', sans-serif;
  font-size: 14px;
  border: 2px solid #30ca2e;
  border-radius: 10px;
  cursor: url('cursor_pointer.png') 16 16, pointer;
  transition: all 0.3s ease;
}

#takePhotoButton button:hover {
  background-color: #067305;
  box-shadow: 0 0 10px #30ca2e;
}