/* Loading / splash screen for mini app */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(30, 60, 120, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(20, 40, 80, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse 50% 30% at 20% 70%, rgba(15, 35, 70, 0.15) 0%, transparent 40%),
    linear-gradient(180deg, #0a1220 0%, #050a12 50%, #030710 100%);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#loading-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 35%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 75%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 50%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.15) 0%, transparent 100%);
  background-size: 100% 100%;
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.8;
}

#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loading-screen-text {
  position: relative;
  z-index: 1;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0 24px rgba(255,255,255,0.15);
  animation: loading-blink 2.8s ease-in-out infinite;
}

@keyframes loading-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}