/* skywatch.monster+more! loading splash for /map and /player (public/splash.js). Linked first in <head> so it is
   render-blocking and paints before any page script runs (the site CSP has no 'unsafe-inline', so the critical CSS is
   this tiny file rather than an inline <style>). Light / .dark from theme-init.js. */
.sw-splash {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-content: center; justify-items: center; gap: 0.8rem;
  padding: 1.5rem; text-align: center; color: #0d2135;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef6f9 48%, #d7ecf2 100%);
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
:root.dark .sw-splash { color: #e4f0f6; background: radial-gradient(circle at 50% 40%, #173556 0%, #0b1f3a 46%, #08131f 100%); }
.sw-splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.sw-splash picture { display: block; line-height: 0; }
.sw-splash-art { display: block; width: min(70vw, 280px); height: auto; max-height: 30vh; object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(13, 33, 53, 0.25)); }
:root.dark .sw-splash-art { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6)); }
.sw-splash.bob .sw-splash-art { width: min(44vw, 200px); max-height: 34vh; animation: sw-bob 2.6s ease-in-out infinite; }
@keyframes sw-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.sw-splash-word { margin: 0.2rem 0 0; font-weight: 800; font-size: clamp(1.25rem, 4.6vw, 1.85rem); letter-spacing: -0.01em; }
.sw-splash-word span { font-size: 0.62em; font-weight: 800; color: #8a6516; margin-left: 0.1em; vertical-align: 0.55em; letter-spacing: 0.02em; }
:root.dark .sw-splash-word span { color: #d4ad5a; }
.sw-splash-msg { margin: 0; min-height: 1.45em; max-width: 26rem; line-height: 1.45; font-size: 0.95rem; color: #3f5870; }
:root.dark .sw-splash-msg { color: #a6bccd; }
.sw-splash-msg::after { content: ""; display: inline-block; width: 1.1em; text-align: left; animation: sw-dots 1.4s steps(4, end) infinite; }
.sw-splash.err .sw-splash-msg::after, .sw-splash.slow .sw-splash-msg::after { content: none; animation: none; }
@keyframes sw-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.sw-splash.err .sw-splash-msg { color: #b3261e; }
:root.dark .sw-splash.err .sw-splash-msg { color: #ff8a80; }
.sw-splash-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.sw-splash-actions[hidden] { display: none; }
.sw-splash-btn { font: inherit; font-weight: 700; padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid #0a7286; background: #0a7286; color: #fff; }
.sw-splash-btn.ghost { background: transparent; color: #0a7286; }
:root.dark .sw-splash-btn { border-color: #3cc6d8; background: #3cc6d8; color: #04222a; }
:root.dark .sw-splash-btn.ghost { background: transparent; color: #3cc6d8; }
.sw-splash-btn:focus-visible { outline: 3px solid #d4ad5a; outline-offset: 2px; }
.sw-splash-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sw-splash { transition: none; }
  .sw-splash.bob .sw-splash-art, .sw-splash-msg::after { animation: none; }
}