:root {
  --xy-loading-progress: 0%;
  --xy-loading-walker-size: clamp(62px, 6.2vw, 104px);
  --xy-loading-walker-anchor-offset: -52.85%;
  --xy-loading-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

.xy-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  overflow: hidden;
  box-sizing: border-box;
  background: #0b0710;
  color: #ffe6af;
  font-family: var(--xy-loading-font);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 280ms ease-out;
}

.xy-loading-screen.xy-fade {
  opacity: 0;
  pointer-events: none;
}

.xy-loading-backdrop,
.xy-loading-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xy-loading-backdrop {
  background-color: #120b16;
  background-image: url("./images/pages/login/bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  transform: scale(1.002);
}

.xy-loading-shade {
  background:
    linear-gradient(180deg, rgba(10, 5, 10, 0.04) 0%, rgba(10, 5, 10, 0) 52%, rgba(8, 4, 8, 0.74) 100%),
    linear-gradient(90deg, rgba(12, 6, 10, 0.08) 0%, rgba(12, 6, 10, 0) 50%, rgba(12, 6, 10, 0.08) 100%);
}

.xy-loading-logo {
  position: absolute;
  top: clamp(22px, 5.2vh, 58px);
  left: 50%;
  width: min(45vw, 690px);
  aspect-ratio: 1698 / 473;
  transform: translateX(-50%);
  background-image: url("./images/_optimized/shell/runtime_v1/login-logo.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.xy-loading-message {
  position: absolute;
  top: clamp(156px, 29.5vh, 300px);
  left: 50%;
  width: min(86vw, 760px);
  transform: translateX(-50%);
  text-align: center;
  text-shadow:
    0 2px 0 rgba(78, 35, 8, 0.92),
    0 5px 12px rgba(0, 0, 0, 0.78);
}

.xy-loading-title {
  min-height: 1.3em;
  color: #fff0bd;
  font-size: clamp(22px, 2.1vw, 36px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
}

.xy-loading-detail {
  min-height: 1.5em;
  margin-top: clamp(5px, 0.8vh, 10px);
  color: rgba(255, 231, 182, 0.84);
  font-size: clamp(12px, 1.05vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.xy-loading-progress-block {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 8.2vh, 82px);
  width: clamp(320px, 38vw, 620px);
  transform: translateX(-50%);
}

.xy-loading-bar {
  position: relative;
  width: 100%;
  height: clamp(12px, 1.2vw, 19px);
  box-sizing: border-box;
  border: 2px solid #9d6523;
  border-radius: 999px;
  background: #120d0b;
  box-shadow:
    0 0 0 1px rgba(29, 13, 4, 0.92),
    0 4px 10px rgba(0, 0, 0, 0.58),
    inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.xy-loading-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(9px, 0.8vw, 13px);
  height: clamp(9px, 0.8vw, 13px);
  border: 1px solid rgba(193, 124, 36, 0.8);
  background: #2b1810;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: inset 0 0 3px rgba(255, 213, 119, 0.25);
  pointer-events: none;
}

.xy-loading-bar-clip {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: 999px;
}

.xy-loading-fill {
  width: var(--xy-loading-progress);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 252, 198, 0.94) 0%, rgba(255, 216, 87, 0.95) 35%, rgba(231, 158, 40, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 225, 0.92),
    0 0 12px rgba(255, 192, 54, 0.72);
  transition: width 180ms ease-out;
}

.xy-loading-walker {
  position: absolute;
  z-index: 2;
  left: var(--xy-loading-progress);
  bottom: calc(100% - 5px);
  width: var(--xy-loading-walker-size);
  aspect-ratio: 235 / 200;
  transform: translateX(var(--xy-loading-walker-anchor-offset));
  background-image: url("./images/ui/loading/20260731/xiaozuanfeng-walk.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.78));
  transition: left 180ms ease-out;
  pointer-events: none;
}

.xy-loading-status {
  min-height: 1.5em;
  margin-top: clamp(12px, 1.7vh, 18px);
  overflow: hidden;
  color: #ffe6ad;
  font-size: clamp(14px, 1.3vw, 21px);
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow:
    0 2px 0 rgba(73, 32, 7, 0.95),
    0 4px 9px rgba(0, 0, 0, 0.84);
  white-space: nowrap;
}

.xy-loading-screen[data-indeterminate="true"] .xy-loading-fill {
  width: 34%;
  animation: xy-loading-indeterminate-fill 1.9s ease-in-out infinite;
}

.xy-loading-screen[data-indeterminate="true"] .xy-loading-walker {
  animation: xy-loading-indeterminate-walker 1.9s ease-in-out infinite;
  transition: none;
}

@keyframes xy-loading-indeterminate-fill {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(105%);
  }
  100% {
    transform: translateX(295%);
  }
}

@keyframes xy-loading-indeterminate-walker {
  0% {
    left: 0;
    transform: translateX(var(--xy-loading-walker-anchor-offset));
  }
  50% {
    left: 50%;
    transform: translateX(var(--xy-loading-walker-anchor-offset));
  }
  100% {
    left: 100%;
    transform: translateX(var(--xy-loading-walker-anchor-offset));
  }
}

@media (max-aspect-ratio: 4 / 3) {
  .xy-loading-logo {
    top: clamp(34px, 9vh, 90px);
    width: min(82vw, 650px);
  }

  .xy-loading-message {
    top: clamp(170px, 31vh, 340px);
  }

  .xy-loading-progress-block {
    width: min(82vw, 620px);
    bottom: max(42px, env(safe-area-inset-bottom));
  }
}

@media (min-aspect-ratio: 2 / 1) {
  .xy-loading-logo {
    top: 8px;
    width: min(43vw, 520px);
  }

  .xy-loading-message {
    top: 31vh;
  }

  .xy-loading-progress-block {
    bottom: max(16px, env(safe-area-inset-bottom));
    width: clamp(320px, 42vw, 540px);
  }

  .xy-loading-detail {
    margin-top: 2px;
  }

  .xy-loading-status {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xy-loading-screen,
  .xy-loading-fill,
  .xy-loading-walker {
    transition: none;
  }

  .xy-loading-screen[data-indeterminate="true"] .xy-loading-fill,
  .xy-loading-screen[data-indeterminate="true"] .xy-loading-walker {
    animation-duration: 3.8s;
  }
}