Add in-app install prompt CTA for PWA

index.html

@@ -115,10 +115,12 @@
         </button>
     </div>
 
-    <div class="feedback" id="feedback-msg"></div>
+<div class="feedback" id="feedback-msg"></div>
     <div id="quick-consumables" class="quick-consumables"></div>
 </div>
 
+<button id="install-cta" class="install-cta hidden" type="button" aria-label="Install Hogwarts Arithmancy">⬇️ Install app</button>
+
 <script src="app.js"></script>
 <script>
 if ('serviceWorker' in navigator) {
@@ -128,6 +130,37 @@ if ('serviceWorker' in navigator) {
         });
     });
 }
+
+(function setupInstallPrompt() {
+    const installBtn = document.getElementById('install-cta');
+    let deferredPrompt = null;
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+        e.preventDefault();
+        deferredPrompt = e;
+        if (installBtn) installBtn.classList.remove('hidden');
+    });
+
+    window.addEventListener('appinstalled', () => {
+        deferredPrompt = null;
+        if (installBtn) installBtn.classList.add('hidden');
+    });
+
+    if (installBtn) {
+        installBtn.addEventListener('click', async () => {
+            if (!deferredPrompt) return;
+            installBtn.disabled = true;
+            try {
+                deferredPrompt.prompt();
+                await deferredPrompt.userChoice;
+            } finally {
+                deferredPrompt = null;
+                installBtn.classList.add('hidden');
+                installBtn.disabled = false;
+            }
+        });
+    }
+})();
 </script>
 </body>
 </html>

style.css

@@ -167,6 +167,27 @@
         .trail-ice { background: #e0ffff; box-shadow: 0 0 8px #00ffff; }
         .trail-slime { background: #39ff14; box-shadow: 0 0 8px #39ff14; }
 
+        /* --- INSTALL CTA --- */
+        .install-cta {
+            position: fixed;
+            right: 18px;
+            bottom: calc(18px + env(safe-area-inset-bottom));
+            background: linear-gradient(135deg, #740001, #9b1b1b);
+            color: var(--gold);
+            border: 1px solid var(--gold);
+            border-radius: 999px;
+            padding: 10px 16px;
+            font-family: 'Cinzel', serif;
+            font-size: 0.9rem;
+            letter-spacing: 0.4px;
+            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
+            z-index: 1400;
+            cursor: pointer;
+        }
+        .install-cta:hover { filter: brightness(1.05); }
+        .install-cta:active { transform: translateY(1px); }
+        .install-cta.hidden { display: none !important; }
+
         /* --- DEMENTOR --- */
         #dementor-overlay {
             position: absolute;