add firebase and sign up

src/App.svelte

@@ -1,4 +1,7 @@
 <script>
+  import { initAuth, getLoading, getUser, getNeedsCountry } from './lib/auth/userStore.svelte.js';
+  import LoginOverlay from './lib/auth/LoginOverlay.svelte';
+  import CountryPicker from './lib/auth/CountryPicker.svelte';
   import Layout from './lib/layout/Layout.svelte';
   import WorldMap from './lib/world-map/WorldMap.svelte';
   import StatsPanel from './lib/world-map/StatsPanel.svelte';
@@ -9,22 +12,54 @@
   function onNavigate(s) {
     screen = s;
   }
+
+  $effect(() => {
+    initAuth();
+  });
+
+  let loading = $derived(getLoading());
+  let user = $derived(getUser());
+  let needsCountry = $derived(getNeedsCountry());
 </script>
 
-<Layout {screen} {onNavigate}>
-  {#if screen === 'worldmap'}
-    <div class="worldmap-page">
-      <div class="map-area">
-        <WorldMap />
+{#if loading}
+  <div class="loading-screen">
+    <span class="loading-text">Loading...</span>
+  </div>
+{:else}
+  <Layout {screen} {onNavigate}>
+    {#if screen === 'worldmap'}
+      <div class="worldmap-page">
+        <div class="map-area"><WorldMap /></div>
+        <StatsPanel />
       </div>
-      <StatsPanel />
-    </div>
-  {:else}
-    <TimelineView />
+    {:else}
+      <TimelineView />
+    {/if}
+  </Layout>
+
+  {#if !user}
+    <LoginOverlay />
+  {:else if needsCountry}
+    <CountryPicker />
   {/if}
-</Layout>
+{/if}
 
 <style>
+  .loading-screen {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #0f172a;
+  }
+
+  .loading-text {
+    font: 400 18px/1.4 sans-serif;
+    color: #94a3b8;
+  }
+
   .worldmap-page {
     display: flex;
     flex-direction: row;