html {
  -ms-touch-action: none;
}
body {
  background-color: black;
}
body, canvas, div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
#fullscreenbtn {
  display: none;
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;

  margin: 5px;
  border: 2px solid #FFFFFF88;
  background-color: #FFFFFF88;
  box-shadow: 0px 0 3px 1px #00000088;
  border-radius: 99px;

  opacity: 0.5;
  transform: scale(1);
  transition: transform 0.3s, opacity 0.3s;
  touch-action: none;
  will-change: left, top;
}
#fullscreenbtn:active {
  transform: scale(1.2);
}
#fullscreenbtn:hover, #fullscreenbtn:active {
  opacity: 1;
}
#fullscreenbtn .icon.active {
  display: block;
}
#fullscreenbtn .icon {
  pointer-events: none;
  display: none;
  padding: 0;
}
#fullscreenbtn .icon img {
  pointer-events: none;
  display: block;
  margin: 10px;
  width: 20px;
  height: 20px;
}
#addtohomebtn {
  display: none;
  z-index: 9999;
  position: absolute;
  top: 55px;
  left: 0;
  padding: 0;

  margin: 5px;
  border: 2px solid #FFFFFF88;
  background-color: #FFFFFF88;
  box-shadow: 0px 0 3px 1px #00000088;
  border-radius: 99px;

  opacity: 0.5;
  transform: scale(1);
  transition: transform 0.3s, opacity 0.3s;
  touch-action: none;
  will-change: left, top;
}
#addtohomebtn:active {
  transform: scale(1.2);
}
#addtohomebtn:hover, #addtohomebtn:active {
  opacity: 1;
}
#addtohomebtn .icon.active {
  display: block;
  pointer-events: none;
  padding: 0;
}
#addtohomebtn .icon span.ios {
	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0xMS4xLDEyLjdINi44Yy0wLjQsMC0wLjgtMC4zLTAuOC0wLjhzMC4zLTAuOCwwLjgtMC44aDQuNFY2LjhjMC0wLjQsMC4zLTAuOCwwLjctMC44YzAuMSwwLDAuMiwwLDAuMywwDQoJCWMwLjMsMC4xLDAuNSwwLjQsMC41LDAuOHY0LjNoNC41YzAuNCwwLDAuOCwwLjMsMC44LDAuN2MwLDAuMSwwLDAuMiwwLDAuM2MtMC4xLDAuMy0wLjQsMC42LTAuNywwLjZoLTQuNXY0LjUNCgkJYzAsMC4zLTAuMSwwLjctMC41LDAuOGMtMC4zLDAuMS0wLjcsMC0wLjktMC4zYy0wLjEtMC4yLTAuMS0wLjMtMC4xLTAuNWMwLTEuNCwwLTIuOCwwLTQuMXYtMC40SDExLjF6Ii8+DQoJPHBhdGggZD0iTTIwLjgsMWMwLDAtMTcuOSwwLTE4LDBDMS42LDEuMSwwLjYsMi4yLDAuNywzLjRjMCwwLDAsMTcuNSwwLDE3LjZjMC4xLDEuMiwxLjIsMi4yLDIuNCwyLjFjMCwwLDE3LjksMCwxOCwwDQoJCWMxLjItMC4xLDIuMi0xLjIsMi4xLTIuNGMwLDAsMC0xNy41LDAtMTcuNkMyMy4xLDEuOSwyMiwwLjksMjAuOCwxeiBNMjEuNywyMC43YzAsMC42LTAuMywwLjktMC45LDAuOUgxMkgzLjENCgkJYy0wLjYsMC0wLjktMC4zLTAuOS0wLjljMC0zLjIsMC02LjMsMC05LjRsMC04YzAtMC42LDAuMy0wLjksMC45LTAuOWg4LjhoOC45YzAuNiwwLDAuOSwwLjMsMC45LDAuOWMwLDIuMywwLDQuNiwwLDYuOWgwVjIwLjd6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==);
}
#addtohomebtn .icon span.android {
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNzAuOTQgMzUxLjMyIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzAyMDIwMjt9LmNscy0ye2ZpbGw6IzAxMDEwMTt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNzAuOTIsMTc1LjcyVjMxNy41MWMwLDE2LjUxLTkuNDQsMjktMjQuNjQsMzIuOGEzNy42NiwzNy42NiwwLDAsMS05LjI4LDFIODAuNzFDNjAuNiwzNTEuMzEsNDcsMzM3LjU1LDQ3LDMxNy40MWMwLTE0LjIyLjEtMjguNDMtLjA4LTQyLjY1LDAtMi45MS44Mi0zLjQ0LDMuNTItMy4zOCw4LjM2LjE4LDE2Ljc0LjIzLDI1LjEsMCwzLjE3LS4xLDMuNzQsMSwzLjU3LDMuNzgtLjIyLDMuMzYsMCw2Ljc0LS4wOCwxMC4xLS4wNiwxLjYyLjQ1LDIuMzIsMi4xMSwyLjExLjYyLDAsMS4yNSwwLDEuODcsMHE3Ni4wOCwwLDE1Mi4xNy4wOGMzLjE2LDAsMy44Mi0uNzksMy44MS0zLjg2cS0uMTMtMTA3LjkyLDAtMjE1Ljg1YzAtMy4xOC0uODMtMy44LTMuODgtMy44cS03Ni4wOC4xNi0xNTIuMTcsMGMtMy40NSwwLTQuMjIsMS00LDQuMTNzMCw2LjQ5LjA5LDkuNzJjLjA1LDEuNi0uNDQsMi4xOS0yLjEsMi4xOC05LjM3LS4wNy0xOC43NCwwLTI4LjExLDAtMS4wOSwwLTEuOTIsMC0xLjktMS41Mi4yMy0xNy0xLjIzLTM0LC41OS01MC44M1M2MywwLDgwLjM4LDBxMzUuMjQtLjA4LDcwLjQ3LjA1LDQzLjEuMDYsODYuMi4xN2MxNS42Ni4wNiwyNy4zOCw4LDMyLjA4LDIxLjU5YTM4LjM1LDM4LjM1LDAsMCwxLDEuNzksMTIuODVaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODguMjgsMTQzLjY2Yy0xOC41MSwwLTM2LjEtLjA4LTUzLjcuMDctMywwLTMuNjgtLjg2LTMuNjEtMy43LjE4LTguMzUuMTQtMTYuNzEsMC0yNS4wNywwLTIuMjkuMzktMy4xOCwzLTMuMTdxNTMsLjEzLDEwNi4wNywwYzIuMjIsMCwyLjk0LjQzLDIuOTMsMi44MnEtLjEyLDUzLjEzLDAsMTA2LjI1YzAsMi41Ni0xLDIuNzMtMywyLjctOC42Mi0uMDktMTcuMjQtLjE0LTI1Ljg2LDAtMi42MywwLTMuMzEtLjY4LTMuMjktMy4yOS4xMi0xNi40Ni4wNi0zMi45My4wNi00OS4zOXYtNC40MWMtMS40LDEuMzEtMi4zNywyLjE2LTMuMjgsMy4wN3EtNDEuNjgsNDEuNTctODMuMTgsODMuMTVjLTIuMjcsMi4yNy0zLjQyLDIuNTItNS43MywwQzEzLjM1LDI0Nyw3Ljc2LDI0MS40MiwyLDIzNmMtMi40OS0yLjMyLTIuODEtMy40OS0uMTQtNi4xM3E0MS42Ni00MS4yMiw4My04Mi43NEM4NS44NCwxNDYuMjUsODYuNzUsMTQ1LjI2LDg4LjI4LDE0My42NloiLz48L2c+PC9nPjwvc3ZnPg==);
}
#addtohomebtn .icon span {
  background-size: auto auto;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  display: block;
  margin: 10px;
  width: 20px;
  height: 20px;
}
/*body {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  padding: 0;*/
/*  border: 0;*/
/*  margin: 0;*/

