Replace NPC emoji with sprite: oak.png

game.js

@@ -16,8 +16,21 @@ const CONFIG = {
   namePrompt: "Hello there! Welcome to PokéSQL! My name is Professor Oak — the SQL Professor. Now tell me, what is your name?",
 };
 
+function setNPC(el, val) {
+  if (!el) return;
+  if (val && val.endsWith('.png')) {
+    el.innerHTML = '';
+    const img = document.createElement('img');
+    img.src = val;
+    img.style.cssText = 'height:1em;width:auto;image-rendering:pixelated;vertical-align:middle;';
+    el.appendChild(img);
+  } else {
+    el.textContent = val || '🧑';
+  }
+}
+
 const NPC = {
-  'Professor Oak':     '👴',
+  'Professor Oak':     './oak.png',
   'Rival Gary':        '😤',
   'Old Man Bob':       '🧓',
   'Nurse Joy':         '👩‍⚕️',
@@ -48,9 +61,9 @@ const CORRECT_FB = ["That's right!","Excellent work!","Perfect!","Outstanding!",
 const WRONG_FB   = ["Not quite...","Hmm, that's not it.","Try again next time!","Almost...","Not this time!"];
 
 const MILESTONES = {
-  25: { badge:'🥉 SQL INITIATE',   stars:'★ ★ ☆ ☆' },
+  25: { badge:'🥉 CLOUD EXPLORER',   stars:'★ ★ ☆ ☆' },
-  50: { badge:'🥈 QUERY TRAINER',  stars:'★ ★ ★ ☆' },
+  50: { badge:'🥈 AZURE APPRENTICE',  stars:'★ ★ ★ ☆' },
-  75: { badge:'🥇 DATA WRANGLER',  stars:'★ ★ ★ ★' },
+  75: { badge:'🥇 CLOUD PRACTITIONER',  stars:'★ ★ ★ ★' },
 };
 
 const SAVE_KEY = CONFIG.saveKey;
@@ -998,7 +1011,7 @@ class Game {
     const msg = INTRO_MSGS[this.state.introStep];
     if (!msg) return;
     const npcEl = document.getElementById('intro-npc');
-    if (npcEl) npcEl.textContent = NPC[msg.npc] || '👴';
+    if (npcEl) setNPC(npcEl, NPC[msg.npc] || '👴');
     document.getElementById('intro-speaker').textContent = msg.speaker;
     document.getElementById('intro-arrow').style.display = 'none';
     this.typeText('intro-text',
@@ -1133,7 +1146,7 @@ class Game {
 
       const q = this.state.questions[this.state.currentQ];
       const npcEl = document.getElementById('map-npc');
-      if (q && npcEl) npcEl.textContent = NPC[q.npc]||'🧑';
+      if (q && npcEl) setNPC(npcEl, NPC[q.npc]||'🧑');
 
       this._placeMapSprites();
       this._checkNPCProximity();

index.html

@@ -74,7 +74,7 @@
   <!-- INTRO CUTSCENE -->
   <div id="screen-intro" class="screen">
     <div class="overworld-bg">
-      <div class="intro-npc" id="intro-npc">👴</div>
+      <div class="intro-npc" id="intro-npc"></div>
       <div class="intro-player"></div>
     </div>
     <div class="dialog-box intro-dialog">
@@ -90,7 +90,7 @@
     <div class="map-header">
       <div class="map-left">
         <span class="map-pin">📍</span>
-        <span class="map-town-name" id="map-town-name">SQL TOWN</span>
+        <span class="map-town-name">SQL TOWN</span>
       </div>
       <div class="map-center">
         <div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div>

style.css

@@ -495,6 +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; }
+.map-npc img   { height:clamp(36px,10vw,52px); 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 {