/* Every game's loading screen (shared/loader.js), centered below the Insert Coin top bar, which stays above it. */
.gl { position: fixed; inset: 0; z-index: 15; display: grid; place-content: center; justify-items: center; padding-top: calc(var(--announce-h, 0px) + 72px);
  background: #03020b; text-align: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; pointer-events: none; }
.gl.show { opacity: 1; visibility: visible; transition: opacity .3s; pointer-events: auto; }
.gl img { width: 96px; height: 96px; display: block; margin: 0 auto 18px; animation: gl-spin 1.6s linear infinite; filter: drop-shadow(0 0 22px rgba(34, 230, 255, .45)); }
.gl-label { font: 800 12px var(--display); letter-spacing: .3em; color: var(--ink); }
.gl-track { width: 180px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.gl-track i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--pink)); animation: gl-sweep 1.1s ease-in-out infinite; }
.gl-slow { margin-top: 12px; font-size: 11px; color: var(--dim); visibility: hidden; }
.gl.slow .gl-slow { visibility: visible; }
@keyframes gl-spin { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }
@keyframes gl-sweep { from { transform: translateX(-100%) } to { transform: translateX(250%) } }
@media (prefers-reduced-motion: reduce) { .gl img, .gl-track i { animation: none; } }