html, body { 
  padding: 0; 
  margin: 0;  
  width: 100%; 
  height: 100%; 
  background: #FFFFFF; 
  overflow: hidden; 
  position: fixed; /* Prevents pull-to-refresh bounce on mobile */
}

html, body, #unity-container, canvas { 
  touch-action: none; 
  -ms-touch-action: none; 
  -webkit-user-select: none; 
  user-select: none;  
}

/* Force the container to take all available viewport space */
#unity-container { 
  position: absolute; 
  inset: 0; /* Shorthand for top, right, bottom, left: 0 */
  width: 100%; 
  height: 100%; 
  background: #FFFFFF; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden;
}

/* Force canvas to fill the container, overriding Unity's default JS classes */
#unity-canvas { 
  width: 100% !important; 
  height: 100% !important; 
  display: block; 
  background: #231F20; 
  pointer-events: auto; 
  outline: none; 
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
}

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

#custom-splash-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('./background.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Push content to bottom */
  align-items: center;
  z-index: 10;
  transition: opacity 0.5s ease-out;
  padding-bottom: 0;
}

#custom-progress-container {
  width: 80%;
  height: 2.5vmin; /* Swapped cqw for vmin for portrait support */
  background-color: rgba(0, 0, 0, 0.6);
  border: 0.3vmin solid #fff;
  border-radius: 1.5vmin;
  overflow: hidden;
  margin-bottom: 8vmin;
}

#custom-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #fff;
  transition: width 0.1s linear;
}

#custom-text-row {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 80%;
  margin-bottom: 1.5vmin;
}

#custom-progress-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: sans-serif;
  font-size: 2.5vmin;
  font-weight: bold;
  text-shadow: 0.3vmin 0.3vmin 0.6vmin rgba(0,0,0,0.8);
}

#custom-info-text {
  color: #fff;
  font-family: sans-serif;
  font-size: 2vmin;
  font-weight: bold;
  text-shadow: 0.3vmin 0.3vmin 0.6vmin rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  gap: 1vmin;
}

.custom-spinner {
  width: 2.5vmin;
  height: 2.5vmin;
  border: 0.3vmin solid rgba(255, 255, 255, 0.3);
  border-top: 0.3vmin solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fade-out {
  opacity: 0;
  pointer-events: none;
}