feat: add transport image icons and expand country list to match world map

feat: Firebase integration, 3-step new trip form, full country list, and UI polish
- Connect Firestore for journal entries and visited countries (real-time onSnapshot) - Connect Firebase Storage for photo uploads - Add NewEntryForm: 3-step flow (trip details → photos → reflection questions) - Expand country list to full world-atlas dataset (~240 countries) matching the map - Filter city suggestions by selected country in both NewEntryForm and EditForm - Redesign StatsPanel as floating horizontal card with donut chart and progress bar - Center timeline layout with responsive side margins - Replace "entry" language with "trip" throughout (Add trip, Save trip, Delete trip) - Remove footer from Layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-15 19:54:45 +09:00 · 2026-06-15 19:54:45 +09:00 · 2026-06-15 19:50:13 +09:00 · 2026-06-15 12:35:57 +09:00 · 2026-06-15 12:29:36 +09:00 · 2026-06-15 12:14:57 +09:00
48 changed files with 4308 additions and 1099 deletions
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -3,7 +3,7 @@
  "configurations": [
    {
      "name": "Map-Jurnal",
-      "cwd": "/Users/haerikim/Desktop/Map-Jurnal",
+      "cwd": "/Users/haerikim/Desktop/SP Map Journal/Map-Jurnal",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 5173,
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+.env
 *.local

 # Editor directories and files
--- a/dev_error.txt
+++ b/dev_error.txt
--- a/dev_output.txt
+++ b/dev_output.txt
@@ -0,0 +1,11 @@
+
+> map-journal@0.0.0 dev
+> vite
+
+Port 5173 is in use, trying another one...
+Port 5174 is in use, trying another one...
+
+  [32m[1mVITE[22m v8.0.15[39m  [2mready in [0m[1m1792[22m[2m[0m ms[22m
+
+  [32m➜[39m  [1mLocal[22m:   [36mhttp://localhost:[1m5175[22m/[39m
+[2m  [32m➜[39m  [1mNetwork[22m[2m: use [22m[1m--host[22m[2m to expose[22m
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Journi</title>
  </head>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -23,7 +23,7 @@
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable this if you'd like to use dynamic types.
     */
-    "checkJs": true
+    "checkJs": false
  },
  /**
   * Use global.d.ts instead of compilerOptions.types
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,12 +9,13 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "svelte": "^5.55.5",
-    "vite": "^8.0.12"
+    "vite": "^6.3.5"
  },
  "dependencies": {
    "d3": "^7.9.0",
+    "firebase": "^12.14.0",
    "flag-icons": "^7.5.0",
    "html-to-image": "^1.11.13",
    "topojson-client": "^3.1.0",
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/plane.webp
+++ b/public/plane.webp
--- a/public/profile.jpg
+++ b/public/profile.jpg
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,47 +1,142 @@
 <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 JourneyView from './lib/world-map/JourneyView.svelte';
  import StatsPanel from './lib/world-map/StatsPanel.svelte';
  import TimelineView from './lib/timeline/TimelineView.svelte';

  let screen = $state('worldmap');
+  let journeyActive = $state(false);
+  let journeyProgress = $state(null);
  let inDetail = $state(false);
  let pendingCountry = $state('');

+  function onNavigate(s) {
+    screen = s;
+  }
+
+  function startJourney() {
+    journeyActive = true;
+    journeyProgress = null;
+  }
+
+  function endJourney() {
+    journeyActive = false;
+    journeyProgress = null;
+  }
+
+  function onJourneyProgress(p) {
+    journeyProgress = p;
+  }
+
  function handleCountryClick(name) {
    pendingCountry = name;
    screen = 'timeline';
  }
+
+  $effect(() => {
+    initAuth();
+  });
+
+  let loading = $derived(getLoading());
+  let user = $derived(getUser());
+  let needsCountry = $derived(getNeedsCountry());
 </script>

-<Layout {screen} onNavigate={(s) => (screen = s)} hideTopBar={inDetail}>
-  {#if screen === 'worldmap'}
-    <div class="worldmap-page">
-      <div class="map-area">
-        <WorldMap onCountryClick={handleCountryClick} />
+{#if loading}
+  <div class="loading-screen">
+    <span class="loading-text">Loading...</span>
+  </div>
+{:else}
+  <Layout {screen} {onNavigate} hideTopBar={inDetail}>
+    {#if screen === 'worldmap'}
+      <div class="worldmap-page">
+        <div class="map-area">
+          {#if journeyActive}
+            <JourneyView onclose={endJourney} onprogress={onJourneyProgress} />
+          {:else}
+            <WorldMap onCountryClick={handleCountryClick} />
+            <button class="journey-play-btn" onclick={startJourney}>▶</button>
+          {/if}
+        </div>
+        <StatsPanel />
      </div>
-      <StatsPanel />
-    </div>
-  {:else}
-    <TimelineView
-      onDetailChange={(v) => (inDetail = v)}
-      {pendingCountry}
-      onNewEntryClear={() => (pendingCountry = '')}
-    />
+    {:else}
+      <TimelineView
+        onDetailChange={(v) => (inDetail = v)}
+        {pendingCountry}
+        onNewEntryClear={() => (pendingCountry = '')}
+      />
+    {/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 {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0;
    height: 100%;
+    position: relative;
  }

  .map-area {
    flex: 1;
    overflow: hidden;
+    position: relative;
+  }
+
+  .journey-play-btn {
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+    z-index: 10;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    background: #8b5cf6;
+    color: #fff;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
+    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+  }
+
+  .journey-play-btn:hover {
+    background: #7c3aed;
+    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.55);
+  }
+
+  .journey-play-btn:active {
+    transform: scale(0.92);
  }
 </style>
--- a/src/assets/airplane.png
+++ b/src/assets/airplane.png
--- a/src/assets/bus.png
+++ b/src/assets/bus.png
--- a/src/assets/car.png
+++ b/src/assets/car.png
--- a/src/assets/hero.png
+++ b/src/assets/hero.png
--- a/src/assets/ship.png
+++ b/src/assets/ship.png
--- a/src/assets/svelte.svg
+++ b/src/assets/svelte.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/src/assets/train.png
+++ b/src/assets/train.png
--- a/src/assets/vite.svg
+++ b/src/assets/vite.svg
--- a/src/assets/walk.png
+++ b/src/assets/walk.png
--- a/src/lib/auth/CountryPicker.svelte
+++ b/src/lib/auth/CountryPicker.svelte
@@ -0,0 +1,208 @@
+<script>
+  import { getUser, getUserProfile, setHomeCountry } from './userStore.svelte.js';
+  import worldData from 'world-atlas/countries-50m.json';
+
+  let user = $derived(getUser());
+  let profile = $derived(getUserProfile());
+
+  const countries = $derived.by(() => {
+    if (!worldData?.objects?.countries?.geometries) return [];
+    return worldData.objects.countries.geometries
+      .map(g => ({ name: g.properties?.name, code: g.id }))
+      .filter(c => c.name && c.code)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  });
+
+  let search = $state('');
+  let selectedCountry = $state(null);
+
+  let filtered = $derived(
+    search
+      ? countries.filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
+      : countries
+  );
+
+  let open = $state(false);
+
+  function select(c) {
+    selectedCountry = c;
+    search = c.name;
+    open = false;
+  }
+
+  function handleSubmit() {
+    if (selectedCountry) {
+      setHomeCountry(selectedCountry.name, selectedCountry.code);
+    }
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' && selectedCountry) {
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      open = false;
+    }
+  }
+</script>
+
+<div class="overlay">
+  <div class="card">
+    <h1 class="heading">Welcome, {profile?.displayName || 'Traveler'}!</h1>
+    <p class="subtitle">Select your home country to get started</p>
+
+    <div class="dropdown" class:open>
+      <input
+        type="text"
+        placeholder="Search for a country..."
+        bind:value={search}
+        onfocus={() => { open = true; }}
+        oninput={() => { open = true; selectedCountry = null; }}
+        onkeydown={handleKeydown}
+        class="search-input"
+      />
+      {#if open}
+        <ul class="list" role="listbox">
+          {#each filtered as country}
+            <li
+              role="option"
+              aria-selected={selectedCountry?.name === country.name}
+              class:selected={selectedCountry?.name === country.name}
+              onclick={() => select(country)}
+              onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
+              tabindex="0"
+            >
+              {country.name}
+            </li>
+          {/each}
+          {#if filtered.length === 0}
+            <li class="no-results">No countries found</li>
+          {/if}
+        </ul>
+      {/if}
+    </div>
+
+    <button
+      class="continue-btn"
+      disabled={!selectedCountry}
+      onclick={handleSubmit}
+    >
+      Continue
+    </button>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(4px);
+  }
+
+  .card {
+    background: #1e2937;
+    border-radius: 16px;
+    padding: 40px 36px;
+    text-align: center;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 420px;
+    width: 90%;
+  }
+
+  .heading {
+    font: 700 24px/1.3 sans-serif;
+    color: #f1f5f9;
+    margin-bottom: 6px;
+  }
+
+  .subtitle {
+    font: 400 15px/1.4 sans-serif;
+    color: #94a3b8;
+    margin-bottom: 28px;
+  }
+
+  .dropdown {
+    position: relative;
+    margin-bottom: 24px;
+    text-align: left;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 12px 16px;
+    border: 1px solid #475569;
+    border-radius: 8px;
+    background: #0f172a;
+    color: #f1f5f9;
+    font: 400 15px/1.4 sans-serif;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .search-input:focus {
+    border-color: #3b82f6;
+  }
+
+  .search-input::placeholder {
+    color: #64748b;
+  }
+
+  .list {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    max-height: 240px;
+    overflow-y: auto;
+    background: #0f172a;
+    border: 1px solid #475569;
+    border-radius: 8px;
+    list-style: none;
+    z-index: 10;
+  }
+
+  .list li {
+    padding: 10px 16px;
+    cursor: pointer;
+    color: #cbd5e1;
+    font: 400 14px/1.4 sans-serif;
+    transition: background 0.15s;
+  }
+
+  .list li:hover,
+  .list li.selected {
+    background: #1e3a5f;
+    color: #f1f5f9;
+  }
+
+  .no-results {
+    color: #64748b;
+    cursor: default;
+  }
+
+  .continue-btn {
+    width: 100%;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    background: #3b82f6;
+    color: #fff;
+    font: 600 16px/1.4 sans-serif;
+    cursor: pointer;
+    transition: background 0.2s, opacity 0.2s;
+  }
+
+  .continue-btn:hover:not(:disabled) {
+    background: #2563eb;
+  }
+
+  .continue-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+</style>
--- a/src/lib/auth/LoginOverlay.svelte
+++ b/src/lib/auth/LoginOverlay.svelte
@@ -0,0 +1,87 @@
+<script>
+  import { signInWithGoogle } from './userStore.svelte.js';
+</script>
+
+<div class="overlay">
+  <div class="card">
+    <img src="/logo.png" alt="Map Journal" class="logo" />
+    <h1 class="title">Map Journal</h1>
+    <p class="subtitle">Sign in to start your journey</p>
+    <button class="google-btn" onclick={signInWithGoogle}>
+      <svg class="google-icon" viewBox="0 0 48 48">
+        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+        <path fill="#FBBC05" d="M10.53 28.59A14.5 14.5 0 0 1 9.5 24c0-1.59.28-3.14.76-4.59l-7.98-6.19A23.99 23.99 0 0 0 0 24c0 3.77.87 7.35 2.56 10.78l7.97-6.19z"/>
+        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+        <path fill="none" d="M0 0h48v48H0z"/>
+      </svg>
+      Sign in with Google
+    </button>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.85);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(4px);
+  }
+
+  .card {
+    background: #1e2937;
+    border-radius: 16px;
+    padding: 48px 40px;
+    text-align: center;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 400px;
+    width: 90%;
+  }
+
+  .logo {
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font: 700 28px/1.2 sans-serif;
+    color: #f1f5f9;
+    margin-bottom: 8px;
+  }
+
+  .subtitle {
+    font: 400 15px/1.4 sans-serif;
+    color: #94a3b8;
+    margin-bottom: 32px;
+  }
+
+  .google-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 28px;
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 8px;
+    background: #334155;
+    color: #f1f5f9;
+    font: 500 16px/1.4 sans-serif;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .google-btn:hover {
+    background: #475569;
+  }
+
+  .google-icon {
+    width: 22px;
+    height: 22px;
+    flex-shrink: 0;
+  }
+</style>
--- a/src/lib/auth/userStore.svelte.js
+++ b/src/lib/auth/userStore.svelte.js
@@ -0,0 +1,73 @@
+import { auth, db, googleProvider } from '../firebase.js';
+import { onAuthStateChanged, signInWithPopup, signOut as fbSignOut } from 'firebase/auth';
+import { doc, getDoc, setDoc, serverTimestamp } from 'firebase/firestore';
+import { initSelectionListener } from '../layout/selection.svelte.js';
+import { initEntriesListener } from '../stores/entriesStore.svelte.js';
+
+let _initialized = false;
+
+let user = $state(null);
+let userProfile = $state(null);
+let loading = $state(true);
+let needsCountry = $state(false);
+
+export function getUser() { return user; }
+export function getUserProfile() { return userProfile; }
+export function getLoading() { return loading; }
+export function getNeedsCountry() { return needsCountry; }
+
+export async function signInWithGoogle() {
+  await signInWithPopup(auth, googleProvider);
+}
+
+export async function signOut() {
+  await fbSignOut(auth);
+  user = null;
+  userProfile = null;
+  needsCountry = false;
+}
+
+export async function setHomeCountry(name, code) {
+  if (!user) return;
+  await setDoc(doc(db, 'users', user.uid), {
+    displayName: user.displayName,
+    photoURL: user.photoURL,
+    email: user.email,
+    homeCountry: name,
+    homeCountryCode: code,
+    visitedCountries: [code],
+    createdAt: serverTimestamp(),
+  });
+  userProfile = { ...userProfile, homeCountry: name, homeCountryCode: code, visitedCountries: [code] };
+  needsCountry = false;
+}
+
+export function initAuth() {
+  if (_initialized) return;
+  _initialized = true;
+  onAuthStateChanged(auth, async (fbUser) => {
+    if (fbUser) {
+      user = fbUser;
+      initSelectionListener(fbUser.uid);
+      initEntriesListener(fbUser.uid);
+      const docRef = doc(db, 'users', fbUser.uid);
+      const docSnap = await getDoc(docRef);
+      if (docSnap.exists()) {
+        userProfile = docSnap.data();
+        needsCountry = false;
+      } else {
+        userProfile = {
+          displayName: fbUser.displayName,
+          photoURL: fbUser.photoURL,
+          email: fbUser.email,
+        };
+        needsCountry = true;
+      }
+    } else {
+      user = null;
+      userProfile = null;
+      needsCountry = false;
+    }
+    loading = false;
+  });
+}
--- a/src/lib/firebase.js
+++ b/src/lib/firebase.js
@@ -0,0 +1,19 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+import { getStorage } from 'firebase/storage';
+
+const firebaseConfig = {
+  apiKey:            import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain:        import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId:         import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket:     import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId:             import.meta.env.VITE_FIREBASE_APP_ID,
+};
+
+export const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getFirestore(app);
+export const storage = getStorage(app);
+export const googleProvider = new GoogleAuthProvider();
--- a/src/lib/layout/Layout.svelte
+++ b/src/lib/layout/Layout.svelte
@@ -1,6 +1,5 @@
 <script>
  import TopBar from './TopBar.svelte';
-  import Footer from './Footer.svelte';

  let { screen, onNavigate, hideTopBar = false, children } = $props();
 </script>
@@ -12,7 +11,6 @@
  <main class="main">
    {@render children()}
  </main>
-  <Footer />
 </div>

 <style>
@@ -20,11 +18,11 @@
    width: 100vw;
    height: 100vh;
    display: grid;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: auto 1fr;
    overflow: hidden;
  }
  .layout.no-topbar {
-    grid-template-rows: 1fr auto;
+    grid-template-rows: 1fr;
  }

  .main {
--- a/src/lib/layout/TopBar.svelte
+++ b/src/lib/layout/TopBar.svelte
@@ -1,73 +1,223 @@
 <script>
+  import { getUser, getUserProfile, signOut } from '../auth/userStore.svelte.js';
+
  let { screen, onNavigate } = $props();
+
+  let user = $derived(getUser());
+  let profile = $derived(getUserProfile());
+
+  let menuOpen = $state(false);
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+  }
+
+  function handleSignOut() {
+    menuOpen = false;
+    signOut();
+  }
 </script>

-<nav class="topbar">
-  <div class="logo-area">
-    <span class="logo">Journi</span>
+<div class="topbar">
+  <div class="left">
+    <span class="app-name">Journi</span>
  </div>
-  <div class="nav-links">
-    <button class="nav-btn" class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Map</button>
-    <button class="nav-btn" class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Journal</button>
+
+  <div class="center">
+    <div class="segmented">
+      <div
+        class="slider"
+        style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
+      ></div>
+      <button onclick={() => onNavigate('worldmap')}>Worldmap</button>
+      <button onclick={() => onNavigate('timeline')}>Timeline</button>
+    </div>
  </div>
-</nav>
+
+  <div class="right">
+    {#if user}
+      <div class="avatar-wrapper">
+        <button class="avatar-btn" onclick={toggleMenu} onkeydown={(e) => { if (e.key === 'Enter') toggleMenu(); }}>
+          <img
+            src={user.photoURL || '/profile.jpg'}
+            alt="Profile"
+            class="avatar"
+          />
+        </button>
+        {#if menuOpen}
+          <div class="dropdown-menu">
+            <div class="menu-header">
+              <span class="menu-name">{profile?.displayName || user.displayName}</span>
+              <span class="menu-email">{user.email}</span>
+            </div>
+            <div class="divider"></div>
+            <button class="menu-item" onclick={handleSignOut}>Sign out</button>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  {#if menuOpen}
+    <button class="backdrop" aria-label="Close menu" onclick={() => { menuOpen = false; }}></button>
+  {/if}
+</div>

 <style>
  .topbar {
-    position: relative;
+    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 32px;
-    height: 52px;
+    gap: 16px;
+    position: relative;
+    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
-    z-index: 10;
  }

-  .logo-area {
+  .left {
    display: flex;
    align-items: center;
-    gap: 8px;
+    gap: 10px;
  }

-  .logo {
+  .app-name {
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-h);
+    white-space: nowrap;
    letter-spacing: -0.5px;
  }

-  .nav-links {
+  .center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .segmented {
+    position: relative;
    display: flex;
-    gap: 2px;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
  }

-  .nav-btn {
+  .slider {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: calc(50% - 3px);
+    height: calc(100% - 6px);
+    background: var(--bg);
+    border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+    transition: transform 0.25s ease;
+    pointer-events: none;
+  }
+
+  .segmented button {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    padding: 4px 18px;
+    border: none;
+    background: none;
+    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 300;
-    padding: 4px 18px;
-    border-radius: 6px;
-    border: none;
-    background: none;
    color: var(--text);
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.01em;
  }
-  .nav-btn:hover { color: var(--text-h); }
-  .nav-btn.active {
-    background: #7c3aed;
-    color: #fff;
-    box-shadow: 0 1px 4px rgba(124,58,237,0.25);
+  .right {
+    display: flex;
+    align-items: center;
+  }
+
+  .avatar-wrapper {
+    position: relative;
+  }
+
+  .avatar-btn {
+    display: flex;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 8px 0;
+    min-width: 200px;
+    box-shadow: var(--shadow);
+    z-index: 50;
+  }
+
+  .menu-header {
+    padding: 8px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .menu-name {
+    font: 600 14px/1.3 sans-serif;
+    color: var(--text-h);
+  }
+
+  .menu-email {
+    font: 400 12px/1.3 sans-serif;
+    color: var(--text-sub);
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--border);
+    margin: 6px 0;
+  }
+
+  .menu-item {
+    width: 100%;
+    padding: 8px 16px;
+    border: none;
+    background: none;
+    text-align: left;
+    font: 400 14px/1.4 sans-serif;
+    color: #ef4444;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .menu-item:hover {
+    background: var(--bg-subtle);
+  }
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 30;
+    border: none;
+    background: transparent;
+    cursor: default;
  }
 </style>
--- a/src/lib/layout/selection.svelte.js
+++ b/src/lib/layout/selection.svelte.js
@@ -1,18 +1,58 @@
+import { db } from '../firebase.js';
+import { doc, onSnapshot, setDoc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';
+
 let selected = $state(new Set());
 let totalCountries = $state(0);
+let homeCountryCode = $state(null);
+let _uid = null;
+let _unsubscribe = null;
+
+export function initSelectionListener(uid) {
+  if (_unsubscribe) _unsubscribe();
+  _uid = uid;
+  const userRef = doc(db, 'users', uid);
+  _unsubscribe = onSnapshot(userRef, (snap) => {
+    if (snap.exists()) {
+      const codes = snap.data().visitedCountries || [];
+      selected = new Set(codes);
+      homeCountryCode = snap.data().homeCountryCode || null;
+    }
+  });
+}
+
+const visitedRef = doc(db, 'visited', 'countries');
+
+onSnapshot(visitedRef, (snap) => {
+  if (snap.exists()) {
+    selected = new Set(snap.data().ids ?? []);
+  }
+});
+
+function persist() {
+  setDoc(visitedRef, { ids: [...selected] });
+}

 export function toggle(id) {
+  const was = selected.has(id);
  const next = new Set(selected);
-  if (next.has(id)) {
-    next.delete(id);
-  } else {
-    next.add(id);
-  }
+  if (was) next.delete(id);
+  else next.add(id);
  selected = next;
+  persist();
+  if (_uid) {
+    const userRef = doc(db, 'users', _uid);
+    if (was) updateDoc(userRef, { visitedCountries: arrayRemove(id) });
+    else updateDoc(userRef, { visitedCountries: arrayUnion(id) });
+  }
 }

 export function clearAll() {
  selected = new Set();
+  persist();
+  if (_uid) {
+    const userRef = doc(db, 'users', _uid);
+    updateDoc(userRef, { visitedCountries: [] });
+  }
 }

 export function getSelected() {
@@ -26,3 +66,7 @@ export function setTotalCount(n) {
 export function getTotalCount() {
  return totalCountries;
 }
+
+export function getHomeCountryCode() {
+  return homeCountryCode;
+}
--- a/src/lib/shared/SearchInput.svelte
+++ b/src/lib/shared/SearchInput.svelte
@@ -3,7 +3,7 @@
   * Searchable combobox input.
   * @type {{ id?: string, value: string, options: string[], placeholder?: string, required?: boolean, onchange?: (v: string) => void }}
   */
-  let { id, value = $bindable(), options, placeholder = '', required = false } = $props();
+  let { id, value = $bindable(), options, placeholder = '', required = false, onselect } = $props();

  let query = $state(value);
  let open = $state(false);
@@ -20,6 +20,7 @@
    value = opt;
    open = false;
    focused = -1;
+    onselect?.(opt);
  }

  function onInput(e) {
@@ -33,7 +34,7 @@
    if (!open) { if (e.key === 'ArrowDown') { open = true; } return; }
    if (e.key === 'ArrowDown') { e.preventDefault(); focused = Math.min(focused + 1, filtered.length - 1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); focused = Math.max(focused - 1, 0); }
-    else if (e.key === 'Enter' && focused >= 0) { e.preventDefault(); select(filtered[focused]); }
+    else if (e.key === 'Enter') { e.preventDefault(); if (focused >= 0) { select(filtered[focused]); } else if (query.trim()) { select(query.trim()); } }
    else if (e.key === 'Escape') { open = false; focused = -1; }
  }

--- a/src/lib/shared/countries.js
+++ b/src/lib/shared/countries.js
@@ -1,25 +1,74 @@
-export const countryCodeMap = {
-  'Argentina': 'AR', 'Australia': 'AU', 'Austria': 'AT',
-  'Belgium': 'BE', 'Brazil': 'BR',
-  'Canada': 'CA', 'Chile': 'CL', 'China': 'CN', 'Croatia': 'HR',
-  'Czech Republic': 'CZ', 'Denmark': 'DK', 'Egypt': 'EG',
-  'Finland': 'FI', 'France': 'FR', 'Germany': 'DE', 'Greece': 'GR',
-  'Hungary': 'HU', 'India': 'IN', 'Indonesia': 'ID', 'Italy': 'IT',
-  'Japan': 'JP', 'Kenya': 'KE',
-  'Malaysia': 'MY', 'Mexico': 'MX', 'Morocco': 'MA',
-  'Netherlands': 'NL', 'New Zealand': 'NZ', 'Norway': 'NO',
-  'Peru': 'PE', 'Poland': 'PL', 'Portugal': 'PT',
-  'Singapore': 'SG', 'South Africa': 'ZA', 'South Korea': 'KR',
-  'Spain': 'ES', 'Sweden': 'SE', 'Switzerland': 'CH',
-  'Taiwan': 'TW', 'Thailand': 'TH', 'Turkey': 'TR',
-  'UK': 'GB', 'USA': 'US', 'Vietnam': 'VN',
+import { feature } from 'topojson-client';
+import worldData from 'world-atlas/countries-50m.json';
+
+// Full name → alpha-2 map covering all world-atlas country names.
+const nameToAlpha2 = {
+  'Afghanistan':'AF','Albania':'AL','Algeria':'DZ','American Samoa':'AS',
+  'Andorra':'AD','Angola':'AO','Anguilla':'AI','Antigua and Barb.':'AG',
+  'Argentina':'AR','Armenia':'AM','Aruba':'AW','Ashmore and Cartier Is.':'AU',
+  'Australia':'AU','Austria':'AT','Azerbaijan':'AZ','Bahamas':'BS',
+  'Bahrain':'BH','Bangladesh':'BD','Barbados':'BB','Belarus':'BY',
+  'Belgium':'BE','Belize':'BZ','Benin':'BJ','Bermuda':'BM','Bhutan':'BT',
+  'Bolivia':'BO','Bosnia and Herz.':'BA','Botswana':'BW',
+  'Br. Indian Ocean Ter.':'IO','Brazil':'BR','British Virgin Is.':'VG',
+  'Brunei':'BN','Bulgaria':'BG','Burkina Faso':'BF','Burundi':'BI',
+  'Cabo Verde':'CV','Cambodia':'KH','Cameroon':'CM','Canada':'CA',
+  'Cayman Is.':'KY','Central African Rep.':'CF','Chad':'TD','Chile':'CL',
+  'China':'CN','Colombia':'CO','Comoros':'KM','Congo':'CG','Cook Is.':'CK',
+  'Costa Rica':'CR','Croatia':'HR','Cuba':'CU','Curaçao':'CW','Cyprus':'CY',
+  'Czechia':'CZ',"Côte d'Ivoire":'CI','Dem. Rep. Congo':'CD','Denmark':'DK',
+  'Djibouti':'DJ','Dominica':'DM','Dominican Rep.':'DO','Ecuador':'EC',
+  'Egypt':'EG','El Salvador':'SV','Eq. Guinea':'GQ','Eritrea':'ER',
+  'Estonia':'EE','Ethiopia':'ET','Faeroe Is.':'FO','Falkland Is.':'FK',
+  'Fiji':'FJ','Finland':'FI','Fr. Polynesia':'PF','France':'FR','Gabon':'GA',
+  'Gambia':'GM','Georgia':'GE','Germany':'DE','Ghana':'GH','Greece':'GR',
+  'Greenland':'GL','Grenada':'GD','Guam':'GU','Guatemala':'GT',
+  'Guernsey':'GG','Guinea':'GN','Guinea-Bissau':'GW','Guyana':'GY',
+  'Haiti':'HT','Honduras':'HN','Hong Kong':'HK','Hungary':'HU','Iceland':'IS',
+  'India':'IN','Indonesia':'ID','Iran':'IR','Iraq':'IQ','Ireland':'IE',
+  'Isle of Man':'IM','Israel':'IL','Italy':'IT','Jamaica':'JM','Japan':'JP',
+  'Jersey':'JE','Jordan':'JO','Kazakhstan':'KZ','Kenya':'KE','Kiribati':'KI',
+  'Kosovo':'XK','Kuwait':'KW','Kyrgyzstan':'KG','Laos':'LA','Latvia':'LV',
+  'Lebanon':'LB','Lesotho':'LS','Liberia':'LR','Libya':'LY',
+  'Liechtenstein':'LI','Lithuania':'LT','Luxembourg':'LU','Macao':'MO',
+  'Macedonia':'MK','Madagascar':'MG','Malawi':'MW','Malaysia':'MY',
+  'Maldives':'MV','Mali':'ML','Malta':'MT','Marshall Is.':'MH',
+  'Mauritania':'MR','Mauritius':'MU','Mexico':'MX','Micronesia':'FM',
+  'Moldova':'MD','Monaco':'MC','Mongolia':'MN','Montenegro':'ME',
+  'Montserrat':'MS','Morocco':'MA','Mozambique':'MZ','Myanmar':'MM',
+  'N. Cyprus':'CY','N. Mariana Is.':'MP','Namibia':'NA','Nauru':'NR',
+  'Nepal':'NP','Netherlands':'NL','New Caledonia':'NC','New Zealand':'NZ',
+  'Nicaragua':'NI','Niger':'NE','Nigeria':'NG','Niue':'NU',
+  'Norfolk Island':'NF','North Korea':'KP','Norway':'NO','Oman':'OM',
+  'Pakistan':'PK','Palau':'PW','Palestine':'PS','Panama':'PA',
+  'Papua New Guinea':'PG','Paraguay':'PY','Peru':'PE','Philippines':'PH',
+  'Pitcairn Is.':'PN','Poland':'PL','Portugal':'PT','Puerto Rico':'PR',
+  'Qatar':'QA','Romania':'RO','Russia':'RU','Rwanda':'RW','S. Sudan':'SS',
+  'Saint Helena':'SH','Saint Lucia':'LC','Samoa':'WS','San Marino':'SM',
+  'Saudi Arabia':'SA','Senegal':'SN','Serbia':'RS','Seychelles':'SC',
+  'Sierra Leone':'SL','Singapore':'SG','Sint Maarten':'SX','Slovakia':'SK',
+  'Slovenia':'SI','Solomon Is.':'SB','Somalia':'SO','South Africa':'ZA',
+  'South Korea':'KR','Spain':'ES','Sri Lanka':'LK','St-Barthélemy':'BL',
+  'St-Martin':'MF','St. Kitts and Nevis':'KN','St. Pierre and Miquelon':'PM',
+  'St. Vin. and Gren.':'VC','Sudan':'SD','Suriname':'SR','Sweden':'SE',
+  'Switzerland':'CH','Syria':'SY','São Tomé and Principe':'ST','Taiwan':'TW',
+  'Tajikistan':'TJ','Tanzania':'TZ','Thailand':'TH','Timor-Leste':'TL',
+  'Togo':'TG','Tonga':'TO','Trinidad and Tobago':'TT','Tunisia':'TN',
+  'Turkey':'TR','Turkmenistan':'TM','Turks and Caicos Is.':'TC',
+  'U.S. Virgin Is.':'VI','Uganda':'UG','Ukraine':'UA',
+  'United Arab Emirates':'AE','United Kingdom':'GB',
+  'United States of America':'US','Uruguay':'UY','Uzbekistan':'UZ',
+  'Vanuatu':'VU','Vatican':'VA','Venezuela':'VE','Vietnam':'VN',
+  'W. Sahara':'EH','Yemen':'YE','Zambia':'ZM','Zimbabwe':'ZW',
+  'eSwatini':'SZ','Åland':'AX',
 };

-export const countryNames = Object.keys(countryCodeMap).sort();
+export const countryNames = feature(worldData, worldData.objects.countries)
+  .features.map(f => f.properties?.name).filter(Boolean).sort();

 /** @param {string} country */
 export function flagEmoji(country) {
-  const code = countryCodeMap[country];
+  const code = nameToAlpha2[country];
  if (!code) return '';
  return [...code].map(c => String.fromCodePoint(0x1F1E6 - 65 + c.charCodeAt(0))).join('');
 }
--- a/src/lib/stores/entriesStore.svelte.js
+++ b/src/lib/stores/entriesStore.svelte.js
@@ -0,0 +1,45 @@
+import { db } from '../firebase.js';
+import { collection, doc, onSnapshot, query, orderBy, addDoc, updateDoc, deleteDoc, serverTimestamp } from 'firebase/firestore';
+
+let entries = $state([]);
+let _uid = null;
+let _unsubscribe = null;
+
+export function getEntries() {
+  return entries;
+}
+
+export function initEntriesListener(uid) {
+  if (_unsubscribe) _unsubscribe();
+  _uid = uid;
+  const q = query(
+    collection(db, 'users', uid, 'entries'),
+    orderBy('createdAt', 'desc')
+  );
+  _unsubscribe = onSnapshot(q, (snap) => {
+    entries = snap.docs.map((d) => ({ id: d.id, ...d.data() }));
+  });
+}
+
+export async function addEntry(data) {
+  if (!_uid) return null;
+  const ref = await addDoc(collection(db, 'users', _uid, 'entries'), {
+    ...data,
+    createdAt: serverTimestamp(),
+    updatedAt: serverTimestamp(),
+  });
+  return ref.id;
+}
+
+export async function updateEntry(id, data) {
+  if (!_uid) return;
+  await updateDoc(doc(db, 'users', _uid, 'entries', id), {
+    ...data,
+    updatedAt: serverTimestamp(),
+  });
+}
+
+export async function removeEntry(id) {
+  if (!_uid) return;
+  await deleteDoc(doc(db, 'users', _uid, 'entries', id));
+}
--- a/src/lib/stores/journalStore.js
+++ b/src/lib/stores/journalStore.js
@@ -1,123 +1,45 @@
 import { writable } from 'svelte/store';
+import { db } from '../firebase.js';
+import {
+  collection, onSnapshot, addDoc, updateDoc, deleteDoc, doc, serverTimestamp
+} from 'firebase/firestore';

 /**
 * @typedef {{
 *   id: string,
 *   title: string,
 *   date: string,
- *   location: { country: string, city: string },
+ *   location: { country: string, cities: string[] },
 *   photos: string[],
 *   transport: 'flight' | 'train' | 'bus' | 'car' | 'ship' | 'walk',
- *   tripType: 'solo' | 'friends',
+ *   tripType: 'solo' | 'friends' | 'family',
 *   days: number,
 *   memo: string
 * }} JournalEntry
 */

-/** @type {JournalEntry[]} */
-const mockEntries = [
-  {
-    id: '1',
-    title: 'First Day in Tokyo',
-    date: '2024-03-15',
-    location: { country: 'Japan', city: 'Tokyo' },
-    photos: [
-      'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=600&q=80',
-      'https://images.unsplash.com/photo-1513407030348-c983a97b98d8?w=600&q=80',
-      'https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=600&q=80',
-    ],
-    transport: 'flight',
-    tripType: 'solo',
-    days: 5,
-    memo: 'Got completely lost in Shinjuku — stumbled into a tiny ramen shop with no English menu. The chashu just melted. Worth every wrong turn.',
-  },
-  {
-    id: '2',
-    title: 'Arashiyama Bamboo Grove',
-    date: '2024-03-18',
-    location: { country: 'Japan', city: 'Kyoto' },
-    photos: [
-      'https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=600&q=80',
-      'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?w=600&q=80',
-    ],
-    transport: 'train',
-    tripType: 'friends',
-    days: 3,
-    memo: 'Arrived at 6am before the crowds. Just me and the wind moving through the bamboo. One of those moments you keep coming back to.',
-  },
-  {
-    id: '3',
-    title: 'Sunset on Montmartre',
-    date: '2024-06-02',
-    location: { country: 'France', city: 'Paris' },
-    photos: [
-      'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=600&q=80',
-      'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=600&q=80',
-      'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?w=600&q=80',
-    ],
-    transport: 'flight',
-    tripType: 'solo',
-    days: 7,
-    memo: 'Watched the whole city turn orange from the steps of Sacré-Cœur. A street musician was playing La Vie en Rose. Cliché, perfect.',
-  },
-  {
-    id: '4',
-    title: 'Inside La Sagrada Família',
-    date: '2024-06-10',
-    location: { country: 'Spain', city: 'Barcelona' },
-    photos: [
-      'https://images.unsplash.com/photo-1523531294919-4bcd7c65e216?w=600&q=80',
-      'https://images.unsplash.com/photo-1583422409516-2895a77efded?w=600&q=80',
-    ],
-    transport: 'flight',
-    tripType: 'friends',
-    days: 4,
-    memo: 'Nothing prepares you for the light inside. The stained glass turns the whole nave into a kaleidoscope. Gaudí was building a forest.',
-  },
-  {
-    id: '5',
-    title: 'Central Park in Fall',
-    date: '2023-10-20',
-    location: { country: 'USA', city: 'New York' },
-    photos: [
-      'https://images.unsplash.com/photo-1534430480872-3498386e7856?w=600&q=80',
-      'https://images.unsplash.com/photo-1485871981521-5b1fd3805345?w=600&q=80',
-      'https://images.unsplash.com/photo-1522083165195-3424ed129620?w=600&q=80',
-    ],
-    transport: 'car',
-    tripType: 'friends',
-    days: 6,
-    memo: 'Peak foliage. Joggers, picnics, a guy playing saxophone near Bethesda Fountain. Hard to believe a city this big wraps around this much quiet.',
-  },
-  {
-    id: '6',
-    title: 'Wat Pho Reclining Buddha',
-    date: '2024-01-08',
-    location: { country: 'Thailand', city: 'Bangkok' },
-    photos: [
-      'https://images.unsplash.com/photo-1563492065599-3520f775eeed?w=600&q=80',
-      'https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=600&q=80',
-    ],
-    transport: 'ship',
-    tripType: 'solo',
-    days: 2,
-    memo: 'Stood in front of the 45m golden Buddha for a long time. The mother-of-pearl inlay on the soles of the feet is impossibly detailed.',
-  },
-];
+export const journals = writable(/** @type {JournalEntry[]} */([]));
+export const journalsLoading = writable(true);

-export const journals = writable(mockEntries);
+const entriesRef = collection(db, 'entries');
+
+onSnapshot(entriesRef, (snap) => {
+  journals.set(snap.docs.map(d => ({ id: d.id, ...d.data() })));
+  journalsLoading.set(false);
+});

 /** @param {Omit<JournalEntry, 'id'>} entry */
-export function addJournal(entry) {
-  journals.update((entries) => [...entries, { ...entry, id: crypto.randomUUID() }]);
+export async function addJournal(entry) {
+  await addDoc(entriesRef, { ...entry, createdAt: serverTimestamp() });
 }

 /** @param {string} id */
-export function removeJournal(id) {
-  journals.update((entries) => entries.filter((e) => e.id !== id));
+export async function removeJournal(id) {
+  await deleteDoc(doc(db, 'entries', id));
 }

 /** @param {JournalEntry} updated */
-export function updateJournal(updated) {
-  journals.update((entries) => entries.map((e) => e.id === updated.id ? updated : e));
+export async function updateJournal(updated) {
+  const { id, ...data } = updated;
+  await updateDoc(doc(db, 'entries', id), data);
 }
--- a/src/lib/timeline/DeleteConfirm.svelte
+++ b/src/lib/timeline/DeleteConfirm.svelte
@@ -4,9 +4,9 @@

 <div class="overlay" role="dialog" aria-modal="true">
  <div class="dialog">
-    <h2 class="title">Delete entry?</h2>
+    <h2 class="title">Delete trip?</h2>
    <p class="body">
-      <strong>{entry.location.city}, {entry.location.country}</strong> — {entry.date.slice(0, 4)} will be permanently removed.
+      <strong>{entry.location.cities.join(', ')}, {entry.location.country}</strong> — {entry.date.slice(0, 4)} will be permanently removed.
    </p>
    <div class="actions">
      <button class="btn btn-cancel" onclick={onCancel}>Cancel</button>
--- a/src/lib/timeline/EditForm.svelte
+++ b/src/lib/timeline/EditForm.svelte
@@ -14,14 +14,23 @@

  let isNew = !entry;

-  let city       = $state(entry?.location.city ?? '');
+  let cities     = $state([...(entry?.location.cities ?? [])]);
+  let cityInput  = $state('');
  let country    = $state(entry?.location.country ?? initialCountry);
  let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
-  let days       = $state(String(entry?.days ?? 1));
-  let tripType   = $state(entry?.tripType ?? 'solo');
+  let days       = $state(String(entry?.days ?? ''));
+  let tripType   = $state(entry?.tripType ?? '');
  let photos     = $state([...(entry?.photos ?? [])]);
  let memo       = $state(entry?.memo ?? '');
-  let transport  = $state(entry?.transport ?? 'flight');
+  let transport  = $state(entry?.transport ?? '');
+
+  let errors = $state({
+    country: '', cities: '', date: '', days: '', tripType: '', transport: ''
+  });
+
+  function clearErrors() {
+    errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
+  }

  const transportOptions = [
    { value: 'flight', label: '✈ Flight' },
@@ -48,35 +57,64 @@
    }
  }

+  // Suggest cities — when a country is selected show only cities from that country.
  let cityOptions = $derived(
-    [...new Set(get(journals).map(e => e.location.city))].sort()
+    country.trim()
+      ? [...new Set(get(journals).filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities))].sort()
+      : [...new Set(get(journals).flatMap(e => e.location.cities))].sort()
  );

-  function save() {
-    if (isNew) {
-      addJournal({
-        title: `${city}, ${country}`,
-        date,
-        days: Number(days),
-        tripType,
-        memo,
-        photos,
-        transport,
-        location: { city, country },
-      });
-    } else {
-      updateJournal({
-        ...entry,
-        date,
-        days: Number(days),
-        tripType,
-        transport,
-        memo,
-        photos,
-        location: { city, country },
-      });
+  function addCity(val) {
+    const trimmed = (val ?? cityInput).trim();
+    if (trimmed && !cities.includes(trimmed)) {
+      cities = [...cities, trimmed];
+    }
+    cityInput = '';
+  }
+
+  function removeCity(c) {
+    cities = cities.filter(x => x !== c);
+  }
+
+  async function save() {
+    clearErrors();
+    let hasError = false;
+    if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
+    if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
+    if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
+    if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
+    if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
+    if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
+    if (hasError) return;
+
+    try {
+      if (isNew) {
+        await addJournal({
+          title: `${cities.join(', ')}, ${country}`,
+          date,
+          days: Number(days),
+          tripType,
+          memo,
+          photos,
+          transport,
+          location: { cities, country },
+        });
+      } else {
+        await updateJournal({
+          ...entry,
+          date,
+          days: Number(days),
+          tripType,
+          transport,
+          memo,
+          photos,
+          location: { cities, country },
+        });
+      }
+      onBack();
+    } catch (err) {
+      showToast('Failed to save. Please try again.');
    }
-    onBack();
  }
 </script>

@@ -91,7 +129,7 @@
        Back
      </button>
    </div>
-    <span class="topbar-title">{isNew ? 'New entry' : 'Edit'}</span>
+    <span class="topbar-title">{isNew ? 'New trip' : 'Edit'}</span>
    <div class="topbar-right">
      <button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
    </div>
@@ -104,10 +142,24 @@
        <div class="field">
          <label class="label" for="edit-country">Country <span class="req">*</span></label>
          <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
+          {#if errors.country}<span class="field-error">{errors.country}</span>{/if}
        </div>
        <div class="field">
-          <label class="label" for="edit-city">City <span class="req">*</span></label>
-          <SearchInput id="edit-city" bind:value={city} options={cityOptions} required />
+          <label class="label" for="edit-city">Cities <span class="req">*</span></label>
+          <div class="city-input-row">
+            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+          </div>
+          {#if errors.cities}<span class="field-error">{errors.cities}</span>{/if}
+          {#if cities.length > 0}
+            <div class="city-tags">
+              {#each cities as c}
+                <span class="city-tag">
+                  {c}
+                  <button type="button" class="city-tag-remove" onclick={() => removeCity(c)}>×</button>
+                </span>
+              {/each}
+            </div>
+          {/if}
        </div>
      </div>

@@ -115,10 +167,12 @@
        <div class="field">
          <label class="label" for="edit-date">Date <span class="req">*</span></label>
          <input id="edit-date" class="input" type="date" bind:value={date} required />
+          {#if errors.date}<span class="field-error">{errors.date}</span>{/if}
        </div>
        <div class="field">
          <label class="label" for="edit-days">Days <span class="req">*</span></label>
          <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
+          {#if errors.days}<span class="field-error">{errors.days}</span>{/if}
        </div>
      </div>

@@ -131,7 +185,11 @@
          <label class="toggle-opt" class:active={tripType === 'friends'}>
            <input type="radio" name="tripType" value="friends" bind:group={tripType} /> With friends
          </label>
+          <label class="toggle-opt" class:active={tripType === 'family'}>
+            <input type="radio" name="tripType" value="family" bind:group={tripType} /> With family
+          </label>
        </div>
+        {#if errors.tripType}<span class="field-error">{errors.tripType}</span>{/if}
      </div>

      <div class="field">
@@ -144,6 +202,7 @@
            </label>
          {/each}
        </div>
+        {#if errors.transport}<span class="field-error">{errors.transport}</span>{/if}
      </div>

      <PhotoEditor {photos} onchange={(p) => (photos = p)} />
@@ -162,6 +221,12 @@
 </div>

 <style>
+  .field-error {
+    font-size: 11px;
+    color: #dc2626;
+    margin-top: 2px;
+  }
+
  .edit-layout {
    display: flex;
    flex-direction: column;
@@ -355,4 +420,39 @@
    color: var(--accent);
  }

+  .city-input-row {
+    display: flex;
+  }
+
+  .city-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+  }
+  .city-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 300;
+    color: var(--accent);
+    background: var(--accent-bg);
+    border: 1px solid var(--accent-border);
+    border-radius: 20px;
+    padding: 3px 10px 3px 12px;
+  }
+  .city-tag-remove {
+    background: none;
+    border: none;
+    color: var(--accent);
+    font-size: 15px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+  }
+  .city-tag-remove:hover { opacity: 1; }
+
 </style>
--- a/src/lib/timeline/JournalDetail.svelte
+++ b/src/lib/timeline/JournalDetail.svelte
@@ -50,7 +50,7 @@

      <span class="topbar-flag">{flagEmoji(entry.location.country)}</span>
      <div class="topbar-place">
-        <span class="topbar-city">{entry.location.city}</span>
+        <span class="topbar-city">{entry.location.cities.join(', ')}</span>
        <span class="topbar-country">{entry.location.country}</span>
      </div>
    </div>
@@ -114,6 +114,8 @@
            <p class="answer">
              {#if entry.tripType === 'solo'}
                Just me — solo trip
+              {:else if entry.tripType === 'family'}
+                With family
              {:else}
                With friends
              {/if}
--- a/src/lib/timeline/JournalSummary.svelte
+++ b/src/lib/timeline/JournalSummary.svelte
@@ -7,7 +7,7 @@

    const totalDays = entries.reduce((s, e) => s + e.days, 0);
    const countries = [...new Set(entries.map(e => e.location.country))];
-    const cities    = [...new Set(entries.map(e => e.location.city))];
+    const cities    = [...new Set(entries.flatMap(e => e.location.cities))];

    const years     = entries.map(e => new Date(e.date).getFullYear());
    const minYear   = Math.min(...years);
--- a/src/lib/timeline/NewEntryForm.svelte
+++ b/src/lib/timeline/NewEntryForm.svelte
@@ -0,0 +1,465 @@
+<script>
+  import { get } from 'svelte/store';
+  import { journals, addJournal } from '../stores/journalStore.js';
+  import { countryNames } from '../shared/countries.js';
+  import SearchInput from '../shared/SearchInput.svelte';
+  import PhotoEditor from './PhotoEditor.svelte';
+  import airplaneImg from '../../assets/airplane.png';
+  import trainImg    from '../../assets/train.png';
+  import busImg      from '../../assets/bus.png';
+  import carImg      from '../../assets/car.png';
+  import shipImg     from '../../assets/ship.png';
+  import walkImg     from '../../assets/walk.png';
+
+  let { initialCountry = '', onBack } = $props();
+
+  // ── Fields ─────────────────────────────────────────────────────────
+  let cities    = $state([]);
+  let cityInput = $state('');
+  let country   = $state(initialCountry);
+  let date      = $state(new Date().toISOString().slice(0, 10));
+  let days      = $state('');
+  let tripType  = $state('');
+  let transport = $state('');
+  let photos    = $state([]);
+  let answers   = $state(['', '', '']);
+
+  let errors = $state({ country: '', cities: '', date: '', days: '', tripType: '', transport: '' });
+
+  // ── Steps ──────────────────────────────────────────────────────────
+  let step = $state(1); // 1 | 2 | 3
+
+  // ── Random questions ───────────────────────────────────────────────
+  const ALL_QUESTIONS = [
+    'If this trip had a movie title, what would it be?',
+    'What was the most unexpected thing that happened?',
+    'Which moment would you relive for just 10 more minutes?',
+    'What was your best accidental discovery?\n(A café, a street, a person, a view…)',
+    'If your trip had a theme song, what would it sound like?',
+    'What did you pack but never use?',
+    'What was the smallest thing that made you surprisingly happy?',
+    'If you could steal one thing from this place (without consequences), what would it be?\n(A tradition, a smell, a sunset, a food…)',
+    'What story from this trip will you probably tell your friends first?',
+    'What version of yourself showed up on this trip?',
+  ];
+
+  function pickRandom() {
+    const shuffled = [...ALL_QUESTIONS].sort(() => Math.random() - 0.5);
+    return shuffled.slice(0, 3);
+  }
+
+  const questions = pickRandom();
+
+  // ── Helpers ────────────────────────────────────────────────────────
+  // Suggest cities — if a country is selected, show cities only from that country;
+  // otherwise show all known cities.
+  let cityOptions = $derived(
+    country.trim()
+      ? [...new Set(get(journals).filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities))].sort()
+      : [...new Set(get(journals).flatMap(e => e.location.cities))].sort()
+  );
+
+  function addCity(val) {
+    const t = (val ?? cityInput).trim();
+    if (t && !cities.includes(t)) cities = [...cities, t];
+    cityInput = '';
+  }
+
+  function removeCity(c) { cities = cities.filter(x => x !== c); }
+
+  $effect(() => { if (country.trim()) errors.country = ''; });
+  $effect(() => { if (cities.length > 0) errors.cities = ''; });
+  $effect(() => { if (date) errors.date = ''; });
+  $effect(() => { if (days && Number(days) >= 1) errors.days = ''; });
+  $effect(() => { if (tripType) errors.tripType = ''; });
+  $effect(() => { if (transport) errors.transport = ''; });
+
+  const transportOptions = [
+    { value: 'flight', label: 'Flight', img: airplaneImg },
+    { value: 'train',  label: 'Train',  img: trainImg    },
+    { value: 'bus',    label: 'Bus',    img: busImg      },
+    { value: 'car',    label: 'Car',    img: carImg      },
+    { value: 'ship',   label: 'Ship',   img: shipImg     },
+    { value: 'walk',   label: 'Walk',   img: walkImg     },
+  ];
+
+  // ── Navigation ─────────────────────────────────────────────────────
+  function nextStep() {
+    if (step === 1) {
+      errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
+      let hasError = false;
+      if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
+      if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
+      if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
+      if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
+      if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
+      if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
+      if (hasError) return;
+    }
+    step++;
+  }
+
+  function prevStep() {
+    if (step === 1) onBack();
+    else step--;
+  }
+
+  // ── Save ───────────────────────────────────────────────────────────
+  let saving = $state(false);
+
+  async function save() {
+    saving = true;
+    const memo = questions
+      .map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '')
+      .filter(Boolean)
+      .join('\n\n');
+    try {
+      await addJournal({
+        title: `${cities.join(', ')}, ${country}`,
+        date,
+        days: Number(days),
+        tripType,
+        transport,
+        memo,
+        photos,
+        location: { cities, country },
+      });
+      onBack();
+    } catch {
+      saving = false;
+    }
+  }
+</script>
+
+<div class="layout">
+  <header class="topbar">
+    <div class="topbar-left">
+      <button class="ghost-btn" onclick={prevStep}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+        {step === 1 ? 'Back' : 'Previous'}
+      </button>
+    </div>
+
+    <div class="steps">
+      {#each [1,2,3] as s}
+        <div class="step-dot" class:active={step === s} class:done={step > s}></div>
+      {/each}
+    </div>
+
+    <div class="topbar-right">
+      {#if step < 3}
+        <button class="save-btn" onclick={nextStep}>Next</button>
+      {:else}
+        <button class="save-btn" onclick={save} disabled={saving}>
+          {saving ? 'Saving…' : 'Save trip'}
+        </button>
+      {/if}
+    </div>
+  </header>
+
+  <div class="scroll">
+    <div class="form">
+
+      {#if step === 1}
+        <!-- ── STEP 1: Details ── -->
+        <h2 class="step-title">Trip details</h2>
+
+        <div class="row">
+          <div class="field">
+            <label class="label" for="nc-country">Country <span class="req">*</span></label>
+            <SearchInput id="nc-country" bind:value={country} options={countryNames} />
+            {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
+          </div>
+          <div class="field">
+            <label class="label" for="nc-city">Cities <span class="req">*</span></label>
+            <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+            {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
+            {#if cities.length > 0}
+              <div class="tags">
+                {#each cities as c}
+                  <span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="field">
+            <label class="label" for="nc-date">Date <span class="req">*</span></label>
+            <input id="nc-date" class="input" type="date" bind:value={date} />
+            {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
+          </div>
+          <div class="field">
+            <label class="label" for="nc-days">Days <span class="req">*</span></label>
+            <input id="nc-days" class="input" type="number" min="1" bind:value={days} />
+            {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Trip type <span class="req">*</span></label>
+          <div class="toggle-row">
+            {#each ['solo','friends','family'] as t}
+              <label class="toggle-opt" class:active={tripType === t}>
+                <input type="radio" name="nc-tripType" value={t} bind:group={tripType} />
+                {t === 'solo' ? 'Solo' : t === 'friends' ? 'With friends' : 'With family'}
+              </label>
+            {/each}
+          </div>
+          {#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
+        </div>
+
+        <div class="field">
+          <label class="label">How did you get there? <span class="req">*</span></label>
+          <div class="transport-grid">
+            {#each transportOptions as opt}
+              <label class="transport-opt" class:active={transport === opt.value}>
+                <input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
+                <img src={opt.img} alt={opt.label} class="transport-img" />
+                <span class="transport-label">{opt.label}</span>
+              </label>
+            {/each}
+          </div>
+          {#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
+        </div>
+
+      {:else if step === 2}
+        <!-- ── STEP 2: Photos ── -->
+        <h2 class="step-title">Photos</h2>
+        <p class="step-sub">Optional — add photos from your trip</p>
+        <PhotoEditor {photos} onchange={(p) => (photos = p)} />
+
+      {:else}
+        <!-- ── STEP 3: Questions ── -->
+        <h2 class="step-title">Your memories</h2>
+
+        {#each questions as q, i}
+          <div class="q-card">
+            <p class="q-text">{q}</p>
+            <textarea class="q-input" rows="3" placeholder="Your answer…" bind:value={answers[i]}></textarea>
+          </div>
+        {/each}
+      {/if}
+
+    </div>
+  </div>
+</div>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg);
+    font-family: var(--sans);
+  }
+
+  /* topbar */
+  .topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 52px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg);
+  }
+  .topbar-left, .topbar-right {
+    display: flex;
+    align-items: center;
+    min-width: 110px;
+  }
+  .topbar-right { justify-content: flex-end; }
+
+  .steps {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+  .step-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--border);
+    transition: background 0.2s, transform 0.2s;
+  }
+  .step-dot.active {
+    background: var(--accent);
+    transform: scale(1.25);
+  }
+  .step-dot.done {
+    background: var(--accent);
+    opacity: 0.35;
+  }
+
+  .ghost-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
+
+  .save-btn {
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    color: #fff;
+    background: var(--accent);
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    padding: 7px 14px;
+    cursor: pointer;
+    transition: background 0.15s;
+    white-space: nowrap;
+  }
+  .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
+  .save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+
+  /* scroll + form */
+  .scroll { flex: 1; overflow-y: auto; }
+
+  .form {
+    max-width: 560px;
+    margin: 0 auto;
+    padding: 36px 48px 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .step-title {
+    font-size: 20px;
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.3px;
+    margin: 0 0 2px;
+  }
+  .step-sub {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+    margin: -10px 0 4px;
+  }
+
+  /* fields (same as EditForm) */
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+
+  .field { display: flex; flex-direction: column; gap: 6px; }
+
+  .label {
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-sub);
+  }
+  .req { color: var(--accent); font-size: 11px; }
+
+  .ferr { font-size: 11px; color: #dc2626; }
+
+  .input {
+    font-family: var(--sans);
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--text-h);
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 12px;
+    outline: none;
+    transition: border-color 0.15s;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .input:focus { border-color: var(--accent-border); }
+
+  .toggle-row { display: flex; gap: 8px; }
+  .toggle-opt {
+    display: flex; align-items: center; gap: 6px;
+    font-size: 13px; font-weight: 300; color: var(--text);
+    padding: 7px 14px; border-radius: 8px;
+    border: 1px solid var(--border);
+    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
+    background: var(--bg-subtle);
+  }
+  .toggle-opt input { display: none; }
+  .toggle-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
+
+  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+  .transport-opt {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 8px; aspect-ratio: 1;
+    border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
+    cursor: pointer; transition: border-color 0.15s, background 0.15s;
+  }
+  .transport-opt input { display: none; }
+  .transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); }
+  .transport-img { width: 60px; height: 60px; object-fit: contain; }
+  .transport-label {
+    font-size: 12px; font-weight: 300; color: var(--text-sub);
+    letter-spacing: 0.02em;
+  }
+  .transport-opt.active .transport-label { color: var(--accent); }
+
+  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+  .tag {
+    display: inline-flex; align-items: center; gap: 4px;
+    font-size: 12px; font-weight: 300; color: var(--accent);
+    background: var(--accent-bg); border: 1px solid var(--accent-border);
+    border-radius: 20px; padding: 3px 10px 3px 12px;
+  }
+  .tag-rm {
+    background: none; border: none; color: var(--accent);
+    font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
+  }
+  .tag-rm:hover { opacity: 1; }
+
+  /* question cards */
+  .q-card {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    background: var(--bg-subtle);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 20px;
+  }
+  .q-text {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-h);
+    line-height: 1.5;
+    margin: 0;
+    white-space: pre-line;
+  }
+  .q-input {
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-h);
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 12px;
+    outline: none;
+    resize: none;
+    line-height: 1.6;
+    transition: border-color 0.15s;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .q-input:focus { border-color: var(--accent-border); }
+  .q-input::placeholder { color: var(--text-sub); font-style: italic; }
+</style>
--- a/src/lib/timeline/PhotoEditor.svelte
+++ b/src/lib/timeline/PhotoEditor.svelte
@@ -1,55 +1,52 @@
 <script>
+  import { storage } from '../firebase.js';
+  import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+
  /** @type {{ photos: string[], onchange: (photos: string[]) => void }} */
  let { photos, onchange } = $props();

  let fileInput;
+  let uploading = $state(false);

  function remove(index) {
-    const next = photos.filter((_, i) => i !== index);
-    onchange(next);
+    onchange(photos.filter((_, i) => i !== index));
  }

  async function addFiles(e) {
    const files = Array.from(e.currentTarget.files ?? []);
    if (!files.length) return;
-
-    const dataUrls = await Promise.all(files.map(fileToDataUrl));
-    onchange([...photos, ...dataUrls]);
-
-    // reset so the same file can be picked again
-    e.currentTarget.value = '';
+    uploading = true;
+    try {
+      const urls = await Promise.all(files.map(uploadPhoto));
+      onchange([...photos, ...urls]);
+    } finally {
+      uploading = false;
+      e.currentTarget.value = '';
+    }
  }

  /** @param {File} file */
-  function fileToDataUrl(file) {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onload = (e) => resolve(/** @type {string} */ (e.target.result));
-      reader.readAsDataURL(file);
-    });
+  async function uploadPhoto(file) {
+    const storageRef = ref(storage, `photos/${crypto.randomUUID()}`);
+    await uploadBytes(storageRef, file);
+    return getDownloadURL(storageRef);
  }
 </script>

 <div class="photo-editor">
  <div class="label-row">
    <span class="label">Photos</span>
-    <button type="button" class="add-btn" onclick={() => fileInput.click()}>
-      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-        <path d="M12 5v14M5 12h14"/>
-      </svg>
-      Add photos
-    </button>
    <input bind:this={fileInput} type="file" accept="image/*" multiple onchange={addFiles} hidden />
  </div>

  {#if photos.length === 0}
-    <button type="button" class="empty-zone" onclick={() => fileInput.click()}>
+    <button type="button" class="empty-zone" onclick={() => fileInput.click()} disabled={uploading}>
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
        <rect x="3" y="3" width="18" height="18" rx="3"/>
        <circle cx="8.5" cy="8.5" r="1.5"/>
        <path d="M21 15l-5-5L5 21"/>
      </svg>
-      <span>Click to add photos</span>
+      <span>{uploading ? 'Uploading…' : 'Click to add photos'}</span>
    </button>
  {:else}
    <div class="grid">
@@ -64,7 +61,7 @@
        </div>
      {/each}

-      <button type="button" class="add-cell" onclick={() => fileInput.click()}>
+      <button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
          <path d="M12 5v14M5 12h14"/>
        </svg>
--- a/src/lib/timeline/ShareCard.svelte
+++ b/src/lib/timeline/ShareCard.svelte
@@ -41,7 +41,7 @@

    const totalDays = entries.reduce((s, e) => s + e.days, 0);
    const countries = [...new Set(entries.map(e => e.location.country))];
-    const cities    = [...new Set(entries.map(e => e.location.city))];
+    const cities    = [...new Set(entries.flatMap(e => e.location.cities))];

    // Continent days
    const contDays = {};
@@ -68,6 +68,7 @@
    // Solo vs friends
    const soloCount   = entries.filter(e => e.tripType === 'solo').length;
    const friendCount = entries.filter(e => e.tripType === 'friends').length;
+    const familyCount = entries.filter(e => e.tripType === 'family').length;

    // Most visited country
    const countryCounts = {};
@@ -79,7 +80,7 @@

    return {
      totalDays, countries, cities, contDays, topContinent,
-      longest, flightHrs, soloCount, friendCount,
+      longest, flightHrs, soloCount, friendCount, familyCount,
      favCountry, spanMonths, yearStart, yearEnd,
    };
  });
@@ -175,7 +176,7 @@
          {#if stats.longest}
            <div class="fact">
              <span class="fact-icon">📍</span>
-              <span class="fact-text">Longest stay: <strong>{stats.longest.days} days</strong> in {stats.longest.location.city}</span>
+              <span class="fact-text">Longest stay: <strong>{stats.longest.days} days</strong> in {stats.longest.location.cities.join(', ')}</span>
            </div>
          {/if}
          {#if stats.flightHrs > 0}
@@ -192,7 +193,7 @@
          {/if}
          <div class="fact">
            <span class="fact-icon">{stats.soloCount >= stats.friendCount ? '🧳' : '👥'}</span>
-            <span class="fact-text">{stats.soloCount} solo · {stats.friendCount} with friends</span>
+            <span class="fact-text">{stats.soloCount} solo{stats.friendCount > 0 ? ` · ${stats.friendCount} with friends` : ''}{stats.familyCount > 0 ? ` · ${stats.familyCount} with family` : ''}</span>
          </div>
        </div>

--- a/src/lib/timeline/SharePreview.svelte
+++ b/src/lib/timeline/SharePreview.svelte
@@ -0,0 +1,235 @@
+<script>
+  /** @type {{ entries: import('../stores/journalStore.js').JournalEntry[], onClick: () => void }} */
+  let { entries, onClick } = $props();
+
+  const continentMap = {
+    'Japan':'Asia','South Korea':'Asia','China':'Asia','Thailand':'Asia','Vietnam':'Asia',
+    'Indonesia':'Asia','Malaysia':'Asia','Singapore':'Asia','India':'Asia','Taiwan':'Asia',
+    'Philippines':'Asia','Cambodia':'Asia','Nepal':'Asia',
+    'France':'Europe','Spain':'Europe','Italy':'Europe','Germany':'Europe','UK':'Europe',
+    'Netherlands':'Europe','Portugal':'Europe','Greece':'Europe','Sweden':'Europe',
+    'Norway':'Europe','Denmark':'Europe','Finland':'Europe','Switzerland':'Europe',
+    'Austria':'Europe','Belgium':'Europe','Poland':'Europe','Czech Republic':'Europe',
+    'Hungary':'Europe','Croatia':'Europe','Turkey':'Europe',
+    'USA':'N. America','Canada':'N. America','Mexico':'N. America',
+    'Brazil':'S. America','Argentina':'S. America','Chile':'S. America','Peru':'S. America',
+    'Australia':'Oceania','New Zealand':'Oceania',
+    'Morocco':'Africa','Egypt':'Africa','Kenya':'Africa','South Africa':'Africa',
+  };
+
+  const continentColors = {
+    'Asia':'#f87171','Europe':'#818cf8','N. America':'#4ade80',
+    'S. America':'#fbbf24','Africa':'#fb923c','Oceania':'#c084fc',
+  };
+
+  let stats = $derived.by(() => {
+    const totalDays = entries.reduce((s, e) => s + e.days, 0);
+    const countries = [...new Set(entries.map(e => e.location.country))];
+    const contDays = {};
+    for (const e of entries) {
+      const c = continentMap[e.location.country] ?? 'Other';
+      contDays[c] = (contDays[c] ?? 0) + e.days;
+    }
+    const top = Object.entries(contDays).sort((a, b) => b[1] - a[1]);
+    return { totalDays, countries, contDays, top, trips: entries.length };
+  });
+</script>
+
+<button class="preview-card" onclick={onClick} aria-label="Share your journey">
+
+  <div class="pc-bg"></div>
+  <div class="pc-grid-pattern"></div>
+
+  <div class="pc-header">
+    <span class="pc-brand">MAP JOURNAL</span>
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pc-share-icon">
+      <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+      <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
+    </svg>
+  </div>
+
+  <div class="pc-hero">
+    <span class="pc-num">{stats.totalDays}</span>
+    <span class="pc-label">days traveled</span>
+  </div>
+
+  <div class="pc-row">
+    <div class="pc-stat">
+      <span class="pc-stat-num">{stats.countries.length}</span>
+      <span class="pc-stat-label">countries</span>
+    </div>
+    <div class="pc-stat">
+      <span class="pc-stat-num">{stats.trips}</span>
+      <span class="pc-stat-label">trips</span>
+    </div>
+    <div class="pc-stat">
+      <span class="pc-stat-num">{Object.keys(stats.contDays).length}</span>
+      <span class="pc-stat-label">continents</span>
+    </div>
+  </div>
+
+  {#if stats.top.length > 0}
+    <div class="pc-bar-wrap">
+      <div class="pc-bar">
+        {#each stats.top as [cont, days]}
+          <div class="pc-seg" style="flex:{days}; background:{continentColors[cont] ?? '#818cf8'}"></div>
+        {/each}
+      </div>
+      <div class="pc-bar-labels">
+        {#each stats.top.slice(0,3) as [cont, days]}
+          <span class="pc-bar-label" style="color:{continentColors[cont] ?? '#818cf8'}">{cont}</span>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <div class="pc-cta">Share your journey →</div>
+
+</button>
+
+<style>
+  .preview-card {
+    position: sticky;
+    top: 40px;
+    width: 100%;
+    background: #1a1630;
+    border-radius: 12px;
+    overflow: hidden;
+    color: #fff;
+    cursor: pointer;
+    border: 1px solid rgba(255,255,255,0.06);
+    text-align: left;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    transition: transform 0.15s, box-shadow 0.15s;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+    font-family: var(--sans);
+  }
+  .preview-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 20px rgba(124,58,237,0.12);
+  }
+
+  .pc-bg {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 80% 60% at 90% 0%, rgba(124,58,237,0.2) 0%, transparent 60%),
+      radial-gradient(ellipse 60% 60% at 0% 100%, rgba(99,102,241,0.1) 0%, transparent 60%);
+    pointer-events: none;
+  }
+  .pc-grid-pattern {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+    background-size: 24px 24px;
+    pointer-events: none;
+  }
+
+  .pc-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+  .pc-brand {
+    font-size: 8px;
+    font-weight: 500;
+    letter-spacing: 0.2em;
+    color: #a5b4fc;
+  }
+  .pc-share-icon { color: #a5b4fc; flex-shrink: 0; }
+
+  .pc-hero {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .pc-num {
+    font-size: 40px;
+    font-weight: 400;
+    line-height: 1;
+    letter-spacing: -1.5px;
+    color: #fff;
+  }
+  .pc-label {
+    font-size: 11px;
+    font-weight: 300;
+    color: #a5b4fc;
+    letter-spacing: 0.04em;
+  }
+
+  .pc-row {
+    display: flex;
+    gap: 0;
+    position: relative;
+    z-index: 1;
+  }
+  .pc-stat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-right: 12px;
+    border-right: 1px solid rgba(255,255,255,0.08);
+  }
+  .pc-stat:last-child { border-right: none; padding-right: 0; padding-left: 12px; }
+  .pc-stat:not(:first-child):not(:last-child) { padding-left: 12px; }
+  .pc-stat-num {
+    font-size: 16px;
+    font-weight: 400;
+    color: #fff;
+    letter-spacing: -0.5px;
+    line-height: 1;
+  }
+  .pc-stat-label {
+    font-size: 9px;
+    font-weight: 300;
+    color: rgba(255,255,255,0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .pc-bar-wrap {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .pc-bar {
+    display: flex;
+    height: 4px;
+    border-radius: 2px;
+    overflow: hidden;
+    gap: 2px;
+  }
+  .pc-seg { border-radius: 2px; min-width: 3px; }
+  .pc-bar-labels {
+    display: flex;
+    gap: 10px;
+  }
+  .pc-bar-label {
+    font-size: 9px;
+    font-weight: 300;
+    letter-spacing: 0.04em;
+  }
+
+  .pc-cta {
+    position: relative;
+    z-index: 1;
+    font-size: 11px;
+    font-weight: 400;
+    color: #a5b4fc;
+    letter-spacing: 0.04em;
+    padding-top: 4px;
+    border-top: 1px solid rgba(255,255,255,0.08);
+  }
+</style>
--- a/src/lib/timeline/TimelineCard.svelte
+++ b/src/lib/timeline/TimelineCard.svelte
@@ -42,7 +42,7 @@

      <!-- Trip badge — top-right of card, outside photo -->
      <span class="trip-badge trip-badge--{entry.tripType}">
-        {entry.tripType === 'solo' ? 'Solo' : 'Friends'}
+        {entry.tripType === 'solo' ? 'Solo' : entry.tripType === 'family' ? 'Family' : 'Friends'}
      </span>

      <!-- Photos -->
@@ -99,7 +99,7 @@

      <!-- Info bar -->
      <div class="card-info">
-        <span class="city">{entry.location.city}</span>
+        <span class="city">{entry.location.cities.join(', ')}</span>
        <div class="meta">
          {#if entry.transport}
            <span class="transport-chip transport-chip--{entry.transport}">
@@ -206,6 +206,7 @@
  }
  .trip-badge--solo    { background: rgba(245,158,11,0.85); color: #fff; }
  .trip-badge--friends { background: rgba(124,58,237,0.85); color: #fff; }
+  .trip-badge--family  { background: rgba(16,185,129,0.85); color: #fff; }

  /* ── Photo grid — fixed height, always consistent ── */
  .photo-grid {
--- a/src/lib/timeline/TimelineView.svelte
+++ b/src/lib/timeline/TimelineView.svelte
@@ -5,7 +5,9 @@
  import TimelineCard from './TimelineCard.svelte';
  import JournalDetail from './JournalDetail.svelte';
  import EditForm from './EditForm.svelte';
+  import NewEntryForm from './NewEntryForm.svelte';
  import ShareCard from './ShareCard.svelte';
+  import SharePreview from './SharePreview.svelte';

  let { onDetailChange = () => {}, pendingCountry = '', onNewEntryClear = () => {} } = $props();
  let selectedId = $state(/** @type {string|null} */(null));
@@ -53,7 +55,7 @@

  {#if view === 'new'}
    <div class="detail-scroll">
-      <EditForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} />
+      <NewEntryForm initialCountry={newEntryCountry} onBack={() => { view = 'list'; newEntryCountry = ''; onDetailChange(false); }} />
    </div>
  {:else if view === 'edit' && selected}
    <div class="detail-scroll">
@@ -69,34 +71,25 @@
    </div>
  {:else}
    <div class="right-panel">
-      <div class="right-inner">
+      <div class="center-col">
        <div class="page-header">
          <h1 class="page-title">My Journey</h1>
          <button class="new-btn" onclick={() => { view = 'new'; }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
              <path d="M12 5v14M5 12h14"/>
            </svg>
-            New entry
+            Add trip
          </button>
        </div>

-        <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
-
        {#if sortedEntries.length > 0}
-          <button class="share-nudge" onclick={() => (showShare = true)}>
-            <span class="nudge-left">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
-                <path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>
-              </svg>
-              Share your journey
-            </span>
-            <span class="nudge-right">
-              {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'} · save as PNG →
-            </span>
-          </button>
+          <div class="share-row">
+            <SharePreview entries={sortedEntries} onClick={() => (showShare = true)} />
+          </div>
        {/if}

+        <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
+
        {#if sortedEntries.length === 0}
          <p class="empty">No journal entries yet.</p>
        {:else}
@@ -122,7 +115,7 @@
        {/if}

        <footer class="page-footer">
-          {sortedEntries.length} {sortedEntries.length === 1 ? 'entry' : 'entries'}
+          {sortedEntries.length} {sortedEntries.length === 1 ? 'trip' : 'trips'}
        </footer>
      </div>
    </div>
@@ -144,16 +137,6 @@
    overflow: hidden;
  }

-  /* ── Left panel ── */
-  .left-panel {
-    width: 260px;
-    flex-shrink: 0;
-    overflow-y: auto;
-    border-right: 1px solid var(--border);
-    background: var(--bg-raised);
-    padding: 40px 28px;
-  }
-
  /* ── Right panel ── */
  .right-panel {
    flex: 1;
@@ -162,24 +145,23 @@
    background: var(--bg);
  }

-  /* Inner container with max-width + generous side padding */
-  .right-inner {
-    max-width: 640px;
+  /* ── Centered single column ── */
+  .center-col {
+    max-width: 680px;
+    width: 100%;
    margin: 0 auto;
-    padding: 40px 48px 80px;
+    padding: 48px 48px 80px;
+    box-sizing: border-box;
  }

-  /* ── Responsive: narrow viewport ── */
-  @media (max-width: 700px) {
-    .journal-page { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
-    .left-panel {
-      width: 100%;
-      border-right: none;
-      border-bottom: 1px solid var(--border);
-      padding: 24px 20px;
+  .share-row {
+    margin-bottom: 24px;
+  }
+
+  @media (max-width: 760px) {
+    .center-col {
+      padding: 32px 24px 60px;
    }
-    .right-panel { overflow-y: unset; }
-    .right-inner { padding: 24px 20px 60px; }
  }

  /* ── Detail view ── */
--- a/src/lib/world-map/JourneyView.svelte
+++ b/src/lib/world-map/JourneyView.svelte
@@ -0,0 +1,391 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import * as d3 from 'd3';
+  import { feature } from 'topojson-client';
+  import worldData from 'world-atlas/countries-50m.json';
+
+  let { onclose, onprogress } = $props();
+
+  const HOME_CODE = '203';
+
+  const MOCK_TRIPS = [
+    { countryName: 'Japan', countryCode: '392', date: '2024-03-15', city: 'Tokyo' },
+    { countryName: 'France', countryCode: '191', date: '2024-06-20', city: 'Paris' },
+    { countryName: 'Spain', countryCode: '724', date: '2024-09-10', city: 'Barcelona' },
+    { countryName: 'United States', countryCode: '840', date: '2025-01-05', city: 'New York' },
+    { countryName: 'Thailand', countryCode: '764', date: '2025-04-18', city: 'Bangkok' },
+    { countryName: 'Australia', countryCode: '036', date: '2025-08-22', city: 'Sydney' },
+  ];
+
+  const HOME_COLOR = '#8b5cf6';
+  const VISITED_COLOR = '#22c55e';
+  const ARC_COLOR = '#000000';
+  const PLANE_COLOR = '#7c3aed';
+  const PLANE_PATH = 'M14,0 L4,-3 L0,-7 L-3,-5 L0,-2 L-5,-1 L-9,-5 L-11,-4 L-7,0 L-11,4 L-9,5 L-5,1 L0,2 L-3,5 L0,7 L4,3 Z';
+  const UNVISITED = '#ffffff';
+
+  const TERRITORY_PARENT = {
+    '016': '840', '060': '826', '086': '826', '092': '826', '136': '826',
+    '184': '554', '234': '208', '238': '826', '239': '826', '248': '246',
+    '258': '250', '260': '250', '304': '208', '316': '840', '334': '036',
+    '446': '156', '500': '826', '531': '528', '533': '528', '534': '528',
+    '540': '250', '570': '554', '574': '036', '580': '840', '612': '826',
+    '630': '840', '652': '250', '654': '826', '660': '826', '663': '250',
+    '666': '250', '796': '826', '831': '826', '832': '826', '833': '826',
+    '850': '840', '876': '250',
+  };
+
+  function effId(d) {
+    return TERRITORY_PARENT[d.id] || d.id;
+  }
+
+  let frameEl;
+  let svg, g, pathFn, projection;
+  let countryPaths;
+  let homeFeature;
+  let featuresById = {};
+  let isCancelled = false;
+  let isPlaying = $state(false);
+  let isFinished = $state(false);
+
+  function fitProjection(proj, w, h) {
+    proj.fitSize([w, h], { type: 'Sphere' });
+    const s = proj.scale() * 1.5;
+    proj.scale(s).translate([w / 2, h * 0.70]);
+  }
+
+  function computeArc(p1, p2) {
+    const interp = d3.geoInterpolate(p1, p2);
+    const steps = 80;
+    const raw = [];
+
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      const geo = interp(t);
+      const pt = projection(geo);
+      if (!pt) continue;
+      raw.push({ t, x: pt[0], y: pt[1] });
+    }
+
+    if (raw.length < 2) return [];
+
+    const first = raw[0];
+    const last = raw[raw.length - 1];
+    const dx = last.x - first.x;
+    const dy = last.y - first.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const arcH = Math.max(40, Math.min(200, dist * 0.22));
+
+    return raw.map(p => [p.x, p.y - arcH * Math.sin(Math.PI * p.t)]);
+  }
+
+  function getAngleAtLength(node, len) {
+    const d = 0.5;
+    const total = node.getTotalLength();
+    const p1 = node.getPointAtLength(Math.max(0, len - d));
+    const p2 = node.getPointAtLength(Math.min(total, len + d));
+    return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+  }
+
+  function animateStroke(pathEl, tipEl, startOffset, endOffset, duration) {
+    return new Promise((resolve) => {
+      const node = pathEl.node();
+      if (!node) { resolve(); return; }
+      const totalLength = node.getTotalLength();
+
+      if (totalLength === 0) { resolve(); return; }
+
+      d3.timer(elapsed => {
+        if (isCancelled) { resolve(); return true; }
+
+        const t = Math.min(elapsed / duration, 1);
+        const offset = startOffset + (endOffset - startOffset) * t;
+
+        pathEl.attr('stroke-dashoffset', offset);
+
+        const drawn = totalLength - offset;
+        const clamped = Math.max(0, Math.min(drawn, totalLength));
+        try {
+          const pt = node.getPointAtLength(clamped);
+          const angle = getAngleAtLength(node, clamped);
+          tipEl.attr('transform', `translate(${pt.x}, ${pt.y}) rotate(${angle}) scale(1.4)`).attr('opacity', 1);
+        } catch (e) {
+          // ignore SVG errors
+        }
+
+        if (t >= 1) {
+          resolve();
+          return true;
+        }
+      });
+    });
+  }
+
+  function delay(ms) {
+    return new Promise(resolve => {
+      if (isCancelled) { resolve(); return; }
+      const id = setTimeout(resolve, ms);
+    });
+  }
+
+  async function animateTrip(destCode, destFeature) {
+    if (!homeFeature || !destFeature) return;
+
+    const homeCentroid = d3.geoCentroid(homeFeature);
+    const destCentroid = d3.geoCentroid(destFeature);
+
+    const pts = computeArc(homeCentroid, destCentroid);
+    if (pts.length < 2) return;
+
+    const lineGen = d3.line().curve(d3.curveBasis);
+    const pathData = lineGen(pts);
+
+    if (!pathData) return;
+
+    function createArc(pathData) {
+      const el = g.append('path')
+        .attr('d', pathData)
+        .attr('fill', 'none')
+        .attr('stroke', ARC_COLOR)
+        .attr('stroke-width', 2.5)
+        .attr('stroke-opacity', 0.8)
+        .attr('stroke-linecap', 'round');
+      const tip = g.append('path')
+        .attr('d', PLANE_PATH)
+        .attr('fill', PLANE_COLOR)
+        .attr('opacity', 0);
+      return { el, tip };
+    }
+
+    // --- Outbound: home -> dest ---
+    let { el: outEl, tip: outTip } = createArc(pathData);
+    const outLen = outEl.node().getTotalLength();
+    outEl.attr('stroke-dasharray', outLen).attr('stroke-dashoffset', outLen);
+
+    const homeDot = g.append('circle')
+      .attr('r', 4)
+      .attr('fill', PLANE_COLOR)
+      .attr('cx', pts[0][0])
+      .attr('cy', pts[0][1])
+      .attr('opacity', 1);
+
+    await animateStroke(outEl, outTip, outLen, 0, 2500);
+    if (isCancelled) return;
+
+    outEl.remove();
+    outTip.remove();
+    homeDot.remove();
+
+    // Color the destination country
+    const targetPath = countryPaths.filter(d => effId(d) === destCode);
+    targetPath.transition().duration(500).attr('fill', VISITED_COLOR);
+    g.selectAll('.micro-state-j')
+      .filter(d => effId(d) === destCode)
+      .transition().duration(500)
+      .attr('fill', VISITED_COLOR);
+
+    await delay(800);
+    if (isCancelled) return;
+
+    // --- Return: dest -> home ---
+    const revPts = [...pts].reverse();
+    const revData = d3.line().curve(d3.curveBasis)(revPts);
+    let { el: retEl, tip: retTip } = createArc(revData);
+    const retLen = retEl.node().getTotalLength();
+    retEl.attr('stroke-dasharray', retLen).attr('stroke-dashoffset', retLen);
+
+    const destDot = g.append('circle')
+      .attr('r', 4)
+      .attr('fill', PLANE_COLOR)
+      .attr('cx', revPts[0][0])
+      .attr('cy', revPts[0][1])
+      .attr('opacity', 1);
+
+    await animateStroke(retEl, retTip, retLen, 0, 2200);
+    if (isCancelled) return;
+
+    retEl.remove();
+    retTip.remove();
+    destDot.remove();
+
+    await delay(300);
+  }
+
+  async function startJourney() {
+    isPlaying = true;
+    isFinished = false;
+    isCancelled = false;
+
+    const trips = MOCK_TRIPS;
+    const total = trips.length;
+
+    for (let i = 0; i < total; i++) {
+      if (isCancelled) break;
+
+      const trip = trips[i];
+      const destFeature = featuresById[trip.countryCode];
+      if (!destFeature) continue;
+
+      const label = `${trip.city}, ${trip.countryName}`;
+      if (onprogress) onprogress({ index: i + 1, total, label });
+
+      await animateTrip(trip.countryCode, destFeature);
+    }
+
+    if (!isCancelled) {
+      isFinished = true;
+      isPlaying = false;
+      if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
+    } else {
+      isPlaying = false;
+    }
+  }
+
+  function stopJourney() {
+    isCancelled = true;
+    isPlaying = false;
+  }
+
+  onMount(() => {
+    const width = frameEl.clientWidth;
+    const height = frameEl.clientHeight;
+
+    projection = d3.geoMercator();
+    fitProjection(projection, width, height);
+
+    pathFn = d3.geoPath().projection(projection);
+
+    const countries = feature(worldData, worldData.objects.countries)
+      .features.filter(f => (f.id || f.properties.name === 'Kosovo') && f.id !== '010');
+
+    countries.forEach(f => {
+      if (!f.id) f.id = 'XK';
+    });
+
+    for (const f of countries) {
+      featuresById[effId(f)] = f;
+    }
+
+    homeFeature = featuresById[HOME_CODE];
+
+    svg = d3.select(frameEl)
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .style('cursor', 'default');
+
+    g = svg.append('g');
+
+    countryPaths = g.selectAll('path')
+      .data(countries)
+      .join('path')
+      .attr('d', pathFn)
+      .attr('fill', d => effId(d) === HOME_CODE ? HOME_COLOR : UNVISITED)
+      .attr('stroke', '#d4d4d4')
+      .attr('stroke-width', 0.5);
+
+    function renderMicrostates() {
+      g.selectAll('.micro-state-j').remove();
+      const threshold = 4;
+      countryPaths.each(function (d) {
+        if (effId(d) !== d.id) return;
+        const { width, height } = this.getBBox();
+        if (width < threshold && height < threshold) {
+          const [cx, cy] = pathFn.centroid(d);
+          g.append('circle')
+            .attr('class', 'micro-state-j')
+            .datum(d)
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('r', 2)
+            .attr('fill', effId(d) === HOME_CODE ? HOME_COLOR : UNVISITED)
+            .attr('stroke', '#94a3b8')
+            .attr('stroke-width', 0.5);
+        }
+      });
+    }
+
+    renderMicrostates();
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        svg.attr('width', width).attr('height', height);
+        fitProjection(projection, width, height);
+        countryPaths.attr('d', pathFn);
+        renderMicrostates();
+      }
+    });
+
+    observer.observe(frameEl);
+
+    startJourney();
+
+    return () => {
+      stopJourney();
+      observer.disconnect();
+      if (svg) svg.remove();
+    };
+  });
+</script>
+
+<div bind:this={frameEl} class="journey-frame">
+  <button class="close-btn" onclick={() => { stopJourney(); onclose?.(); }}>✕</button>
+  {#if isFinished}
+    <div class="done-badge">Journey complete!</div>
+  {/if}
+</div>
+
+<style>
+  .journey-frame {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    background: #a4c8e0;
+  }
+
+  .journey-frame :global(svg) {
+    display: block;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(0,0,0,0.55);
+    color: #fff;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s ease;
+  }
+
+  .close-btn:hover {
+    background: rgba(0,0,0,0.75);
+  }
+
+  .done-badge {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    background: rgba(0,0,0,0.65);
+    color: #fff;
+    font-family: var(--heading, sans-serif);
+    font-size: 16px;
+    padding: 10px 24px;
+    border-radius: 24px;
+    white-space: nowrap;
+    letter-spacing: 0.04em;
+  }
+</style>
--- a/src/lib/world-map/StatsPanel.svelte
+++ b/src/lib/world-map/StatsPanel.svelte
@@ -1,16 +1,16 @@
 <script>
  import { CONTINENTS, getContinent, continentTotals } from './continents.js';
-  import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
+  import { getSelected } from '../layout/selection.svelte.js';

-  let collapsed = $state(false);
+  let hoveredSeg = $state(null);

  const continentColors = {
-    'Europe': '#3b82f6',
-    'Asia': '#ef4444',
-    'Africa': '#f97316',
-    'N. America': '#22c55e',
-    'S. America': '#eab308',
-    'Oceania': '#a855f7'
+    'Europe': '#6366f1',
+    'Asia': '#f43f5e',
+    'Africa': '#fb923c',
+    'N. America': '#06b6d4',
+    'S. America': '#f59e0b',
+    'Oceania': '#8b5cf6'
  };

  let counts = $derived.by(() => {
@@ -36,11 +36,9 @@
      if (angle > 0) {
        const startDeg = deg;
        const endDeg = deg + angle;
-        const midDeg = (startDeg + endDeg) / 2;
-        const rad = (midDeg - 90) * Math.PI / 180;
        const sr = (startDeg - 90) * Math.PI / 180;
        const er = (endDeg - 90) * Math.PI / 180;
-        const cx = 90, cy = 90, outerR = 65, innerR = 30;
+        const cx = 50, cy = 50, outerR = 44, innerR = 22;
        const x1 = cx + outerR * Math.cos(sr);
        const y1 = cy + outerR * Math.sin(sr);
        const x2 = cx + outerR * Math.cos(er);
@@ -51,9 +49,7 @@
        const y4 = cy + innerR * Math.sin(sr);
        const largeArc = angle > 180 ? 1 : 0;
        const path = `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4} Z`;
-        const lx = cx + 82 * Math.cos(rad);
-        const ly = cy + 82 * Math.sin(rad);
-        segs.push({ cont, color: continentColors[cont], path, lx, ly, angle });
+        segs.push({ cont, color: continentColors[cont], path, angle });
        deg += angle;
      }
    }
@@ -61,247 +57,199 @@
  });
 </script>

-<div class="panel" class:collapsed>
-  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
-    {collapsed ? '◀' : '▶'}
-  </button>
+<div class="card">
+  <!-- count -->
+  <div class="stat-block">
+    <span class="big-num">{total}</span>
+    <span class="stat-sub">countries visited</span>
+  </div>

-  {#if !collapsed}
-    <div class="panel-content">
-      <h2 class="headline">your statistics</h2>
+  <div class="vdivider"></div>

-      <span class="bar-label">visited countries</span>
-      <div class="total-bar-wrap">
-        <div class="total-bar-bg">
-          <div class="total-bar-fill" style="width: {pct}%"></div>
+  <!-- world % -->
+  <div class="stat-block">
+    <span class="big-num accent">{pct}%</span>
+    <span class="stat-sub">of the world</span>
+  </div>
+
+  <div class="vdivider"></div>
+
+  <!-- donut -->
+  <div class="donut-block">
+    <svg viewBox="0 0 100 100" class="donut-svg">
+      {#if segments.length > 0}
+        {#each segments as seg}
+          <g class="seg-group"
+             onmouseenter={() => hoveredSeg = seg}
+             onmouseleave={() => hoveredSeg = null}>
+            <path d={seg.path} fill={seg.color} />
+          </g>
+        {/each}
+        <circle cx="50" cy="50" r="22" fill="#fff" />
+      {:else}
+        <circle cx="50" cy="50" r="44" fill="#f1f5f9" />
+        <circle cx="50" cy="50" r="22" fill="#fff" />
+      {/if}
+    </svg>
+
+    <div class="donut-info">
+      <span class="section-label">by continent</span>
+      {#if hoveredSeg}
+        <div class="tooltip" style="--dot:{hoveredSeg.color}">
+          <span class="tt-name">{hoveredSeg.cont}</span>
+          <span class="tt-val">{counts[hoveredSeg.cont]} / {continentTotals[hoveredSeg.cont]}</span>
        </div>
-        <span class="total-bar-text">{total} / {grandTotal}</span>
-      </div>
-
-      <div class="divider"></div>
-
-      <span class="bar-label">by continent</span>
-      {#each CONTINENTS as continent}
-        {@const contTotal = continentTotals[continent]}
-        <div class="row">
-          <span class="dot" style="background: {continentColors[continent]}"></span>
-          <span class="label">{continent}</span>
-          <span class="value">{counts[continent]}<span class="total">/{contTotal}</span></span>
-        </div>
-      {/each}
-
-      <div class="donut-wrap">
-        {#if segments.length > 0}
-          <svg viewBox="0 0 180 180" class="donut-svg">
-            {#each segments as seg}
-              <g class="seg-group">
-                <path d={seg.path} fill={seg.color} />
-                <text x={seg.lx} y={seg.ly} text-anchor="middle" dominant-baseline="middle" class="donut-label" style="font-size: {seg.angle < 20 ? 12 : 15}px">{seg.cont}</text>
-              </g>
-            {/each}
-            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
-          </svg>
-        {:else}
-          <svg viewBox="0 0 180 180" class="donut-svg">
-            <circle cx="90" cy="90" r="65" fill="var(--border)" />
-            <circle cx="90" cy="90" r="30" fill="var(--bg-raised)" />
-          </svg>
-        {/if}
-      </div>
-
-      <div class="divider"></div>
-
-      <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
+      {:else}
+        <span class="hint">hover a slice</span>
+      {/if}
    </div>
-  {/if}
+  </div>
+
+  <div class="vdivider"></div>
+
+  <!-- progress bar -->
+  <div class="bar-block">
+      <span class="section-label" style="margin-bottom:6px">world coverage</span>
+    <div class="bar-bg">
+      <div class="bar-fill" style="width:{pct}%"></div>
+    </div>
+    <span class="disclaimer">All UN countries · Kosovo · HK · Taiwan</span>
+  </div>
 </div>

 <style>
-  .panel {
-    flex: 0 0 min(360px, 25vw);
-    background: var(--bg-raised);
-    border-left: 1px solid var(--border);
+  .card {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
+    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: row;
+    align-items: center;
+    gap: 0;
+    padding: 0 4px;
+    height: 110px;
+    z-index: 10;
    font-family: var(--sans);
-    transition: flex-basis 0.25s ease;
+    white-space: nowrap;
  }

-  .panel.collapsed {
-    flex: 0 0 28px;
-    border-left: none;
+  .stat-block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0 36px;
  }

-  .panel-content {
-    flex: 1;
-    padding: 24px 28px;
-    overflow-y: auto;
-    min-width: 0;
-  }
-
-  .collapse-btn {
-    flex: 0 0 auto;
-    align-self: flex-start;
-    background: var(--accent-bg);
-    border: none;
-    border-radius: 0 8px 8px 0;
-    padding: 14px 5px;
-    cursor: pointer;
-    font-size: 16px;
+  .big-num {
+    font-size: 40px;
+    font-weight: 300;
+    letter-spacing: -2px;
+    color: var(--text-h);
    line-height: 1;
-    color: var(--accent);
-    transition: background 0.15s ease, padding 0.15s ease;
-    margin-top: 24px;
-    position: relative;
  }
+  .big-num.accent { color: var(--accent); }

-  .collapse-btn:hover {
-    background: var(--lavender-bg);
-    padding-right: 8px;
-  }
-
-  .collapse-btn::after {
-    content: attr(data-tip);
-    position: absolute;
-    right: calc(100% + 8px);
-    top: 50%;
-    transform: translateY(-50%);
-    background: var(--text-h);
-    color: var(--bg-raised);
-    font-family: var(--sans);
+  .stat-sub {
    font-size: 12px;
    font-weight: 300;
-    padding: 6px 12px;
-    border-radius: 6px;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-  }
-
-  .collapse-btn:hover::after {
-    opacity: 1;
-  }
-
-  .headline {
-    font-family: var(--heading);
-    font-size: var(--text-sm);
-    font-weight: 400;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--accent);
-    margin: 0 0 20px 0;
-  }
-
-  .bar-label {
-    font-family: var(--sans);
-    font-size: var(--text-xs);
-    font-weight: 400;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
    color: var(--text-sub);
-    display: block;
-    margin-bottom: 8px;
+    letter-spacing: 0.03em;
  }

-  .total-bar-wrap {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 4px;
-  }
-
-  .total-bar-bg {
-    flex: 1;
-    height: 18px;
-    background: var(--accent-bg);
-    border-radius: 10px;
-    overflow: hidden;
-  }
-
-  .total-bar-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--accent-dark), var(--lavender));
-    border-radius: 10px;
-    transition: width 0.3s ease;
-    min-width: 0;
-  }
-
-  .total-bar-text {
-    font-size: var(--text-sm);
-    font-weight: 400;
-    color: var(--text-h);
-    white-space: nowrap;
-  }
-
-  .divider {
-    height: 1px;
+  .vdivider {
+    width: 1px;
+    height: 56px;
    background: var(--border);
-    margin: 16px 0;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 0;
-  }
-
-  .dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
    flex-shrink: 0;
  }

-  .label {
-    flex: 1;
-    font-size: var(--text-sm);
-    font-weight: 300;
-    color: var(--text);
-  }
-
-  .value {
-    font-size: var(--text-sm);
-    font-weight: 400;
-    color: var(--text-h);
-  }
-
-  .total {
-    font-weight: 400;
-    color: var(--text-sub);
-    font-size: var(--text-xs);
-  }
-
-  .donut-wrap {
+  /* donut */
+  .donut-block {
    display: flex;
-    justify-content: center;
-    margin: 20px 0;
+    flex-direction: row;
+    align-items: center;
+    gap: 14px;
+    padding: 0 28px;
  }
-
  .donut-svg {
-    width: 160px;
-    height: 160px;
-    filter: drop-shadow(0 2px 8px rgba(99,102,241,0.15));
+    width: 72px;
+    height: 72px;
+    flex-shrink: 0;
+  }
+  .seg-group { cursor: pointer; }
+  .seg-group:hover path { opacity: 0.8; }
+
+  .donut-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 130px;
  }

-  .donut-label {
-    fill: var(--text-h);
-    font-family: var(--sans);
-    font-weight: 300;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.15s ease;
+  .tooltip {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 13px;
  }
-
-  .seg-group:hover .donut-label {
-    opacity: 1;
+  .tooltip::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dot);
+    flex-shrink: 0;
  }
+  .tt-name { font-weight: 400; color: var(--text-h); }
+  .tt-val  { font-weight: 300; color: var(--text-sub); }

-  .disclaimer {
-    font-size: var(--text-xs);
+  .section-label {
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
    color: var(--text-sub);
-    line-height: 1.5;
-    text-align: center;
+  }
+
+  .hint {
+    font-size: 12px;
+    color: var(--text-sub);
+    opacity: 0.45;
+  }
+
+  /* bar */
+  .bar-block {
+    display: flex;
+    flex-direction: column;
+    padding: 0 28px;
+    gap: 0;
+    min-width: 160px;
+  }
+  .bar-bg {
+    width: 100%;
+    height: 5px;
+    background: var(--bg-subtle);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+  .bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), #a78bfa);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+    min-width: 0;
+  }
+  .disclaimer {
+    font-size: 11px;
+    color: var(--text-sub);
+    opacity: 0.5;
+    letter-spacing: 0.02em;
  }
 </style>
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -3,26 +3,78 @@
  import * as d3 from 'd3';
  import { feature } from 'topojson-client';
  import worldData from 'world-atlas/countries-50m.json';
-  import { getSelected, toggle, setTotalCount } from '../layout/selection.svelte.js';
+  import { getSelected, toggle, setTotalCount, getHomeCountryCode } from '../layout/selection.svelte.js';

  let { onCountryClick = (_name) => {} } = $props();

  const TERRITORY_PARENT = {
-    '016': '840', '060': '826', '086': '826', '092': '826', '136': '826',
-    '184': '554', '234': '208', '238': '826', '239': '826', '248': '246',
-    '258': '250', '260': '250', '304': '208', '316': '840', '334': '036',
-    '446': '156', '500': '826', '531': '528', '533': '528', '534': '528',
-    '540': '250', '570': '554', '574': '036', '580': '840', '612': '826',
-    '630': '840', '652': '250', '654': '826', '660': '826', '663': '250',
-    '666': '250', '796': '826', '831': '826', '832': '826', '833': '826',
-    '850': '840', '876': '250',
+    '016': '840', // American Samoa -> United States
+    '060': '826', // Bermuda -> United Kingdom
+    '086': '826', // Br. Indian Ocean Ter. -> United Kingdom
+    '092': '826', // British Virgin Is. -> United Kingdom
+    '136': '826', // Cayman Is. -> United Kingdom
+    '184': '554', // Cook Is. -> New Zealand
+    '234': '208', // Faeroe Is. -> Denmark
+    '238': '826', // Falkland Is. -> United Kingdom
+    '239': '826', // S. Geo. and the Is. -> United Kingdom
+    '248': '246', // Aland -> Finland
+    '258': '250', // Fr. Polynesia -> France
+    '260': '250', // Fr. S. Antarctic Lands -> France
+    '304': '208', // Greenland -> Denmark
+    '316': '840', // Guam -> United States
+    '334': '036', // Heard I. and McDonald Is. -> Australia
+    '446': '156', // Macao -> China
+    '500': '826', // Montserrat -> United Kingdom
+    '531': '528', // Curacao -> Netherlands
+    '533': '528', // Aruba -> Netherlands
+    '534': '528', // Sint Maarten -> Netherlands
+    '540': '250', // New Caledonia -> France
+    '570': '554', // Niue -> New Zealand
+    '574': '036', // Norfolk Island -> Australia
+    '580': '840', // N. Mariana Is. -> United States
+    '612': '826', // Pitcairn Is. -> United Kingdom
+    '630': '840', // Puerto Rico -> United States
+    '652': '250', // St-Barthelemy -> France
+    '654': '826', // Saint Helena -> United Kingdom
+    '660': '826', // Anguilla -> United Kingdom
+    '663': '250', // St-Martin -> France
+    '666': '250', // St. Pierre and Miquelon -> France
+    '796': '826', // Turks and Caicos Is. -> United Kingdom
+    '831': '826', // Guernsey -> United Kingdom
+    '832': '826', // Jersey -> United Kingdom
+    '833': '826', // Isle of Man -> United Kingdom
+    '850': '840', // U.S. Virgin Is. -> United States
+    '876': '250', // Wallis and Futuna Is. -> France
  };

  function effId(d) {
    return TERRITORY_PARENT[d.id] || d.id;
  }

+  const HOME_COLOR = '#8b5cf6';
+  const HOME_COLOR_HOVER = '#7c3aed';
+  const VISITED_COLOR = '#22c55e';
+  const VISITED_COLOR_HOVER = '#16a34a';
+  const UNVISITED_COLOR = '#ffffff';
+  const UNVISITED_COLOR_HOVER = '#f0f6fa';
+
+  function countryColor(d, sel, homeCode) {
+    const id = effId(d);
+    if (!sel.has(id)) return UNVISITED_COLOR;
+    if (id === homeCode) return HOME_COLOR;
+    return VISITED_COLOR;
+  }
+
+  function countryHoverColor(d, sel, homeCode) {
+    const id = effId(d);
+    if (!sel.has(id)) return UNVISITED_COLOR_HOVER;
+    if (id === homeCode) return HOME_COLOR_HOVER;
+    return VISITED_COLOR_HOVER;
+  }
+
  let frameEl;
+  let _paths = null;
+  let _g = null;

  function fitProjection(proj, w, h) {
    proj.fitSize([w, h], { type: 'Sphere' });
@@ -30,6 +82,16 @@
    proj.scale(s).translate([w / 2, h * 0.70]);
  }

+  function updateAllFills() {
+    const sel = getSelected();
+    const hc = getHomeCountryCode();
+    if (!_paths || !_g) return;
+    _paths.attr('fill', d => countryColor(d, sel, hc));
+    _g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
+  }
+
+  $effect(updateAllFills);
+
  onMount(() => {
    const width = frameEl.clientWidth;
    const height = frameEl.clientHeight;
@@ -42,19 +104,30 @@
    const countries = feature(worldData, worldData.objects.countries)
      .features.filter(f => (f.id || f.properties.name === 'Kosovo') && f.id !== '010');

-    countries.forEach(f => { if (!f.id) f.id = 'XK'; });
+    countries.forEach(f => {
+      if (!f.id) f.id = 'XK';
+    });

    const sovereignIds = new Set(countries.map(f => effId(f)));
    setTotalCount(sovereignIds.size);

-    const svg = d3.select(frameEl).append('svg').attr('width', width).attr('height', height);
-    const g = svg.append('g');
+    const svg = d3.select(frameEl)
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height);

-    const tooltip = d3.select(frameEl).append('div').attr('class', 'tooltip').style('display', 'none');
+    _g = svg.append('g');
+
+    const tooltip = d3.select(frameEl)
+      .append('div')
+      .attr('class', 'tooltip')
+      .style('display', 'none');

    function updateFill(sel) {
-      sel.attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
-      g.selectAll('.micro-state').attr('fill', d => getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
+      const s = getSelected();
+      const hc = getHomeCountryCode();
+      sel.attr('fill', d => countryColor(d, s, hc));
+      _g.selectAll('.micro-state').attr('fill', d => countryColor(d, s, hc));
    }

    function attachEvents(sel) {
@@ -65,7 +138,9 @@
          onCountryClick(d.properties.name);
        })
        .on('mouseenter', (event, d) => {
-          d3.select(event.currentTarget).attr('fill', getSelected().has(effId(d)) ? '#16a34a' : '#f0f6fa');
+          const s = getSelected();
+          const hc = getHomeCountryCode();
+          d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, hc));
          tooltip.style('display', 'block').text(d.properties.name);
        })
        .on('mousemove', (event) => {
@@ -73,27 +148,40 @@
          tooltip.style('left', (x + 10) + 'px').style('top', (y - 28) + 'px');
        })
        .on('mouseleave', (event, d) => {
-          d3.select(event.currentTarget).attr('fill', getSelected().has(effId(d)) ? '#22c55e' : '#ffffff');
+          const s = getSelected();
+          const hc = getHomeCountryCode();
+          d3.select(event.currentTarget).attr('fill', countryColor(d, s, hc));
          tooltip.style('display', 'none');
        });
    }

-    const paths = g.selectAll('path').data(countries).join('path')
-      .attr('d', path).attr('fill', '#ffffff').attr('stroke', '#d4d4d4').attr('stroke-width', 0.5);
-    attachEvents(paths);
+    _paths = _g.selectAll('path')
+      .data(countries)
+      .join('path')
+      .attr('d', path)
+      .attr('fill', '#ffffff')
+      .attr('stroke', '#d4d4d4')
+      .attr('stroke-width', 0.5);
+    attachEvents(_paths);

    function renderMicrostates() {
-      g.selectAll('.micro-state').remove();
+      _g.selectAll('.micro-state').remove();
      const threshold = Math.max(4, 16 / d3.zoomTransform(svg.node()).k);
-      paths.each(function (d) {
+      _paths.each(function (d) {
        if (effId(d) !== d.id) return;
        const { width, height } = this.getBBox();
        if (width < threshold && height < threshold) {
          const [cx, cy] = path.centroid(d);
-          const c = g.append('circle').attr('class', 'micro-state').datum(d)
-            .attr('cx', cx).attr('cy', cy).attr('r', 2)
-            .attr('fill', getSelected().has(effId(d)) ? '#22c55e' : '#ffffff')
-            .attr('stroke', '#94a3b8').attr('stroke-width', 0.5);
+          const hc = getHomeCountryCode();
+          const c = _g.append('circle')
+            .attr('class', 'micro-state')
+            .datum(d)
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('r', 2)
+            .attr('fill', countryColor(d, getSelected(), hc))
+            .attr('stroke', '#94a3b8')
+            .attr('stroke-width', 0.5);
          attachEvents(c);
        }
      });
@@ -101,12 +189,15 @@

    renderMicrostates();

-    const zoom = d3.zoom().scaleExtent([1, 32]).on('zoom', (event) => {
-      g.attr('transform', event.transform);
-      renderMicrostates();
-    });
+    const zoom = d3.zoom()
+      .scaleExtent([1, 32])
+      .on('zoom', (event) => {
+        _g.attr('transform', event.transform);
+        renderMicrostates();
+      });

    svg.call(zoom);
+
    svg.on('dblclick.zoom', null);
    svg.on('dblclick', (event) => {
      const [x, y] = d3.pointer(event);
@@ -118,7 +209,7 @@
        const { width, height } = entry.contentRect;
        svg.attr('width', width).attr('height', height);
        fitProjection(projection, width, height);
-        const countryPaths = g.selectAll('path');
+        const countryPaths = _g.selectAll('path');
        countryPaths.attr('d', path);
        updateFill(countryPaths);
        renderMicrostates();
@@ -145,9 +236,18 @@
    background: #a4c8e0;
  }

-  .map-frame :global(svg) { display: block; cursor: grab; }
-  .map-frame :global(svg:active) { cursor: grabbing; }
-  .map-frame :global(svg path) { cursor: pointer; }
+  .map-frame :global(svg) {
+    display: block;
+    cursor: grab;
+  }
+
+  .map-frame :global(svg:active) {
+    cursor: grabbing;
+  }
+
+  .map-frame :global(svg path) {
+    cursor: pointer;
+  }

  .map-frame :global(.tooltip) {
    position: absolute;
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'

-// https://vite.dev/config/
 export default defineConfig({
  plugins: [svelte()],
 })
Author	SHA1	Message	Date
haerikimmm	06e5fe5593	feat: add transport image icons and expand country list to match world map	2026-06-15 19:54:45 +09:00
haerikimmm	dd7932ea4e	feat: Firebase integration, 3-step new trip form, full country list, and UI polish - Connect Firestore for journal entries and visited countries (real-time onSnapshot) - Connect Firebase Storage for photo uploads - Add NewEntryForm: 3-step flow (trip details → photos → reflection questions) - Expand country list to full world-atlas dataset (~240 countries) matching the map - Filter city suggestions by selected country in both NewEntryForm and EditForm - Redesign StatsPanel as floating horizontal card with donut chart and progress bar - Center timeline layout with responsive side margins - Replace "entry" language with "trip" throughout (Add trip, Save trip, Delete trip) - Remove footer from Layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-15 19:54:45 +09:00
haerikimmm	40e75f30e8	changed to centered layout	2026-06-15 19:50:13 +09:00
Tomas Horsky	965f677368	fix after merge	2026-06-15 12:35:57 +09:00
Tomas Horsky	611cc0b626	Merge branch 'feature/timeline' into main	2026-06-15 12:29:36 +09:00
Tomas Horsky	70352be01b	animation plane shape	2026-06-15 12:14:57 +09:00
Tomas Horsky	bd001a71fa	add jurney animation	2026-06-15 00:06:10 +09:00
Tomas Horsky	c9c94d670f	Merge feature/timeline into main	2026-06-12 20:06:25 +09:00
Tomas Horsky	f198c05063	display home country in map	2026-06-12 19:19:20 +09:00
Tomas Horsky	6701398da7	add saving countries	2026-06-12 18:20:00 +09:00
Tomas Horsky	08d3e3ae56	add firebase and sign up	2026-06-12 18:19:45 +09:00
Tomas Horsky	cd682f738a	make stats panel colabseble	2026-06-10 22:56:56 +09:00
Tomas Horsky	5356c05654	finished merging	2026-06-09 16:54:31 +09:00
Tomas Horsky	640c241e1c	Merge branch 'feature/timeline'	2026-06-09 16:50:37 +09:00
Tomas Horsky	e62b68ede6	small visual changes	2026-06-09 16:18:37 +09:00
Tomas Horsky	65e16f3502	add side stats panel	2026-06-09 15:56:01 +09:00
Tomas Horsky	8976b94c41	add app layout	2026-06-08 22:26:35 +09:00
Tomas Horsky	7a2d488f9c	coloring map, first version	2026-06-03 01:08:11 +09:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>