:root {
  --temple-loading-image: url("/assets/platform/loading/temple-loading-v1.png");
  --temple-loading-fade: 220ms;
}

.temple-loading {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  background: #001025;
  transition: opacity var(--temple-loading-fade) ease, visibility var(--temple-loading-fade) ease;
}

.temple-loading::before {
  content: "";
  position: absolute;
  inset: -28px;
  background: var(--temple-loading-image) center / cover no-repeat;
  filter: blur(22px) brightness(.42) saturate(1.15);
  transform: scale(1.08);
}

.temple-loading__art {
  position: relative;
  overflow: hidden;
  width: min(100vw, calc(100dvh * .5628));
  height: 100dvh;
  max-height: calc(100vw * 1.7768);
  background: var(--temple-loading-image) center / contain no-repeat;
  box-shadow: 0 0 72px rgba(0, 8, 28, .78);
}

.temple-loading__energy {
  position: absolute;
  z-index: 3;
  top: 89.12%;
  left: 11.45%;
  width: 77.1%;
  height: 1.82%;
  pointer-events: none;
}

.temple-loading__energy-segment {
  position: absolute;
  top: 0;
  width: 46.45%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
}

.temple-loading__energy-segment--left {
  left: 0;
}

.temple-loading__energy-segment--right {
  right: 0;
}

.temple-loading__energy-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transform-origin: right center;
  background:
    linear-gradient(180deg, rgba(9, 48, 79, .96) 0%, rgba(1, 20, 47, .98) 45%, rgba(0, 10, 31, .99) 62%, rgba(5, 37, 70, .97) 100%);
  box-shadow:
    inset 0 1px 2px rgba(114, 188, 224, .25),
    inset 0 -2px 4px rgba(0, 2, 18, .78);
  transition: transform 140ms linear;
}

.temple-loading__energy-segment--left .temple-loading__energy-cover {
  transform: scaleX(clamp(0, calc(1 - var(--temple-loading-progress, 0) * 2), 1));
}

.temple-loading__energy-segment--right .temple-loading__energy-cover {
  transform: scaleX(clamp(0, calc(2 - var(--temple-loading-progress, 0) * 2), 1));
}

.temple-loading[hidden],
.temple-loading.is-hidden {
  display: none;
}

.temple-loading.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.card-loading,
.fish-loading,
.fishing-shell__overlay,
.loading-screen,
.tl-card-shell-loader {
  background-color: #001025 !important;
  background-image: var(--temple-loading-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.card-loading > *,
.fish-loading > *,
.loading-screen > *,
.tl-card-shell-loader > * {
  visibility: hidden !important;
}

.fishing-shell__overlay .fishing-shell__message {
  display: none;
}

.fishing-shell__overlay.is-error .fishing-shell__message {
  display: block;
  max-width: min(88vw, 620px);
  margin-top: auto;
  padding: 14px 18px;
  border: 1px solid rgba(255, 124, 116, .62);
  border-radius: 14px;
  color: #fff;
  background: rgba(0, 8, 28, .9);
  box-shadow: 0 12px 46px rgba(0, 0, 0, .62);
}

@media (orientation: landscape) {
  .temple-loading__art {
    width: min(56.28dvh, 100vw);
    height: 100dvh;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .temple-loading {
    transition: none;
  }

  .temple-loading__energy-cover {
    transition: none;
  }
}