#sparkshadow-opening-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f7fbff;
  background:
    radial-gradient(circle at 50% 47%, rgba(105, 72, 255, 0.48), transparent 16rem),
    radial-gradient(circle at 52% 55%, rgba(10, 38, 58, 0.42), transparent 28rem),
    radial-gradient(circle at 50% 56%, rgba(9, 7, 22, 0.78), #000 62%),
    linear-gradient(180deg, rgba(5, 12, 24, 0.58), rgba(0, 0, 0, 0.96) 74%),
    #000;
  font-family: var(--ss-brand-font, "ZiXinFangXuanYaTiChangGui", sans-serif);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 900ms ease, visibility 900ms ease;
}

#sparkshadow-opening-loader.is-complete {
  opacity: 0;
  visibility: hidden;
}

.ss-opening-grid,
.ss-opening-halo,
.ss-opening-dust,
.ss-opening-orbit,
.ss-opening-emblem {
  position: absolute;
}

.ss-opening-grid {
  left: 50%;
  top: 56%;
  width: max(104vw, 900px);
  height: max(104vh, 820px);
  opacity: 0;
  background-image:
    linear-gradient(rgba(121, 221, 255, 0.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 142, 255, 0.1) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 76%, transparent 100%);
  transform: translate(-50%, -50%) perspective(820px) rotateX(61deg) scale(1.04);
  transform-origin: center center;
  animation: ssOpeningGridReveal 2.1s ease 180ms forwards;
}

.ss-opening-halo {
  left: 50%;
  top: 52%;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(142, 116, 255, 0.2), transparent 17%),
    radial-gradient(circle, transparent 32%, rgba(83, 221, 255, 0.1) 44%, transparent 64%);
  filter: blur(4px);
  transform: translate(-50%, -50%) scale(0.34);
  animation: ssOpeningHaloPulse 3.8s ease-out 460ms forwards;
}

.ss-opening-dust span {
  position: absolute;
  left: 50%;
  bottom: 20vh;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: #9eeaff;
  box-shadow: 0 0 14px rgba(126, 221, 255, 0.88);
  animation: ssOpeningMoteFloat 2.6s ease-out forwards;
}

.ss-opening-dust span:nth-child(1) { --x: -112px; --y: -210px; animation-delay: 520ms; }
.ss-opening-dust span:nth-child(2) { --x: 94px; --y: -260px; animation-delay: 720ms; }
.ss-opening-dust span:nth-child(3) { --x: -38px; --y: -310px; animation-delay: 860ms; }
.ss-opening-dust span:nth-child(4) { --x: 166px; --y: -178px; animation-delay: 980ms; }
.ss-opening-dust span:nth-child(5) { --x: -180px; --y: -155px; animation-delay: 1.08s; }
.ss-opening-dust span:nth-child(6) { --x: 36px; --y: -218px; animation-delay: 1.18s; }

.ss-opening-orbit {
  left: 50%;
  top: 52%;
  width: min(82vw, 980px);
  height: min(82vw, 980px);
  max-height: 92vh;
  opacity: 0.52;
  transform: translate(-50%, -50%);
  animation: ssOpeningOrbitDrift 11s linear infinite;
}

.ss-opening-orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47%;
  height: 47%;
  border: 1px solid rgba(144, 122, 255, 0.14);
  border-color: rgba(126, 221, 255, 0.24) transparent transparent transparent;
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(132, 111, 255, 0.16));
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--arc) * 30deg))
    translateX(7%)
    scaleX(1.26);
}

.ss-opening-orbit span:nth-child(1) { --arc: 0; opacity: 0.46; }
.ss-opening-orbit span:nth-child(2) { --arc: 1; opacity: 0.22; }
.ss-opening-orbit span:nth-child(3) { --arc: 2; opacity: 0.38; }
.ss-opening-orbit span:nth-child(4) { --arc: 3; opacity: 0.16; }
.ss-opening-orbit span:nth-child(5) { --arc: 4; opacity: 0.42; }
.ss-opening-orbit span:nth-child(6) { --arc: 5; opacity: 0.25; }
.ss-opening-orbit span:nth-child(7) { --arc: 6; opacity: 0.36; }
.ss-opening-orbit span:nth-child(8) { --arc: 7; opacity: 0.18; }
.ss-opening-orbit span:nth-child(9) { --arc: 8; opacity: 0.44; }
.ss-opening-orbit span:nth-child(10) { --arc: 9; opacity: 0.2; }
.ss-opening-orbit span:nth-child(11) { --arc: 10; opacity: 0.34; }
.ss-opening-orbit span:nth-child(12) { --arc: 11; opacity: 0.24; }

