/* Black Alive — world preparation screen (media pack download before the world starts).
   Pure black; a single ember-like line shows progress. Sits above everything of the world. */
#prep {
  position:fixed; inset:0; z-index:200; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:30px; text-align:center;
  font-family:-apple-system, Roboto, sans-serif; color:#8b8580;
  transition:opacity .55s ease;
}
#prep[hidden] { display:none; }
#prep.is-done { opacity:0; pointer-events:none; }

.prep-title { font-size:15px; letter-spacing:.06em; color:#9a8f86; min-height:1.3em; }
#prep.is-ready .prep-title { color:#ff9b4a; }

.prep-track {
  position:relative; width:min(56vw, 220px); height:2px; border-radius:1px;
  background:#1a0e06;
}
.prep-fill {
  width:0; height:100%; border-radius:1px;
  background:linear-gradient(90deg, #4a1804, #c2440b 60%, #ff7a1a);
  box-shadow:0 0 6px 1px rgba(255,110,26,.55), 0 0 16px 3px rgba(255,80,10,.22);
  transition:width .25s linear;
  animation:prep-ember 2.2s ease-in-out infinite;
}
@keyframes prep-ember { 0%, 100% { opacity:.72; } 45% { opacity:1; } 70% { opacity:.86; } }

.prep-pct { font-size:12px; color:#5f5953; font-variant-numeric:tabular-nums; min-height:1.2em; }

.prep-error[hidden] { display:none; }
#prep.is-error .prep-title,
#prep.is-error .prep-track,
#prep.is-error .prep-pct { display:none; }
.prep-msg { font-size:15px; color:#cbb; line-height:1.5; max-width:300px; margin-bottom:18px; }
.prep-retry {
  padding:9px 26px; font-size:14px; border-radius:20px;
  border:1px solid #6a5a4a; background:transparent; color:#cbb;
}
.prep-retry:active { background:rgba(255,122,26,0.10); }

.prep-debug {
  position:absolute; left:8px; right:8px; bottom:8px;
  font-size:11px; line-height:1.4; color:#5a7a5a; word-break:break-word;
}

@media (prefers-reduced-motion: reduce) {
  .prep-fill { animation:none; transition:none; }
  #prep { transition:none; }
}