/* Loading screens use the same obsidian, brass and painted controls as the game HUD. */
#screen-loading { z-index: 1000; }
#screen-loading { z-index: 1000; }
:is(#screen-startup, #screen-loading, #map-loading) {
  background: radial-gradient(ellipse at 50% 38%, #292b22 0%, #101713 45%, #080b0b 100%);
  color: #e7dcc4;
}
:is(#screen-startup .entry-bg, #screen-loading .mumain-loading-bg) {
  background: url('/client/assets/hud-v2/bg.webp') repeat;
  opacity: .35;
}
:is(#screen-startup .startup-card, #screen-loading .panel, #map-loading .map-loading-panel) {
  position: relative;
  width: min(460px, calc(100vw - 34px));
  min-width: 0;
  padding: 35px 27px 26px;
  border: 12px solid transparent;
  border-image: url('/client/assets/hud-v2/frame.webp') 23 8 16 8 / 12px / 9px stretch;
  border-radius: 0;
  background: url('/client/assets/hud-v2/bg.webp') repeat, #0b0a09;
  box-shadow: 0 20px 55px #000d;
  text-align: center;
}
:is(#screen-startup .startup-card, #screen-loading .panel, #map-loading .map-loading-panel)::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: -48px;
  height: 50px;
  background: url('/client/assets/hud-v2/crest.webp') center bottom / contain no-repeat;
  pointer-events: none;
}
#screen-startup .startup-mark {
  margin: 0 0 12px;
  color: #efd9a0;
  font: 700 27px/1 Georgia, serif;
  letter-spacing: 7px;
  text-shadow: 0 2px 3px #000, 0 0 15px #ae8a4a77;
}
:is(#screen-startup .startup-spinner, #map-loading .spin) {
  width: 20px; height: 20px;
  border: 2px solid #57472d;
  border-top-color: #efd9a0;
  box-shadow: 0 0 12px #c59a4560;
}
:is(#screen-startup h2, #screen-loading h2, #map-loading h2) {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 39px;
  margin: 12px 0 12px;
  padding: 3px 0;
  border: 6px solid transparent;
  border-image: url('/client/assets/hud-v2/slot.webp') 6 fill / 6px stretch;
  color: #f0ddad;
  font: 600 16px/1.25 'Segoe UI', Arial, sans-serif;
  letter-spacing: .4px;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
:is(#screen-startup #startup-status, #screen-loading #load-note, #map-loading p) {
  color: #cbbd9e;
  font: 12px/1.5 'Segoe UI', Arial, sans-serif;
}
#screen-startup #startup-status { min-height: 36px; margin: 0 0 14px; }
#screen-loading #load-note { margin: 13px 0 14px; }
#map-loading .map-loading-kicker { color: #b99d65; letter-spacing: 2px; }
#map-loading #map-loading-map { color: #f0ddad; font-size: 14px; }
:is(#screen-startup .startup-progress, #screen-loading .bar.xp, #map-loading .map-load-progress) {
  position: relative;
  height: 20px;
  margin: 16px 0 0;
  overflow: hidden;
  border: 5px solid transparent;
  border-image: url('/client/assets/hud-v2/slot.webp') 6 fill / 5px stretch;
  border-radius: 0;
  background: #090807;
  box-shadow: none;
}
:is(#screen-startup .startup-progress i, #screen-loading #bar-load, #map-loading #map-load-bar) {
  display: block;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, #76541c, #d5a34e 58%, #f4dc9a);
  box-shadow: 0 0 9px #daa64b88;
}
#screen-startup .startup-progress i { width: 38%; }
:is(#screen-loading #txt-load, #map-loading #map-load-count) {
  position: absolute;
  inset: 0;
  color: #fff1c7;
  font: 600 10px/10px 'Segoe UI', Arial, sans-serif;
  text-shadow: 0 1px 3px #000;
}
:is(#screen-startup #startup-retry, #screen-loading #load-skip) {
  min-height: 34px;
  margin-top: 16px;
  padding: 0 15px;
  border: 6px solid transparent;
  border-image: url('/client/assets/hud-v2/btn.webp') 8 fill / 6px stretch;
  border-radius: 0;
  background: none;
  color: #e5d3ac;
  font: 600 11px/1 'Segoe UI', Arial, sans-serif;
  opacity: 1;
}
:is(#screen-startup #startup-retry, #screen-loading #load-skip):hover { filter: brightness(1.2); }
#screen-startup .startup-card.has-error #startup-status,
#screen-loading #load-note.err { color: #f2a69a; }
@media (max-width: 480px) {
  :is(#screen-startup .startup-card, #screen-loading .panel, #map-loading .map-loading-panel) { padding: 30px 14px 20px; }
  :is(#screen-startup h2, #screen-loading h2, #map-loading h2) { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-startup .startup-progress i, #screen-startup .startup-spinner,
  #map-loading .spin, #map-loading .map-load-progress::after { animation: none; }
}