* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Locked to the same 16:9 design ratio as the original PlayCanvas game (1280x720).
   Fits the largest 16:9 box that fits the dashboard iframe, letterboxing/pillarboxing
   with the body's black background rather than stretching to the iframe's own ratio.
   object-fit: contain scales the canvas's intrinsic buffer size (1280x720, set via the
   width/height attributes Unity's loader puts on the element) to fit within a box that
   fills the full 100%x100% — this works whichever axis is the limiting one. An earlier
   version pinned `width: 100%` with `aspect-ratio: 16/9` and relied on max-height to
   shrink an overflowing computed height, but aspect-ratio only ever resolves the *auto*
   dimension from the explicit one — when the iframe is wider than 16:9 (the common
   desktop case), max-height clamped the height while width stayed pinned at 100%,
   stretching the canvas across the full width instead of pillarboxing. */
#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#application-splash-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #027453;
  display: flex;
  align-items: center;
  justify-content: center;
}

#application-splash {
  width: 264px;
}

#application-splash img {
  display: block;
  width: 100%;
}

#progress-bar-container {
  margin: 20px auto 0 auto;
  height: 2px;
  width: 100%;
  background-color: #1d292c;
}

#progress-bar {
  width: 0%;
  height: 100%;
  background-color: #f60;
}

@media (max-width: 480px) {
  #application-splash {
    width: 170px;
  }
}