body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#Arify-logo { width: 200px; height: 145px; background: url('arify-logo-dark.png') no-repeat center }
#Almennet-logo { width: 500px; height: 71px; background: url('almennet-logo-dark.png') no-repeat center}
#Erik-logo { width: 229px; height: 71px; background: url('erik-logo-dark.png') no-repeat center}
#Alboa-logo { width: 456px; height: 130px; background: url('alboa-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 }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat left }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat left; background-size: contain; transition: transform 0.2s ease; /* Smooth scaling effect */  }
#unity-fullscreen-button:hover { transform: scale(1.1); /* Scale up on hover */ }
#unity-zoomin-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('zoom_in.png') no-repeat left; background-size: contain; transition: transform 0.2s ease; /* Smooth scaling effect */ }
#unity-zoomin-button:hover { transform: scale(1.1); /* Scale up on hover */ }
#unity-zoomout-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('zoom_out.png') no-repeat left; background-size: contain; transition: transform 0.2s ease; /* Smooth scaling effect */  }
#unity-zoomout-button:hover { transform: scale(1.1); /* Scale up on hover */ }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white;  padding: 10px; display: none }


/* 2×2 grid layout */
#image-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  justify-content: center;
  align-items: center;

  /* 🧩 Control horizontal & vertical spacing here */
  column-gap: 40px;  /* Horizontal space between columns */
  row-gap: 60px;     /* Vertical space between rows */

  margin-bottom: 25px; /* Space between grid and progress bar */
  margin-left: -55px; /* Space between grid and progress bar */

}

/* Common image style */
.grid-image {
  width: 154px;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* make sure the loading bar stacks and centers children */
#unity-loading-bar {
  display: flex;
  flex-direction: column;
  align-items: center; /* center children horizontally */
}

/* minimal change: center by using auto left/right margins */
#unity-progress-bar-empty {
  width: 141px;
  height: 18px;
  margin: 90px auto 0; /* top = 10px, left/right = auto (centers), bottom = 0 */
  background: url('progress-bar-empty-dark.png') no-repeat center;
  background-size: contain;
  position: relative; /* useful if you overlay the inner bar later */
}

/* remove margin-top and let it be positioned inside the empty bar */
#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  margin: 0; /* remove the margin-top you had */
  background: url('progress-bar-full-dark.png') no-repeat center;
  background-size: contain;
}

#zoom-controls {
  display: flex;
  gap: 10px; /* Space between buttons */
  justify-content: center; /* Center the group horizontally */
}