.ss-opening-emblem {
  left: 50%;
  top: 52%;
  width: clamp(218px, 20vw, 278px);
  height: clamp(218px, 20vw, 278px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
  animation: ssOpeningEmblemReveal 2.9s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}

.ss-opening-emblem::before,
.ss-opening-emblem::after {
  content: "";
  position: absolute;
  inset: 36px;
  border: 1px solid rgba(159, 137, 255, 0.5);
  border-radius: 50%;
  box-shadow:
    0 0 16px rgba(126, 221, 255, 0.42),
    inset 0 0 20px rgba(151, 124, 255, 0.22);
}

.ss-opening-emblem::after {
  inset: 26px;
  opacity: 0.42;
  border-style: dashed;
  animation: ssOpeningRingSpin 9s linear infinite reverse;
}

.ss-opening-emblem-ring {
  position: absolute;
  inset: 0;
  overflow: visible;
  filter:
    drop-shadow(0 0 7px rgba(126, 221, 255, 0.88))
    drop-shadow(0 0 24px rgba(151, 124, 255, 0.44));
  animation: ssOpeningRingSpin 13s linear infinite;
}

.ss-opening-ring-guide {
  fill: none;
  stroke: rgba(146, 224, 255, 0.46);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
}

.ss-opening-emblem-ring text {
  fill: #f5f1ff;
  stroke: rgba(245, 241, 255, 0.62);
  stroke-width: 0.48px;
  paint-order: stroke fill;
  font-family: var(--ss-brand-font, "ZiXinFangXuanYaTiChangGui", sans-serif);
  font-size: 9.2px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ss-opening-emblem-core {
  position: absolute;
  inset: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(213, 204, 255, 0.24), rgba(99, 227, 255, 0.07) 54%, transparent 72%);
}

.ss-opening-logo-disc {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid rgba(213, 204, 255, 0.52);
  border-radius: 50%;
  background: rgba(120, 96, 255, 0.11);
  box-shadow:
    0 0 24px rgba(111, 221, 255, 0.58),
    inset 0 0 22px rgba(151, 124, 255, 0.26);
}

.ss-opening-logo-disc img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter:
    sepia(1)
    saturate(4)
    hue-rotate(160deg)
    brightness(1.28)
    drop-shadow(0 0 7px rgba(126, 221, 255, 0.88));
}

.ss-opening-progress {
  position: absolute;
  left: 50%;
  top: calc(52% + clamp(138px, 13vw, 178px));
  display: grid;
  width: min(320px, calc(100vw - 54px));
  transform: translateX(-50%);
}

.ss-opening-progress-track {
  height: 1px;
  overflow: hidden;
  background: rgba(213, 204, 255, 0.18);
}

.ss-opening-progress-fill {
  display: block;
  width: calc(var(--ss-opening-progress, 0) * 1%);
  height: 100%;
  background: linear-gradient(90deg, rgba(130, 111, 255, 0.24), rgba(134, 231, 255, 0.9), rgba(222, 214, 255, 0.84));
  box-shadow: 0 0 18px rgba(126, 221, 255, 0.58);
}

@keyframes ssOpeningGridReveal {
  0% { opacity: 0; transform: translate(-50%, -46%) perspective(820px) rotateX(68deg) scale(0.72); }
  100% { opacity: 0.54; transform: translate(-50%, -50%) perspective(820px) rotateX(61deg) scale(1.04); }
}

@keyframes ssOpeningHaloPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  42% { opacity: 0.92; }
  100% { opacity: 0.38; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ssOpeningMoteFloat {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  18% { opacity: 1; }
  100% { opacity: 0.18; transform: translate(var(--x), var(--y)) scale(1); }
}

@keyframes ssOpeningEmblemReveal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.32) rotate(-18deg); filter: blur(12px); }
  42% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); filter: blur(0); }
}

@keyframes ssOpeningRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes ssOpeningOrbitDrift {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 760px) {
  .ss-opening-emblem {
    top: 44%;
    width: 190px;
    height: 190px;
  }

  .ss-opening-progress {
    top: calc(44% + 124px);
  }
}