diff --git a/index.html b/index.html index 1d0d420..8f0362d 100644 --- a/index.html +++ b/index.html @@ -164,7 +164,7 @@
-
๐Ÿงข
+
ASH gained SQL EXP!
๐Ÿ… SQL TRAINEE
diff --git a/style.css b/style.css index fcdcfd6..30b5383 100644 --- a/style.css +++ b/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; }