/*  cursor: default;*/
/*  color: #888;*/
/*  background-color: #333;*/

/*  text-align: center;*/
/*  font-family: Helvetica, Verdana, Arial, sans-serif;*/

/*  display: flex;*/
/*  flex-direction: column;*/
/*  */
/*  !* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 *!*/
/*  !* overflow cannot be applied in Cocos2dGameContainer, */
/*  otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg *!*/
/*  overflow: hidden;*/
/*}*/

/*#Cocos2dGameContainer {*/
/*  position: absolute;*/
/*  margin: 0;*/
/*  left: 0px;*/
/*  top: 0px;*/

/*  display: -webkit-box;*/
/*  -webkit-box-orient: horizontal;*/
/*  -webkit-box-align: center;*/
/*  -webkit-box-pack: center;*/
/*}*/

/*canvas {*/
/*  background-color: rgba(0, 0, 0, 0);*/
/*}*/

/*a:link, a:visited {*/
/*  color: #666;*/
/*}*/

/*a:active, a:hover {*/
/*  color: #666;*/
/*}*/

/*p.header {*/
/*  font-size: small;*/
/*}*/

/*p.footer {*/
/*  font-size: x-small;*/
/*}*/

/** CP:
#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none; !* #171717;*!
    background-size: 100%;
}

#splash-bg {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    background-color: white;
}
#splash-bg img {
    max-width: max(100svw, 100svh);
    margin: auto;
}
#splash-bg #footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    width: 100%;
    font-size: 12px;
    family: system-ui;
    background-color: #00000055;
    color: #FFFFFF88;
    position: fixed;
    bottom: 0;
    padding: 5px 0 6px 0;
    line-height: 1.25rem;
}
#splash-bg #footer span:last-child {
	font-size: 0.7em;
}

#splash-logo {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    !*height: 100%;*!
    background: none; !* #171717;*!
    background-size: 50%;
    animation: animate-logo 3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@keyframes animate-logo {
    0% {top: 35%;} 50% {top: 32%;} 100% {top: 35%;}
}

.lds-dual-ring {
    position: absolute;
    top: 70%;
    left: calc(50% - 80px / 2);
    !* change color here *!
    color: #ffffff;
    animation: animate-lds 3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
@keyframes animate-lds {
    0% {color: #d92727;} 25% {color: #f1c84b;} 50% {color: #42b100;} 75% {color: #30caed;} 100% {color: #d92727;}
}

.lds-dual-ring,
.lds-dual-ring:after {
    box-sizing: border-box;
}
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
:CP **/

