burn: add export/import save and keyboard shortcut help overlay (#47)

- Export button copies save JSON to clipboard
- Import button prompts for pasted save data, validates, and reloads
- Press ? to toggle hotkey overlay showing all keyboard shortcuts
- Press Escape to close the overlay
- Styling matches the existing cyber-monastic aesthetic

game.js

@@ -2131,6 +2131,65 @@ function saveGame() {
     showSaveToast();
 }
 
+
+// === EXPORT / IMPORT ===
+function exportSave() {
+    const raw = localStorage.getItem('the-beacon-v2');
+    if (!raw) { log('No save data to export.'); return; }
+    navigator.clipboard.writeText(raw).then(() => {
+        log('Save data copied to clipboard.');
+        showExportToast('Save copied to clipboard');
+    }).catch(() => {
+        // Fallback: select in a temporary textarea
+        const ta = document.createElement('textarea');
+        ta.value = raw;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        log('Save data copied to clipboard (fallback).');
+        showExportToast('Save copied to clipboard');
+    });
+}
+
+function importSave() {
+    const input = prompt('Paste save data:');
+    if (!input || !input.trim()) return;
+    try {
+        const data = JSON.parse(input.trim());
+        // Validate: must have expected keys
+        if (typeof data.code !== 'number' || typeof data.phase !== 'number') {
+            log('Invalid save data: missing required fields.');
+            return;
+        }
+        localStorage.setItem('the-beacon-v2', input.trim());
+        log('Save data imported. Reloading...');
+        showExportToast('Save imported — reloading');
+        setTimeout(() => location.reload(), 800);
+    } catch (e) {
+        log('Invalid save data: not valid JSON.');
+    }
+}
+
+function showExportToast(msg) {
+    const el = document.getElementById('save-toast');
+    if (!el) return;
+    el.textContent = msg;
+    el.style.display = 'block';
+    requestAnimationFrame(() => { el.style.opacity = '1'; });
+    setTimeout(() => {
+        el.style.opacity = '0';
+        setTimeout(() => { el.style.display = 'none'; }, 500);
+    }, 2000);
+}
+
+function toggleHotkeyHelp() {
+    const el = document.getElementById('hotkey-overlay');
+    if (!el) return;
+    el.style.display = el.style.display === 'flex' ? 'none' : 'flex';
+}
+
+
 function loadGame() {
     const raw = localStorage.getItem('the-beacon-v2');
     if (!raw) return false;
@@ -2308,4 +2367,12 @@ window.addEventListener('keydown', function (e) {
         else setBuyAmount(1);
     }
     if (e.code === 'KeyS') activateSprint();
+    if (e.code === 'Slash' && e.shiftKey) {
+        e.preventDefault();
+        toggleHotkeyHelp();
+    }
+    if (e.code === 'Escape') {
+        const el = document.getElementById('hotkey-overlay');
+        if (el) el.style.display = 'none';
+    }
 });

index.html

@@ -131,6 +131,11 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
 </div>
 <div id="alignment-ui" style="display:none"></div>
 <button class="save-btn" onclick="saveGame()">Save Game</button>
+<div style="display:flex;gap:4px;margin-top:4px">
+<button class="save-btn" onclick="exportSave()" style="flex:1" title="Copy save to clipboard">Export</button>
+<button class="save-btn" onclick="importSave()" style="flex:1" title="Paste save data">Import</button>
+</div>
+<button class="save-btn" onclick="toggleHotkeyHelp()" style="margin-top:4px;border-color:#2a2a4a;color:#888">? Hotkeys</button>
 <button class="reset-btn" onclick="if(confirm('Reset all progress?')){localStorage.removeItem('the-beacon-v2');location.reload()}">Reset Progress</button>
 <h2>BUILDINGS</h2>
 <div id="buildings"></div>
@@ -189,5 +194,24 @@ The light is on. The room is empty."
 </div>
 </div>
 
+<div id="hotkey-overlay" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.92);z-index:95;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px">
+<div style="background:#0e0e1a;border:1px solid #1a3a5a;border-radius:8px;padding:24px 32px;max-width:380px;width:100%;text-align:left">
+<h3 style="color:#4a9eff;font-size:13px;letter-spacing:2px;margin-bottom:16px;text-align:center">KEYBOARD SHORTCUTS</h3>
+<div style="font-size:11px;line-height:2.2;color:#aaa">
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">Space</kbd> Write code</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">1</kbd> Ops → Code</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">2</kbd> Ops → Compute</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">3</kbd> Ops → Knowledge</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">4</kbd> Ops → Trust</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">B</kbd> Cycle buy amount (×1 / ×10 / MAX)</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">S</kbd> Activate Code Sprint</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">?</kbd> Toggle this help</div>
+<div><kbd style="background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;padding:1px 6px;color:#4a9eff">Esc</kbd> Close overlay</div>
+</div>
+<div style="text-align:center;margin-top:16px">
+<button onclick="toggleHotkeyHelp()" style="background:#1a2a3a;border:1px solid #4a9eff;color:#4a9eff;padding:6px 20px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px">Close</button>
+</div>
+</div>
+</div>
 </body>
 </html>