Add NPC Sprites (Created by my amazing daughter)

game.js

@@ -21,8 +21,8 @@ function setNPC(el, val) {
   if (val && val.endsWith('.png')) {
     el.innerHTML = '';
     const img = document.createElement('img');
-    img.src = val;
+    img.src = val.includes('/') ? val : './' + val;
-    img.style.cssText = 'height:1em;width:auto;image-rendering:pixelated;vertical-align:middle;';
+    img.style.cssText = 'width:auto;image-rendering:pixelated;vertical-align:middle;display:block;';
     el.appendChild(img);
   } else {
     el.textContent = val || '🧑';
@@ -30,11 +30,11 @@ function setNPC(el, val) {
 }
 
 const NPC = {
-  'Professor Oak':     './oak.png',
+  'Professor Oak':     'oak.png',
-  'Rival Gary':        '😤',
+  'Rival Gary':        'gary.png',
   'Old Man Bob':       '🧓',
-  'Nurse Joy':         '👩‍⚕️',
+  'Nurse Joy':         'joy.png',
-  'Officer Jenny':     '👮‍♀️',
+  'Officer Jenny':     'jenny.png',
   'Brock':             '🧑‍🍳',
   'Misty':             '🧜‍♀️',
   'Giovanni':          '😈',
@@ -52,7 +52,7 @@ const NPC = {
   'Agatha':            '👻',
   'Lance':             '🐉',
   'Champion':          '🏆',
-  'Gary':              '😤',
+  'Gary':              'gary.png',
 };
 
 const INTRO_MSGS = CONFIG.introLines.map(text => ({ speaker:'PROFESSOR OAK', npc:'Professor Oak', text }));
@@ -1194,7 +1194,7 @@ class Game {
     this.state.answering=false;
     this.state.cursor=0;
 
-    document.getElementById('battle-npc-sprite').textContent = NPC[q.npc]||'🧑';
+    setNPC(document.getElementById('battle-npc-sprite'), NPC[q.npc]||'🧑');
     document.getElementById('battle-npc-name').textContent   = q.npc.toUpperCase();
     document.getElementById('battle-speaker').textContent    = q.npc.toUpperCase();
     document.getElementById('battle-player-name').textContent= (this.state.playerName||'ASH').toUpperCase();

style.css

@@ -495,8 +495,8 @@ html, body {
 .map-npc-wrap { position:absolute; text-align:center; z-index: 30; }
 .npc-bubble   { font-size:14px; font-family:var(--font); color:var(--black); background:var(--yellow); border:2px solid var(--black); width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 2px; animation:bounce .7s ease-in-out infinite; }
 .map-npc      { font-size:clamp(36px,10vw,52px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); cursor:pointer; animation:npcFloat 2s ease-in-out infinite; }
-.intro-npc img { height:clamp(44px,13vw,64px); width:auto; image-rendering:pixelated; display:block; }
+.intro-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
-.map-npc img   { height:clamp(36px,10vw,52px); width:auto; image-rendering:pixelated; display:block; }
+.map-npc img   { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
 /* Player is fixed to the viewport centre horizontally; only Y moves */
 /* "..." bubble above player when pressing talk away from NPC */
 .player-bubble {
@@ -592,6 +592,7 @@ html, body {
 .battle-scene::after { content:''; position:absolute; top:55%; left:0; right:0; height:2px; background:rgba(0,0,0,.18); }
 .battle-npc-side, .battle-player-side { display:flex; flex-direction:column; align-items:center; gap:4px; }
 .battle-sprite { font-size:clamp(38px,11vw,56px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.3)); animation:npcFloat 2s ease-in-out infinite; }
+.battle-sprite img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
 .battle-player-side .battle-sprite { animation:bounce 1s ease-in-out infinite; }
 /* Player sprite on battle screen — use sprite sheet facing down-idle */
 .battle-player-sprite {