/* General body and HTML styling for full page setup */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; /* Ensure html and body fill the viewport */
  overflow: hidden; /* Crucial: Prevent scrolling on html/body */
  /* Hide scrollbar visually for html/body, though overflow: hidden makes it irrelevant here */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera for html/body */
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}

/* NEW: The main page wrapper that will handle all scrolling */
#page-wrapper {
  width: 100%;
  height: 100%; /* Make this div fill the html/body */
  overflow-y: scroll; /* MAKE THIS ELEMENT SCROLLABLE */
  -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
  /* Hide scrollbar visually for this wrapper */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera for the page-wrapper */
#page-wrapper::-webkit-scrollbar {
  display: none;
}


/* The main container for your Unity game */
#unity-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Make the game section fill the initial viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222; /* Optional: Dark background for letterboxing */
}

/* Remove desktop centering styles from previous default template, as flexbox handles it now */
#unity-container.unity-desktop {
  /* No need for left, top, transform here with flexbox */
}

/* Mobile container (already good) */
#unity-container.unity-mobile {
  position: fixed; /* Keep fixed for mobile responsiveness */
  width: 100%;
  height: 100%;
}

/* The Unity game canvas itself */
#unity-canvas {
  background: #231F20; /* Keep Unity's background color */
  width: 100%; /* Make canvas take full width of its container */
  height: 100%; /* Make canvas take full height of its container */
  display: block; /* Important to remove any default inline element spacing */
  object-fit: contain; /* Scales the content to fit within the container, preserving aspect ratio */
}

/* Mobile canvas (already good) */
.unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
}

/* Loading bar styling */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Hidden by default, JavaScript will show it */
  z-index: 10; /* Ensure it's above the canvas */
}

#unity-logo {
  width: 154px;
  height: 130px;
  background: url('unity-logo-dark.png') no-repeat center;
}

#unity-progress-bar-empty {
  width: 141px;
  height: 18px;
  margin-top: 10px;
  margin-left: 6.5px;
  background: url('progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  margin-top: 10px;
  background: url('progress-bar-full-dark.png') no-repeat center;
}

/* Hide Unity's default footer elements for a cleaner full-page look */
#unity-footer {
  display: none; /* Hides the footer completely on both desktop and mobile */
}

/* Warning banner styling */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
  z-index: 100; /* Ensure it's on top of everything */
}

/* Styles for the new game information section */
.game-info-section {
    background-color: #f8f8f8; /* Light background for readability */
    color: #333;
    padding: 40px 20px; /* Generous padding */
    box-sizing: border-box; /* Include padding in width/height calculations */
    width: 100%;
    text-align: left; /* Align text within the section */
    font-family: Arial, sans-serif; /* Consistent font */
}
.game-info-section h4,
.game-info-section h3,
.game-info-section p {
    max-width: 960px; /* Constrain text width for readability on wide screens */
    margin-left: auto; /* Center the text block */
    margin-right: auto;
    line-height: 1.6; /* Improve readability */
    padding-bottom: 10px; /* Small space after paragraphs */
}
.game-info-section h4 {
    text-align: center; /* Center the "work in progress" message */
    margin-bottom: 25px;
    font-size: 1.2em;
    color: #555;
}
.game-info-section h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #007bff; /* A nice blue for headings */
}
.game-info-section p strong {
    color: #0056b3; /* Darker blue for strong text */
}