Wow thats actually awesome and perfectly nice and small code use, i like it. This is just a little help with the map part :
Paste this line inside your hub-bar div at line 279
<button class="hud-btn" id="mapBtn">Map</button>
Paste this code in after the map-legend div at line 503
<!-- ══ MAP MODAL ══ -->
<div id="mapModal" class="modal-overlay" hidden>
<div class="modal-box">
<div class="modal-header">
<span class="modal-title">Region Map</span>
<button class="close-icon-btn" onclick="mapModal.hidden=true">×</button>
</div>
<div class="modal-body">
<div style="width:100%; border:1px solid var(--border); border-radius:2px; overflow:hidden; background:#0e1c2e; margin-bottom:15px; box-shadow:0 0 20px rgba(0,0,0,0.5);">
<svg viewBox="0 0 248 186" xmlns="http://www.w3.org/2000/svg" style="width:100%; height:auto; display:block;">
<rect width="248" height="186" fill="#0e1c2e"/>
<path d="M10,186 L10,50 Q30,30 60,40 Q80,20 120,30 Q160,15 200,35 Q230,30 248,50 L248,186 Z" fill="#142010" opacity="0.9"/>
<ellipse cx="70" cy="100" rx="40" ry="30" fill="#0e1a0a" opacity="0.8"/>
<ellipse cx="110" cy="85" rx="30" ry="22" fill="#0e1a0a" opacity="0.7"/>
<ellipse cx="150" cy="105" rx="35" ry="25" fill="#0e1a0a" opacity="0.8"/>
<path d="M124,176 Q124,140 120,110 Q118,90 100,75 Q80,60 60,50" stroke="#2a2416" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M124,176 Q128,140 140,110 Q158,85 180,70 Q200,58 220,60" stroke="#2a2416" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M0,80 Q40,90 80,85 Q100,82 120,95 Q140,108 160,100 Q200,88 248,100" stroke="#1a2d44" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.9"/>
<path d="M0,80 Q40,90 80,85 Q100,82 120,95 Q140,108 160,100 Q200,88 248,100" stroke="#1d3550" stroke-width="2" fill="none" stroke-linecap="round"/>
<rect x="111" y="162" width="10" height="8" rx="1" fill="#3a3020"/>
<polygon points="116,156 108,162 124,162" fill="#4a3a28"/>
<rect x="53" y="64" width="8" height="8" rx="1" fill="#2a2018"/>
<polygon points="185,58 178,72 192,72" fill="#2a2030" opacity="0.8"/>
<rect x="180" y="72" width="10" height="4" rx="1" fill="#2a2030"/>
<circle cx="124" cy="155" r="5" fill="none" stroke="#c9a55e" stroke-width="1.5"/>
<circle cx="124" cy="155" r="2" fill="#c9a55e"/>
<circle cx="124" cy="155" r="8" fill="none" stroke="#c9a55e" stroke-width="0.5" opacity="0.4"/>
<circle cx="57" cy="60" r="3" fill="#6a5a30" opacity="0.8"/>
<circle cx="186" cy="62" r="3" fill="#3a3060" opacity="0.8"/>
<circle cx="115" cy="160" r="3" fill="#504030" opacity="0.9"/>
<ellipse cx="30" cy="150" rx="25" ry="30" fill="#0e1c2e" opacity="0.6"/>
<ellipse cx="220" cy="155" rx="30" ry="25" fill="#0e1c2e" opacity="0.5"/>
<rect width="248" height="186" fill="none" stroke="#3a2f52" stroke-width="1.5" rx="1"/>
<g transform="translate(226,20)">
<line x1="0" y1="-10" x2="0" y2="10" stroke="#3a3020" stroke-width="0.8"/>
<line x1="-10" y1="0" x2="10" y2="0" stroke="#3a3020" stroke-width="0.8"/>
<polygon points="0,-10 -3,-5 3,-5" fill="#c9a55e" opacity="0.8"/>
<text x="0" y="-12" text-anchor="middle" font-family="serif" font-size="6" fill="#8a7f6a">N</text>
</g>
</svg>
</div>
<div class="map-legend" style="justify-content:center;">
<div class="legend-item"><div class="legend-dot" style="background:#c9a55e"></div>You (Current Location)</div>
<div class="legend-item"><div class="legend-dot" style="background:#6a5a30"></div>Old Mill</div>
<div class="legend-item"><div class="legend-dot" style="background:#3a3060"></div>Shrine</div>
<div class="legend-item"><div class="legend-dot" style="background:#504030"></div>Village</div>
</div>
<div style="text-align:center; margin-top:15px; font-family:var(--serif); font-size:13px; color:var(--text-dim); font-style:italic;">
The forest stretches endlessly to the North.
</div>
</div>
</div>
</div>
And paste this script after function addLoreEntry at 898 and before Local Storage
// ── Map Button Function ───────────────────────────────────────────────
mapBtn.onclick = function() {
mapModal.hidden = false;
};