.asset-loading {
  align-items: end;
  background: #214b39;
  display: grid;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 7vh, 74px) 22px;
  pointer-events: auto;
  position: absolute;
  transition: opacity 180ms ease;
  z-index: 2000;
}
.asset-loading.hidden { display: none; }
.asset-loading.is-leaving { opacity: 0; pointer-events: none; }
.asset-loading-art { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: -2; }
.asset-loading::before { background: linear-gradient(#153a2515 22%, #173c3666 56%, #163b2fed 100%); content: ""; inset: 0; position: absolute; z-index: -1; }
.asset-loading-card { color: #fff8d9; margin: 0 auto; max-width: 460px; text-align: center; width: 100%; }
.asset-loading-card h1 { color: #fff4bd; font-size: clamp(32px, 8vw, 49px); line-height: 1; margin: 0 0 12px; text-shadow: 0 3px 1px #29432980; }
.asset-loading-card p { font-size: 19px; margin: 0 0 20px; }
.asset-loading-bar { background: #183c34; border: 3px solid #f0cb75; border-radius: 24px; box-shadow: 0 4px 0 #12382a80, inset 0 2px 4px #082c2f; height: 31px; overflow: hidden; padding: 3px; position: relative; }
.asset-loading-fill { background: linear-gradient(#d7f68f, #7cc84d 46%, #4b9c35 52%, #8fd450); border-radius: 18px; display: block; height: 100%; min-width: 0; transition: width 100ms linear; width: 0; }
.asset-loading-percent { font-size: 14px; font-weight: 800; inset: 0; line-height: 25px; position: absolute; text-shadow: 0 1px 2px #0b3e1b; }
.asset-loading-detail { color: #e0edcf; display: block; font-size: 13px; margin-top: 11px; min-height: 18px; }
.asset-loading-retry { background: #fce9b2; border: 2px solid #e7ba64; border-radius: 22px; color: #3b603c; cursor: pointer; font: inherit; font-weight: 800; margin-top: 18px; padding: 10px 22px; }
@media (prefers-reduced-motion: reduce) { .asset-loading, .asset-loading-fill { transition: none; } }