html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
  overscroll-behavior: none;
}

.loading-screen-main-container {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background-image: url(../../resources/html/mstar/loading-screen-background-highres.png), url(../../resources/html/mstar/loading-screen-background-lowres.png);
  background-size: cover;
  background-position: center;
  font-family: "Ubuntu Regular", sans-serif;
  text-align: center;
  box-sizing: border-box;
  background-blend-mode: screen;
}

.loading-screen-tiles-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

.loading-screen-tiles {
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  animation: scalingOut 20s ease-out infinite;
}
@keyframes scalingOut {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.2);
  }
}

.loading-screen-dragon-logo {
  height: 7.83vmax;
  max-height: 12vmin;
}

[data-partner-id="31"] .loading-screen-dragon-logo {
  opacity: 0;
}

.loading-screen-partner-logo-holder {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-screen-partner-logo-holder > img {
  height: 14vmax;
  filter: drop-shadow(0 0 20px #e7e15a);
}

[data-mahjong-network=casualmahjong] .loading-screen-partner-logo-holder > img {
  max-width: 40vw;
}

.loading-screen-bar-holder {
  position: absolute;
  top: 82vh;
  width: 40vmax;
  max-width: 85vmin;
  height: 8vmin;
  margin: auto;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  --progress: 0%;
  mix-blend-mode: screen;
}

.loading-screen-progress-bar {
  height: 3px;
  background-color: #FFFF91;
  margin: auto 0;
  width: var(--progress);
}

.loading-screen-bar-effect {
  position: absolute;
  left: var(--progress);
  height: 100%;
  transform: translateX(-50%) scale(1.5);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  animation: twinkling 1s infinite;
}
@keyframes twinkling {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  10% {
    transform: translateX(-50%) scale(1.5);
  }
}

.loading-screen-mahjong-logic-logo {
  height: 3.45vw;
  max-height: 9vh;
  display: none;
}

[data-partner-id="31"] .loading-screen-mahjong-logic-logo {
  opacity: 0;
}

.loading-screen-version {
  position: fixed;
  bottom: 4px;
  right: 4px;
  font-size: 12px;
  font-family: "Ubuntu Regular", sans-serif;
  color: #888888;
}

body[data-mahjong-network=mahjonglogic] .loading-screen-mahjong-logic-logo,
body[data-mahjong-network=freedora] .loading-screen-mahjong-logic-logo {
  display: unset;
}

body[data-mahjong-network=casualmahjong] .loading-screen-progress-bar {
  background-color: #ffffff;
}

.generic-block-screen-main-container {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background: radial-gradient(#6A0000, black);
  font-family: "Ubuntu Regular", sans-serif;
  text-align: center;
}

.generic-block-screen-logo-image {
  height: 7.83vw;
  max-height: 18vh;
}

.generic-block-screen-bar-holder {
  width: 40vw;
  height: 8vh;
  margin: auto;
}

.generic-block-screen-progress-bar {
  width: 0;
  height: 3px;
  background-color: #FFFF91;
  margin: auto;
}

.generic-block-screen-mahjong-logic-logo {
  height: 3.45vw;
  max-height: 9vh;
}

@media (orientation: portrait) {
  .generic-block-screen-error {
    height: 48vw;
    display: flex;
  }
  .generic-block-screen-error-message {
    margin: auto;
    font-size: 4vw;
    white-space: pre-line;
    color: white;
  }
}
@media (orientation: landscape) {
  .generic-block-screen-error {
    height: 32vw;
    max-height: 60vh;
    display: flex;
  }
  .generic-block-screen-error-message {
    margin: auto;
    font-size: 3vw;
    white-space: pre-line;
    color: white;
  }
}
body[data-mahjong-network=mahjonglogic] {
  --screen-background-radial-gradient: radial-gradient(#6A0000, black);
  --primary-color: #6A0000;
}
body[data-mahjong-network=freedora] {
  --screen-background-radial-gradient: radial-gradient(#6A0000, black);
  --primary-color: #6A0000;
}
body[data-mahjong-network=casualmahjong] {
  --screen-background-radial-gradient: radial-gradient(#323232, black);
  --primary-color: #323232;
}
body[data-mahjong-network=mstar] {
  --screen-background-radial-gradient: radial-gradient(#6A0000, black);
  --primary-color: #6A0000;
}