/* General styles */
body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
}

/* Game area */
#game-area {
  position: relative;
  width: 100vw; /* Full width of the viewport */
  height: 70vh; /* 70% of the viewport height */
  background-color: #f0f0f0; /* Light gray background */
  overflow: hidden;
  margin: 0 auto; /* Center the game area horizontally */
}

/* Default player size (for larger screens) */
#player {
  position: absolute;
  bottom: 0; /* Align with the bottom of the game area */
  left: 5%; /* Adjust based on game area width */
  width: 15vw; /* Default width for larger screens */
  height: 25vh; /* Default height for larger screens */
  background-image: url('idle.png'); /* Default idle image */
  background-size: contain; /* Ensure the entire image fits within the element */
  background-position: center; /* Center the image within the element */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  z-index: 2; /* Ensure it's in front of the background */
}

/* Running animation (GIF) */
#player.running {
  background-image: url('running.gif'); /* Running animation GIF */
}

/* Jumping state */
#player.jumping {
  background-image: url('jump.png'); /* Path to the jump image */
  background-size: contain; /* Ensure the image fits within the element */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
}

/* Default obstacle size */
.obstacle {
  position: absolute; /* Ensure the obstacle is positioned relative to the game area */
  bottom: 0; /* Align the obstacle to the bottom of the game area */
  width: min(6vw, 90px); /* Default width */
  height: min(10vh, 150px); /* Default height */
  background-size: contain; /* Ensure the image fits within the obstacle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center; /* Center the image */
  z-index: 2; /* Ensure it's in front of the background */
}

/* Jump animation */
@keyframes jump {
  0% {
    bottom: 50px; /* Starting position */
  }
  30% {
    bottom: 200px; /* Higher ascent to the peak */
  }
  40% {
    bottom: 220px; /* Pause briefly at a higher peak */
  }
  70% {
    bottom: 200px; /* Smooth descent */
  }
  100% {
    bottom: 50px; /* Return to starting position */
  }
}

.jump {
  animation: jump 1.1s cubic-bezier(0.4, 0, 0.6, 1); /* Smooth jump animation */
}

/* Score display */
#score {
  position: absolute;
  top: 10px; /* Keep it at the top */
  left: 10px; /* Keep it in the left corner */
  font-size: 32px; /* Increase font size for better visibility */
  font-weight: bold; /* Make the text bold */
  color: white; /* Ensure the text color is white */
  padding: 5px 10px; /* Add some padding for spacing */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add a shadow for better readability */
  z-index: 3; /* Ensure it appears above other elements */
  color: white !important; /* Force the text color to white */
}

/* Game title */
#game-title {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* Start screen */
#start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it appears above other elements */
  cursor: pointer; /* Indicate that the screen is clickable */
}

#start-image {
  max-width: 80%;
  height: auto;
}

/* Rules container */
#rules {
  position: absolute;
  bottom: 10px; /* Keep it near the bottom */
  left: 10px; /* Align it to the left side */
  width: auto; /* Adjust width to fit the content */
  background-color: #333; /* Dark background for contrast */
  color: white; /* White text for readability */
  padding: 10px; /* Add padding for spacing */
  font-size: 14px; /* Adjust font size */
  text-align: left; /* Align text to the left */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for separation */
  border-radius: 5px; /* Add rounded corners */
  z-index: 2000; /* Ensure it appears above other elements */
  pointer-events: auto;
}

/* Close button for rules */
#close-rules {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: transparent;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
}

#close-rules:hover {
  color: #ff5722; /* Highlight the button on hover */
}

#rules h3 {
  margin: 0;
  font-size: 16px;
  text-decoration: underline;
}

#rules ul {
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
}

#rules li {
  margin: 5px 0;
}

.hidden {
  display: none;
}

#game-over-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000; /* Ensure it appears above everything else */
}

/* Center the game over popup */
#game-over-popup {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for the element's size */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  color: white; /* Text color */
  padding: 20px; /* Add some padding */
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center the text inside */
  display: none; /* Initially hidden */
  z-index: 100; /* Ensure it appears above other elements */
}

/* Style the Try Again button */
#try-again-button {
  margin-top: 20px; /* Add some space above the button */
  padding: 10px 20px; /* Add padding for a clickable area */
  background-color: #ff2222; /* Button color */
  color: white; /* Text color */
  border: none; /* Remove border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px; /* Adjust font size */
}

#try-again-button:hover {
  background-color: #e64a19; /* Darker color on hover */
}

#mute-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ff5722;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#mute-button:hover {
  background-color: #e64a19;
}

