:root {
  --bar-height: 16px; /* bottom loading bar height */
}

/* Fill the browser tab; no scrollbars */
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;          /* dynamic viewport height for mobile UI changes */
  overflow: hidden;
  background: #000;
}

/* Game container fills the tab and is the positioning context */
#unity-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #000;
}

/* Game canvas: fills tab by default; Safari overridden below */
#unity-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  z-index: 0;
}

/* -------- Safari small windowed layout (960x540 centered) -------- */
#unity-container.safari-windowed {
  display: grid;
  place-items: center;
}
#unity-container.safari-windowed #unity-canvas {
  position: relative;
  width: 960px;
  height: 540px;
}

/* -------- Loading overlay (covers game area) -------- */
#unity-loading-bar {
  position: absolute; /* overlay inside container */
  inset: 0;
  display: none;      /* shown during load via JS, hidden when ready */
  z-index: 2;         /* above canvas */
  pointer-events: none;
}

/* Full-screen logo background, leaving space for the bottom bar */
#unity-logo {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: var(--bar-height); /* reserve space for the bar */
  background: url('logo.png') center center / cover no-repeat; /* TemplateData/logo.png */
  z-index: 1; /* below the bar, above the canvas */
}

/* Bottom loading bar: matches the game width */
#unity-progress-bar-empty {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-height);
  background: #000000; /* black track */
}

/* Fill (white) grows across the track */
#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  background: #ffffff; /* white fill */
  transition: width 0.12s linear;
}

/* In Safari windowed mode, make the bar 960px wide and centered to match canvas */
#unity-container.safari-windowed #unity-progress-bar-empty {
  width: 960px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Warning banners */
#unity-warning {
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px;
  display: none;
  z-index: 3;
}

/* Remove Unity footer/branding from legacy template */
#unity-footer,
#unity-logo-title-footer,
#unity-build-title,
#unity-fullscreen-button {
  display: none !important;
}

/* Unity mobile hook (kept for compatibility) */
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100%; }
.unity-mobile #unity-canvas   { background: #000; }