From 4dab54f821c66799f0bf3b33569f99c6e719a579 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 20 Nov 2025 11:09:27 -0500
Subject: [PATCH] Make pets react (happy/worried) and polish perch

---
 app.js    | 12 ++++++++++++
 style.css |  8 +++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index b1b3bac..e4c1fc6 100644
--- a/app.js
+++ b/app.js
@@ -266,6 +266,7 @@
             }
 
             castPatronus();
+            petReact('happy');
             feedback.style.color = '#7cff9a';
             feedback.innerText = `Expecto Patronum! (+${goldGain} G)`;
 
@@ -886,6 +887,7 @@
             resetDementor();
             saveData(); updateUI();
             game.active = true;
+            petReact('worried');
         }, delayMs);
     }
 
@@ -935,6 +937,16 @@
         pet.innerText = state.activePetIcon || '🐾';
         perch.appendChild(pet);
     }
+
+    function petReact(mode = 'happy') {
+        const pet = document.querySelector('#pet-perch .pet-icon');
+        if (!pet) return;
+        pet.classList.remove('pet-happy', 'pet-worried');
+        pet.classList.add(mode === 'happy' ? 'pet-happy' : 'pet-worried');
+        setTimeout(() => {
+            pet.classList.remove('pet-happy', 'pet-worried');
+        }, 600);
+    }
     
     function saveData() { localStorage.setItem('arithmancyDataV17', JSON.stringify(state)); }
     function loadData() {
diff --git a/style.css b/style.css
index d84671b..7c3a313 100644
--- a/style.css
+++ b/style.css
@@ -382,7 +382,7 @@
             opacity: 0.4; cursor: not-allowed;
         }
         #pet-perch {
-            height: 40px;
+            height: 48px;
             display: flex; justify-content: center; align-items: center;
             margin-top: 6px;
         }
@@ -390,6 +390,7 @@
             font-size: 1.8rem;
             filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
             animation: petFloat 3s ease-in-out infinite;
+            transition: transform 0.2s ease;
         }
         .pet-icon.pet-owl { text-shadow: 0 0 6px rgba(255,255,255,0.5); }
         .pet-icon.pet-cat { text-shadow: 0 0 6px rgba(255,182,193,0.5); }
@@ -397,6 +398,11 @@
         .pet-icon.pet-toad { text-shadow: 0 0 6px rgba(144,238,144,0.6); }
         .pet-icon.pet-ferret { text-shadow: 0 0 6px rgba(210,180,140,0.6); }
         @keyframes petFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+        .pet-icon.pet-happy { animation: petHop 0.5s ease, petGlow 1.2s ease; }
+        .pet-icon.pet-worried { animation: petTremble 0.5s ease; }
+        @keyframes petHop { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(0); } 100% { transform: translateY(-4px); } }
+        @keyframes petTremble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
+        @keyframes petGlow { from { filter: drop-shadow(0 0 8px rgba(255, 217, 102, 0.7)); } to { filter: drop-shadow(0 0 16px rgba(255, 217, 102, 1)); } }
         
         /* --- MODALS --- */
         .modal-overlay {