/* ===========================
   加载动画 — 深色主题
=========================== */
#appLoader {
  position: fixed; inset: 0; z-index: 99999;
  background: #0B1426;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#appLoader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-soccer-wrap {
  animation: soccerBounce 1.2s ease-in-out infinite;
  position: relative;
}
.loader-soccer-wrap svg {
  filter: drop-shadow(0 10px 24px rgba(0,230,138,0.15));
}

.soccer-shadow {
  width: 60px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,230,138,0.12) 0%, transparent 70%);
  margin-top: 8px;
  animation: shadowPulse 1.2s ease-in-out infinite;
}

.soccer-ring {
  position: absolute; top: 50%; left: 50%; width: 110px; height: 110px;
  margin: -55px 0 0 -55px; border-radius: 50%;
  border: 2px solid rgba(0,230,138,0.08);
  animation: ringExpand 1.8s ease-out infinite;
}
.soccer-ring:nth-child(2) { animation-delay: 0.6s; }
.soccer-ring:nth-child(3) { animation-delay: 1.2s; }

.loader-text {
  margin-top: 28px; font-size: var(--fs-md); font-weight: 600;
  color: var(--text-muted); letter-spacing: 2px;
}
.loader-dots { display: inline-flex; gap: 4px; margin-left: 4px; }
.loader-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,230,138,0.5);
  animation: loaderDot 1.2s ease-in-out infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.loader-dots span:nth-child(3) { animation-delay: 0.3s; }

.loader-slogan {
  margin-top: 14px; font-size: var(--fs-sm); color: rgba(255,255,255,0.2);
  font-weight: 800; opacity: 0.35; letter-spacing: 8px; text-transform: uppercase;
}

@keyframes soccerBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-24px); }
  50% { transform: translateY(0); }
  65% { transform: translateY(-10px); }
  80% { transform: translateY(0); }
}

@keyframes shadowPulse {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  30% { transform: scaleX(0.7); opacity: 0.3; }
  50% { transform: scaleX(1); opacity: 0.6; }
  65% { transform: scaleX(0.85); opacity: 0.45; }
  80% { transform: scaleX(1); opacity: 0.6; }
}

@keyframes ringExpand {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes loaderDot {
  0%, 100% { transform: scale(0.5); opacity: 0.3; }
  50% { transform: scale(1); opacity: 1; }
}

/* 通用旋转动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}