/* Loading screen (ui/loading.js): artwork at an integer pixel scale, bars with the original meander, gauge, map
   title and tips. The bars and the HUD are authored in art pixels and zoomed by --px like #ui. */
#loading { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #0b0809; font-family: var(--font);
  pointer-events: auto; transition: opacity .3s; }
#loading.out { opacity: 0; pointer-events: none; }
.load-art { position: absolute; left: 0; top: 0; max-width: none; image-rendering: pixelated; opacity: 0; transition: opacity .6s; }
.load-art.on { opacity: 1; }
.load-art.now { transition: none; }
.load-shade { position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 42%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(rgba(11, 8, 9, .35), rgba(11, 8, 9, 0) 16%, rgba(11, 8, 9, 0) 46%, rgba(11, 8, 9, .8) 76%, rgba(11, 8, 9, .96)); }
#loading .embers i { width: calc(var(--px) * 2px); height: calc(var(--px) * 2px); box-shadow: 0 0 calc(var(--px) * 3px) #ff8a1f; }

.load-band { position: absolute; left: 0; right: 0; zoom: var(--px); height: 21px; image-rendering: pixelated;
  background: url(../assets/ui/loading/meander.png) center top / 25px 21px repeat-x, #050403; }
.load-band.top { top: 0; box-shadow: 0 1px 0 var(--bronze-d), 0 2px 0 #000; }
.load-band.bottom { bottom: 0; box-shadow: 0 -1px 0 var(--bronze-d), 0 -2px 0 #000; }

.load-hud { position: absolute; left: 0; right: 0; bottom: calc(var(--px) * 30px); display: flex; justify-content: center; pointer-events: none; }
.load-in { zoom: var(--px); width: 280px; display: flex; flex-direction: column; align-items: center; gap: 8px; }

.load-title { min-height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; }
.load-title.in { animation: load-title-in .4s ease-out both; }
@keyframes load-title-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.load-title .title-logo { font-size: 16px; }
.load-title .title-logo + .load-lv { margin-top: 5px; }
.load-map { font-size: 26px; line-height: 22px; color: var(--gold); white-space: nowrap;
  text-shadow: 1px 0 0 #3a1c08, -1px 0 0 #3a1c08, 0 1px 0 #3a1c08, 0 -1px 0 #3a1c08, 2px 2px 0 #120a04; }
.load-lv { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 9px; line-height: 10px; color: var(--text); text-shadow: 1px 1px 0 var(--ink); }
.load-lv::before, .load-lv::after { content: ''; width: 26px; height: 1px; background: var(--gold-d); box-shadow: 0 1px 0 var(--ink); }
.load-gs { margin-top: 2px; font-size: 8px; line-height: 9px; color: var(--gold-d); text-shadow: 1px 1px 0 var(--ink); }

/* gear and gauge: the gauge stays centred under the title, the empty ::after balances the gear */
.load-gauge { display: flex; align-items: center; gap: 4px; }
.load-gauge::after { content: ''; width: 35px; flex: none; }
.load-gear { width: 35px; height: 37px; flex: none; image-rendering: pixelated;
  background: url(../assets/ui/loading/gear.png) 0 0 / 840px 37px; animation: load-gear 1.6s steps(24) infinite; }
@keyframes load-gear { to { background-position: -840px 0; } }
.load-gcol { width: 168px; display: flex; flex-direction: column; gap: 2px; }
.load-line { display: flex; justify-content: space-between; padding: 0 3px; font-size: 8px; line-height: 10px; color: var(--text); text-shadow: var(--ol); }
#load-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.load-pct { flex: none; margin-left: 6px; color: var(--gold); }
.load-bar { position: relative; width: 168px; height: 15px; image-rendering: pixelated;
  background: url(../assets/ui/intro/loading/gauge_empty.png) 0 0 / 168px 15px; }
#load-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 2%; overflow: hidden; image-rendering: pixelated;
  background: url(../assets/ui/intro/loading/gauge_full.png) 0 0 / 168px 15px no-repeat; transition: width .25s linear; }
#load-fill::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: -10px; width: 8px; background: rgba(255, 255, 255, .35);
  animation: load-shine 1.8s linear infinite; }
@keyframes load-shine { to { left: 100%; } }

.load-tip { width: 100%; min-height: 30px; padding: 5px 8px; display: flex; gap: 6px; font-size: 8px; line-height: 10px; color: var(--text);
  text-shadow: 1px 1px 0 var(--ink); background: rgba(14, 11, 9, .82);
  box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze), inset 0 0 0 2px var(--edge); }
.load-tip b { flex: none; font-weight: inherit; color: var(--gold); }
#load-tip { transition: opacity .3s; }
.load-tip.swap #load-tip { opacity: 0; }