/* Boot splash overlay used inside the Capacitor native WebView (iOS) to
   bridge the gap between the launch storyboard dismissing and React's first
   paint, and to cover the WKWebView reparse on resume from background. On
   the web the overlay is gated off via `html.is-native` (set by
   boot-splash.js when the Capacitor bridge is detected) so it never paints
   in a regular browser.

   Lives as an external sheet (not an inline <style> block) because the
   production CSP is `style-src-elem 'self' https://fonts.googleapis.com` —
   no `'unsafe-inline'` — so an inline block would be dropped entirely and
   the splash element would render unstyled (which is what made it look like
   a full-screen logo on the deployed web). Loading via <link> in <head>
   keeps the gate render-blocking on first paint and avoids a flash. */

html, body { background-color: #0a1f1a; margin: 0; }
/* Match the meta `color-scheme: dark` so the value is in effect from the
   very first paint, before the main Tailwind stylesheet finishes loading.
   Without this, iOS Safari can flash light-mode chrome in the milliseconds
   between document parse and CSS parse. */
:root { color-scheme: dark; }

#boot-splash {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background-color: #0a1f1a;
  z-index: 2147483647;
  opacity: 1;
  transition: opacity 220ms ease-out;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}
html.is-native #boot-splash { display: flex; }
#boot-splash.is-dismissed { opacity: 0; }
#boot-splash svg {
  width: min(40vmin, 280px);
  height: auto;
  display: block;
}
