/* Shared by the initial HTML and all React AlienFish loaders. */
.af-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: linear-gradient(135deg, #12358e, #081851);
  color: var(--af-text, #f4f7ff);
  font-family: var(--sys-font-body, 'Inter', 'Avenir Next', sans-serif);
  box-sizing: border-box;
}
.af-loader--local {
  position: absolute;
  z-index: 10;
}

/* Logos and brand copy are baked into one artwork; crop only its outer scene. */
.af-loader-art,
.af-loader-art-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.af-loader-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(28px, 5vmin, 52px);
  height: clamp(28px, 5vmin, 52px);
  margin: 0;
  border: 4px solid rgb(244 247 255 / 28%);
  border-top-color: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  filter: drop-shadow(0 0 8px rgb(5 213 237 / 65%));
  transform: translate(-50%, -50%);
  animation: af-loader-spin 0.9s linear infinite;
  pointer-events: none;
}
@keyframes af-loader-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Recovery stays separate from the artwork and never shifts its crop or halo. */
.af-loader-copy {
  position: absolute;
  z-index: 2;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(640px, calc(100% - 32px));
  max-height: calc(100% - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  margin-inline: auto;
  box-sizing: border-box;
  text-align: center;
}
.af-loader--delayed .af-loader-copy {
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgb(119 188 255 / 55%);
  border-radius: 12px;
  background: rgb(8 24 81 / 94%);
}
.af-loader .af-loader-status {
  flex-shrink: 0;
  margin: 0;
  color: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.af-loader-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.af-loader .af-loader-reload {
  flex-shrink: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--af-hud-action, #f7ff00);
  color: var(--af-hud-action-ink, #080e2b);
  font: inherit;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.af-loader .af-loader-reload:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.af-loader--simple .af-loader-spinner {
  top: 50%;
  width: 28px;
  height: 28px;
}
@media (prefers-reduced-motion: reduce) {
  .af-loader-spinner { animation: none; }
}