.ld {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 42%, #fffdfb 0%, #fbeff4 55%, #f3dfea 100%);
    transition: opacity .45s ease, visibility .45s ease;
}
.ld.done { opacity: 0; visibility: hidden; pointer-events: none; }

/* 刷新时只显示转圈，不铺背景 */
.ld.spin { background: none; pointer-events: none; }
.ld-ring {
    display: none; width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid rgba(160, 94, 196, .2); border-top-color: #9b4fc4; border-right-color: #c77ae0;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .7), 0 0 24px 12px rgba(255, 255, 255, .6);
    animation: ld-rot .8s linear infinite;
}
@keyframes ld-rot { to { transform: rotate(360deg); } }
.ld.spin .ld-box { display: none; }
.ld.spin .ld-ring { display: block; }

.ld-box {
    position: relative; width: min(82vw, 340px, 58vh); aspect-ratio: 1024 / 1536;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: url(../IMG/jz/zs_s.png) center / 100% 100% no-repeat;
}
.ld-icon {
    width: 78%; aspect-ratio: 400 / 417;
    background: url(../IMG/jz/tb_s.png) center / contain no-repeat;
    animation: ld-float 2.4s ease-in-out infinite;
}
@keyframes ld-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-10px) rotate(-2deg); }
}

.ld-text {
    display: flex; align-items: center; gap: 8px; margin-top: 4%;
    font-size: 20px; font-weight: bold; letter-spacing: 3px; color: #8e3fa6;
    text-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 18px rgba(196, 120, 220, .45);
}
.ld-text i { font-style: normal; font-size: 13px; color: #d9a14e; animation: ld-twinkle 1.4s ease-in-out infinite; }
.ld-text i:last-child { color: #a35ec4; animation-delay: .7s; }
@keyframes ld-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.ld-bar {
    position: relative; width: 90%; aspect-ratio: 868 / 120; margin-top: 4%;
    background: url(../IMG/jz/jdtk_s.png) center / 100% 100% no-repeat;
}
.ld-track { position: absolute; left: 11%; right: 11%; top: 31%; bottom: 31%; border-radius: 999px; overflow: hidden; }
.ld-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #8b5fd6, #c07ae0 55%, #f39acb);
    box-shadow: 0 0 8px rgba(214, 120, 210, .6);
}
.ld-fill::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: ld-shine 1.3s linear infinite;
}
@keyframes ld-shine { to { left: 100%; } }
.ld-star {
    position: absolute; top: 50%; left: 11%; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 1;
    color: #fff; font-size: 16px; line-height: 16px; text-align: center;
    text-shadow: 0 0 6px #fff, 0 0 12px #f39acb;
}
.ld-num { margin-top: 2%; font-size: 12px; letter-spacing: 1px; color: #a07a9a; }