:root {
  color-scheme: dark;
  --unity-footer-height: 38px;
  --unity-available-width: 100vw;
  --unity-available-height: 100dvh;
  --unity-canvas-width: min(
    var(--unity-available-width),
    calc((var(--unity-available-height) - var(--unity-footer-height)) * 1.6)
  );
}

* { box-sizing: border-box }
html, body { width: 100%; height: 100%; min-width: 320px; margin: 0; overflow: hidden; background: #1F1F20 }
body { min-height: 100vh; min-height: 100dvh }
#unity-container {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1F1F20;
}
#unity-container.unity-mobile {
  --unity-footer-height: 0px;
  --unity-available-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  --unity-available-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#unity-canvas {
  display: block;
  flex: none;
  width: var(--unity-canvas-width);
  height: auto;
  aspect-ratio: 8 / 5;
  background: #1F1F20;
}
.unity-mobile #unity-canvas { width: var(--unity-canvas-width); height: auto }
#unity-rotate-prompt { display: none }
.unity-mobile #unity-rotate-prompt { display: none }
#unity-rotate-prompt p { margin: 0 }
#unity-rotate-prompt .unity-rotate-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid rgba(255, 195, 92, .55);
  border-radius: 16px;
  color: #ffc35c;
  font: 36px/1 sans-serif;
}
#unity-rotate-prompt .unity-rotate-title {
  color: #fff4dc;
  font: 700 18px/1.35 system-ui, sans-serif;
}
#unity-rotate-prompt .unity-rotate-copy {
  margin-top: 7px;
  color: #c8c2b8;
  font: 14px/1.5 system-ui, sans-serif;
}
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative; flex: 0 0 var(--unity-footer-height); width: var(--unity-canvas-width); height: var(--unity-footer-height); color: #fff }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

@media (max-height: 420px) and (orientation: landscape) {
  :root { --unity-footer-height: 0px }
  #unity-footer { display: none }
}

@media (orientation: portrait) {
  .unity-mobile #unity-canvas { visibility: hidden }
  .unity-mobile #unity-rotate-prompt {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(116, 66, 30, .34), transparent 62%),
      #171719;
  }
}