body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #000000 }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 200px; height: 200px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; 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-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
canvas:focus {
  outline: none;
}
html, body {
  padding: 0;
  margin: 0;

  overflow: hidden;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);

  height: 100%;

  background-position-x: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-height: none;
}
#canvas {
  position: fixed;
  width: 100%;
  height: 100%;
}
.loading_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-position-x: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.loading {
  position: absolute;
}
.loading_bar {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
}
.loading_bar_fill {
  position: absolute;
  z-index: 6;
  width: 0%;
  height: 100%;
  top: 0%;
  bottom: 0%;
  left: 0%;
}
.loading_logo {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: scroll;
}
.console_helper {
  position: absolute;
  background-color: white;
  transform: translate(-50%, -50%);
  left: 50%;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.24);
  -moz-box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.24);
  box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.24);
  overflow: hidden;
  display: none;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  word-wrap: break-word;
}

#overlay_wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;  
  transition: opacity .4s ease, visibility .4s ease;
}

#overlay_wrap.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#overlay_frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border-radius: 0px;
  overflow: hidden;
  background: #000;
  will-change: box-shadow, transform;
}

#overlay_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.overlay_controls {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.overlay_progress {
  width: 100%;
  height: 20px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
}
.overlay_progress > .fill {
  height: 100%;
  width: 0%;
  transition: width .12s linear;
  background: linear-gradient(90deg, rgb(0, 0, 255), rgb(255, 0, 0));
}

.overlay_text {
  color: #ddd;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
  margin-top: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.loading_bg { z-index: 1; }
canvas.canvas { z-index: 2; position: relative; display: block; margin: 0 auto; }

@media (max-width: 640px) {
  #overlay_frame { border-radius: 10px; }
  .overlay_controls { left: 4%; right: 4%; bottom: 4%; }
  .overlay_text { font-size: 12px; }
}