/* Loading card (src/ui/loading.js): over the creator and the world while things download / warm up */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #23436e 0%, #0b1a33 70%); font-family: var(--ui); color: #fff; opacity: 1; transition: opacity .35s; }
#loading.out { opacity: 0; pointer-events: none; }
#loading[hidden] { display: none; }
.ld-card { width: min(420px, 100%); text-align: center; animation: rise .4s ease-out; }
.ld-spin { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; border: 5px solid rgba(255,255,255,.18); border-top-color: var(--gold); animation: ld-turn .9s linear infinite; }
.ld-title { font: 800 22px var(--ui); margin-bottom: 14px; }
.ld-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ffd866); transition: width .25s; }
.ld-bar.busy i { width: 35% !important; animation: ld-slide 1.2s ease-in-out infinite; }
.ld-step { margin-top: 10px; font: 600 14px var(--ui); opacity: .85; min-height: 1.2em; }
.ld-tip { margin-top: 26px; font: 13px var(--ui); opacity: .6; min-height: 2.6em; }
@keyframes ld-turn { to { transform: rotate(360deg); } }
@keyframes ld-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }