make stats panel colabseble

src/lib/world-map/StatsPanel.svelte

@@ -2,6 +2,8 @@
   import { CONTINENTS, getContinent, continentTotals } from './continents.js';
   import { getSelected, getTotalCount } from '../layout/selection.svelte.js';
 
+  let collapsed = $state(false);
+
   const continentColors = {
     'Europe': '#3b82f6',
     'Asia': '#ef4444',
@@ -30,7 +32,7 @@
     const segs = [];
     let deg = 0;
     for (const cont of CONTINENTS) {
-      const angle = counts[cont] / total * 360;
+      const angle = Math.min(counts[cont] / total * 360, 359.99);
       if (angle > 0) {
         const startDeg = deg;
         const endDeg = deg + angle;
@@ -59,7 +61,13 @@
   });
 </script>
 
-<div class="panel">
+<div class="panel" class:collapsed>
+  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
+    {collapsed ? '◀' : '▶'}
+  </button>
+
+  {#if !collapsed}
+    <div class="panel-content">
       <h2 class="headline">your statistics</h2>
 
       <span class="bar-label">visited countries</span>
@@ -88,7 +96,7 @@
             {#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 ? 7 : 9}px">{seg.cont}</text>
+                <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="#f8fafc" />
@@ -104,6 +112,8 @@
       <div class="divider"></div>
 
       <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -111,9 +121,65 @@
     flex: 0 0 min(360px, 25vw);
     background: #f8fafc;
     border-left: 1px solid #dce8f0;
+    display: flex;
+    flex-direction: row;
+    font-family: sans-serif;
+    transition: flex-basis 0.25s ease;
+  }
+
+  .panel.collapsed {
+    flex: 0 0 28px;
+    border-left: none;
+  }
+
+  .panel-content {
+    flex: 1;
     padding: 24px 28px;
     overflow-y: auto;
-    font-family: sans-serif;
+    min-width: 0;
+  }
+
+  .collapse-btn {
+    flex: 0 0 auto;
+    align-self: flex-start;
+    background: #e2e8f0;
+    border: none;
+    border-radius: 0 8px 8px 0;
+    padding: 14px 5px;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    color: #1e293b;
+    transition: background 0.15s ease, padding 0.15s ease;
+    margin-top: 24px;
+    position: relative;
+  }
+
+  .collapse-btn:hover {
+    background: #94a3b8;
+    padding-right: 8px;
+  }
+
+  .collapse-btn::after {
+    content: attr(data-tip);
+    position: absolute;
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+    background: #1e293b;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    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 {