/* --- Base --- */
body { margin: 0; padding: 0; }

/* The container is sized to the REAL visible area via CSS vars set from JS */
#unity-container {
  position: fixed;
  top: 0; left: 0;
  width: var(--vvw, 100vw);     /* visual viewport width */
  height: var(--vvh, 100vh);    /* visual viewport height */
  box-sizing: border-box;

  /* Apply safe areas ONCE so nothing sits under the notch / home bar */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);

  /* Center everything in the safe-area box (canvas + loader) */
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}

/* Desktop template behavior (centers the whole container) */
#unity-container.unity-desktop {
  /* On desktop we want the classic centered “card” layout.
     These override the visual-viewport sizing above. */
  position: absolute;
  width: auto; height: auto;
  padding: 0;                 /* no safe-area padding on desktop */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* Mobile fills the visible area and ignores the desktop transform */
#unity-container.unity-mobile {
  position: fixed;
  top: 0; left: 0;
  transform: none;
  width: var(--vvw, 100vw);
  height: var(--vvh, 100vh);
}

/* Canvas */
#unity-canvas { background: #003080; }
.unity-mobile #unity-canvas {
  /* Fill the safe-area box; internal resolution handled in JS/buildConfig */
  width: 100%;
  height: 100%;
}

/* Loading bar centered within the same grid cell (never under chrome) */
#unity-loading-bar {
  grid-area: 1 / 1;
  place-self: center;
  display: none;             /* Unity shows it during load */
}
#unity-logo { width: 154px; height: 130px; background: url('progressLogo.Light.png') no-repeat center; }
#unity-progress-bar-empty { width: 170px; height: 18px; margin-top: 10px; background: url('progressEmpty.Light.png') no-repeat center; }
#unity-progress-bar-full  { width: 0%;   height: 18px; margin-top: 10px; background: url('progressFull.Light.png') no-repeat center; }

/* Footer (HTML one). Keep as-is; it will now sit inside safe area. */
#unity-footer { position: relative; }

/* Unity WebGL branding / buttons (unchanged) */
#unity-webgl-logo { width: 156px; height: 84px; float: left; background: url('myibt.png') no-repeat center; }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px; }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center; }

/* Mobile warning toast stays inside safe area now */
#unity-mobile-warning {
  grid-area: 1 / 1;
  place-self: start center;
  margin-top: 5%;
  background: white;
  padding: 10px;
  display: none;
}