body { padding: 0; margin: 0;
} }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #FFFFFF }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
/* #unity-logo { width: 624px; height: 763.px; background: url('mascot1.png') no-repeat center } */

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#pleaserotate-graphic{
        fill: #fff;
    }

    #pleaserotate-backdrop {
        color: #fff;
            background: url('BG_Rotation.webp');
    }



#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#pleaserotate-graphic{
        fill: #fff;
    }

    #pleaserotate-backdrop {
        color: #fff;
        background: url('WebGL_Mobile.jpg');
    }

/* Empty Progress Bar */
#unity-progress-bar-empty {
  margin-left: auto;
  margin-right: auto;
  width: 160px; /* Slightly wider for better appearance */
  height: 18px; /* Increased height for visibility */
  margin-top: 20px;
  background-color: #f0f0f0; /* Light gray background */
  border-radius: 10px; /* Rounded corners for a smooth appearance */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  overflow: hidden; /* Keeps everything within the rounded corners */
}

/* Filled Progress Bar (Solid Gold Color) */
#unity-progress-bar-full {
  width: 0%; /* Initial width */
  height: 100%; /* Full height to match the empty bar */
  margin-top: 0; /* No extra top margin */
  background-color: #ffd700; /* Solid Gold Color */
  border-radius: 10px;
  text-align: center;
  color: #fff;
  line-height: 18px; /* Vertically center the text */
  font-weight: bold;
  transition: width 0.6s ease-in-out; /* Smooth transition for width */
}

/* Optional Text Inside the Progress Bar */
#unity-progress-bar-full::after {
  content: attr(data-progress); /* Display progress as text */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center text */
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Loader Style (Solid Gold) */
.loader {
  width: 80px; /* Slightly wider for better appearance */
  height: 12px; /* Increased height for smoother animation */
  border-radius: 6px; /* Rounded corners */
  background: #f0f0f0; /* Light gray background */
  position: relative;
  margin: auto;
  margin-top: 20px;
  overflow: hidden; /* Keeps animation inside */
}

/* Animation for the loader */
.loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #ffd700; /* Solid Gold Color */
  animation: l17 1.5s infinite ease-in-out; /* Smooth, continuous animation */
}

/* Keyframes for the loader animation */
@keyframes l17 {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}