feat: add donate QR modal and site footer (#6)

Menu exposes a Donate button; the win dialog offers a Buy Me a Coffee
link. Both open a shared modal showing the VietQR code from
public/assets/qr.jpg. A persistent footer credits miti99.com.

src/App.svelte

@@ -30,3 +30,45 @@
         />
     {/key}
 {/if}
+
+<footer class="site-footer">
+    Made with <span class="heart">♥</span> by
+    <a href="https://miti99.com" target="_blank" rel="noopener noreferrer">miti99</a>
+</footer>
+
+<style>
+    .site-footer {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 6px;
+        text-align: center;
+        font-size: 12px;
+        color: var(--text-dim);
+        letter-spacing: 0.5px;
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    .site-footer a {
+        color: var(--accent);
+        text-decoration: none;
+        font-weight: 700;
+        pointer-events: auto;
+    }
+
+    .site-footer a:hover {
+        text-decoration: underline;
+    }
+
+    .heart {
+        color: var(--danger);
+        display: inline-block;
+        animation: pulse 1.6s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50%      { transform: scale(1.2); }
+    }
+</style>

src/views/DonateModal.svelte

@@ -0,0 +1,91 @@
+<!--
+    Donation modal: shows the VietQR code. Shared between the menu
+    "Donate" button and the "Buy me a coffee" button on the win screen.
+-->
+<script>
+    import AppButton from './AppButton.svelte';
+
+    let { open = false, onClose } = $props();
+
+    function onKey(e) {
+        if (open && e.key === 'Escape') onClose();
+    }
+
+    // Close only when the backdrop itself is clicked, not when a click
+    // bubbles up from the dialog contents. Avoids needing stopPropagation
+    // on the dialog (which would otherwise require a keyboard handler too).
+    function onBackdropClick(e) {
+        if (e.target === e.currentTarget) onClose();
+    }
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+{#if open}
+    <div class="overlay" onclick={onBackdropClick} role="presentation">
+        <div class="dialog" role="dialog" aria-modal="true" aria-label="Donate" tabindex="-1">
+            <h2>Thanks for playing!</h2>
+            <p class="sub">Scan to send a tip — supports 50+ banking apps.</p>
+            <img
+                src="{import.meta.env.BASE_URL}assets/qr.jpg"
+                alt="Donation QR code for NGUYEN MINH TIEN"
+                class="qr"
+            />
+            <AppButton variant="ghost" onclick={onClose}>CLOSE</AppButton>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(12, 16, 24, 0.72);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 200;
+        animation: fade-in 180ms ease;
+        padding: 16px;
+    }
+
+    .dialog {
+        background: var(--panel);
+        border: 2px solid var(--accent);
+        border-radius: var(--radius-lg);
+        padding: 24px 28px 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        max-width: 380px;
+        max-height: 90vh;
+        overflow: auto;
+        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
+    }
+
+    .dialog h2 {
+        font-size: 22px;
+        letter-spacing: 1px;
+        color: var(--accent);
+    }
+
+    .sub {
+        font-size: 13px;
+        color: var(--text-muted);
+        text-align: center;
+    }
+
+    .qr {
+        width: 100%;
+        max-width: 320px;
+        height: auto;
+        border-radius: var(--radius);
+        display: block;
+    }
+
+    @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+</style>

src/views/GameView.svelte

@@ -5,6 +5,7 @@
 <script>
     import AppButton from './AppButton.svelte';
     import Board from './Board.svelte';
+    import DonateModal from './DonateModal.svelte';
     import { parseLevel } from '../lib/core/level-parser.js';
     import { BoardModel } from '../lib/core/board-model.js';
     import { progressStore } from '../lib/core/progress-store.js';
@@ -113,6 +114,8 @@
     }
 
     const hasNext = $derived(levelIndex + 1 < MICROBAN_LEVELS.length);
+
+    let donateOpen = $state(false);
 </script>
 
 <svelte:window onkeydown={onKey} onresize={onResize} />
@@ -161,12 +164,17 @@
                         {/if}
                         <AppButton variant="ghost" onclick={onLevels}>LEVELS</AppButton>
                     </div>
+                    <AppButton variant="ghost" size="sm" onclick={() => (donateOpen = true)} title="Support the game">
+                        ☕ BUY ME A COFFEE
+                    </AppButton>
                 </div>
             </div>
         {/if}
     {/if}
 </section>
 
+<DonateModal open={donateOpen} onClose={() => (donateOpen = false)} />
+
 <style>
     .game {
         gap: 16px;

src/views/MenuView.svelte

@@ -3,6 +3,7 @@
 -->
 <script>
     import AppButton from './AppButton.svelte';
+    import DonateModal from './DonateModal.svelte';
     import { progressStore } from '../lib/core/progress-store.js';
     import { MICROBAN_LEVELS } from '../lib/data/microban-levels.js';
 
@@ -10,6 +11,8 @@
 
     const total = MICROBAN_LEVELS.length;
     const completed = progressStore.getCompletedCount();
+
+    let donateOpen = $state(false);
 </script>
 
 <section class="screen menu">
@@ -26,9 +29,15 @@
         <div>Push every box onto a target tile.</div>
     </div>
 
+    <AppButton variant="ghost" size="sm" onclick={() => (donateOpen = true)} title="Support the game">
+        ♥ DONATE
+    </AppButton>
+
     <p class="credit">Level layouts from Microban by David W. Skinner</p>
 </section>
 
+<DonateModal open={donateOpen} onClose={() => (donateOpen = false)} />
+
 <style>
     .menu {
         padding-top: 40px;