:root {
  --pp-loading-background: #000;
  --pp-loading-color: #fff;
  --pp-loading-font: 16px Arial, sans-serif;
  --pp-loading-logo-width: 356px;
  --pp-loading-logo-height: 212px;
  --pp-loading-logo-top: 35%;
  --pp-loading-meter-width: 356px;
  --pp-loading-meter-height: 6px;
  --pp-loading-meter-top: 50%;
  --pp-loading-meter-offset: 60px;
  --pp-loading-meter-radius: 6px;
  --pp-loading-meter-background: rgba(37, 37, 37, .8);
  --pp-loading-fill: linear-gradient(to bottom, #ffd4a0 10%, #ffa439, #f1972c, #dd841c, #c9730c, #c57415);
  --pp-loading-fill-shadow: 0 0 8px 8px rgba(255, 178, 86, .11);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000000;
}

#GameDiv {
  background: #000000;
  position: fixed;
  max-width: 100vw;
  max-height: 100vh;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#Cocos3dGameContainer, #GameCanvas {
  background: #000000;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}

#BootCover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  color: var(--pp-loading-color);
  background: var(--pp-loading-background);
  font: var(--pp-loading-font);
}

#BootScale {
  position: absolute;
  left: 0;
  top: 0;
  height: 999px;
  transform-origin: 0 0;
}

#BootLogo {
  position: relative;
  top: var(--pp-loading-logo-top);
  width: var(--pp-loading-logo-width);
  height: var(--pp-loading-logo-height);
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#BootBrandText {
  position: relative;
  top: var(--pp-loading-logo-top);
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 28px;
  line-height: var(--pp-loading-logo-height);
}

#BootMeter {
  position: absolute;
  z-index: 6;
  top: var(--pp-loading-meter-top);
  left: 50%;
  width: var(--pp-loading-meter-width);
  height: var(--pp-loading-meter-height);
  margin-top: var(--pp-loading-meter-offset);
  margin-left: calc(var(--pp-loading-meter-width) / -2);
  overflow: visible;
  border-radius: var(--pp-loading-meter-radius);
  background: var(--pp-loading-meter-background);
}

#BootFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--pp-loading-meter-radius);
  background: var(--pp-loading-fill);
  box-shadow: var(--pp-loading-fill-shadow);
}

#BootError {
  position: absolute;
  top: 64%;
  left: 15%;
  width: 70%;
  text-align: center;
  white-space: pre-wrap;
}
