diff --git a/src/lib/world-map/StatsPanel.svelte b/src/lib/world-map/StatsPanel.svelte
index aa9050a..f336326 100644
--- a/src/lib/world-map/StatsPanel.svelte
+++ b/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,51 +61,59 @@
   });
 </script>
 
-<div class="panel">
-  <h2 class="headline">your statistics</h2>
+<div class="panel" class:collapsed>
+  <button class="collapse-btn" onclick={() => collapsed = !collapsed} data-tip={collapsed ? 'see statistics' : 'close statistics'}>
+    {collapsed ? '◀' : '▶'}
+  </button>
 
-  <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>
+  {#if !collapsed}
+    <div class="panel-content">
+      <h2 class="headline">your statistics</h2>
+
+      <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>
+        </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="#f8fafc" />
+          </svg>
+        {:else}
+          <svg viewBox="0 0 180 180" class="donut-svg">
+            <circle cx="90" cy="90" r="65" fill="#e2e8f0" />
+            <circle cx="90" cy="90" r="30" fill="#f8fafc" />
+          </svg>
+        {/if}
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</div>
     </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 ? 7 : 9}px">{seg.cont}</text>
-          </g>
-        {/each}
-        <circle cx="90" cy="90" r="30" fill="#f8fafc" />
-      </svg>
-    {:else}
-      <svg viewBox="0 0 180 180" class="donut-svg">
-        <circle cx="90" cy="90" r="65" fill="#e2e8f0" />
-        <circle cx="90" cy="90" r="30" fill="#f8fafc" />
-      </svg>
-    {/if}
-  </div>
-
-  <div class="divider"></div>
-
-  <div class="disclaimer">Contains all UN countries, Kosovo, Hong Kong and Taiwan</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 {