Replace hat emoji on badge screen with actual player sprite

index.html

@@ -165,7 +165,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 Azure EXP!</div>
       <div class="lu-badge" id="lu-badge">🏅 CLOUD TRAINEE</div>
       <div class="lu-prog-wrap">

style.css

@@ -653,7 +653,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; }