#loader {
  display: none;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.is-auth #loader {
  display: flex;
}
.app-ready #loader {
  display: none;
}

.lds-roller {
  margin-left: auto;
  margin-right: auto;
  height: 100px;
  width: 100px;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#auth-view {
  max-height: 100vh;
}
#auth-view .centered-message {
  height: 98vh;
  max-height: 100vh;
  margin: auto;
  text-align: center;
}
@media screen and (max-height: 600px) {
  #auth-view .centered-message {
    padding-top: 5vh;
  }
}
.is-auth #auth-view {
  display: none;
}

#game-logo {
  height: 8vh;
  margin: 2vh auto auto auto;
  display: block;
}

#vip-shop-logo {
  max-height: 55vh;
  position: relative;
  top: -6vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#login-text {
  font-size: 4.5vh;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 600;
  color: rgb(255, 255, 255);
  line-height: 1.27;
  text-align: center;
  text-shadow: 0 2px 2.49px rgba(0, 0, 0, 0.75);
  width: 40vw;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -19vh;
}

#sign-in-button {
  --height: 7vh;
  --width: 45vw;
  display: block;
  height: var(--height);
  min-height: 30px;
  max-height: 64px;
  width: var(--width);
  min-width: 350px;
  max-width: 400px;
  margin: auto;
  background: linear-gradient(180deg, rgb(28, 84, 244) 0%, rgb(2, 255, 255) 100%);
  box-shadow: inset 0 3px 5px 0 #02ffff, 0 0 20px rgba(0, 0, 0, 0.9);
  border: solid 2px rgb(2, 255, 255);
  border-radius: 64px;
  line-height: min(var(--height), 64px);
  color: #fafafa;
  font-weight: bold;
  font-size: min(3.5vh, 32px);
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.7);
}
@media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  #sign-in-button {
    min-width: 230px;
    max-width: 270px;
  }
}

#guest-login-button {
  --height: 6vh;
  display: block;
  height: var(--height);
  min-height: 26px;
  max-height: 54px;
  width: 40vw;
  max-width: 300px;
  min-width: 250px;
  margin: 20px auto 0;
  background: linear-gradient(180deg, #3C26B6 0%, #6E6CCA 100%);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  border: solid 2px #6E6CCA;
  border-radius: 54px;
  line-height: min(var(--height), 54px);
  font-size: min(3vh, 24px);
  color: #fafafa;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.7);
}
@media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  #guest-login-button {
    min-width: 170px;
    max-width: 200px;
    margin-top: 15px;
  }
}

#login-options {
  --background: rgba(255,255,255,0.6);
  --gap: 15px;
  width: 90%;
  max-width: 250px;
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  border-radius: 32px;
  background: var(--background);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
  z-index: 100;
}
@media (max-width: 500px) {
  #login-options {
    max-width: none;
  }
}
@media (min-width: 1400px) {
  #login-options {
    --gap: 25px;
    max-width: 400px;
    top: 25px;
    right: -430px;
    left: auto;
    transform: translate(0, -50%);
  }
  #login-options:before {
    display: block;
    content: "";
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid var(--background);
    position: absolute;
    left: -30px;
    top: calc(50% - 30px);
  }
}
#login-options.open {
  display: flex;
}

.login-button {
  --height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--height);
  min-height: 30px;
  max-height: 64px;
  line-height: min(var(--height), 48px);
  width: 100%;
  border-radius: 64px;
  border: solid 1px black;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  margin: auto;
  background: #ccc;
  color: #fff;
  font-weight: bold;
  font-size: min(4.3vh, 24px);
}
@media (max-width: 500px) {
  .login-button {
    font-size: min(3vh, 24px);
  }
}
@media (min-width: 1400px) {
  .login-button {
    --height: 7vh;
    font-size: min(3vh, 24px);
  }
}
.login-button img {
  height: min(calc(var(--height)*0.8), 48px);
  margin-right: 10px;
}

#siwa-login-button {
  background: black;
}

