Replace hat emoji on level-up screen with player.png sprite sheet

index.html

@@ -164,7 +164,7 @@
   <div id="screen-levelup" class="screen">
     <div class="levelup-box">
       <div class="lu-stars blink" id="lu-stars">★ BADGE EARNED! ★</div>
-      <div class="lu-sprite">🧢</div>
+      <div class="lu-sprite"><div class="lu-player-sprite"></div></div>
       <div class="lu-text"><span id="lu-name">ASH</span> gained SQL EXP!</div>
       <div class="lu-badge" id="lu-badge">🏅 SQL TRAINEE</div>
       <div class="lu-prog-wrap">

style.css

@@ -480,7 +480,7 @@ html, body {
   bottom: -9999px; /* ensure off-screen when hidden */
 }
 /* NPC lives inside .map-inner, positioned in world-px via JS */
-.map-npc-wrap { position:absolute; text-align:center; z-index: 30; }
+.map-npc-wrap { position:absolute; text-align:center; z-index: 10; }
 .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; }
 /* Player is fixed to the viewport centre horizontally; only Y moves */
@@ -526,7 +526,7 @@ html, body {
   background-position: 0 0;
   image-rendering: pixelated;
   filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
-  z-index: 40;
+  z-index: 10;
   font-size: 0;
   color: transparent;
 }
@@ -643,7 +643,19 @@ html, body {
 #screen-levelup { background:linear-gradient(135deg,#0f0630,#220e5e,#0a0a34); align-items:center; justify-content:center; }
 .levelup-box { text-align:center; padding:clamp(16px,4vw,28px) clamp(14px,3.5vw,22px); width:90%; max-width:360px; display:flex; flex-direction:column; gap:12px; animation:fadeIn .5s ease; }
 .lu-stars    { font-size:clamp(7px,2vw,9px); color:var(--yellow); text-shadow:0 0 8px var(--yellow); letter-spacing:1px; }
-.lu-sprite   { font-size:clamp(52px,15vw,74px); animation:bounce 1s ease-in-out infinite; }
+.lu-sprite   { animation:bounce 1s ease-in-out infinite; display:flex; justify-content:center; }
+.lu-player-sprite {
+  width: 32px;
+  height: 64px;
+  background-image: url('./player.png');
+  background-repeat: no-repeat;
+  background-size: 768px 64px;
+  background-position: -32px 0;
+  image-rendering: pixelated;
+  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
+  transform: scale(1.5);
+  transform-origin: center bottom;
+}
 .lu-text     { font-size:clamp(7.5px,2.2vw,9px); color:var(--white); line-height:2; }
 .lu-badge    { font-size:clamp(7px,2vw,9px); color:var(--yellow); background:rgba(255,255,255,.08); border:2px solid var(--yellow); padding:clamp(8px,2.5vw,12px); }
 .lu-prog-wrap{ display:flex; flex-direction:column; gap:5px; align-items:center; }