Fix bugs in 한글 HERO (#112)

* Break down glommed characters

* Add final score

* Fix mobile fallback font

Author: just-be-dev

src/pages/games/hangul-hero.astro

@@ -1000,15 +1000,15 @@ import BaseLayout from "../../layouts/base.astro";
   }
 
   .mobile-message h2 {
-    font-family: "Press Start 2P", cursive;
+    font-family: "Press Start 2P", "Courier New", Courier, monospace;
     color: #ff3366;
     font-size: 1.2rem;
     margin-bottom: 1rem;
     text-shadow: 2px 2px 0 #000;
   }
 
   .mobile-message p {
-    font-family: "Press Start 2P", cursive;
+    font-family: "Press Start 2P", "Courier New", Courier, monospace;
     color: #fff;
     font-size: 0.8rem;
     line-height: 1.5;
@@ -1762,9 +1762,16 @@ import BaseLayout from "../../layouts/base.astro";
       input.addEventListener("input", (e) => {
         if (!this.isPlaying || this.isPaused || !this.isPowered) return; // Don't process input when powered off or paused
 
-        const char = (e.target as HTMLInputElement).value;
-        if (char) {
-          this.handleKeyPress(char);
+        const inputValue = (e.target as HTMLInputElement).value;
+        if (inputValue) {
+          // Decompose the input value into its constituent parts
+          inputValue
+            .split("")
+            .filter(Boolean)
+            .flatMap((char) => char.normalize("NFD").split(""))
+            .forEach((char) => {
+              this.handleKeyPress(char);
+            });
           // Clear the input for the next character
           (e.target as HTMLInputElement).value = "";
         }
@@ -2501,6 +2508,30 @@ import BaseLayout from "../../layouts/base.astro";
           this.p.fill(255, 255, 255, this.startTextOpacity * 255);
           this.p.textSize(40);
           this.p.text(titleText, this.p.width / 2, this.p.height / 2 - 20);
+
+          // Draw final score
+          this.p.textSize(24);
+          this.p.textAlign(this.p.CENTER, this.p.CENTER);
+
+          // Score glow effect
+          const scoreGlowColor = this.p.color("#00ff00");
+          scoreGlowColor.setAlpha(this.startTextOpacity * 100);
+          this.p.fill(scoreGlowColor);
+          this.p.textSize(26);
+          this.p.text(
+            `FINAL SCORE: ${this.score}`,
+            this.p.width / 2,
+            this.p.height / 2 + 40
+          );
+
+          // Main score text
+          this.p.fill(255, 255, 255, this.startTextOpacity * 255);
+          this.p.textSize(24);
+          this.p.text(
+            `FINAL SCORE: ${this.score}`,
+            this.p.width / 2,
+            this.p.height / 2 + 40
+          );
         } else {
           // 한글 HERO title with wave animation
           this.p.textSize(60);