/* Decorative loading art: one orientation and one supported format per view. */
#state-sync-prompt {
  background-color: #080d18;
  background-image: linear-gradient(rgb(3 8 18 / 38%), rgb(3 8 18 / 50%)), url("/images/loading/abyss-gate-desktop-20261101-v1.webp");
  background-image: linear-gradient(rgb(3 8 18 / 38%), rgb(3 8 18 / 50%)), image-set(url("/images/loading/abyss-gate-desktop-20261101-v1.avif") type("image/avif"), url("/images/loading/abyss-gate-desktop-20261101-v1.webp") type("image/webp"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#state-sync-prompt { backdrop-filter: none; }
.initial-loading-content { text-shadow: 0 2px 6px #000; }
.initial-loading-copy > span { color: #e7d4a2; }
.initial-loading-copy p { color: #f6f2e8; }
.initial-loading-copy small { color: #c4cbd7; }
#state-sync-prompt .maintenance-dialog {
  border-color: rgb(104 193 225 / 35%);
  background: rgb(5 12 24 / 88%);
}
#state-sync-prompt .maintenance-dialog h2,
#state-sync-description { color: #f6f2e8; }
@media (orientation: portrait) {
  #state-sync-prompt {
    background-image: linear-gradient(rgb(3 8 18 / 38%), rgb(3 8 18 / 50%)), url("/images/loading/abyss-gate-mobile-20261101-v1.webp");
    background-image: linear-gradient(rgb(3 8 18 / 38%), rgb(3 8 18 / 50%)), image-set(url("/images/loading/abyss-gate-mobile-20261101-v1.avif") type("image/avif"), url("/images/loading/abyss-gate-mobile-20261101-v1.webp") type("image/webp"));
  }
}

.initial-loading-screen {
  background: #080d18 url("/images/loading/abyss-logo-20261104-v1.webp") center / cover no-repeat;
  background-image: image-set(url("/images/loading/abyss-logo-20261104-v1.avif") type("image/avif"), url("/images/loading/abyss-logo-20261104-v1.webp") type("image/webp"));
}
.initial-loading-brand {
  position: absolute;
  top: 46%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(calc(100% - 32px), 540px);
  transform: translate(-50%, -50%);
}
.initial-loading-logo {
  display: block;
  width: min(88%, 480px);
  height: auto;
  filter: drop-shadow(0 3px 10px #050a14);
}
.initial-loading-indicator {
  position: absolute;
  right: max(15px, env(safe-area-inset-right));
  bottom: max(15px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f9e2b0;
}
.initial-loading-indicator[hidden] { display: none; }
.initial-loading-tip {
  width: min(100%, 420px);
  padding: 8px 12px;
  border-top: 1px solid rgb(249 226 176 / 32%);
  background: linear-gradient(rgb(5 12 24 / 82%), rgb(5 12 24 / 70%));
  color: #f6f2e8;
  text-shadow: 0 1px 3px #000;
}
.initial-loading-tip span { color: #f9e2b0; font-size: var(--ga-font-note, .75rem); }
.initial-loading-tip p { margin: 4px 0 0; font-size: var(--ga-font-body, .875rem); line-height: 1.55; }
.initial-loading-screen:has(#initial-loading-hint:not([hidden]), noscript p) .initial-loading-tip { display: none; }
@media (max-height: 420px) {
  .initial-loading-brand { top: 44%; }
  .initial-loading-logo { width: min(65%, 280px); }
}
.initial-loading-label {
  font: 1.55rem/1.1 "French Script MT", "Snell Roundhand", "Segoe Script", cursive;
  white-space: nowrap;
  text-shadow: 0 2px 3px #000, 0 0 10px #0a0806;
  rotate: -5deg;
}
.initial-loading-cog {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  filter: drop-shadow(0 0 4px #e8b35a85);
}
.initial-loading-cog::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#e1ac5626 20%, #ffe6aa 95%, #e1ac5626 95%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: initial-loading-spin .9s linear infinite;
  content: "";
}
.initial-loading-cog svg { width: 13px; height: 13px; animation: initial-loading-spin 2s linear infinite; }
.initial-loading-screen:not(:has(#initial-loading-hint:not([hidden]), noscript p)) .initial-loading-content {
  position: absolute;
  clip-path: inset(50%);
}
.initial-loading-screen:not(:has(#initial-loading-hint:not([hidden]), noscript p)) #initial-loading-retry {
  display: none;
}
.initial-loading-screen:has(#initial-loading-hint:not([hidden]), noscript p) .initial-loading-content {
  background: rgb(5 12 24 / 95%);
}
@media (prefers-reduced-motion: reduce) {
  .initial-loading-cog::after,
  .initial-loading-cog svg { animation: none; }
}