/* ===================== */
/* Canvas + Container    */
/* ===================== */
:root { --footerH: 52px; } /* you already have this */

#unity-container{
  position: absolute;      /* IMPORTANT: not fixed */
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--footerH);  /* reserve space for footer */
}

#unity-canvas{
  background:#000;
  display:block;
  width:100%;
  height:100%;
}

/* ===================== */
/* Loader UI             */
/* ===================== */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 36%;               /* moved up so content stays in view */
  transform: translate(-50%, -50%);
  display: block;
  z-index: 9999;          /* stay above canvas */
}

/* hide the loader once Unity is ready */
#unity-loading-bar.hidden {
  display: none !important;
}

/* ===================== */
/* Logo & Text           */
/* ===================== */
#unity-logo {
  width: clamp(160px, 38vw, 384px);
  aspect-ratio: 1 / 1;    /* keep square */
  height: auto;           /* aspect-ratio controls height */
  background: url('logo.png') no-repeat center / contain;
}

/* Text + spinner tightly under the logo, same line */
#unity-text-progress {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);  /* small gap below the logo */
  transform: translateX(-50%);
  color: white;

  /* typography */
  font-weight: 700;
  font-family: "Times New Roman", Times, serif, Haettenschweiler, "Arial Narrow Bold", Helvetica, Verdana, sans-serif;
  font-size: clamp(14px, 2.4vw, 25px);
  line-height: 1.2;
  text-align: center;

  /* layout */
  width: min(90vw, 500px);
  display: inline-flex;   /* keep text + gear on one line */
  align-items: center;
  justify-content: center;
  gap: 6px;               /* space between text and spinner */
  white-space: nowrap;    /* prevent wrap; see media query below to relax */
}

#unity-text-progress img.spinner {
  display: inline-block;
  margin: 0;              /* no extra margins */
  vertical-align: middle;
  width: clamp(36px, 10vw, 66px);  /* responsive spinner */
  height: clamp(36px, 10vw, 66px);
}

/* ===================== */
/* Progress Bar          */
/* ===================== */
#unity-progress-bar-empty {
  width: 211px;
  height: 26px;
  margin-top: 20px;
  background: url('progressEmpty.Light.png') no-repeat center;
}

#unity-progress-bar-full {
  width: 0%;
  height: 26px;
  background: url('progressFull.Light.png') no-repeat center;
}

/* ===================== */
/* Warning Banner        */
/* ===================== */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
}
#mobile-wrap, #desktop-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--footerH);
  box-sizing: border-box;
}
/* ===================== */
/* Small-screen tweaks   */
/* ===================== */
@media (max-height: 600px) {
  #unity-loading-bar { top: 32%; }  /* nudge higher on short displays */
}

@media (max-width: 360px) {
  /* allow wrapping if space is extremely tight */
  #unity-text-progress { white-space: normal; }
}