:root {
  --loader-track: rgba(255, 255, 255, 0.08);
  --loader-bg: rgba(17, 24, 39, 0.9);
  --color-active: #3b82f6;
  --active-light: #93c5fd;
  --active-soft: rgba(147, 197, 253, 0.58);
  --active-deep: rgba(59, 130, 246, 0.36);
  --ball-size: 26;
}

.loader-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loader-bg);
  backdrop-filter: blur(2px);
  z-index: 4000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.loader-container.is-visible {
  opacity: 1;
  visibility: visible;
}

.loader {
  position: relative;
  width: min(480px, 88vw);
  height: 18px;
  border-radius: 999px;
  background: var(--loader-track);
  overflow: visible;
}

.loader .progress {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--active-soft), var(--color-active));
  box-shadow: 0 0 18px var(--active-soft);
  transition: width 0.06s linear;
}

.loader .progress.done {
  background: linear-gradient(90deg, #34d399, #10b981);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.6);
}

.loader .done-flash {
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
  opacity: 0;
}

.loader.bloom .done-flash {
  animation: loader-bloom 0.45s ease;
}

.energy {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  filter: brightness(1.1) saturate(1.6);
}

.energy .core {
  position: absolute;
  left: calc(var(--ball-size) * -0.5px);
  top: calc(var(--ball-size) * -0.5px);
  width: calc(var(--ball-size) * 1px);
  height: calc(var(--ball-size) * 1px);
  border-radius: 50%;
  background: var(--active-light);
  box-shadow: 0 0 12px var(--active-soft), 0 0 32px var(--color-active), 0 0 64px var(--active-deep);
  filter: blur(2px);
}

.energy .glare {
  position: absolute;
  width: 24px;
  height: 8px;
  left: -32px;
  top: -4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
}

.energy .particles {
  position: absolute;
  left: -6px;
  top: 0;
}

.loader-container .replay {
  display: none;
}

@keyframes loader-bloom {
  from {
    opacity: 0.7;
    transform: scale(0.96);
  }
  to {
    opacity: 0;
    transform: scale(1.25);
  }
}