.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 28px;
  color: var(--text-main);
  background: radial-gradient(circle at 50% 24%, rgba(224, 24, 34, 0.28), transparent 34%), #1D1D1E;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.loading-screen.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.loading-emblem {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
}

.loading-emblem img { width: 100%; height: 100%; object-fit: contain; }
.loading-screen p { margin: 0; color: rgba(253, 255, 255, 0.62); text-transform: uppercase; }
.loading-screen h1 { margin: 0; font: 42px/0.9 "Maratype", Impact, sans-serif; text-transform: uppercase; text-align: center; }
.loading-progress { width: min(280px, 76vw); height: 8px; overflow: hidden; background: rgba(253, 255, 255, 0.12); }
.loading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #840F0E, #E01822); transition: width 180ms ease; }
.loading-screen strong { font: 900 24px/1 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }