/* The loading screen (client/src/ui/loader.ts): over every scene, under the films. The scene's painting over the whole
   screen (the owner's pack, 2026-10-17: art/load_*), the logo at its top, and in its darker bottom fifth the ship's
   wheel turning beside the scene's line, a brass bar and a tip. Phone first: the bottom band fits 270 px of height. */
#gt-load {
  position: fixed; inset: 0; z-index: 2147481000;
  display: block; overflow: hidden;
  background: #05070a radial-gradient(ellipse at 50% 55%, rgba(16, 22, 28, 0.96), rgba(3, 5, 8, 0.995) 75%);
  opacity: 1; transition: opacity 0.16s ease;
  box-sizing: border-box; pointer-events: auto; touch-action: none;
  animation: gl-in 0.16s ease;
}
#gt-load.hidden { display: none; }
#gt-load.out { opacity: 0; pointer-events: none; }
@keyframes gl-in { from { opacity: 0; } }
#gt-load .gl-art { position: absolute; inset: 0; background: center / cover no-repeat; }
/* the scrim: the painting's own dark bottom deepened under the words, a little at the top under the logo */
#gt-load .gl-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 5, 8, 0.35) 0%, rgba(3, 5, 8, 0) 22%, rgba(3, 5, 8, 0) 62%, rgba(3, 5, 8, 0.72) 84%, rgba(3, 5, 8, 0.9) 100%);
}
#gt-load .gl-logo {
  position: absolute; left: 50%; top: max(var(--sa-t, 0px), 2.5vh); transform: translateX(-50%);
  height: clamp(64px, 26vh, 250px); width: auto; max-width: 70vw; object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8)); pointer-events: none; user-select: none;
}
#gt-load .gl-logo[hidden] { display: none; }
/* away from the first start the logo steps back to a corner, so the scene's painting is seen */
#gt-load:not([data-kind="start"]) .gl-logo { left: max(var(--sa-l, 0px), 2vw); transform: none; height: clamp(44px, 15vh, 140px); opacity: 0.92; }
#gt-load .gl-card {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(var(--sa-b, 0px), 2.2vh);
  display: flex; align-items: center; gap: 12px;
  width: min(620px, 82vw); text-align: left;
}
#gt-load .gl-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
#gt-load .gl-helm {
  flex: none; width: 60px; height: 60px; background: center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(224, 184, 98, 0.18));
  animation: gl-turn 3.2s linear infinite;
}
#gt-load .gl-helm:not([style*="url"]) { border: 2px solid var(--brass-dim, #6f5a38); border-radius: 50%; box-sizing: border-box; width: 40px; height: 40px; }
@keyframes gl-turn { to { transform: rotate(360deg); } }
#gt-load .gl-title {
  font-family: var(--display, serif); font-weight: 400; font-size: 20px; line-height: 1.1; letter-spacing: 0.06em; color: var(--bone, #d8d2c4);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(0, 0, 0, 0.95), 0 0 18px rgba(224, 184, 98, 0.18);
}
#gt-load .gl-bar {
  display: block; width: 100%; height: 6px; box-sizing: border-box;
  border: 1px solid var(--brass-dim, #6f5a38); border-radius: 3px; background: rgba(0, 0, 0, 0.6); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
#gt-load .gl-bar i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--brass-dim, #6f5a38), var(--gold, #e0b862));
  transition: width 0.2s ease;
}
#gt-load .gl-tip {
  margin: 0; max-width: 100%; font-family: var(--serif, serif); font-style: italic; font-size: 13px; line-height: 1.3;
  color: #b9c2cb; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, 0.9);
}
#gt-load.still, #gt-load.still .gl-helm, #gt-load.still .gl-bar i, body.reduce-motion #gt-load .gl-helm { animation: none; transition: none; }
@media (max-height: 420px) {
  #gt-load .gl-card { gap: 9px; bottom: max(var(--sa-b, 0px), 8px); }
  #gt-load .gl-body { gap: 3px; }
  #gt-load .gl-helm { width: 42px; height: 42px; }
  #gt-load .gl-title { font-size: 16px; }
  #gt-load .gl-tip { font-size: 11px; }
}
@media (max-height: 300px) {
  #gt-load .gl-card { width: 88vw; gap: 7px; bottom: 6px; }
  #gt-load .gl-helm { width: 32px; height: 32px; }
  #gt-load .gl-title { font-size: 13px; }
  #gt-load .gl-bar { height: 4px; }
  #gt-load .gl-tip { font-size: 10px; line-height: 1.2; }
}