From 28068c7aa8ecffbdd4f49d824630ea4f12e540e2 Mon Sep 17 00:00:00 2001
From: Justin Oros <JustinOros@gmail.com>
Date: Thu, 14 May 2026 13:40:39 -0700
Subject: [PATCH] Replace hat emoji on battle screen with player.png sprite
 sheet

---
 index.html |  2 +-
 style.css  | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index da76dae..660b966 100644
--- a/index.html
+++ b/index.html
@@ -130,7 +130,7 @@
         <div class="battle-name-tag" id="battle-npc-name">OAK</div>
       </div>
       <div class="battle-player-side">
-        <div class="battle-sprite">🧢</div>
+        <div class="battle-player-sprite"></div>
         <div class="battle-name-tag" id="battle-player-name">ASH</div>
       </div>
     </div>
diff --git a/style.css b/style.css
index 367f4c8..9cb5382 100644
--- a/style.css
+++ b/style.css
@@ -545,6 +545,19 @@ html, body {
 .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-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 {
+  width: 48px;
+  height: 96px;
+  background-image: url('./player.png');
+  background-repeat: no-repeat;
+  background-size: 1152px 96px;  /* 3× scale */
+  background-position-x: -48px; /* idle down frame */
+  background-position-y: 0;
+  image-rendering: pixelated;
+  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.3));
+  animation: bounce 1s ease-in-out infinite;
+}
 .battle-name-tag { font-size:clamp(5.5px,1.6vw,7px); background:rgba(255,255,255,.8); border:2px solid var(--black); padding:2px 6px; color:var(--black); }
 .battle-dialog { margin:8px; min-height:72px; }
 .battle-choices { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px 8px; flex-shrink:0; }