/*.progress-bar {*/
/*    position: absolute;*/
/*    left: 27.5%;*/
/*    top: 70%;*/
/*    height: 13px;*/
/*    padding: 2.5px;*/
/*    width: 45%;*/
/*    border-radius: 10px;*/
/*    !*box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;*!*/
/*    background-color: #444;*/
/*    background-image: linear-gradient(90deg, rgba(78,44,220,.6) 0%, rgba(50,44,220,.6) 35%, rgba(220,44,204,.6) 100%);*/
/*}*/

/*.progress-bar span {*/
/*    display: block;*/
/*    height: 100%;*/
/*    border-radius: 15px;*/
/*    transition: width .4s ease-in-out;*/
/*    background-color: #962cdc88;*/
/*    box-shadow: 0px 5px 2px rgba(255, 255, 255, .15) inset, 0px -2px 1px rgba(255, 140, 140, .45) inset;*/
/*}*/

/*.stripes span {*/
/*    background-size: 30px 30px;*/
/*    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,*/
/*    transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,*/
/*    transparent 75%, transparent);*/

/*    animation: animate-stripes 1s linear infinite;*/
/*}*/

/*@keyframes animate-stripes {*/
/*    0% {background-position: 0 0;} 100% {background-position: 60px 0;}*/
/*}*/