Add mobile sidebar toggle and live map link in README

Collapsible sidebar on screens <=768px with a hamburger toggle
button. Starts collapsed on mobile so the map is usable.
Add link to the live map at the top of the README.

Author: robertmeta

README.md

@@ -6,6 +6,8 @@
 
 Interactive, spoiler-free map of [The Wandering Inn](https://wanderinginn.com) web serial. Explore Innworld as you read — the map reveals locations only as they appear in the story.
 
+**[View the live map](https://intelligrit.com/the-wandering-inn-map/)**
+
 ## Features
 
 - **Spoiler-free chapter slider** — set your reading progress and the map only shows what you've encountered so far

internal/web/static/app.css

@@ -199,6 +199,10 @@ body {
   background: #1a3a5c;
 }
 
+#sidebar-toggle {
+  display: none;
+}
+
 #sidebar {
   width: 300px;
   background: #16213e;
@@ -207,6 +211,50 @@ body {
   padding: 12px;
 }
 
+@media (max-width: 768px) {
+  #sidebar-toggle {
+    display: block;
+    position: absolute;
+    top: auto;
+    bottom: 16px;
+    right: 16px;
+    z-index: 1000;
+    background: #16213e;
+    color: #e0e0e0;
+    border: 1px solid #0f3460;
+    border-radius: 6px;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
+    line-height: 1;
+  }
+
+  #sidebar-toggle:hover {
+    background: #1a1a3e;
+  }
+
+  #map-container {
+    position: relative;
+  }
+
+  #sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 280px;
+    z-index: 999;
+    box-shadow: -4px 0 12px rgba(0,0,0,0.4);
+    transition: transform 0.2s ease;
+  }
+
+  #sidebar.collapsed {
+    transform: translateX(100%);
+  }
+}
+
 #sidebar h2 {
   font-size: 18px;
   margin-bottom: 4px;

internal/web/static/app.js

@@ -1072,4 +1072,22 @@ function distToSegment(p, a, b) {
   return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
 }
 
+// Sidebar toggle for mobile
+(function () {
+  const toggle = document.getElementById('sidebar-toggle');
+  const sidebar = document.getElementById('sidebar');
+  if (!toggle || !sidebar) return;
+
+  // Start collapsed on mobile
+  if (window.innerWidth <= 768) {
+    sidebar.classList.add('collapsed');
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+
+  toggle.addEventListener('click', () => {
+    const collapsed = sidebar.classList.toggle('collapsed');
+    toggle.setAttribute('aria-expanded', String(!collapsed));
+  });
+})();
+
 init();

internal/web/static/index.html

@@ -52,6 +52,7 @@ <h1>The Wandering Inn <span class="title-sep">&mdash;</span> <span class="title-
 
   <div id="map-container" role="main">
     <div id="map" role="application" aria-label="Interactive map of Innworld locations. Tab through markers to explore, or use the sidebar location list." aria-roledescription="interactive map"></div>
+    <button id="sidebar-toggle" aria-label="Toggle location list" aria-expanded="true">&#9776;</button>
     <aside id="sidebar" aria-label="Location list">
       <h2>Locations</h2>
       <input type="search" id="location-search" placeholder="Search locations..." aria-label="Search locations">