:root {
  --temple-loading-portrait: url("/assets/platform/loading/temple-loading-portrait-r3440.webp");
  --temple-loading-landscape: url("/assets/platform/loading/temple-loading-landscape-r3440.webp");
  --temple-loading-image: var(--temple-loading-portrait);
  --temple-loading-progress: 0;
  --temple-loading-fade: 220ms;
}

* { box-sizing: border-box; }

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

.temple-loading__art {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  aspect-ratio: auto;
  background-color: #001025;
  background-image: var(--temple-loading-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 72px rgba(0, 8, 28, .78);
}

.temple-loading__panel {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: max(3.2%, env(safe-area-inset-bottom));
  left: 8%;
  padding: 12px 16px 11px;
  border: 1px solid rgba(128, 218, 255, .72);
  border-radius: 18px;
  text-align: center;
  background: rgba(0, 26, 58, .84);
  box-shadow: 0 12px 42px rgba(0, 8, 28, .62), inset 0 0 18px rgba(45, 191, 255, .14);
  text-shadow: 0 2px 5px rgba(0, 10, 34, .96);
  backdrop-filter: blur(5px);
}

.temple-loading__title {
  display: block;
  margin: 0 0 3px;
  color: #fff3bd;
  font: 800 clamp(16px, 2.2vmin, 22px) / 1.25 "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
}

.temple-loading__status {
  min-height: 1.45em;
  margin: 0 0 8px;
  color: #edfaff;
  font: 700 clamp(12px, 1.65vmin, 16px) / 1.45 "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

.temple-loading__energy {
  position: relative;
  width: 100%;
  height: clamp(12px, 1.8vmin, 18px);
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(239, 200, 92, .92);
  border-radius: 999px;
  background: rgba(0, 8, 24, .94);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .9), 0 0 12px rgba(50, 181, 255, .42);
}

.temple-loading__energy-fill {
  display: block;
  width: calc(clamp(0, var(--temple-loading-progress), 1) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #006bff 0%, #00b9ff 52%, #c7f9ff 86%, #ffe28a 100%);
  box-shadow: 0 0 16px rgba(57, 200, 255, .92);
  transition: width 180ms ease-out;
}

.temple-loading__percent {
  display: block;
  margin-top: 3px;
  color: #fff2b1;
  font: 800 clamp(11px, 1.5vmin, 14px) / 1.2 "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
}

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

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

/* 旧页面仍由原有就绪事件决定何时隐藏，这里只统一加载视觉。 */
.card-loading,
.fish-loading,
.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; }

.temple-loading.is-error .temple-loading__panel {
  border-color: rgba(255, 124, 116, .72);
  background: rgba(45, 8, 20, .9);
}

@media (orientation: landscape) {
  :root { --temple-loading-image: var(--temple-loading-landscape); }

  .temple-loading__art { width: 100vw; height: 100dvh; aspect-ratio: auto; background-size: cover; box-shadow: none; }

  .temple-loading__panel {
    right: 23%;
    bottom: max(3%, env(safe-area-inset-bottom));
    left: 23%;
  }
}

html[data-temple-loading-orientation="portrait"] {
  --temple-loading-image: var(--temple-loading-portrait);
}

html[data-temple-loading-orientation="landscape"] {
  --temple-loading-image: var(--temple-loading-landscape);
}

@media (max-height: 520px) and (orientation: landscape) {
  .temple-loading__panel {
    right: 19%;
    bottom: max(2%, env(safe-area-inset-bottom));
    left: 19%;
    padding: 7px 12px 6px;
    border-radius: 13px;
  }

  .temple-loading__status { margin-bottom: 5px; }
}

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

/* BEGIN TEMPLELEGEND GLOBAL LOADING BACKGROUND R3217 */
:root {
  --tl-loading-background-r3217:
    url("/assets/platform/loading/temple-loading-landscape-r3440.webp");
}

@media (orientation: portrait) {
  :root {
    --tl-loading-background-r3217:
      url("/assets/platform/loading/temple-loading-portrait-r3440.webp");
  }
}

.tl-loading-bg-r3217 {
  background-color: #031126 !important;
  background-image: var(--tl-loading-background-r3217) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.tl-loading-bg-r3217::before {
  background-image: var(--tl-loading-background-r3217) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/*
 * Static selectors cover the known shared-loader naming families.
 * The companion JS additionally detects large full-screen loading/splash roots
 * so existing progress bars, logos and status text stay on top of the new art.
 */
#temple-loading,
#temple-loading-overlay,
.temple-loading,
.temple-loading-overlay,
.temple-loader,
.tl-loading,
.tl-loading-overlay,
.loading-screen,
.loading-overlay,
.game-loading,
[data-temple-loading],
[data-loading-screen] {
  background-color: #031126 !important;
  background-image: var(--tl-loading-background-r3217) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
/* 共用加载器只由内部画布绘制一次背景，避免父层重复合成同一张大图。 */
.temple-loading {
  background-color: #031126 !important;
  background-image: none !important;
}
/* END TEMPLELEGEND GLOBAL LOADING BACKGROUND R3217 */