/* Available before the application bundle: the original wordmark stays visible
   even when scripting or Canvas is unavailable. All geometry uses its 4:3 box. */
#loading-screen:not(.mini) {
  gap: 0;
  background: radial-gradient(ellipse at 50% 43%, #12312b55, transparent 48%), #050a0a;
}
#loading-screen .ls-logo-stage {
  position: relative;
  isolation: isolate;
  width: min(780px, 94vw, 78vh);
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
}
#loading-screen .ls-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 18px 32px #000b);
}
#loading-screen .ls-rift-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#loading-screen .ls-rift-aura {
  position: absolute;
  z-index: 0;
  inset: 5% 20% 3%;
  background: radial-gradient(ellipse, #68e8c42a, #2d9e8510 45%, transparent 70%);
  animation: ls-rift-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
#loading-screen .ls-rift-aura::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 49%;
  width: 23%;
  height: 29%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(181,255,225,.82) 0%, rgba(82,232,187,.46) 24%, rgba(31,153,127,.2) 50%, transparent 74%);
  filter: blur(9px);
  opacity: calc(.2 + var(--ls-rift-charge, 0) * .68);
  transform: translate(-50%, -50%);
  transition: opacity .5s ease;
}
#loading-screen:not(.mini) :is(.ls-ring, .ls-bar-wrap) { display: none; }
#loading-screen .ls-progress {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  color: #cbecdf;
}
#loading-screen .ls-progress-caption {
  font: 10px/1.4 Georgia, 'Times New Roman', serif;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #a59a7c;
  padding-left: .38em;
}
#loading-screen .ls-progress-number {
  font: 34px/1.1 Georgia, 'Times New Roman', serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-shadow: 0 0 22px #8affd250;
}
#loading-screen .ls-percent-sign { font-size: 13px; padding-left: 6px; color: #749e92; }
#loading-screen .ls-progress-ambient {
  display: none;
  height: 37px;
  align-items: center;
  font: 11px/1.4 Georgia, 'Times New Roman', serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #91baab;
}
#loading-screen[data-progress-mode='ambient'] .ls-progress-number { display: none; }
#loading-screen[data-progress-mode='ambient'] .ls-progress-ambient { display: flex; }
#loading-screen .ls-progress-rule {
  position: relative;
  width: 154px;
  height: 1px;
  margin: 4px 0 15px;
  background: linear-gradient(90deg, transparent, #729b8055, transparent);
}
#loading-screen .ls-progress-rule::after {
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  top: -2px;
  width: 5px;
  height: 5px;
  background: #b7c8a3;
  box-shadow: 0 0 12px #6ae6b966;
  transform: rotate(45deg);
}
#loading-screen:not(.mini) .ls-file {
  color: #91a79e;
  font: 10px/1.5 Georgia, 'Times New Roman', serif;
  letter-spacing: .15em;
  max-width: min(360px, 86vw);
  order: 2;
}
#loading-screen:not(.mini) .ls-bytes {
  font: 10px/1.5 ui-monospace, monospace;
  letter-spacing: .08em;
  color: #728a80;
  margin-top: 8px;
  order: 3;
}
#loading-screen:is(.mini, .fade-out) .ls-rift-aura { animation-play-state: paused; }
@keyframes ls-rift-breathe {
  0%, 100% { opacity: .45; transform: scale(.95, 1); }
  50% { opacity: 1; transform: scale(1.1, 1.03); }
}
@media (max-height: 540px) {
  #loading-screen .ls-logo-stage { width: min(70vw, 72vh); }
  #loading-screen .ls-progress { margin-top: 10px; gap: 7px; }
  #loading-screen .ls-progress-number { font-size: 26px; }
  #loading-screen .ls-progress-rule { margin-bottom: 8px; }
}
/* The playable-world indicator uses the same logo and progress value. Keep
   every warmup phase in one quiet palette, including the legacy shader state. */
#loading-screen.mini,
#loading-screen.mini.is-shader {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 36px;
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  row-gap: 0;
  width: 364px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 7px 12px;
  border: 1px solid #8ebbae30;
  border-radius: 10px;
  background: rgba(6, 15, 14, .93);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px #0004;
}
#loading-screen.mini .ls-logo-stage {
  display: block;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 88px;
}
#loading-screen.mini .ls-logo { filter: none; }
#loading-screen.mini :is(.ls-ring, .ls-rift-aura, .ls-progress-caption, .ls-progress-rule) { display: none; }
#loading-screen.mini .ls-progress {
  display: flex;
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0;
  gap: 0;
  color: #9abbb0;
}
#loading-screen.mini .ls-progress-number {
  font: 12px/1.4 var(--tn-font-ui, system-ui), sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: none;
  white-space: nowrap;
}
#loading-screen.mini .ls-percent-sign { font-size: 9px; padding-left: 2px; color: inherit; }
#loading-screen.mini .ls-progress-ambient { font-size: 0; height: auto; }
#loading-screen.mini .ls-progress-ambient::after { content: '…'; font: 12px/1.4 system-ui, sans-serif; }
#loading-screen.mini .ls-mini-label,
#loading-screen.mini.is-shader .ls-mini-label {
  display: flex;
  gap: 4px;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding-bottom: 5px;
  width: auto;
  min-width: 0;
  color: #b3c6bf;
  font: 11px/1.5 var(--tn-font-ui, system-ui), sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: left;
}
#loading-screen.mini .ls-mini-status { overflow: hidden; text-overflow: ellipsis; }
#loading-screen.mini .ls-mini-count { flex: 0 0 auto; }
#loading-screen.mini .ls-bar-wrap {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
  height: 3px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: #8ebbae26;
  box-shadow: none;
}
#loading-screen.mini .ls-bar-fill,
#loading-screen.mini.is-shader .ls-bar-fill.is-determinate {
  background: #8ebbae !important;
  box-shadow: none;
  animation: none;
  transform: none;
}
#loading-screen.mini .ls-bar-fill::after { display: none; }
#loading-screen.mini[data-progress-mode='ambient'] .ls-bar-fill { opacity: 0; }
@media (max-width: 560px) {
  #loading-screen.mini {
    right: 12px;
    bottom: 12px;
    grid-template-columns: 72px minmax(0, 1fr) 32px;
    column-gap: 8px;
    padding: 6px 10px;
  }
  #loading-screen.mini .ls-logo-stage { width: 72px; }
  #loading-screen.mini .ls-mini-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #loading-screen, #loading-screen * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  #loading-screen .ls-rift-canvas, #loading-screen .ls-rift-aura { display: none; }
  #loading-screen .ls-progress { color: CanvasText; }
}