#fb-login-button {
  background: #4267B2;
}

#google-login-button {
  background: white;
  color: black;
}

#email-login-button {
  border-color: #e13f3f;
  background: white;
  color: #e13f3f;
}

#tou-acceptance {
  position: relative;
  top: -11.5vh;
  color: white;
  font-size: max(2vh, 12px);
}
#tou-acceptance a {
  color: white;
}
#tou-acceptance [type=checkbox] {
  display: none;
}
#tou-acceptance .checkmark {
  position: relative;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.3em;
  border: solid 1px white;
}
#tou-acceptance :checked ~ .checkmark {
  background: url(assets/checkmark-symbol.png) no-repeat center;
  background-size: contain;
}

#tou-acceptance.disabled {
  display: none;
}

#login-button-container {
  position: relative;
  top: -9vh;
  width: 100%;
  max-width: 500px;
  margin: auto;
  transition: filter 0.3s ease-out, opacity 0.3s ease-out;
}
#login-button-container button {
  cursor: pointer;
}
#login-button-container .login-cover {
  display: none;
}
#login-button-container.covered {
  opacity: 0.3;
  filter: grayscale(1);
}
#login-button-container.covered .apple-login-button {
  filter: invert(0.4) contrast(2.2);
}
#login-button-container.covered .login-cover {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}
#login-button-container .lds-roller {
  display: none;
}
#login-button-container.is-busy .lds-roller {
  display: block;
}
#login-button-container.is-busy .login-button {
  display: none;
}
#login-button-container.is-busy #tou-acceptance {
  display: none;
}

body {
  height: 100vh;
  padding: 0;
  display: flow-root;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  font-family: sans-serif;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
body.modal-open {
  overflow: hidden;
  position: fixed;
}
body.body-hc {
  background-image: url(assets/hc_login_bg.png);
}
body.body-bc {
  background-image: url(assets/bc_login_bg.png);
}

#company-logo-hc {
  display: none;
}

#company-logo-bc {
  max-height: 6vh;
  max-width: 60%;
  width: auto;
  height: auto;
  position: relative;
  top: 9vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
  z-index: 1;
}

#game-logo-container {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#game-logo-container.game-logo-container-hc {
  top: 24vh;
  height: 38vh;
}
@media (max-height: 450px) {
  #game-logo-container.game-logo-container-hc {
    height: 32vh;
  }
}
#game-logo-container.game-logo-container-bc {
  top: 12vh;
  height: 41vh;
}
@media (max-height: 450px) {
  #game-logo-container.game-logo-container-bc {
    height: 37vh;
  }
}
#game-logo-container .game-logo-hc {
  display: none;
}
#game-logo-container .game-logo-bc {
  content: url(assets/bc_login_logo.png);
  max-height: 100%;
  max-width: 80%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  z-index: 1;
}
#game-logo-container .game-logo-glow-hc {
  display: none;
}
#game-logo-container .game-logo-glow-bc {
  content: url(assets/bc_login_logo_glow.png);
  z-index: 0;
  max-width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
}

#login-button-container {
  position: relative;
}
#login-button-container.login-button-container-hc {
  top: 25vh;
}
#login-button-container.login-button-container-bc {
  top: 15vh;
}

#header-space {
  height: auto;
  max-height: 17vh;
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 5vh 10px;
}

.hidden {
  display: none !important;
}

#shop-view {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#footer {
  margin-top: -10vh;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 2vh;
}
#footer a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding-top: 20px;
  margin-top: -20px;
  color: #ffffff;
  font-weight: bolder;
  text-decoration: none;
  margin-right: 5px;
}
#footer a + a:before {
  content: "| ";
  margin-right: 5px;
}
#footer .cookie-statement,
#footer .copyrights {
  font-size: 0.8em;
}
.is-auth.is-loaded #footer {
  margin-top: -4.6vh;
}
.is-auth.is-loaded #footer .cookie-statement {
  display: none;
}