/* Gloopy loading screen: sits over Godot's default loader until the game starts. */
#gloopy-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 24px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 128, 64, 0.16), transparent 60%),
              linear-gradient(#22142e, #120a1a);
  font-family: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  color: #fff1e6;
  transition: opacity 0.5s ease;
}
#gloopy-loader.done { opacity: 0; pointer-events: none; }
#status-progress { display: none !important; }

.gl-title { font-size: clamp(56px, 13vw, 104px); font-weight: 700; letter-spacing: 1px; line-height: 1; }
.gl-title span {
  display: inline-block; animation: gl-bob 1.6s ease-in-out infinite;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
.gl-title span:nth-child(1) { color: #fff1d6; animation-delay: 0s; }
.gl-title span:nth-child(2) { color: #ffd23f; animation-delay: 0.1s; }
.gl-title span:nth-child(3) { color: #e0263f; animation-delay: 0.2s; }
.gl-title span:nth-child(4) { color: #9be15d; animation-delay: 0.3s; }
.gl-title span:nth-child(5) { color: #ff8a2b; animation-delay: 0.4s; }
.gl-title span:nth-child(6) { color: #ff5fa8; animation-delay: 0.5s; }

.gl-blobs { display: flex; align-items: flex-end; gap: 22px; height: 110px; }
.gl-blob {
  position: relative; width: 70px; height: 62px;
  border-radius: 55% 45% 48% 52% / 60% 58% 42% 40%;
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.12), 0 0 28px var(--glow);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0 10%, transparent 11%), var(--c);
  animation: gl-hop 1.2s ease-in-out infinite;
}
.gl-blob:nth-child(1) { --c: #ffd23f; --glow: rgba(255, 210, 63, 0.45); animation-delay: 0s; }
.gl-blob:nth-child(2) { --c: #e0263f; --glow: rgba(224, 38, 63, 0.45); width: 86px; height: 76px; animation-delay: 0.2s; }
.gl-blob:nth-child(3) { --c: #ff8a2b; --glow: rgba(255, 138, 43, 0.45); animation-delay: 0.4s; }
/* Tiny face: two dot eyes and a smile. */
.gl-blob::before {
  content: ''; position: absolute; left: 50%; top: 44%; width: 30%; height: 7px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 3px 50%, #5a4652 3px, transparent 3.5px),
              radial-gradient(circle at calc(100% - 3px) 50%, #5a4652 3px, transparent 3.5px);
}
.gl-blob::after {
  content: ''; position: absolute; left: 50%; top: 58%; width: 12px; height: 6px;
  transform: translateX(-50%);
  border: 2.5px solid #5a4652; border-top: none; border-radius: 0 0 10px 10px;
}

.gl-bar { width: min(360px, 80vw); height: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.gl-fill {
  height: 100%; width: 4%; border-radius: 99px;
  background: linear-gradient(90deg, #ffd23f, #ff8a2b, #ff5fa8);
  box-shadow: 0 0 16px rgba(255, 138, 43, 0.7);
  transition: width 0.25s ease;
}
.gl-tip { font-size: 18px; color: #b9a3b8; min-height: 24px; text-align: center; }
.gl-error { font-size: 15px; color: #ff9eb5; max-width: 420px; text-align: center; }

@keyframes gl-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes gl-hop {
  0%, 100% { transform: translateY(0) scale(1.08, 0.92); }
  45% { transform: translateY(-34px) scale(0.94, 1.06); }
  60% { transform: translateY(-34px) scale(0.97, 1.03); }
}