From 15d124d550f2e809aed8df9c03b1fececac88101 Mon Sep 17 00:00:00 2001
From: Sterling Archer <SterlingArcher2026@icloud.com>
Date: Wed, 27 May 2026 14:45:16 -0700
Subject: [PATCH] Add trainer sprites peeking from screen edges on battle
 animation to show Pokemon ownership

---
 game.js    |  8 ++++++++
 index.html |  2 ++
 style.css  | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/game.js b/game.js
index 4a5fc92..e0088d5 100644
--- a/game.js
+++ b/game.js
@@ -1789,6 +1789,14 @@ class Game {
     const playerPoke = this._getActivePokemon();
     const npcPoke = this.state.currentNPCPokemon || { name:'???', emoji:'❓', level:1 };
 
+    const npcTrainer = document.getElementById('anim-npc-trainer');
+    if (npcTrainer) {
+      const npcQ = this.state.questions[this.state.currentQ];
+      setNPC(npcTrainer, NPC[npcQ?.npc] || '🧑');
+    }
+    const playerTrainer = document.getElementById('anim-player-trainer');
+    if (playerTrainer) playerTrainer.innerHTML = '<div class="anim-player-sprite-sheet"></div>';
+
     document.getElementById('anim-player-pokemon-name').textContent = playerPoke.name.toUpperCase();
     document.getElementById('anim-player-pokemon').textContent = playerPoke.emoji;
     document.getElementById('anim-npc-pokemon-name').textContent = npcPoke.name.toUpperCase();
diff --git a/index.html b/index.html
index 66fe5db..829f430 100644
--- a/index.html
+++ b/index.html
@@ -215,6 +215,8 @@
 
   <!-- BATTLE RESULT ANIMATION -->
   <div id="screen-battle-anim" class="screen">
+    <div class="battle-anim-trainer-npc" id="anim-npc-trainer"></div>
+    <div class="battle-anim-trainer-player" id="anim-player-trainer"></div>
     <div class="battle-anim-scene">
       <div class="battle-anim-npc">
         <div class="battle-anim-npc-name" id="anim-npc-pokemon-name"></div>
diff --git a/style.css b/style.css
index 87a8605..b6b026c 100644
--- a/style.css
+++ b/style.css
@@ -1301,3 +1301,35 @@ html, body {
   40%  { transform:scale(2.5); opacity:.9; }
   100% { transform:scale(4); opacity:0; }
 }
+
+/* ─── BATTLE ANIM TRAINER PEEK ───────────────────────────── */
+.battle-anim-trainer-npc,
+.battle-anim-trainer-player {
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+  z-index:5;
+  opacity:.7;
+  font-size:clamp(50px,15vw,72px);
+}
+.battle-anim-trainer-npc {
+  left:-28px;
+}
+.battle-anim-trainer-npc img {
+  height:clamp(72px,20vw,100px);
+  width:auto;
+  image-rendering:pixelated;
+  display:block;
+}
+.battle-anim-trainer-player {
+  right:-28px;
+}
+.anim-player-sprite-sheet {
+  width:48px;
+  height:96px;
+  background-image:url('./player.png');
+  background-repeat:no-repeat;
+  background-size:1152px 96px;
+  background-position:-48px 0;
+  image-rendering:pixelated;
+}