/* Background layer for the game */
.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* Ensure the image covers the entire area */
  background-position: center; /* Center the image */
  z-index: 0; /* Place behind the player and obstacles */
  background-image: url('still background.png'); /* Static image before the game starts */
  display: block; /* Always visible */
  transition: background-image 0.3s ease-in-out; /* Smooth transition */
  background-color: #000; /* Black background as fallback */
}

/* Loop the background GIF only when the game is active */
.background-layer.playing {
  background-image: url('background-loop.gif'); /* Replace with your GIF file */
}

/* Keyframes for looping the background */
@keyframes loopBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100% 0; /* Adjust based on the GIF's width */
  }
}

.flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  animation: flash 0.3s ease-out forwards;
}

@keyframes flash {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fall {
  0% {
    transform: translateY(0) scale(1); /* Start at the current position and size */
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) scale(0); /* Move down and shrink to nothing */
    opacity: 0;
  }
}

.falling {
  animation: fall 2s ease-in forwards; /* Falling animation lasts 2 seconds */
}

.infinite-space {
  background-color: black; /* Infinite space is just black */
  transition: background-color 1s ease-in-out;
}

/* Reward Overlay */
#reward-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Black background with slight transparency */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* Reward Case */
#reward-case {
  position: relative;
  width: 400px;
  background-color: #000; /* Solid black background */
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* Subtle white glow */
  text-align: center;
  padding: 20px;
  color: #fff; /* White text */
  font-family: "Helvetica", sans-serif; /* Helvetica font */
  font-weight: bold; /* Bold text */
}

/* Close Button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #fff; /* White text */
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover {
  color: #ff4444; /* Highlight the button on hover */
}

/* Reward Title */
#reward-title {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff; /* White text */
}

/* Reward Code */
#reward-code {
  font-size: 16px;
  margin-bottom: 20px;
  color: #fff; /* White text */
}

/* Reward Buttons */
#reward-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

#reward-buttons button {
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#copy-code {
  background-color: #ffcc00; /* Yellow button */
  color: #000; /* Black text */
}

#copy-code:hover {
  background-color: #e6b800;
}

#shop-now {
  background-color: #ff4444; /* Red button */
  color: #fff; /* White text */
}

#shop-now:hover {
  background-color: #cc0000;
}

/* Countdown Timer */
#countdown-timer {
  font-size: 14px;
  color: #fff; /* White text */
}

/* Progress Meter */
#progress-meter {
  position: relative;
  width: 60%; /* Adjust width as needed */
  margin: 20px auto;
  height: 20px; /* Adjust thickness */
}

#progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000; /* Black background */
  border-radius: 10px;
  overflow: hidden;
}

#progress-indicator {
  position: absolute;
  height: 100%;
  width: 0%; /* Start with no progress */
  background-color: #ff0000; /* Red progress */
  transition: width 0.3s ease;
}

.checkpoint-marker {
  position: absolute;
  bottom: -30px; /* Position below the progress bar */
  transform: translateX(-50%);
  text-align: center;
}

.checkpoint-marker .line {
  width: 2px;
  height: 20px;
  background-color: #fff; /* White line */
  margin: 0 auto;
}

.checkpoint-marker .label {
  font-size: 12px; /* Ensure the text is readable */
  color: #fff; /* White text for visibility */
  margin-top: 5px; /* Add spacing between the line and the label */
  position: relative; /* Ensure it stays below the line */
  display: block; /* Ensure the label is displayed */
}

/* Adjust styles for smaller screens (e.g., iPhones) */
@media (max-width: 768px) {
  /* Player */
  #player {
    bottom: -10px; /* Ensure the player is touching the bottom */
    width: 30vw; /* Larger width for mobile */
    height: 40vh; /* Larger height for mobile */
  }

  /* Obstacles */
  .obstacle {
    bottom: -10; /* Ensure the obstacle is touching the bottom */
    width: 15vw; /* Larger width for better visibility */
    height: 25vh; /* Larger height for better visibility */
  }

  /* Score display */
  #score {
    font-size: 20px; /* Adjust font size for smaller screens */
  }

  /* Game title */
  #game-title {
    font-size: 20px; /* Adjust font size for smaller screens */
  }
}

footer {
  position: fixed;
  bottom: 10px; /* Position it slightly above the bottom edge */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  text-align: center;
  z-index: 1000; /* Ensure it appears above other elements */
}

#instagram-link {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background-color: #e1306c; /* Instagram pink */
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(225, 48, 108, 0.5);
  transition: all 0.3s ease;
}

#instagram-link:hover {
  background-color: #c1275b; /* Darker pink on hover */
  box-shadow: 0 0 15px rgba(225, 48, 108, 0.8);
}