body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
.unity-mobile #unity-fullscreen-container { width: 100%; height: 100% }
#unity-fullscreen-container { position: relative; }
#unity-canvas { position: absolute; width: 100%; height: 100%; background: #231F20 }
#unity-loading-container { position: absolute; width: 100%; height: 100%; backdrop-filter: blur(5px); display: none; }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#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 }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.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 }

/* Fit the complete board and choices inside the desktop browser viewport. */
html, body { width: 100%; height: 100%; overflow: hidden; background: #121c23; }
#unity-container.unity-desktop { width: min(100vw, calc((100vh - 38px) * 1920 / 1080)); }
.unity-desktop #unity-fullscreen-container { width: 100% !important; height: auto !important; aspect-ratio: 1920 / 1080; }
#unity-fullscreen-container:fullscreen { width: 100vw !important; height: 100vh !important; aspect-ratio: auto; }
#unity-footer { color: #e3e6e1; height: 38px; }
/* Keep CSS size independent of the render buffer selected in settings. */
#unity-canvas { width: 100% !important; height: 100% !important; display: block; }
#unity-fullscreen-container:fullscreen { display: flex; align-items: center; justify-content: center; background: #121c23; }
#unity-fullscreen-container:fullscreen #unity-canvas { width: min(100vw, calc(100vh * 1920 / 1080)) !important; height: min(100vh, calc(100vw * 1080 / 1920)) !important; }

@media (max-width: 820px), (orientation: portrait) {
  html, body { width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; }
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
  #unity-container.unity-desktop { width: 100%; height: 100%; }
  .unity-desktop #unity-fullscreen-container { width: 100% !important; height: 100% !important; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; }
  #unity-canvas { width: 100% !important; height: 100% !important; object-fit: contain; }
  #unity-footer { display: none; }
}