:root {
  --game-min-height: 480px;
  --page-background: #102d35 url("Pattern.png") repeat;
  --game-height: max(var(--game-min-height), min(100vh, calc(100vw * 16 / 9)));
}

@supports (height: 100dvh) {
  :root {
    --game-height: max(var(--game-min-height), min(100dvh, calc(100vw * 16 / 9)));
  }
}

html {
  background: var(--page-background);
}

body {
  margin: 0;
  padding: 0;
  min-width: calc(var(--game-min-height) * 9 / 16);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--page-background);
}

#unity-container,
#unity-container.unity-desktop,
#unity-container.unity-mobile {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex: none;
  margin: auto;
  width: calc(var(--game-height) * 9 / 16);
  height: var(--game-height);
  box-shadow: 0 0 48px rgb(0 0 0 / 25%);
}

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

/* The Playgama Bridge template uses #canvas without a Unity container. */
#canvas.fullscreen-canvas {
  position: relative;
  inset: auto;
  display: block;
  flex: none;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  margin: auto;
  box-shadow: 0 0 48px rgb(0 0 0 / 25%);
}

@supports (height: 100dvh) {
  #canvas.fullscreen-canvas {
    width: min(100vw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));
  }
}

#unity-warning {
  z-index: 2;
  box-sizing: border-box;
  max-width: 95%;
  overflow-wrap: anywhere;
}

/* This screen is visible before Unity starts, using the template's real progress callback. */
#unity-loading-bar {
  position: absolute;
  inset: 0;
  transform: none;
  display: block;
  z-index: 1;
  overflow: hidden;
  background: #235567 url("MainMenuBackground.jpg") center / cover no-repeat;
}

#unity-logo {
  display: none;
}

#unity-progress-bar-empty {
  position: absolute;
  left: 14%;
  bottom: 19%;
  box-sizing: border-box;
  width: 72%;
  height: clamp(22px, 3.4vh, 34px);
  margin: 0;
  padding: 4px;
  overflow: hidden;
  border: 2px solid #fff2b5;
  border-radius: 999px;
  background: linear-gradient(#102f3b, #245565);
  box-shadow: 0 3px 0 #123a43, 0 6px 18px rgb(5 32 34 / 40%),
    inset 0 2px 5px rgb(0 0 0 / 40%);
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  background: linear-gradient(#fff3ae 0%, #f8d75c 45%, #dca92c 100%);
  box-shadow: inset 0 1px 0 #fff8d5, 0 0 10px rgb(255 218 91 / 45%);
}