html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #231f20;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: linear-gradient(212deg, #57309a, #abc89f, #920fda, #650ef2, #bfd8f7, #8daa1c);
  background-size: 360% 360%;
  animation: gradient-animation 12s ease infinite;
}

body {
  overflow: hidden;
}

.gradient-background {
  background: linear-gradient(212deg, #57309a, #abc89f, #920fda, #650ef2, #bfd8f7, #8daa1c);
  background-size: 360% 360%;
  animation: gradient-animation 12s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

#loader {
  margin-top: 15px;
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  background: linear-gradient(135deg, #0000 calc(50% - 0.5em), #f3272a 0 calc(50% + 0.5em), #0000 0) right/300% 100%;
  animation: l22 2s infinite;
}

#loader::before {
  content: "Loading...";
  color: #0000;
  padding: 0 5px;
  background: inherit;
  background-image: linear-gradient(135deg, #000 calc(50% - 0.5em), #fff 0 calc(50% + 0.5em), #000 0);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes l22 {
  100% {
    background-position: left
  }
}

#unity-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#unity-container.unity-desktop {
  width: 100%;
  height: 100%;
  text-align: center;
}

#unity-container.unity-mobile,
#unity-canvas.unity-mobile {
  width: 100%;
  height: 100%;
}

#unity-canvas {
  width: 100%;
  height: 100%;
  /* background: #231f20; */
  cursor: default;
  max-width: 1080px;
}

#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  flex-direction: column;
}

#unity-logo {
  width: 100%;
  height: 60px;
  background: url("aurask-logo-l.png") no-repeat center;
  background-size: contain;
}

#unity-progress-bar-empty {
  width: 100%;
  height: 18px;
  margin-top: 10px;
  background: #FFFFFF;
  background-size: 100% 100%;
}

#unity-progress-bar-full {
  width: 0;
  height: 18px;
  background: #f3272a;
  background-size: 100% 100%;
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  background: rgba(239, 75, 76, 0.95);
  color: #ffffff;
  padding: 10px 20px;
  display: none;
  max-width: 80%;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#unity-footer {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

#unity-webgl-logo {
  width: 204px;
  height: 38px;
  background: url("webgl-logo.png") no-repeat center;
  background-size: contain;
}

#unity-fullscreen-button {
  width: 38px;
  height: 38px;
  pointer-events: all;
  cursor: pointer;
  background: url("fullscreen-button.png") no-repeat center;
  background-size: contain;
}

#unity-build-title {
  line-height: 38px;
  font-size: 18px;
}

@media (max-width: 960px) {
  #unity-container.unity-desktop {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
  }

  #unity-footer {
    position: fixed;
    bottom: 10px;
  }
}

#diagnostics-icon {
  pointer-events: all;
  cursor: pointer;
}