/* General Body and Container Styles */
body {
  padding: 0;
  margin: 0;
}

#unity-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  /* ===> Set your full-screen background image here <=== */
  background-image: url('background-image.png');
  background-size: cover;
  background-position: center center;
}
#unity-container .unity-mobile {
  position: fixed;
  width: 100vw;
  height: 90vh;
  /* ===> Set your full-screen background image here <=== */
  background-image: url('background-image.png');
  background-size: cover;
  background-position: center center;
}
#unity-canvas {
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Canvas is transparent to show background */
#unity-footer {
  position: fixed;
  bottom: 5px;
  right: 5px;
  display: flex;
  align-items: center;
}

#unity-fullscreen-button {
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: url('fullscreen-button.png') no-repeat center;
  background-size: contain;
}

/* Custom Loading Screen Styles */
#custom-loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* Game Logo in the Middle */
#game-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: 50%;
  object-fit: contain;
}

/* Container for loading messages */
#loading-message-container {
  position: absolute;
  top: 50px;
  /* Adjust vertical position from bottom */
  left: 50px;
  /* Space on the left */
  right: 50px;
  /* Space on the right */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating Image on the Left */
#rotating-loader {
  width: 60px;
  /* Adjust size */
  height: 60px;
  animation: spin 2s linear infinite;
}

/* Jumping Image on the Right */
#jumping-image {
  width: 80px;
  /* Adjust size */
  height: 80px;
  animation: jump 1.2s ease-in-out infinite;
}

/* Area containing text and progress bar */
#progress-bar-area {
  flex-grow: 1;
  /* Takes up available space between images */
  margin: 0 25px;
  /* Space between side images and bar */
}

#progress-bar-container {
  position: absolute;
  bottom: 40px;
  /* Adjust vertical position from bottom */
  left: 50px;
  /* Space on the left */
  right: 50px;
  /* Space on the right */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* "Loading" and Percentage Text */
#loading-text-container {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 8px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  /* Makes text readable on any background */
}

/* Loading Warning Message */
#loading-message-text {
  display: flex;
  justify-content: center;
  color: #fcd34d;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  /* Makes text readable on any background */
}

/* Progress Bar Background */
#progress-bar-background {
  height: 20px;
  /* Adjust height of the bar */
  border-radius: 10px;
  padding: 4px;
  /* Creates a border effect */
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black background */
}

/* Progress Bar Fill Image */
#progress-bar-fill {
  width: 0%;
  /* Starts at 0, controlled by JS */
  height: 100%;
  border-radius: 6px;
  /* ===> Set your fill image for the loading bar here <=== */
  background-image: url('progress-bar-fill.png');
  background-size: cover;
  /* Stretches the image to fill the container */
  transition: width 0.3s ease-in-out;
  /* Smooths the loading animation */
}

/* Keyframe Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes jump {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  /* How high the image jumps */
}