diff --git a/acts-en.html b/acts-en.html
index 505a5e3..f3b652c 100644
--- a/acts-en.html
+++ b/acts-en.html
@@ -5,34 +5,53 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>d2web · Diablo II v1.13c</title>
     <style>
-      :root { color-scheme: dark; }
+      @font-face {
+        font-family: "D2Exocet";
+        src: url("/ui/fonts/D2Exocet.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "D2Formal436";
+        src: url("/ui/fonts/D2Formal436.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      :root {
+        color-scheme: dark;
+        --font-display: "D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+        --font-body: "D2Formal436", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+      }
       * { box-sizing: border-box; }
       html, body { margin: 0; height: 100%; background: #0b0906; color: #e8dcc8;
-        font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; }
+        font: 13px/1.5 var(--font-body); overflow: hidden; }
       #view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #000; cursor: none; }
       .overlay { position: fixed; z-index: 2; background: rgba(11, 9, 6, .82); border: 1px solid #33291f;
         border-radius: 6px; backdrop-filter: blur(3px); }
       header { top: 0; left: 0; right: 0; padding: 6px 12px; border-radius: 0; border-width: 0 0 1px 0;
         display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
-      h1 { font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
+      h1 { font-family: var(--font-display); font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
       a { color: #c8a15a; }
-      #hud { color: #9c8d78; }
+      #hud { font-family: var(--font-display); color: #9c8d78; }
       #controls { top: 4px; right: 12px; padding: 3px 8px; display: flex; gap: 8px;
-        align-items: center; flex-wrap: wrap; max-width: 74vw; font-size: 12px; z-index: 4; }
-      #controls label { color: #9c8d78; }
+        align-items: center; flex-wrap: wrap; max-width: 74vw; font-family: var(--font-display); font-size: 12px; z-index: 4; }
+      #controls label { font-family: var(--font-display); color: #9c8d78; }
       select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
-        border-radius: 4px; padding: 2px 5px; font: inherit; max-width: 22vw; }
+        border-radius: 4px; padding: 2px 5px; font: inherit; font-family: var(--font-body); max-width: 22vw; }
       select.non-default, .non-default {
         border: 1px solid #e74c3c !important;
         color: #ff6b6b !important;
       }
-      optgroup { background: #1c1813; color: #c8a15a; }
-      option { background: #1c1813; }
-      #status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
+      optgroup { background: #1c1813; color: #c8a15a; font-family: var(--font-body); }
+      option { background: #1c1813; font-family: var(--font-body); }
+      #status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-family: var(--font-body); font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
       #status:empty { display: none; }
-      #dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
+      #dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-family: var(--font-body); font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
+      #labels, .ground-label { font-family: var(--font-display); }
       #d2-hud-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 6; pointer-events: none; image-rendering: pixelated; cursor: none; }
-      .hint { color: #6d5a34; }
+      .hint { font-family: var(--font-body); color: #6d5a34; }
       .lang-btn {
         display: inline-block;
         padding: 2px 7px;
@@ -41,6 +60,7 @@
         border: 1px solid #5c4628;
         border-radius: 4px;
         text-decoration: none;
+        font-family: var(--font-display);
         font-size: 11px;
         cursor: pointer;
       }
diff --git a/acts-zh.html b/acts-zh.html
index d400d72..9229d72 100644
--- a/acts-zh.html
+++ b/acts-zh.html
@@ -5,34 +5,53 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>d2web · 暗黑破坏神 2 v1.13c</title>
     <style>
-      :root { color-scheme: dark; }
+      @font-face {
+        font-family: "D2Exocet";
+        src: url("/ui/fonts/D2Exocet.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "D2Formal436";
+        src: url("/ui/fonts/D2Formal436.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      :root {
+        color-scheme: dark;
+        --font-display: "D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+        --font-body: "D2Formal436", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+      }
       * { box-sizing: border-box; }
       html, body { margin: 0; height: 100%; background: #0b0906; color: #e8dcc8;
-        font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; }
+        font: 13px/1.5 var(--font-body); overflow: hidden; }
       #view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #000; cursor: none; }
       .overlay { position: fixed; z-index: 2; background: rgba(11, 9, 6, .82); border: 1px solid #33291f;
         border-radius: 6px; backdrop-filter: blur(3px); }
       header { top: 0; left: 0; right: 0; padding: 6px 12px; border-radius: 0; border-width: 0 0 1px 0;
         display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
-      h1 { font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
+      h1 { font-family: var(--font-display); font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
       a { color: #c8a15a; }
-      #hud { color: #9c8d78; }
+      #hud { font-family: var(--font-display); color: #9c8d78; }
       #controls { top: 4px; right: 12px; padding: 3px 8px; display: flex; gap: 8px;
-        align-items: center; flex-wrap: wrap; max-width: 74vw; font-size: 12px; z-index: 4; }
-      #controls label { color: #9c8d78; }
+        align-items: center; flex-wrap: wrap; max-width: 74vw; font-family: var(--font-display); font-size: 12px; z-index: 4; }
+      #controls label { font-family: var(--font-display); color: #9c8d78; }
       select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
-        border-radius: 4px; padding: 2px 5px; font: inherit; max-width: 22vw; }
+        border-radius: 4px; padding: 2px 5px; font: inherit; font-family: var(--font-body); max-width: 22vw; }
       select.non-default, .non-default {
         border: 1px solid #e74c3c !important;
         color: #ff6b6b !important;
       }
-      optgroup { background: #1c1813; color: #c8a15a; }
-      option { background: #1c1813; }
-      #status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
+      optgroup { background: #1c1813; color: #c8a15a; font-family: var(--font-body); }
+      option { background: #1c1813; font-family: var(--font-body); }
+      #status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-family: var(--font-body); font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
       #status:empty { display: none; }
-      #dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
+      #dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-family: var(--font-body); font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
+      #labels, .ground-label { font-family: var(--font-display); }
       #d2-hud-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 6; pointer-events: none; image-rendering: pixelated; cursor: none; }
-      .hint { color: #6d5a34; }
+      .hint { font-family: var(--font-body); color: #6d5a34; }
       .lang-btn {
         display: inline-block;
         padding: 2px 7px;
@@ -41,6 +60,7 @@
         border: 1px solid #5c4628;
         border-radius: 4px;
         text-decoration: none;
+        font-family: var(--font-display);
         font-size: 11px;
         cursor: pointer;
       }
diff --git a/acts.html b/acts.html
index 2337a12..1c7860e 100644
--- a/acts.html
+++ b/acts.html
@@ -5,34 +5,53 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>d2web · 暗黑破坏神 2 v1.13c</title>
     <style>
-      :root { color-scheme: dark; }
+      @font-face {
+        font-family: "D2Exocet";
+        src: url("/ui/fonts/D2Exocet.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "D2Formal436";
+        src: url("/ui/fonts/D2Formal436.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      :root {
+        color-scheme: dark;
+        --font-display: "D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+        --font-body: "D2Formal436", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+      }
       * { box-sizing: border-box; }
       html, body { margin: 0; height: 100%; background: #0b0906; color: #e8dcc8;
-        font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; }
+        font: 13px/1.5 var(--font-body); overflow: hidden; }
       #view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #000; cursor: none; }
       .overlay { position: fixed; z-index: 2; background: rgba(11, 9, 6, .82); border: 1px solid #33291f;
         border-radius: 6px; backdrop-filter: blur(3px); }
       header { top: 0; left: 0; right: 0; padding: 6px 12px; border-radius: 0; border-width: 0 0 1px 0;
         display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
-      h1 { font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
+      h1 { font-family: var(--font-display); font-size: 13px; margin: 0; color: #c8a15a; letter-spacing: .06em; }
       a { color: #c8a15a; }
-      #hud { color: #9c8d78; }
+      #hud { font-family: var(--font-display); color: #9c8d78; }
       #controls { top: 4px; right: 12px; padding: 3px 8px; display: flex; gap: 8px;
-        align-items: center; flex-wrap: wrap; max-width: 74vw; font-size: 12px; z-index: 4; }
-      #controls label { color: #9c8d78; }
+        align-items: center; flex-wrap: wrap; max-width: 74vw; font-family: var(--font-display); font-size: 12px; z-index: 4; }
+      #controls label { font-family: var(--font-display); color: #9c8d78; }
       select { background: #1c1813; color: #e8dcc8; border: 1px solid #33291f;
-        border-radius: 4px; padding: 2px 5px; font: inherit; max-width: 22vw; }
+        border-radius: 4px; padding: 2px 5px; font: inherit; font-family: var(--font-body); max-width: 22vw; }
       select.non-default, .non-default {
         border: 1px solid #e74c3c !important;
         color: #ff6b6b !important;
       }
-      optgroup { background: #1c1813; color: #c8a15a; }
-      option { background: #1c1813; }
-      #status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
+      optgroup { background: #1c1813; color: #c8a15a; font-family: var(--font-body); }
+      option { background: #1c1813; font-family: var(--font-body); }
+      #status { left: 12px; top: 34px; padding: 3px 8px; max-width: 55vw; color: #9c8d78; font-family: var(--font-body); font-size: 11px; opacity: 0.85; pointer-events: none; z-index: 3; }
       #status:empty { display: none; }
-      #dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
+      #dialog { right: 12px; top: 42px; padding: 8px 12px; min-width: 240px; color: #e8dcc8; white-space: pre-wrap; font-family: var(--font-body); font-size: 14px; background: rgba(30, 26, 21, .9); border-color: #c8a15a; z-index: 5; }
+      #labels, .ground-label { font-family: var(--font-display); }
       #d2-hud-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 6; pointer-events: none; image-rendering: pixelated; cursor: none; }
-      .hint { color: #6d5a34; }
+      .hint { font-family: var(--font-body); color: #6d5a34; }
       .lang-btn {
         display: inline-block;
         padding: 2px 7px;
@@ -41,6 +60,7 @@
         border: 1px solid #5c4628;
         border-radius: 4px;
         text-decoration: none;
+        font-family: var(--font-display);
         font-size: 11px;
         cursor: pointer;
       }
diff --git a/index.html b/index.html
index 42fa984..35cc20e 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Diablo II Web · 暗黑破坏神 II 网页版 (v1.13c)</title>
     <style>
+      @font-face {
+        font-family: "D2Exocet";
+        src: url("/ui/fonts/D2Exocet.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: "D2Formal436";
+        src: url("/ui/fonts/D2Formal436.ttf") format("truetype");
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
       :root {
         color-scheme: dark;
+        --font-display: "D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
+        --font-body: "D2Formal436", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif;
       }
       * {
         box-sizing: border-box;
@@ -18,7 +34,7 @@
         background:
           radial-gradient(circle at 50% 24%, rgba(168, 92, 24, 0.22) 0%, rgba(18, 12, 8, 0.92) 56%, #070503 100%);
         color: #e8dcc8;
-        font-family: 'Exocet', 'Cinzel', 'Georgia', 'Songti SC', 'SimSun', serif;
+        font-family: var(--font-display);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -49,6 +65,7 @@
         border: 1px solid #6e5430;
         background: rgba(34, 24, 14, 0.85);
         color: #c8a15a;
+        font-family: var(--font-display);
         font-size: 12px;
         letter-spacing: 0.18em;
         text-transform: uppercase;
@@ -56,6 +73,7 @@
       }
       h1 {
         margin: 0 0 8px;
+        font-family: var(--font-display);
         font-size: clamp(26px, 4vw, 38px);
         color: #d8b46a;
         letter-spacing: 0.08em;
@@ -64,6 +82,7 @@
       .subtitle {
         margin: 0 0 28px;
         color: #a7967d;
+        font-family: var(--font-body);
         font-size: 15px;
         letter-spacing: 0.05em;
       }
@@ -98,6 +117,7 @@
         outline: none;
       }
       .lang-badge {
+        font-family: var(--font-display);
         font-size: 11px;
         letter-spacing: 0.16em;
         color: #9c8458;
@@ -105,6 +125,7 @@
         margin-bottom: 8px;
       }
       .lang-title {
+        font-family: var(--font-display);
         font-size: 22px;
         font-weight: 700;
         color: #f0d596;
@@ -112,6 +133,7 @@
         letter-spacing: 0.04em;
       }
       .lang-desc {
+        font-family: var(--font-body);
         font-size: 13px;
         color: #9c8d78;
         line-height: 1.5;
@@ -122,10 +144,12 @@
         background: rgba(200, 161, 90, 0.14);
         border: 1px solid #8c6e3e;
         color: #e8c478;
+        font-family: var(--font-display);
         font-size: 12px;
         letter-spacing: 0.08em;
       }
       .footer-meta {
+        font-family: var(--font-body);
         font-size: 12px;
         color: #6d5e4b;
         letter-spacing: 0.04em;
diff --git a/public/ui/fonts/D2Exocet.ttf b/public/ui/fonts/D2Exocet.ttf
new file mode 100644
index 0000000..2776590
Binary files /dev/null and b/public/ui/fonts/D2Exocet.ttf differ
diff --git a/public/ui/fonts/D2Formal436.ttf b/public/ui/fonts/D2Formal436.ttf
new file mode 100644
index 0000000..5a51b1b
Binary files /dev/null and b/public/ui/fonts/D2Formal436.ttf differ
diff --git a/public/ui/fonts/font16.png b/public/ui/fonts/font16.png
index 9b25bd9..667116e 100644
Binary files a/public/ui/fonts/font16.png and b/public/ui/fonts/font16.png differ
diff --git a/public/ui/fonts/font30.png b/public/ui/fonts/font30.png
index 38f07b3..d95667a 100644
Binary files a/public/ui/fonts/font30.png and b/public/ui/fonts/font30.png differ
diff --git a/public/ui/fonts/font6.png b/public/ui/fonts/font6.png
index 37d9293..57158f7 100644
Binary files a/public/ui/fonts/font6.png and b/public/ui/fonts/font6.png differ
diff --git a/public/ui/fonts/font8.png b/public/ui/fonts/font8.png
index f39c23e..e323d33 100644
Binary files a/public/ui/fonts/font8.png and b/public/ui/fonts/font8.png differ
diff --git a/public/ui/fonts/fontexocet10.png b/public/ui/fonts/fontexocet10.png
index 898897c..f83c013 100644
Binary files a/public/ui/fonts/fontexocet10.png and b/public/ui/fonts/fontexocet10.png differ
diff --git a/public/ui/fonts/fontformal12.png b/public/ui/fonts/fontformal12.png
index 6f4bb6b..c64f212 100644
Binary files a/public/ui/fonts/fontformal12.png and b/public/ui/fonts/fontformal12.png differ
diff --git a/public/ui/fonts/metrics.json b/public/ui/fonts/metrics.json
index f8e8089..218aebf 100644
--- a/public/ui/fonts/metrics.json
+++ b/public/ui/fonts/metrics.json
@@ -1155,8 +1155,8 @@
         "height": 7,
         "x": 240,
         "y": 112,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 128,
@@ -1164,8 +1164,8 @@
         "height": 7,
         "x": 0,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 129,
@@ -1173,8 +1173,8 @@
         "height": 7,
         "x": 16,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 130,
@@ -1182,8 +1182,8 @@
         "height": 7,
         "x": 32,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 131,
@@ -1191,8 +1191,8 @@
         "height": 7,
         "x": 48,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 132,
@@ -1200,8 +1200,8 @@
         "height": 7,
         "x": 64,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 133,
@@ -1209,8 +1209,8 @@
         "height": 7,
         "x": 80,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 134,
@@ -1218,8 +1218,8 @@
         "height": 7,
         "x": 96,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 135,
@@ -1227,8 +1227,8 @@
         "height": 7,
         "x": 112,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 136,
@@ -1236,8 +1236,8 @@
         "height": 7,
         "x": 128,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 137,
@@ -1245,8 +1245,8 @@
         "height": 7,
         "x": 144,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 138,
@@ -1254,8 +1254,8 @@
         "height": 7,
         "x": 160,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 139,
@@ -1263,8 +1263,8 @@
         "height": 7,
         "x": 176,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 140,
@@ -1272,8 +1272,8 @@
         "height": 7,
         "x": 192,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 141,
@@ -1281,8 +1281,8 @@
         "height": 7,
         "x": 208,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 142,
@@ -1290,8 +1290,8 @@
         "height": 7,
         "x": 224,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 143,
@@ -1299,8 +1299,8 @@
         "height": 7,
         "x": 240,
         "y": 128,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 144,
@@ -1308,8 +1308,8 @@
         "height": 7,
         "x": 0,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 145,
@@ -1335,8 +1335,8 @@
         "height": 7,
         "x": 48,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 148,
@@ -1344,8 +1344,8 @@
         "height": 7,
         "x": 64,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 149,
@@ -1353,8 +1353,8 @@
         "height": 7,
         "x": 80,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 150,
@@ -1362,8 +1362,8 @@
         "height": 7,
         "x": 96,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 151,
@@ -1371,8 +1371,8 @@
         "height": 7,
         "x": 112,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 152,
@@ -1380,8 +1380,8 @@
         "height": 7,
         "x": 128,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 153,
@@ -1389,8 +1389,8 @@
         "height": 7,
         "x": 144,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 154,
@@ -1398,8 +1398,8 @@
         "height": 7,
         "x": 160,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 155,
@@ -1407,8 +1407,8 @@
         "height": 7,
         "x": 176,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 156,
@@ -1416,8 +1416,8 @@
         "height": 7,
         "x": 192,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 157,
@@ -1425,8 +1425,8 @@
         "height": 7,
         "x": 208,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 158,
@@ -1434,8 +1434,8 @@
         "height": 7,
         "x": 224,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 159,
@@ -1443,8 +1443,8 @@
         "height": 7,
         "x": 240,
         "y": 144,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 160,
@@ -1655,7 +1655,7 @@
       },
       {
         "code": 183,
-        "width": 5,
+        "width": 3,
         "height": 7,
         "x": 112,
         "y": 176,
@@ -1956,8 +1956,8 @@
         "height": 7,
         "x": 128,
         "y": 208,
-        "frameW": 9,
-        "frameH": 11
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 217,
@@ -3468,8 +3468,8 @@
         "height": 14,
         "x": 240,
         "y": 112,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 128,
@@ -3477,8 +3477,8 @@
         "height": 14,
         "x": 0,
         "y": 128,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 129,
@@ -3486,8 +3486,8 @@
         "height": 14,
         "x": 16,
         "y": 128,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 130,
@@ -3594,8 +3594,8 @@
         "height": 14,
         "x": 208,
         "y": 128,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 142,
@@ -3612,8 +3612,8 @@
         "height": 14,
         "x": 240,
         "y": 128,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 144,
@@ -3621,8 +3621,8 @@
         "height": 14,
         "x": 0,
         "y": 144,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 145,
@@ -3738,8 +3738,8 @@
         "height": 14,
         "x": 208,
         "y": 144,
-        "frameW": 15,
-        "frameH": 14
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 158,
@@ -5781,8 +5781,8 @@
         "height": 10,
         "x": 240,
         "y": 112,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 128,
@@ -5790,8 +5790,8 @@
         "height": 10,
         "x": 0,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 129,
@@ -5799,8 +5799,8 @@
         "height": 10,
         "x": 16,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 130,
@@ -5808,8 +5808,8 @@
         "height": 10,
         "x": 32,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 131,
@@ -5817,8 +5817,8 @@
         "height": 10,
         "x": 48,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 132,
@@ -5826,8 +5826,8 @@
         "height": 10,
         "x": 64,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 133,
@@ -5835,8 +5835,8 @@
         "height": 10,
         "x": 80,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 134,
@@ -5844,8 +5844,8 @@
         "height": 10,
         "x": 96,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 135,
@@ -5853,8 +5853,8 @@
         "height": 10,
         "x": 112,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 136,
@@ -5862,8 +5862,8 @@
         "height": 10,
         "x": 128,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 137,
@@ -5871,8 +5871,8 @@
         "height": 10,
         "x": 144,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 138,
@@ -5880,8 +5880,8 @@
         "height": 10,
         "x": 160,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 139,
@@ -5889,8 +5889,8 @@
         "height": 10,
         "x": 176,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 140,
@@ -5898,8 +5898,8 @@
         "height": 10,
         "x": 192,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 141,
@@ -5907,8 +5907,8 @@
         "height": 10,
         "x": 208,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 142,
@@ -5916,8 +5916,8 @@
         "height": 10,
         "x": 224,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 143,
@@ -5925,8 +5925,8 @@
         "height": 10,
         "x": 240,
         "y": 128,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 144,
@@ -5934,8 +5934,8 @@
         "height": 10,
         "x": 0,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 145,
@@ -5961,8 +5961,8 @@
         "height": 10,
         "x": 48,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 148,
@@ -5970,8 +5970,8 @@
         "height": 10,
         "x": 64,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 149,
@@ -5979,8 +5979,8 @@
         "height": 10,
         "x": 80,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 150,
@@ -5988,8 +5988,8 @@
         "height": 10,
         "x": 96,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 151,
@@ -5997,8 +5997,8 @@
         "height": 10,
         "x": 112,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 152,
@@ -6006,8 +6006,8 @@
         "height": 10,
         "x": 128,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 153,
@@ -6015,8 +6015,8 @@
         "height": 10,
         "x": 144,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 154,
@@ -6024,8 +6024,8 @@
         "height": 10,
         "x": 160,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 155,
@@ -6033,8 +6033,8 @@
         "height": 10,
         "x": 176,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 156,
@@ -6042,8 +6042,8 @@
         "height": 10,
         "x": 192,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 157,
@@ -6051,8 +6051,8 @@
         "height": 10,
         "x": 208,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 158,
@@ -6060,8 +6060,8 @@
         "height": 10,
         "x": 224,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 159,
@@ -6069,8 +6069,8 @@
         "height": 10,
         "x": 240,
         "y": 144,
-        "frameW": 14,
-        "frameH": 16
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 160,
@@ -6281,7 +6281,7 @@
       },
       {
         "code": 183,
-        "width": 7,
+        "width": 5,
         "height": 10,
         "x": 112,
         "y": 176,
@@ -8094,8 +8094,8 @@
         "height": 19,
         "x": 435,
         "y": 210,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 128,
@@ -8103,8 +8103,8 @@
         "height": 19,
         "x": 0,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 129,
@@ -8112,8 +8112,8 @@
         "height": 19,
         "x": 29,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 130,
@@ -8121,8 +8121,8 @@
         "height": 19,
         "x": 58,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 131,
@@ -8130,8 +8130,8 @@
         "height": 19,
         "x": 87,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 132,
@@ -8139,8 +8139,8 @@
         "height": 19,
         "x": 116,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 133,
@@ -8148,8 +8148,8 @@
         "height": 19,
         "x": 145,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 134,
@@ -8157,8 +8157,8 @@
         "height": 19,
         "x": 174,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 135,
@@ -8166,8 +8166,8 @@
         "height": 19,
         "x": 203,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 136,
@@ -8175,8 +8175,8 @@
         "height": 19,
         "x": 232,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 137,
@@ -8184,8 +8184,8 @@
         "height": 19,
         "x": 261,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 138,
@@ -8193,8 +8193,8 @@
         "height": 19,
         "x": 290,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 139,
@@ -8202,8 +8202,8 @@
         "height": 19,
         "x": 319,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 140,
@@ -8211,8 +8211,8 @@
         "height": 19,
         "x": 348,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 141,
@@ -8220,8 +8220,8 @@
         "height": 19,
         "x": 377,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 142,
@@ -8229,8 +8229,8 @@
         "height": 19,
         "x": 406,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 143,
@@ -8238,8 +8238,8 @@
         "height": 19,
         "x": 435,
         "y": 240,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 144,
@@ -8247,8 +8247,8 @@
         "height": 19,
         "x": 0,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 145,
@@ -8274,8 +8274,8 @@
         "height": 19,
         "x": 87,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 148,
@@ -8283,8 +8283,8 @@
         "height": 19,
         "x": 116,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 149,
@@ -8292,8 +8292,8 @@
         "height": 19,
         "x": 145,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 150,
@@ -8301,8 +8301,8 @@
         "height": 19,
         "x": 174,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 151,
@@ -8310,8 +8310,8 @@
         "height": 19,
         "x": 203,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 152,
@@ -8319,8 +8319,8 @@
         "height": 19,
         "x": 232,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 153,
@@ -8328,8 +8328,8 @@
         "height": 19,
         "x": 261,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 154,
@@ -8337,8 +8337,8 @@
         "height": 19,
         "x": 290,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 155,
@@ -8346,8 +8346,8 @@
         "height": 19,
         "x": 319,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 156,
@@ -8355,8 +8355,8 @@
         "height": 19,
         "x": 348,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 157,
@@ -8364,8 +8364,8 @@
         "height": 19,
         "x": 377,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 158,
@@ -8373,8 +8373,8 @@
         "height": 19,
         "x": 406,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 159,
@@ -8382,8 +8382,8 @@
         "height": 19,
         "x": 435,
         "y": 270,
-        "frameW": 29,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 160,
@@ -8594,7 +8594,7 @@
       },
       {
         "code": 183,
-        "width": 14,
+        "width": 8,
         "height": 19,
         "x": 203,
         "y": 330,
@@ -10407,8 +10407,8 @@
         "height": 10,
         "x": 255,
         "y": 126,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 128,
@@ -10416,8 +10416,8 @@
         "height": 10,
         "x": 0,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 129,
@@ -10425,8 +10425,8 @@
         "height": 10,
         "x": 17,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 130,
@@ -10434,8 +10434,8 @@
         "height": 10,
         "x": 34,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 131,
@@ -10443,8 +10443,8 @@
         "height": 10,
         "x": 51,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 132,
@@ -10452,8 +10452,8 @@
         "height": 10,
         "x": 68,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 133,
@@ -10461,8 +10461,8 @@
         "height": 10,
         "x": 85,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 134,
@@ -10470,8 +10470,8 @@
         "height": 10,
         "x": 102,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 135,
@@ -10479,8 +10479,8 @@
         "height": 10,
         "x": 119,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 136,
@@ -10488,8 +10488,8 @@
         "height": 10,
         "x": 136,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 137,
@@ -10497,8 +10497,8 @@
         "height": 10,
         "x": 153,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 138,
@@ -10506,8 +10506,8 @@
         "height": 10,
         "x": 170,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 139,
@@ -10515,8 +10515,8 @@
         "height": 10,
         "x": 187,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 140,
@@ -10524,8 +10524,8 @@
         "height": 10,
         "x": 204,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 141,
@@ -10533,8 +10533,8 @@
         "height": 10,
         "x": 221,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 142,
@@ -10542,8 +10542,8 @@
         "height": 10,
         "x": 238,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 143,
@@ -10551,8 +10551,8 @@
         "height": 10,
         "x": 255,
         "y": 144,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 144,
@@ -10560,8 +10560,8 @@
         "height": 10,
         "x": 0,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 145,
@@ -10587,8 +10587,8 @@
         "height": 10,
         "x": 51,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 148,
@@ -10596,8 +10596,8 @@
         "height": 10,
         "x": 68,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 149,
@@ -10605,8 +10605,8 @@
         "height": 10,
         "x": 85,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 150,
@@ -10614,8 +10614,8 @@
         "height": 10,
         "x": 102,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 151,
@@ -10623,8 +10623,8 @@
         "height": 10,
         "x": 119,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 152,
@@ -10632,8 +10632,8 @@
         "height": 10,
         "x": 136,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 153,
@@ -10641,8 +10641,8 @@
         "height": 10,
         "x": 153,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 154,
@@ -10650,8 +10650,8 @@
         "height": 10,
         "x": 170,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 155,
@@ -10659,8 +10659,8 @@
         "height": 10,
         "x": 187,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 156,
@@ -10668,8 +10668,8 @@
         "height": 10,
         "x": 204,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 157,
@@ -10677,8 +10677,8 @@
         "height": 10,
         "x": 221,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 158,
@@ -10686,8 +10686,8 @@
         "height": 10,
         "x": 238,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 159,
@@ -10695,8 +10695,8 @@
         "height": 10,
         "x": 255,
         "y": 162,
-        "frameW": 17,
-        "frameH": 18
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 160,
@@ -10907,7 +10907,7 @@
       },
       {
         "code": 183,
-        "width": 8,
+        "width": 5,
         "height": 10,
         "x": 119,
         "y": 198,
@@ -12720,8 +12720,8 @@
         "height": 20,
         "x": 525,
         "y": 210,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 128,
@@ -12729,8 +12729,8 @@
         "height": 20,
         "x": 0,
         "y": 240,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 129,
@@ -12738,8 +12738,8 @@
         "height": 20,
         "x": 35,
         "y": 240,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 130,
@@ -12846,8 +12846,8 @@
         "height": 20,
         "x": 455,
         "y": 240,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 142,
@@ -12864,8 +12864,8 @@
         "height": 20,
         "x": 525,
         "y": 240,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 144,
@@ -12873,8 +12873,8 @@
         "height": 20,
         "x": 0,
         "y": 270,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 145,
@@ -12990,8 +12990,8 @@
         "height": 20,
         "x": 455,
         "y": 270,
-        "frameW": 35,
-        "frameH": 30
+        "frameW": 0,
+        "frameH": 0
       },
       {
         "code": 158,
diff --git a/scripts/build-d2-ttf.ts b/scripts/build-d2-ttf.ts
new file mode 100644
index 0000000..7cbdaee
--- /dev/null
+++ b/scripts/build-d2-ttf.ts
@@ -0,0 +1,661 @@
+/**
+ * Authentic Diablo II v1.13c TrueType (`.ttf`) WebFont Builder.
+ *
+ * Vectorizes the 256-glyph DC6 bitmap font tables from `d2data.mpq`
+ * (`data\local\font\latin\font42.dc6` + `font42.tbl` for `D2Exocet`, and
+ * `data\local\font\latin\fontformal12.dc6` + `fontformal12.tbl` for `D2Formal436`)
+ * into standards-compliant TrueType (`sfnt` 0x00010000) font files with zero
+ * external network dependencies.
+ */
+
+import type { SpriteFrame } from '../src/formats/sprite.ts'
+
+interface Point {
+  readonly x: number
+  readonly y: number
+}
+
+/**
+ * Trace closed polygon contours (clockwise outer boundaries, counter-clockwise holes
+ * in +X right, +Y up coordinates) from a binary foreground mask `mask[y * width + x]`.
+ */
+export function traceBitmapContours(
+  mask: Uint8Array,
+  width: number,
+  height: number,
+  baselineY: number,
+  scale: number,
+): Point[][] {
+  interface Edge {
+    x0: number
+    y0: number
+    x1: number
+    y1: number
+    dir: number // 0=up, 1=right, 2=down, 3=left
+    used: boolean
+  }
+
+  const edgesByStart = new Map<string, Edge[]>()
+  const allEdges: Edge[] = []
+  const addEdge = (x0: number, y0: number, x1: number, y1: number, dir: number): void => {
+    const e: Edge = { x0, y0, x1, y1, dir, used: false }
+    allEdges.push(e)
+    const k = `${x0},${y0}`
+    let list = edgesByStart.get(k)
+    if (!list) {
+      list = []
+      edgesByStart.set(k, list)
+    }
+    list.push(e)
+  }
+
+  const get = (x: number, y: number): number => {
+    if (x < 0 || x >= width || y < 0 || y >= height) return 0
+    return mask[y * width + x] ?? 0
+  }
+
+  for (let y = 0; y < height; y++) {
+    const yUp = baselineY - y
+    for (let x = 0; x < width; x++) {
+      if (!get(x, y)) continue
+      if (!get(x - 1, y)) addEdge(x, yUp - 1, x, yUp, 0)
+      if (!get(x, y - 1)) addEdge(x, yUp, x + 1, yUp, 1)
+      if (!get(x + 1, y)) addEdge(x + 1, yUp, x + 1, yUp - 1, 2)
+      if (!get(x, y + 1)) addEdge(x + 1, yUp - 1, x, yUp - 1, 3)
+    }
+  }
+
+  const contours: Point[][] = []
+  for (const startEdge of allEdges) {
+    if (startEdge.used) continue
+    const rawPts: { x: number; y: number; dir: number }[] = []
+    let cur: Edge | undefined = startEdge
+    while (cur && !cur.used) {
+      cur.used = true
+      rawPts.push({ x: cur.x0, y: cur.y0, dir: cur.dir })
+      const candidates = edgesByStart.get(`${cur.x1},${cur.y1}`)
+      if (!candidates) break
+      let next: Edge | undefined
+      const prefDirs = [(cur.dir + 1) % 4, cur.dir, (cur.dir + 3) % 4]
+      for (const pd of prefDirs) {
+        next = candidates.find(c => !c.used && c.dir === pd)
+        if (next) break
+      }
+      if (!next) {
+        next = candidates.find(c => !c.used)
+      }
+      cur = next
+    }
+    if (rawPts.length < 4) continue
+    const simplified: Point[] = []
+    for (let i = 0; i < rawPts.length; i++) {
+      const prev = rawPts[(i + rawPts.length - 1) % rawPts.length]!
+      const curr = rawPts[i]!
+      if (prev.dir !== curr.dir) {
+        simplified.push({
+          x: Math.round(curr.x * scale),
+          y: Math.round(curr.y * scale),
+        })
+      }
+    }
+    if (simplified.length >= 3) {
+      contours.push(simplified)
+    }
+  }
+
+  return contours
+}
+
+export interface Dc6FrameLike {
+  readonly width: number
+  readonly height: number
+  readonly indices: Uint8Array
+}
+
+export interface BuildTrueTypeFontOptions {
+  readonly familyName: string
+  readonly postScriptName: string
+  readonly frames: readonly Dc6FrameLike[]
+  readonly tblBytes: Uint8Array
+  readonly baselineY: number
+  readonly scale: number
+  readonly isForeground: (paletteIdx: number) => boolean
+}
+
+/**
+ * Build a complete TrueType (`.ttf`) binary buffer from a 256-glyph DC6 sheet and `.tbl` metrics.
+ */
+export function buildTrueTypeFont(options: BuildTrueTypeFontOptions): Uint8Array {
+  const { familyName, postScriptName, frames, tblBytes, baselineY, scale, isForeground } = options
+
+  interface BuiltGlyph {
+    contours: Point[][]
+    advanceWidth: number
+    xMin: number
+    yMin: number
+    xMax: number
+    yMax: number
+  }
+
+  const glyphs: BuiltGlyph[] = []
+  const unicodeToGlyph = new Map<number, number>()
+
+  // Glyph 0: .notdef
+  glyphs.push({
+    contours: [
+      [
+        { x: 40, y: 0 },
+        { x: 40, y: 600 },
+        { x: 440, y: 600 },
+        { x: 440, y: 0 },
+      ],
+      [
+        { x: 100, y: 60 },
+        { x: 380, y: 60 },
+        { x: 380, y: 540 },
+        { x: 100, y: 540 },
+      ],
+    ],
+    advanceWidth: 500,
+    xMin: 40,
+    yMin: 0,
+    xMax: 440,
+    yMax: 600,
+  })
+
+  const win1252Map: Record<number, number> = {
+    0x80: 0x20ac,
+    0x82: 0x201a,
+    0x83: 0x0192,
+    0x84: 0x201e,
+    0x85: 0x2026,
+    0x86: 0x2020,
+    0x87: 0x2021,
+    0x88: 0x02c6,
+    0x89: 0x2030,
+    0x8a: 0x0160,
+    0x8b: 0x2039,
+    0x8c: 0x0152,
+    0x8e: 0x017d,
+    0x91: 0x2018,
+    0x92: 0x2019,
+    0x93: 0x201c,
+    0x94: 0x201d,
+    0x95: 0x2022,
+    0x96: 0x2013,
+    0x97: 0x2014,
+    0x98: 0x02dc,
+    0x99: 0x2122,
+    0x9a: 0x0161,
+    0x9b: 0x203a,
+    0x9c: 0x0153,
+    0x9e: 0x017e,
+    0x9f: 0x0178,
+  }
+
+  const qRecOff = 12 + 0x3f * 14
+  const qFrameIdx = qRecOff + 8 < tblBytes.length ? (tblBytes[qRecOff + 8] ?? 0x3f) : 0x3f
+  const placeholderCandidates = [
+    frames[qFrameIdx] ?? frames[0x3f],
+    frames[0x7f],
+    frames[0x81],
+    frames[0x8d],
+    frames[0x8f],
+    frames[0x90],
+    frames[0x9d],
+  ].filter((f): f is Dc6FrameLike => Boolean(f && f.width > 0 && f.height > 0))
+
+  const isSameFrame = (a: Dc6FrameLike | undefined, b: Dc6FrameLike | undefined): boolean => {
+    if (!a || !b || a.width === 0 || b.width === 0) return false
+    if (a.width !== b.width || a.height !== b.height) return false
+    for (let i = 0; i < a.indices.length; i++) {
+      if (isForeground(a.indices[i] ?? 0) !== isForeground(b.indices[i] ?? 0)) return false
+    }
+    return true
+  }
+
+  const isPlaceholderQuestionMark = (f: Dc6FrameLike | undefined): boolean =>
+    placeholderCandidates.some(cand => isSameFrame(f, cand))
+
+  const dotRecOff = 12 + 0x2e * 14
+  const dotMetricW = dotRecOff + 3 < tblBytes.length ? (tblBytes[dotRecOff + 3] || 6) : 6
+  const dotFrameIdx = dotRecOff + 8 < tblBytes.length ? (tblBytes[dotRecOff + 8] ?? 0x2e) : 0x2e
+  const dotFrame = frames[dotFrameIdx] ?? frames[0x2e]
+
+  const dashRecOff = 12 + 0x2d * 14
+  const dashMetricW = dashRecOff + 3 < tblBytes.length ? (tblBytes[dashRecOff + 3] || 8) : 8
+  const dashFrameIdx = dashRecOff + 8 < tblBytes.length ? (tblBytes[dashRecOff + 8] ?? 0x2d) : 0x2d
+  const dashFrame = frames[dashFrameIdx] ?? frames[0x2d]
+
+  for (let code = 0x20; code <= 0xff; code++) {
+    const recOff = 12 + code * 14
+    let metricWidth = recOff + 3 < tblBytes.length ? (tblBytes[recOff + 3] || 8) : 8
+    const frameIdx = recOff + 8 < tblBytes.length ? (tblBytes[recOff + 8] ?? code) : code
+    let frame = frames[frameIdx] ?? frames[code]
+    let glyphBaselineY = baselineY
+
+    let yShiftUnits = 0
+    if ((code === 0xb7 || code === 0x95) && dotFrame && dotFrame.width > 0 && dotFrame.height > 0) {
+      frame = dotFrame
+      metricWidth = dotMetricW
+      yShiftUnits = Math.round(baselineY * 0.35 * scale)
+    } else if (code !== 0x3f && code !== 0x20 && code !== 0xa0 && isPlaceholderQuestionMark(frame)) {
+      if ((code === 0x96 || code === 0x97) && dashFrame && dashFrame.width > 0 && dashFrame.height > 0) {
+        frame = dashFrame
+        metricWidth = dashMetricW
+      } else {
+        continue
+      }
+    }
+
+    let contours: Point[][] = []
+    if (code !== 0x20 && code !== 0xa0 && frame && frame.width > 0 && frame.height > 0) {
+      const mask = new Uint8Array(frame.width * frame.height)
+      for (let i = 0; i < mask.length; i++) {
+        mask[i] = isForeground(frame.indices[i] ?? 0) ? 1 : 0
+      }
+      contours = traceBitmapContours(mask, frame.width, frame.height, glyphBaselineY, scale)
+      if (yShiftUnits !== 0) {
+        contours = contours.map(c => c.map(p => ({ x: p.x, y: p.y + yShiftUnits })))
+      }
+    }
+
+    let xMin = 0
+    let yMin = 0
+    let xMax = 0
+    let yMax = 0
+    if (contours.length > 0) {
+      xMin = Infinity
+      yMin = Infinity
+      xMax = -Infinity
+      yMax = -Infinity
+      for (const c of contours) {
+        for (const p of c) {
+          if (p.x < xMin) xMin = p.x
+          if (p.y < yMin) yMin = p.y
+          if (p.x > xMax) xMax = p.x
+          if (p.y > yMax) yMax = p.y
+        }
+      }
+    }
+
+    const advanceWidth = Math.max(
+      Math.round(metricWidth * scale),
+      contours.length > 0 ? xMax + Math.round(scale) : Math.round(6 * scale),
+    )
+
+    const gIdx = glyphs.length
+    glyphs.push({
+      contours,
+      advanceWidth,
+      xMin,
+      yMin,
+      xMax,
+      yMax,
+    })
+
+    if (code < 0x7f || code >= 0xa0) {
+      unicodeToGlyph.set(code, gIdx)
+    } else if (win1252Map[code]) {
+      unicodeToGlyph.set(win1252Map[code]!, gIdx)
+    }
+  }
+
+  const glyfChunks: Uint8Array[] = []
+  const locaOffsets: number[] = []
+  let currentGlyfOffset = 0
+
+  let fontXMin = Infinity
+  let fontYMin = Infinity
+  let fontXMax = -Infinity
+  let fontYMax = -Infinity
+  let maxPoints = 0
+  let maxContours = 0
+  let advanceWidthMax = 0
+  let minLsb = Infinity
+  let minRsb = Infinity
+  let xMaxExtent = -Infinity
+
+  for (const g of glyphs) {
+    locaOffsets.push(currentGlyfOffset)
+    if (g.advanceWidth > advanceWidthMax) advanceWidthMax = g.advanceWidth
+    if (g.contours.length === 0) {
+      minLsb = Math.min(minLsb, 0)
+      minRsb = Math.min(minRsb, g.advanceWidth)
+      xMaxExtent = Math.max(xMaxExtent, 0)
+      continue
+    }
+
+    if (g.xMin < fontXMin) fontXMin = g.xMin
+    if (g.yMin < fontYMin) fontYMin = g.yMin
+    if (g.xMax > fontXMax) fontXMax = g.xMax
+    if (g.yMax > fontYMax) fontYMax = g.yMax
+    if (g.xMin < minLsb) minLsb = g.xMin
+    const rsb = g.advanceWidth - g.xMax
+    if (rsb < minRsb) minRsb = rsb
+    if (g.xMax > xMaxExtent) xMaxExtent = g.xMax
+
+    const numContours = g.contours.length
+    if (numContours > maxContours) maxContours = numContours
+    const allPts: Point[] = []
+    const endPts: number[] = []
+    for (const c of g.contours) {
+      for (const p of c) allPts.push(p)
+      endPts.push(allPts.length - 1)
+    }
+    if (allPts.length > maxPoints) maxPoints = allPts.length
+
+    const rawLen = 10 + numContours * 2 + 2 + allPts.length * 5
+    const paddedLen = (rawLen + 3) & ~3
+    const buf = new Uint8Array(paddedLen)
+    const dv = new DataView(buf.buffer)
+    dv.setInt16(0, numContours, false)
+    dv.setInt16(2, g.xMin, false)
+    dv.setInt16(4, g.yMin, false)
+    dv.setInt16(6, g.xMax, false)
+    dv.setInt16(8, g.yMax, false)
+    let off = 10
+    for (const ep of endPts) {
+      dv.setUint16(off, ep, false)
+      off += 2
+    }
+    dv.setUint16(off, 0, false) // instructionLength = 0
+    off += 2
+    for (let i = 0; i < allPts.length; i++) {
+      buf[off++] = 0x01
+    }
+    let prevX = 0
+    for (const pt of allPts) {
+      dv.setInt16(off, pt.x - prevX, false)
+      prevX = pt.x
+      off += 2
+    }
+    let prevY = 0
+    for (const pt of allPts) {
+      dv.setInt16(off, pt.y - prevY, false)
+      prevY = pt.y
+      off += 2
+    }
+
+    glyfChunks.push(buf)
+    currentGlyfOffset += paddedLen
+  }
+  locaOffsets.push(currentGlyfOffset)
+
+  const glyfTable = new Uint8Array(currentGlyfOffset)
+  let gPos = 0
+  for (const chunk of glyfChunks) {
+    glyfTable.set(chunk, gPos)
+    gPos += chunk.length
+  }
+
+  const locaTable = new Uint8Array(locaOffsets.length * 4)
+  const locaDv = new DataView(locaTable.buffer)
+  locaOffsets.forEach((o, idx) => locaDv.setUint32(idx * 4, o, false))
+
+  const headTable = new Uint8Array(54)
+  const headDv = new DataView(headTable.buffer)
+  headDv.setUint32(0, 0x00010000, false)
+  headDv.setUint32(4, 0x00010000, false)
+  headDv.setUint32(8, 0, false)
+  headDv.setUint32(12, 0x5f0f3cf5, false)
+  headDv.setUint16(16, 0x000b, false)
+  headDv.setUint16(18, 1024, false)
+  headDv.setInt16(36, fontXMin, false)
+  headDv.setInt16(38, fontYMin, false)
+  headDv.setInt16(40, fontXMax, false)
+  headDv.setInt16(42, fontYMax, false)
+  headDv.setUint16(44, 0, false)
+  headDv.setUint16(46, 8, false)
+  headDv.setInt16(48, 2, false)
+  headDv.setInt16(50, 1, false)
+  headDv.setInt16(52, 0, false)
+
+  const ascender = Math.max(832, fontYMax)
+  const descender = Math.min(-192, fontYMin)
+
+  const hheaTable = new Uint8Array(36)
+  const hheaDv = new DataView(hheaTable.buffer)
+  hheaDv.setUint32(0, 0x00010000, false)
+  hheaDv.setInt16(4, ascender, false)
+  hheaDv.setInt16(6, descender, false)
+  hheaDv.setInt16(8, 0, false)
+  hheaDv.setUint16(10, advanceWidthMax, false)
+  hheaDv.setInt16(12, minLsb, false)
+  hheaDv.setInt16(14, minRsb, false)
+  hheaDv.setInt16(16, xMaxExtent, false)
+  hheaDv.setInt16(18, 1, false)
+  hheaDv.setInt16(20, 0, false)
+  hheaDv.setInt16(22, 0, false)
+  hheaDv.setInt16(32, 0, false)
+  hheaDv.setUint16(34, glyphs.length, false)
+
+  const maxpTable = new Uint8Array(32)
+  const maxpDv = new DataView(maxpTable.buffer)
+  maxpDv.setUint32(0, 0x00010000, false)
+  maxpDv.setUint16(4, glyphs.length, false)
+  maxpDv.setUint16(6, maxPoints, false)
+  maxpDv.setUint16(8, maxContours, false)
+  maxpDv.setUint16(10, 0, false)
+  maxpDv.setUint16(12, 0, false)
+  maxpDv.setUint16(14, 2, false)
+
+  const hmtxTable = new Uint8Array(glyphs.length * 4)
+  const hmtxDv = new DataView(hmtxTable.buffer)
+  glyphs.forEach((g, idx) => {
+    hmtxDv.setUint16(idx * 4, g.advanceWidth, false)
+    hmtxDv.setInt16(idx * 4 + 2, g.contours.length > 0 ? g.xMin : 0, false)
+  })
+
+  const os2Table = new Uint8Array(96)
+  const os2Dv = new DataView(os2Table.buffer)
+  const avgWidth = Math.round(
+    glyphs.reduce((acc, g) => acc + g.advanceWidth, 0) / Math.max(1, glyphs.length),
+  )
+  os2Dv.setUint16(0, 4, false)
+  os2Dv.setInt16(2, avgWidth, false)
+  os2Dv.setUint16(4, 400, false)
+  os2Dv.setUint16(6, 5, false)
+  os2Dv.setUint16(8, 0, false)
+  os2Dv.setInt16(10, 650, false)
+  os2Dv.setInt16(12, 600, false)
+  os2Dv.setInt16(14, 0, false)
+  os2Dv.setInt16(16, 75, false)
+  os2Dv.setInt16(18, 650, false)
+  os2Dv.setInt16(20, 600, false)
+  os2Dv.setInt16(22, 0, false)
+  os2Dv.setInt16(24, 350, false)
+  os2Dv.setInt16(26, 50, false)
+  os2Dv.setInt16(28, 300, false)
+  os2Dv.setInt16(30, 0, false)
+  os2Table.set([2, 0, 5, 3, 0, 0, 0, 0, 0, 0], 32)
+  os2Dv.setUint32(42, 0x00000003, false)
+  os2Table.set([0x42, 0x4c, 0x49, 0x5a], 58)
+  os2Dv.setUint16(62, 0x0040, false)
+  const sortedCodes = [...unicodeToGlyph.keys()].sort((a, b) => a - b)
+  os2Dv.setUint16(64, sortedCodes[0] ?? 0x0020, false)
+  os2Dv.setUint16(66, sortedCodes[sortedCodes.length - 1] ?? 0x00ff, false)
+  os2Dv.setInt16(68, ascender, false)
+  os2Dv.setInt16(70, descender, false)
+  os2Dv.setInt16(72, 0, false)
+  os2Dv.setUint16(74, ascender, false)
+  os2Dv.setUint16(76, Math.abs(descender), false)
+  os2Dv.setUint32(78, 0x00000001, false)
+  os2Dv.setInt16(86, 512, false)
+  os2Dv.setInt16(88, 704, false)
+  os2Dv.setUint16(90, 0, false)
+  os2Dv.setUint16(92, 0x0020, false)
+  os2Dv.setUint16(94, 1, false)
+
+  interface Seg {
+    start: number
+    end: number
+    delta: number
+  }
+  const segs: Seg[] = []
+  for (const code of sortedCodes) {
+    const gIdx = unicodeToGlyph.get(code)!
+    const delta = (gIdx - code) & 0xffff
+    const prev = segs[segs.length - 1]
+    if (prev && prev.end + 1 === code && prev.delta === delta) {
+      prev.end = code
+    } else {
+      segs.push({ start: code, end: code, delta })
+    }
+  }
+  segs.push({ start: 0xffff, end: 0xffff, delta: 1 })
+  const segCount = segs.length
+  const segCountX2 = segCount * 2
+  const maxPow2 = 1 << Math.floor(Math.log2(segCount))
+  const searchRangeCmap = maxPow2 * 2
+  const entrySelectorCmap = Math.floor(Math.log2(segCount))
+  const rangeShiftCmap = segCountX2 - searchRangeCmap
+
+  const subtableLen = 16 + segCount * 8
+  const cmapTable = new Uint8Array(4 + 8 * 2 + subtableLen)
+  const cmapDv = new DataView(cmapTable.buffer)
+  cmapDv.setUint16(0, 0, false)
+  cmapDv.setUint16(2, 2, false)
+  cmapDv.setUint16(4, 0, false)
+  cmapDv.setUint16(6, 3, false)
+  cmapDv.setUint32(8, 20, false)
+  cmapDv.setUint16(12, 3, false)
+  cmapDv.setUint16(14, 1, false)
+  cmapDv.setUint32(16, 20, false)
+
+  let cOff = 20
+  cmapDv.setUint16(cOff, 4, false)
+  cmapDv.setUint16(cOff + 2, subtableLen, false)
+  cmapDv.setUint16(cOff + 4, 0, false)
+  cmapDv.setUint16(cOff + 6, segCountX2, false)
+  cmapDv.setUint16(cOff + 8, searchRangeCmap, false)
+  cmapDv.setUint16(cOff + 10, entrySelectorCmap, false)
+  cmapDv.setUint16(cOff + 12, rangeShiftCmap, false)
+  cOff += 14
+  for (const s of segs) {
+    cmapDv.setUint16(cOff, s.end, false)
+    cOff += 2
+  }
+  cmapDv.setUint16(cOff, 0, false)
+  cOff += 2
+  for (const s of segs) {
+    cmapDv.setUint16(cOff, s.start, false)
+    cOff += 2
+  }
+  for (const s of segs) {
+    cmapDv.setUint16(cOff, s.delta, false)
+    cOff += 2
+  }
+  for (let i = 0; i < segs.length; i++) {
+    cmapDv.setUint16(cOff, 0, false)
+    cOff += 2
+  }
+
+  const nameRecords: { nameId: number; str: string }[] = [
+    { nameId: 1, str: familyName },
+    { nameId: 2, str: 'Regular' },
+    { nameId: 3, str: `${familyName}-1.13c` },
+    { nameId: 4, str: familyName },
+    { nameId: 5, str: 'Version 1.13c' },
+    { nameId: 6, str: postScriptName },
+  ]
+  const encodedStrings: Uint8Array[] = nameRecords.map(r => {
+    const b = new Uint8Array(r.str.length * 2)
+    const dv = new DataView(b.buffer)
+    for (let i = 0; i < r.str.length; i++) {
+      dv.setUint16(i * 2, r.str.charCodeAt(i), false)
+    }
+    return b
+  })
+  const storageOffset = 6 + nameRecords.length * 12
+  const totalStrBytes = encodedStrings.reduce((a, b) => a + b.length, 0)
+  const nameTable = new Uint8Array(storageOffset + totalStrBytes)
+  const nameDv = new DataView(nameTable.buffer)
+  nameDv.setUint16(0, 0, false)
+  nameDv.setUint16(2, nameRecords.length, false)
+  nameDv.setUint16(4, storageOffset, false)
+  let strCur = 0
+  nameRecords.forEach((rec, idx) => {
+    const strBytes = encodedStrings[idx]!
+    const rOff = 6 + idx * 12
+    nameDv.setUint16(rOff, 3, false)
+    nameDv.setUint16(rOff + 2, 1, false)
+    nameDv.setUint16(rOff + 4, 0x0409, false)
+    nameDv.setUint16(rOff + 6, rec.nameId, false)
+    nameDv.setUint16(rOff + 8, strBytes.length, false)
+    nameDv.setUint16(rOff + 10, strCur, false)
+    nameTable.set(strBytes, storageOffset + strCur)
+    strCur += strBytes.length
+  })
+
+  const postTable = new Uint8Array(32)
+  const postDv = new DataView(postTable.buffer)
+  postDv.setUint32(0, 0x00030000, false)
+  postDv.setInt32(4, 0, false)
+  postDv.setInt16(8, -100, false)
+  postDv.setInt16(10, 50, false)
+  postDv.setUint32(12, 0, false)
+
+  const tables: { tag: string; data: Uint8Array }[] = [
+    { tag: 'OS/2', data: os2Table },
+    { tag: 'cmap', data: cmapTable },
+    { tag: 'glyf', data: glyfTable },
+    { tag: 'head', data: headTable },
+    { tag: 'hhea', data: hheaTable },
+    { tag: 'hmtx', data: hmtxTable },
+    { tag: 'loca', data: locaTable },
+    { tag: 'maxp', data: maxpTable },
+    { tag: 'name', data: nameTable },
+    { tag: 'post', data: postTable },
+  ].sort((a, b) => (a.tag < b.tag ? -1 : a.tag > b.tag ? 1 : 0))
+
+  const calcChecksum = (bytes: Uint8Array): number => {
+    const paddedLen = (bytes.length + 3) & ~3
+    const padded = new Uint8Array(paddedLen)
+    padded.set(bytes)
+    const dv = new DataView(padded.buffer)
+    let sum = 0
+    for (let i = 0; i < paddedLen; i += 4) {
+      sum = (sum + dv.getUint32(i, false)) >>> 0
+    }
+    return sum
+  }
+
+  const numTables = tables.length
+  const dirSize = 12 + numTables * 16
+  let totalSize = dirSize
+  const offsets: number[] = []
+  for (const t of tables) {
+    offsets.push(totalSize)
+    totalSize += (t.data.length + 3) & ~3
+  }
+
+  const out = new Uint8Array(totalSize)
+  const outDv = new DataView(out.buffer)
+  outDv.setUint32(0, 0x00010000, false)
+  outDv.setUint16(4, numTables, false)
+  outDv.setUint16(6, 128, false)
+  outDv.setUint16(8, 3, false)
+  outDv.setUint16(10, 32, false)
+
+  let headOffsetInFile = 0
+  tables.forEach((t, idx) => {
+    const entryOff = 12 + idx * 16
+    for (let c = 0; c < 4; c++) {
+      out[entryOff + c] = t.tag.charCodeAt(c)
+    }
+    const chksum = calcChecksum(t.data)
+    const fileOff = offsets[idx]!
+    if (t.tag === 'head') headOffsetInFile = fileOff
+    outDv.setUint32(entryOff + 4, chksum, false)
+    outDv.setUint32(entryOff + 8, fileOff, false)
+    outDv.setUint32(entryOff + 12, t.data.length, false)
+    out.set(t.data, fileOff)
+  })
+
+  const fileSum = calcChecksum(out)
+  const checkSumAdjustment = (0xb1b0afba - fileSum) >>> 0
+  outDv.setUint32(headOffsetInFile + 8, checkSumAdjustment, false)
+
+  return out
+}
diff --git a/scripts/pack-ui-assets.ts b/scripts/pack-ui-assets.ts
index 407de3b..97e0188 100644
--- a/scripts/pack-ui-assets.ts
+++ b/scripts/pack-ui-assets.ts
@@ -6,7 +6,7 @@
  * bitmap fonts, and inventory item graphics into `public/ui/`.
  */
 
-import { mkdirSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { MpqArchive } from '../src/mpq/archive.ts'
 import { fileSource } from '../src/mpq/file-source.ts'
@@ -16,6 +16,7 @@ import type { SpriteFrame, SpriteSheet } from '../src/formats/sprite.ts'
 import { decodePl2 } from '../src/formats/pl2.ts'
 import { parseTable } from '../src/game/tables.ts'
 import { encodeIndexedPng } from './png.ts'
+import { buildTrueTypeFont } from './build-d2-ttf.ts'
 
 interface BlitPlacement {
   readonly frame: SpriteFrame
@@ -133,12 +134,57 @@ function buildFontAtlas(name: string, dc6: SpriteSheet, tblBytes: Uint8Array): {
   const placements: BlitPlacement[] = []
   const glyphs: FontGlyphMetric[] = []
 
+  const qRecOff = 12 + 0x3f * 14
+  const qFrameIdx = qRecOff + 8 < tblBytes.length ? (tblBytes[qRecOff + 8] ?? 0x3f) : 0x3f
+  const placeholderCandidates = [
+    frames[qFrameIdx] ?? frames[0x3f],
+    frames[0x7f],
+    frames[0x81],
+    frames[0x8d],
+    frames[0x8f],
+    frames[0x90],
+    frames[0x9d],
+  ].filter((f): f is SpriteFrame => Boolean(f && f.width > 0 && f.height > 0))
+
+  const isSameFrame = (a: SpriteFrame | undefined, b: SpriteFrame | undefined): boolean => {
+    if (!a || !b || a.width === 0 || b.width === 0) return false
+    if (a.width !== b.width || a.height !== b.height) return false
+    for (let k = 0; k < a.indices.length; k++) {
+      if (a.indices[k] !== b.indices[k]) return false
+    }
+    return true
+  }
+
+  const isPlaceholderQuestionMark = (f: SpriteFrame | undefined): boolean =>
+    placeholderCandidates.some(cand => isSameFrame(f, cand))
+
+  const dotRecOff = 12 + 0x2e * 14
+  const dotMetricW = dotRecOff + 3 < tblBytes.length ? (tblBytes[dotRecOff + 3] || 6) : 6
+  const dotFrameIdx = dotRecOff + 8 < tblBytes.length ? (tblBytes[dotRecOff + 8] ?? 0x2e) : 0x2e
+  const dotFrame = frames[dotFrameIdx] ?? frames[0x2e]
+
   for (let i = 0; i < 256; i++) {
     const recOff = 12 + i * 14
-    const metricWidth = recOff + 3 < tblBytes.length ? (tblBytes[recOff + 3] || 6) : 6
+    let metricWidth = recOff + 3 < tblBytes.length ? (tblBytes[recOff + 3] || 6) : 6
     const metricHeight = recOff + 4 < tblBytes.length ? (tblBytes[recOff + 4] || lineHeight) : lineHeight
     const frameIdx = recOff + 8 < tblBytes.length ? (tblBytes[recOff + 8] ?? i) : i
-    const frame = frames[frameIdx] ?? frames[i]
+    let frame: SpriteFrame | undefined = frames[frameIdx] ?? frames[i]
+    if (i === 0xb7 && dotFrame) {
+      const shiftY = Math.max(1, Math.round(dotFrame.height * 0.35))
+      const shiftedIndices = new Uint8Array(dotFrame.width * dotFrame.height)
+      for (let y = 0; y < dotFrame.height; y++) {
+        const srcY = y + shiftY
+        if (srcY < dotFrame.height) {
+          for (let x = 0; x < dotFrame.width; x++) {
+            shiftedIndices[y * dotFrame.width + x] = dotFrame.indices[srcY * dotFrame.width + x]!
+          }
+        }
+      }
+      frame = { ...dotFrame, indices: shiftedIndices }
+      metricWidth = dotMetricW
+    } else if (i !== 0x3f && i >= 0x7f && isPlaceholderQuestionMark(frame)) {
+      frame = undefined
+    }
     const gx = (i % 16) * cellW
     const gy = Math.floor(i / 16) * cellH
     if (frame) {
@@ -155,6 +201,16 @@ function buildFontAtlas(name: string, dc6: SpriteSheet, tblBytes: Uint8Array): {
     })
   }
 
+  const pixels = stitchFrames(atlasWidth, atlasHeight, placements)
+  if (name === 'fontexocet10') {
+    for (let p = 0; p < pixels.length; p++) {
+      const idx = pixels[p]!
+      if (idx >= 15 && idx <= 32) {
+        pixels[p] = Math.max(15, Math.min(31, 31 - (idx - 15)))
+      }
+    }
+  }
+
   return {
     meta: {
       name,
@@ -164,7 +220,7 @@ function buildFontAtlas(name: string, dc6: SpriteSheet, tblBytes: Uint8Array): {
       atlasHeight,
       glyphs,
     },
-    pixels: stitchFrames(atlasWidth, atlasHeight, placements),
+    pixels,
   }
 }
 
@@ -401,6 +457,34 @@ async function main(): Promise<void> {
   }
   writeFileSync(join(fontsDir, 'metrics.json'), JSON.stringify(fontMetas, null, 2))
 
+  // 7b. Generate authentic local TrueType WebFonts (`D2Exocet.ttf` & `D2Formal436.ttf`) from 1.13c DC6 font sheets
+  const f42Dc6 = await decodeUiDc6('data\\local\\font\\latin\\font42.dc6')
+  const f42Tbl = await archives.read('data\\local\\font\\latin\\font42.tbl')
+  const exocetFg = new Set([4, 6, 7, 12, 13, 14, 19, 20, 23, 24, 26, 28, 29, 30])
+  const exocetTtf = buildTrueTypeFont({
+    familyName: 'D2Exocet',
+    postScriptName: 'D2Exocet-Regular',
+    frames: f42Dc6.groups[0]!.frames,
+    tblBytes: f42Tbl,
+    baselineY: 32,
+    scale: 28,
+    isForeground: idx => exocetFg.has(idx),
+  })
+  writeFileSync(join(fontsDir, 'D2Exocet.ttf'), exocetTtf)
+
+  const ff12Dc6 = await decodeUiDc6('data\\local\\font\\latin\\fontformal12.dc6')
+  const ff12Tbl = await archives.read('data\\local\\font\\latin\\fontformal12.tbl')
+  const formalTtf = buildTrueTypeFont({
+    familyName: 'D2Formal436',
+    postScriptName: 'D2Formal436-Regular',
+    frames: ff12Dc6.groups[0]!.frames,
+    tblBytes: ff12Tbl,
+    baselineY: 26,
+    scale: 56,
+    isForeground: idx => idx >= 21,
+  })
+  writeFileSync(join(fontsDir, 'D2Formal436.ttf'), formalTtf)
+
   // 8. Extract Item Inventory Sprites (`data\global\items\inv*.dc6`)
   const codeToInvFile: Record<string, string> = {}
   const uniqueInvFiles = new Set<string>()
@@ -451,7 +535,17 @@ async function main(): Promise<void> {
   const itemAtlasPixels = stitchFrames(ATLAS_W, atlasH, itemPlacements)
   savePng('items-atlas.png', ATLAS_W, atlasH, itemAtlasPixels)
 
+  const manifestPath = join(outDir, 'manifest.json')
+  let existingManifest: Record<string, unknown> = {}
+  if (existsSync(manifestPath)) {
+    try {
+      existingManifest = JSON.parse(readFileSync(manifestPath, 'utf8'))
+    } catch {
+      existingManifest = {}
+    }
+  }
   const manifest = {
+    ...existingManifest,
     version: '1.13c',
     decodedDc6Count: decodedCount,
     dc6DecodeFailures: 0,
@@ -460,7 +554,7 @@ async function main(): Promise<void> {
     codeToInvFile,
     itemRects,
   }
-  writeFileSync(join(outDir, 'manifest.json'), JSON.stringify(manifest, null, 2))
+  writeFileSync(manifestPath, JSON.stringify(manifest, null, 2))
   console.log(`Successfully decoded ${decodedCount} DC6 sheets (0 failures) and generated public/ui/ assets!`)
 }
 
diff --git a/scripts/verify-issue-504-browser.ts b/scripts/verify-issue-504-browser.ts
new file mode 100644
index 0000000..174652b
--- /dev/null
+++ b/scripts/verify-issue-504-browser.ts
@@ -0,0 +1,261 @@
+/**
+ * Automated Headless Browser Verification & Visual Audit for Issue #504:
+ * Authentic Diablo II v1.13c Exocet (`D2Exocet`) & Formal 436 (`D2Formal436`)
+ * Typography across Canvas HUD (`D2FontRenderer` DC6 bitmap blitting) and DOM/CSS
+ * (`index.html`, `acts-en.html`, `acts.html`, `acts-zh.html`).
+ */
+
+import { spawn } from 'node:child_process'
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { createServer } from 'vite'
+
+const ARTIFACT_DIR =
+  process.argv[2] ||
+  '/usr/local/google/home/taodao/diablo2-web/.agents/teamwork/implementer_504_r1'
+
+const sleep = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms))
+
+interface CdpSession {
+  evalJs: <T = any>(expression: string) => Promise<T>
+  saveScreenshot: (filename: string) => Promise<void>
+  waitForGameReady: () => Promise<void>
+}
+
+async function withChromePage<T>(
+  url: string,
+  matchSubstr: string,
+  debugPort: number,
+  fn: (session: CdpSession) => Promise<T>,
+): Promise<T> {
+  const chromeProc = spawn('/usr/bin/google-chrome', [
+    '--headless=new',
+    `--remote-debugging-port=${debugPort}`,
+    '--no-sandbox',
+    '--disable-dev-shm-usage',
+    '--enable-webgl',
+    '--ignore-gpu-blocklist',
+    '--use-gl=angle',
+    '--use-angle=swiftshader',
+    '--window-size=1280,840',
+    url,
+  ])
+
+  try {
+    let wsUrl: string | null = null
+    for (let i = 0; i < 60; i++) {
+      await sleep(300)
+      try {
+        const res = await fetch(`http://127.0.0.1:${debugPort}/json/list`)
+        const pages = (await res.json()) as { type: string; url: string; webSocketDebuggerUrl?: string }[]
+        const page = pages.find(p => p.type === 'page' && p.url.includes(matchSubstr))
+        if (page?.webSocketDebuggerUrl) {
+          wsUrl = page.webSocketDebuggerUrl
+          break
+        }
+      } catch {
+        // Wait for Chrome CDP
+      }
+    }
+
+    if (!wsUrl) {
+      throw new Error(`Failed to connect to Chrome CDP for ${url}`)
+    }
+    const ws = new WebSocket(wsUrl)
+    await new Promise<void>(resolve => {
+      ws.onopen = () => resolve()
+    })
+
+    let idCounter = 1
+    const sendCommand = <R = any>(method: string, params: Record<string, unknown> = {}): Promise<R> =>
+      new Promise((resolve, reject) => {
+        const id = idCounter++
+        const handler = (event: MessageEvent) => {
+          const msg = JSON.parse(String(event.data))
+          if (msg.id === id) {
+            ws.removeEventListener('message', handler)
+            if (msg.error) reject(new Error(JSON.stringify(msg.error)))
+            else resolve(msg.result as R)
+          }
+        }
+        ws.addEventListener('message', handler)
+        ws.send(JSON.stringify({ id, method, params }))
+      })
+
+    const evalJs = async <R = any>(expression: string): Promise<R> => {
+      const res = await sendCommand<{ result: { value: R }; exceptionDetails?: any }>('Runtime.evaluate', {
+        expression,
+        awaitPromise: true,
+        returnByValue: true,
+      })
+      if (res.exceptionDetails) {
+        throw new Error(`JS exception: ${JSON.stringify(res.exceptionDetails)}`)
+      }
+      return res.result.value
+    }
+
+    const saveScreenshot = async (filename: string): Promise<void> => {
+      const shot = await sendCommand<{ data: string }>('Page.captureScreenshot', { format: 'png' })
+      writeFileSync(join(ARTIFACT_DIR, filename), Buffer.from(shot.data, 'base64'))
+      console.log(`   Saved screenshot: ${filename}`)
+    }
+
+    const waitForGameReady = async (): Promise<void> => {
+      for (let i = 0; i < 120; i++) {
+        const ready = await evalJs<boolean>(
+          `Boolean(window.__d2webAct?.ready && window.__d2webHud?.ready && window.__d2webHudInstance && window.__d2webHud?.assetsLoaded?.ctrlPnl)`,
+        )
+        if (ready) {
+          await sleep(500)
+          return
+        }
+        await sleep(300)
+      }
+      throw new Error(`Timed out waiting for game ready at ${url}`)
+    }
+
+    await sendCommand('Runtime.enable')
+    await sendCommand('Page.enable')
+
+    const result = await fn({ evalJs, saveScreenshot, waitForGameReady })
+    ws.close()
+    return result
+  } finally {
+    chromeProc.kill('SIGKILL')
+    await sleep(200)
+  }
+}
+
+async function main(): Promise<void> {
+  mkdirSync(ARTIFACT_DIR, { recursive: true })
+  const server = await createServer({
+    root: process.cwd(),
+    server: { port: 0, host: '127.0.0.1' },
+  })
+  await server.listen()
+  const address = server.httpServer?.address()
+  const port = typeof address === 'object' && address ? address.port : 5173
+  const baseUrl = `http://127.0.0.1:${port}`
+  console.log(`1. Vite dev server listening at ${baseUrl}`)
+
+  try {
+    // ── Phase A: Verify index.html WebFont loading & computed typography ──
+    await withChromePage(`${baseUrl}/index.html`, 'index.html', 9251, async ({ evalJs, saveScreenshot }) => {
+      await sleep(500)
+      const indexFonts = await evalJs<{
+        exocetLoaded: boolean
+        formalLoaded: boolean
+        h1FontFamily: string
+        descFontFamily: string
+      }>(`(async () => {
+        await document.fonts.ready;
+        await Promise.all([
+          document.fonts.load('16px D2Exocet'),
+          document.fonts.load('16px D2Formal436'),
+        ]);
+        return {
+          exocetLoaded: document.fonts.check('16px D2Exocet'),
+          formalLoaded: document.fonts.check('16px D2Formal436'),
+          h1FontFamily: getComputedStyle(document.querySelector('h1')).fontFamily,
+          descFontFamily: getComputedStyle(document.querySelector('.lang-desc')).fontFamily,
+        };
+      })()`)
+      console.log('2. Verified index.html WebFonts:', JSON.stringify(indexFonts))
+      if (!indexFonts.exocetLoaded || !indexFonts.formalLoaded) {
+        throw new Error(`index.html failed to load D2Exocet or D2Formal436: ${JSON.stringify(indexFonts)}`)
+      }
+      if (!indexFonts.h1FontFamily.includes('D2Exocet') || !indexFonts.descFontFamily.includes('D2Formal436')) {
+        throw new Error(`index.html unexpected font-family: ${JSON.stringify(indexFonts)}`)
+      }
+      await saveScreenshot('issue-504-index.png')
+    })
+
+    // ── Phase B: Verify acts-en.html Canvas DC6 bitmap font blitting & DOM/CSS WebFonts ──
+    await withChromePage(`${baseUrl}/acts-en.html?act=1`, 'acts-en.html', 9252, async ({ evalJs, saveScreenshot, waitForGameReady }) => {
+      await waitForGameReady()
+      const enCheck = await evalJs<{
+        exocetLoaded: boolean
+        formalLoaded: boolean
+        hudFontFamily: string
+        controlsFontFamily: string
+        dialogFontFamily: string
+        dialogTitleFontFamily: string
+        dc6FontLoaded: boolean
+        dc6BlitCount: number
+        fillTextCount: number
+      }>(`(async () => {
+        await document.fonts.ready;
+        await Promise.all([
+          document.fonts.load('16px D2Exocet'),
+          document.fonts.load('16px D2Formal436'),
+        ]);
+        const inst = window.__d2webHudInstance;
+        let blitCount = 0;
+        let fillCount = 0;
+        const origDrawImage = CanvasRenderingContext2D.prototype.drawImage;
+        const origFillText = CanvasRenderingContext2D.prototype.fillText;
+        CanvasRenderingContext2D.prototype.drawImage = function(...args) {
+          if (args.length === 9) blitCount++;
+          return origDrawImage.apply(this, args);
+        };
+        CanvasRenderingContext2D.prototype.fillText = function(...args) {
+          fillCount++;
+          return origFillText.apply(this, args);
+        };
+        try {
+          if (inst.leftPanel !== 'char') inst.toggleLeftPanel('char');
+          if (inst.rightPanel !== 'inv') inst.toggleRightPanel('inv');
+          inst.inventory.handleMouseMove(561, 93);
+          inst.render(performance.now(), false);
+        } finally {
+          CanvasRenderingContext2D.prototype.drawImage = origDrawImage;
+          CanvasRenderingContext2D.prototype.fillText = origFillText;
+        }
+        return {
+          exocetLoaded: document.fonts.check('16px D2Exocet'),
+          formalLoaded: document.fonts.check('16px D2Formal436'),
+          hudFontFamily: getComputedStyle(document.getElementById('hud')).fontFamily,
+          controlsFontFamily: getComputedStyle(document.getElementById('controls')).fontFamily,
+          dialogFontFamily: getComputedStyle(document.getElementById('dialog')).fontFamily,
+          dialogTitleFontFamily: getComputedStyle(document.getElementById('status')).fontFamily,
+          dc6FontLoaded: Boolean(inst.font?.loaded),
+          dc6BlitCount: blitCount,
+          fillTextCount: fillCount,
+        };
+      })()`)
+      console.log('3. Verified acts-en.html Canvas DC6 blitting & WebFonts:', JSON.stringify(enCheck))
+      if (!enCheck.exocetLoaded || !enCheck.formalLoaded || !enCheck.dc6FontLoaded) {
+        throw new Error(`acts-en.html font loading failed: ${JSON.stringify(enCheck)}`)
+      }
+      if (enCheck.dc6BlitCount < 100 || enCheck.fillTextCount !== 0) {
+        throw new Error(`Expected acts-en.html HUD to use DC6 bitmap blitting (>100 blits, 0 fillText), got: ${JSON.stringify(enCheck)}`)
+      }
+      await saveScreenshot('issue-504-acts-en-panels.png')
+
+      // Open Quest Log + Skill Tree + NPC Dialog to verify Formal 436 & Exocet in all panels
+      await evalJs(`(() => {
+        const inst = window.__d2webHudInstance;
+        inst.toggleLeftPanel('quest');
+        inst.toggleRightPanel('skill');
+        const dialog = document.getElementById('dialog');
+        if (dialog) {
+          dialog.innerHTML = '<div class="dialog-title">Akara · High Priestess of the Sisterhood</div><div class="dialog-body">I am Akara, High Priestess of the Sisterhood of the Sightless Eye. I welcome you, traveler, to our camp, but I am afraid I can offer you but poor shelter within these rickety walls.</div>';
+          dialog.hidden = false;
+          dialog.style.display = 'block';
+        }
+        inst.render(performance.now(), false);
+      })()`)
+      await sleep(300)
+      await saveScreenshot('issue-504-acts-en-quests-skills-dialog.png')
+    })
+
+    console.log('✅ All Issue #504 Headless Browser E2E Checks PASSED!')
+  } finally {
+    await server.close()
+  }
+}
+
+main().catch(err => {
+  console.error('❌ Issue #504 browser verification failed:', err)
+  process.exit(1)
+})
diff --git a/src/scene/act-scene.ts b/src/scene/act-scene.ts
index 6daab38..dc3f816 100644
--- a/src/scene/act-scene.ts
+++ b/src/scene/act-scene.ts
@@ -4085,7 +4085,7 @@ export function showNotification(message: string, durationMs = 2000, status?: HT
       banner.style.left = '50%'
       banner.style.transform = 'translateX(-50%)'
       banner.style.color = '#e03030'
-      banner.style.fontFamily = 'monospace, sans-serif'
+      banner.style.fontFamily = 'var(--font-display, "D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif)'
       banner.style.fontSize = '20px'
       banner.style.fontWeight = 'bold'
       banner.style.textShadow = '0 0 8px rgba(0,0,0,0.9), 1px 1px 2px #000'
diff --git a/src/ui/character-sheet.ts b/src/ui/character-sheet.ts
index cbcb834..201dc06 100644
--- a/src/ui/character-sheet.ts
+++ b/src/ui/character-sheet.ts
@@ -174,14 +174,14 @@ export class CharacterSheetPanel {
     })
 
     // 4. Level, Experience, Next Level
-    font.drawText(ctx, isEn ? 'Level' : '等级', ox + 42, oy + 48, { font: 'font8', color: 'tan', align: 'center' })
-    font.drawText(ctx, String(this.attrs.level), ox + 42, oy + 64, { font: 'fontexocet10', color: 'white', align: 'center' })
+    font.drawText(ctx, isEn ? 'Level' : '等级', ox + 42, oy + 46, { font: isEn ? 'font6' : 'font8', color: 'tan', align: 'center' })
+    font.drawText(ctx, String(this.attrs.level), ox + 42, oy + 63, { font: 'fontexocet10', color: 'white', align: 'center' })
 
-    font.drawText(ctx, isEn ? 'Experience' : '当前经验值', ox + 135, oy + 48, { font: 'font8', color: 'tan', align: 'center' })
-    font.drawText(ctx, this.attrs.xp.toLocaleString(), ox + 135, oy + 64, { font: 'font8', color: 'white', align: 'center' })
+    font.drawText(ctx, isEn ? 'Experience' : '当前经验值', ox + 135, oy + 46, { font: isEn ? 'font6' : 'font8', color: 'tan', align: 'center' })
+    font.drawText(ctx, this.attrs.xp.toLocaleString(), ox + 135, oy + 61, { font: 'font6', color: 'white', align: 'center' })
 
-    font.drawText(ctx, isEn ? 'Next Level' : '升级所需经验', ox + 245, oy + 48, { font: 'font8', color: 'tan', align: 'center' })
-    font.drawText(ctx, this.attrs.nextLevelXp.toLocaleString(), ox + 245, oy + 64, { font: 'font8', color: 'white', align: 'center' })
+    font.drawText(ctx, isEn ? 'Next Level' : '升级所需经验', ox + 245, oy + 46, { font: isEn ? 'font6' : 'font8', color: 'tan', align: 'center' })
+    font.drawText(ctx, this.attrs.nextLevelXp.toLocaleString(), ox + 245, oy + 61, { font: 'font6', color: 'white', align: 'center' })
 
     // 5. Four Primary Attributes (`Str`, `Dex`, `Vit`, `Ene`)
     const statRows: readonly { key: BaseStatKey; label: string; y: number; val: number }[] = [
@@ -211,7 +211,24 @@ export class CharacterSheetPanel {
 
     // Remaining Stat Points
     if (this.attrs.statPoints > 0) {
-      font.drawText(ctx, isEn ? 'Stat Points Remaining' : '剩余属性点', ox + 56, oy + 366, { font: 'font8', color: 'red', align: 'center' })
+      if (isEn) {
+        font.drawText(ctx, 'Stat Points', ox + 56, oy + 361, {
+          font: 'font6',
+          color: 'red',
+          align: 'center',
+        })
+        font.drawText(ctx, 'Remaining', ox + 56, oy + 371, {
+          font: 'font6',
+          color: 'red',
+          align: 'center',
+        })
+      } else {
+        font.drawText(ctx, '剩余属性点', ox + 56, oy + 366, {
+          font: 'font8',
+          color: 'red',
+          align: 'center',
+        })
+      }
       font.drawText(ctx, String(this.attrs.statPoints), ox + 122, oy + 366, {
         font: 'fontexocet10',
         color: 'red',
@@ -220,16 +237,48 @@ export class CharacterSheetPanel {
     }
 
     // 6. Combat Ratings, Stamina, Life, Mana
-    font.drawText(ctx, isEn ? 'Left Attack Damage' : '左键技能伤害', ox + 166, oy + 91, { font: 'font8', color: 'tan' })
-    font.drawText(ctx, liveRuntime.leftSkillDmg, ox + 285, oy + 91, {
-      font: 'font8',
+    if (isEn) {
+      font.drawText(ctx, 'Left Attack', ox + 214, oy + 87, {
+        font: 'font6',
+        color: 'tan',
+        align: 'center',
+      })
+      font.drawText(ctx, 'Damage', ox + 214, oy + 95, {
+        font: 'font6',
+        color: 'tan',
+        align: 'center',
+      })
+    } else {
+      font.drawText(ctx, '左键技能伤害', ox + 164, oy + 91, {
+        font: 'font8',
+        color: 'tan',
+      })
+    }
+    font.drawText(ctx, liveRuntime.leftSkillDmg, ox + 288, oy + 91, {
+      font: 'font6',
       color: 'blue',
       align: 'center',
     })
 
-    font.drawText(ctx, isEn ? 'Right Attack Damage' : '右键技能伤害', ox + 166, oy + 115, { font: 'font8', color: 'tan' })
-    font.drawText(ctx, liveRuntime.rightSkillDmg, ox + 285, oy + 115, {
-      font: 'font8',
+    if (isEn) {
+      font.drawText(ctx, 'Right Attack', ox + 214, oy + 111, {
+        font: 'font6',
+        color: 'tan',
+        align: 'center',
+      })
+      font.drawText(ctx, 'Damage', ox + 214, oy + 119, {
+        font: 'font6',
+        color: 'tan',
+        align: 'center',
+      })
+    } else {
+      font.drawText(ctx, '右键技能伤害', ox + 164, oy + 115, {
+        font: 'font8',
+        color: 'tan',
+      })
+    }
+    font.drawText(ctx, liveRuntime.rightSkillDmg, ox + 288, oy + 115, {
+      font: 'font6',
       color: 'blue',
       align: 'center',
     })
@@ -286,13 +335,37 @@ export class CharacterSheetPanel {
 
     // 7. Four Elemental Resistances
     const resRows = [
-      { label: isEn ? 'Fire Resistance' : '火焰抗性', y: 341, val: this.attrs.fireRes },
-      { label: isEn ? 'Cold Resistance' : '冰冷抗性', y: 365, val: this.attrs.coldRes },
-      { label: isEn ? 'Lightning Resistance' : '闪电抗性', y: 389, val: this.attrs.lightRes },
-      { label: isEn ? 'Poison Resistance' : '毒素抗性', y: 413, val: this.attrs.poisRes },
+      { labelEn: ['Fire Resistance'], labelZh: '火焰抗性', y: 341, val: this.attrs.fireRes },
+      { labelEn: ['Cold Resistance'], labelZh: '冰冷抗性', y: 365, val: this.attrs.coldRes },
+      { labelEn: ['Lightning', 'Resistance'], labelZh: '闪电抗性', y: 389, val: this.attrs.lightRes },
+      { labelEn: ['Poison Resistance'], labelZh: '毒素抗性', y: 413, val: this.attrs.poisRes },
     ] as const
     for (const res of resRows) {
-      font.drawText(ctx, res.label, ox + 166, oy + res.y, { font: 'font8', color: 'tan' })
+      if (isEn) {
+        if (res.labelEn.length === 2) {
+          font.drawText(ctx, res.labelEn[0], ox + 214, oy + res.y - 4, {
+            font: 'font6',
+            color: 'tan',
+            align: 'center',
+          })
+          font.drawText(ctx, res.labelEn[1], ox + 214, oy + res.y + 5, {
+            font: 'font6',
+            color: 'tan',
+            align: 'center',
+          })
+        } else {
+          font.drawText(ctx, res.labelEn[0], ox + 214, oy + res.y, {
+            font: 'font6',
+            color: 'tan',
+            align: 'center',
+          })
+        }
+      } else {
+        font.drawText(ctx, res.labelZh, ox + 166, oy + res.y, {
+          font: 'font8',
+          color: 'tan',
+        })
+      }
       font.drawText(ctx, `${res.val}%`, ox + 291, oy + res.y, {
         font: 'fontexocet10',
         color: res.val >= 75 ? 'gold' : res.val < 0 ? 'red' : 'white',
diff --git a/src/ui/font.ts b/src/ui/font.ts
index e76ec7c..d4e950b 100644
--- a/src/ui/font.ts
+++ b/src/ui/font.ts
@@ -139,7 +139,7 @@ export function parseColoredText(input: string, defaultColor: D2ColorCode = 'whi
   return spans
 }
 
-const FONT_PX_SIZE: Record<D2FontName, number> = {
+export const FONT_PX_SIZE: Record<D2FontName, number> = {
   font6: 10,
   font8: 11,
   fontexocet10: 13,
@@ -148,12 +148,39 @@ const FONT_PX_SIZE: Record<D2FontName, number> = {
   font30: 26,
 }
 
+/**
+ * Frame-relative alphabetic baseline row (`y_frame`) for each 1.13c DC6 font sheet
+ * (`data\local\font\latin\font*.dc6`), aligning uppercase letters (`'A'`, `'O'`, `'T'`)
+ * and digits (`'0'..'9'`) with `baseY = Math.round(y)`.
+ */
+export const FONT_BASELINE_OFFSET: Record<D2FontName, number> = {
+  font6: 8,
+  font8: 11,
+  fontexocet10: 13,
+  font16: 13,
+  font30: 23,
+  fontformal12: 25,
+}
+
+export const D2_EXOCET_FONT_STACK =
+  '"D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif'
+
+export const D2_FORMAL_FONT_STACK =
+  '"D2Formal436", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif'
+
+function parseHexRgb(hex: string): readonly [number, number, number] {
+  const clean = hex.startsWith('#') ? hex.slice(1) : hex
+  const num = parseInt(clean, 16)
+  if (Number.isNaN(num)) return [232, 228, 220]
+  return [(num >> 16) & 0xff, (num >> 8) & 0xff, num & 0xff]
+}
+
 /**
  * Runtime Diablo II Font Manager supporting both bitmap DC6 glyphs and CJK fallback.
  */
 export class D2FontRenderer {
   private metas: Record<string, FontAtlasMeta> = {}
-  private images = new Map<string, HTMLImageElement>()
+  private images = new Map<string, HTMLImageElement | HTMLCanvasElement>()
   private tintedCache = new Map<string, HTMLCanvasElement>()
   loaded = false
 
@@ -183,10 +210,38 @@ export class D2FontRenderer {
     }
   }
 
+  /**
+   * Register or override a loaded font atlas and metric table (used by tests and offline verifiers).
+   */
+  setFontAtlas(
+    font: D2FontName,
+    imageOrMeta: HTMLImageElement | HTMLCanvasElement | FontAtlasMeta,
+    maybeImage?: HTMLImageElement | HTMLCanvasElement | FontAtlasMeta,
+  ): void {
+    if ('glyphs' in imageOrMeta && 'atlasWidth' in imageOrMeta) {
+      this.metas[font] = imageOrMeta
+      if (maybeImage && !('glyphs' in maybeImage)) {
+        this.images.set(font, maybeImage)
+      }
+    } else {
+      this.images.set(font, imageOrMeta)
+      if (maybeImage && 'glyphs' in maybeImage) {
+        this.metas[font] = maybeImage
+      }
+    }
+    for (const k of [...this.tintedCache.keys()]) {
+      if (k.startsWith(`${font}:`)) this.tintedCache.delete(k)
+    }
+    this.loaded = this.images.size > 0
+  }
+
+  getFontMeta(font: D2FontName): FontAtlasMeta | undefined {
+    return this.metas[font]
+  }
+
   private getTintedAtlas(font: D2FontName, color: D2ColorCode): HTMLCanvasElement | HTMLImageElement | null {
     const baseImg = this.images.get(font)
     if (!baseImg) return null
-    if (color === 'white') return baseImg
     const key = `${font}:${color}`
     const cached = this.tintedCache.get(key)
     if (cached) return cached
@@ -197,8 +252,43 @@ export class D2FontRenderer {
     const ctx = canvas.getContext('2d')
     if (!ctx) return baseImg
     ctx.drawImage(baseImg, 0, 0)
+    const hex = D2_COLOR_HEX[color]
+    if (typeof ctx.getImageData === 'function' && typeof ctx.putImageData === 'function') {
+      try {
+        const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+        const d = imgData.data
+        const [tr, tg, tb] = parseHexRgb(hex)
+        for (let i = 0; i < d.length; i += 4) {
+          const a = d[i + 3]!
+          if (a === 0) continue
+          const maxC = Math.max(d[i]!, d[i + 1]!, d[i + 2]!)
+          if (color === 'black') {
+            d[i] = 8
+            d[i + 1] = 8
+            d[i + 2] = 8
+            d[i + 3] = maxC >= 135 ? 210 : 0
+          } else if (maxC < 110) {
+            d[i] = Math.round(tr * 0.15)
+            d[i + 1] = Math.round(tg * 0.15)
+            d[i + 2] = Math.round(tb * 0.15)
+            d[i + 3] = Math.min(200, Math.round(maxC * 1.8))
+          } else {
+            const lum = Math.min(1, (maxC - 60) / 144)
+            d[i] = Math.min(255, Math.round(tr * lum))
+            d[i + 1] = Math.min(255, Math.round(tg * lum))
+            d[i + 2] = Math.min(255, Math.round(tb * lum))
+            d[i + 3] = 255
+          }
+        }
+        ctx.putImageData(imgData, 0, 0)
+        this.tintedCache.set(key, canvas)
+        return canvas
+      } catch {
+        // Fall through to composite operation when canvas is tainted or mock lacks pixel data
+      }
+    }
     ctx.globalCompositeOperation = 'source-atop'
-    ctx.fillStyle = D2_COLOR_HEX[color]
+    ctx.fillStyle = hex
     ctx.fillRect(0, 0, canvas.width, canvas.height)
     ctx.globalCompositeOperation = 'source-over'
     this.tintedCache.set(key, canvas)
@@ -216,7 +306,7 @@ export class D2FontRenderer {
     for (const span of spans) {
       for (let i = 0; i < span.text.length; i++) {
         const code = span.text.charCodeAt(i)
-        if (code < 128 && meta?.glyphs[code]) {
+        if (code < 256 && meta?.glyphs[code]) {
           total += Math.max(4, meta.glyphs[code]!.width)
         } else {
           total += code > 255 ? pxSize : Math.round(pxSize * 0.58)
@@ -226,6 +316,19 @@ export class D2FontRenderer {
     return total
   }
 
+  private canBlitAllSpans(font: D2FontName, spans: readonly TextSpan[]): boolean {
+    if (!this.loaded || !this.images.has(font)) return false
+    const meta = this.metas[font]
+    if (!meta) return false
+    for (const span of spans) {
+      for (let i = 0; i < span.text.length; i++) {
+        const code = span.text.charCodeAt(i)
+        if (code >= 256 || !meta.glyphs[code]) return false
+      }
+    }
+    return true
+  }
+
   /**
    * Draw text onto a CanvasRenderingContext2D using genuine DC6 glyphs for ASCII/Latin
    * and sharp outlined gothic/serif typography for CJK characters.
@@ -248,7 +351,7 @@ export class D2FontRenderer {
     const shadow = options.shadow ?? true
 
     const totalWidth = this.measureText(text, font)
-    let curX = x
+    let curX = Math.round(x)
     if (align === 'center') curX = Math.round(x - totalWidth / 2)
     else if (align === 'right') curX = Math.round(x - totalWidth)
     const baseY = Math.round(y)
@@ -258,9 +361,53 @@ export class D2FontRenderer {
 
     ctx.save()
     const isTitleFont = font === 'font16' || font === 'font30' || font === 'fontexocet10'
-    ctx.font = `${isTitleFont ? 'bold ' : ''}${pxSize}px "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif`
+    const fontStack = font === 'fontformal12' ? D2_FORMAL_FONT_STACK : D2_EXOCET_FONT_STACK
+    ctx.font = `${isTitleFont ? 'bold ' : ''}${pxSize}px ${fontStack}`
     ctx.textBaseline = 'alphabetic'
 
+    if (typeof ctx.drawImage === 'function' && this.canBlitAllSpans(font, spans)) {
+      const meta = this.metas[font]!
+      const dstY = baseY - FONT_BASELINE_OFFSET[font]
+      const shadowAtlas = shadow ? this.getTintedAtlas(font, 'black') : null
+      for (const span of spans) {
+        const tinted = this.getTintedAtlas(font, span.color)
+        for (let i = 0; i < span.text.length; i++) {
+          const code = span.text.charCodeAt(i)
+          const g = meta.glyphs[code]!
+          const adv = Math.max(4, g.width)
+          if (code !== 0x20 && code !== 0xa0 && g.frameW > 0 && g.frameH > 0 && tinted) {
+            if (shadow && span.color !== 'black' && shadowAtlas) {
+              ctx.drawImage(
+                shadowAtlas,
+                g.x,
+                g.y,
+                g.frameW,
+                g.frameH,
+                curX + 1,
+                dstY + 1,
+                g.frameW,
+                g.frameH,
+              )
+            }
+            ctx.drawImage(
+              tinted,
+              g.x,
+              g.y,
+              g.frameW,
+              g.frameH,
+              curX,
+              dstY,
+              g.frameW,
+              g.frameH,
+            )
+          }
+          curX += adv
+        }
+      }
+      ctx.restore()
+      return
+    }
+
     let measuredTotal = 0
     for (const s of spans) measuredTotal += ctx.measureText(s.text).width
     if (align === 'center') curX = Math.round(x - measuredTotal / 2)
diff --git a/src/ui/ground-labels.ts b/src/ui/ground-labels.ts
index 1084069..7e7d911 100644
--- a/src/ui/ground-labels.ts
+++ b/src/ui/ground-labels.ts
@@ -419,12 +419,12 @@ export class GroundLabelOverlay {
       let el = this.labelPool[count]
       if (el === undefined) {
         el = document.createElement('div')
-        el.className = 'd2-ground-label'
+        el.className = 'd2-ground-label ground-label'
         el.style.position = 'absolute'
         el.style.transform = 'translate(-50%, -50%)'
         el.style.background = 'rgba(0, 0, 0, 0.88)'
         el.style.padding = '2px 6px'
-        el.style.fontFamily = "'Exocet', 'Formal', 'SimSun', sans-serif"
+        el.style.fontFamily = '"D2Exocet", "Cinzel", "Times New Roman", "Liberation Serif", "Noto Serif", "Songti SC", "Noto Serif SC", serif'
         el.style.fontSize = '13px'
         el.style.lineHeight = '14px'
         el.style.whiteSpace = 'nowrap'
diff --git a/src/ui/world-panels.ts b/src/ui/world-panels.ts
index 113bf8d..2b73499 100644
--- a/src/ui/world-panels.ts
+++ b/src/ui/world-panels.ts
@@ -2848,6 +2848,33 @@ export class WorldPanelsHud {
 
     for (const p of paragraphs) {
       if (linesDrawn >= maxLines) break
+      if (p.includes(' ')) {
+        const words = p.split(/\s+/).filter(Boolean)
+        let line = ''
+        for (const word of words) {
+          const candidate = line ? `${line} ${word}` : word
+          if (line && font.measureText(candidate, 'font8') > maxW) {
+            if (linesDrawn + 1 >= maxLines) {
+              const truncated = line.slice(0, Math.max(0, line.length - 2)) + '...'
+              font.drawText(ctx, truncated, x, curY, { font: 'font8', color: 'white' })
+              return
+            }
+            font.drawText(ctx, line, x, curY, { font: 'font8', color: 'white' })
+            linesDrawn++
+            line = word
+            curY += lineH
+          } else {
+            line = candidate
+          }
+        }
+        if (line && linesDrawn < maxLines) {
+          font.drawText(ctx, line, x, curY, { font: 'font8', color: 'white' })
+          linesDrawn++
+          curY += lineH
+        }
+        continue
+      }
+
       let line = ''
       for (let i = 0; i < p.length; i++) {
         const ch = p[i]!
diff --git a/tests/issue-504-exocet-fonts.test.ts b/tests/issue-504-exocet-fonts.test.ts
new file mode 100644
index 0000000..ebc9586
--- /dev/null
+++ b/tests/issue-504-exocet-fonts.test.ts
@@ -0,0 +1,432 @@
+/**
+ * Unit & Parity Tests for Issue #504:
+ * Authentic Diablo II v1.13c Exocet & Formal 436 Typography across Canvas HUD & DOM/CSS.
+ */
+
+import { describe, expect, it } from 'vitest'
+import { existsSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import {
+  D2FontRenderer,
+  D2_COLOR_HEX,
+  D2_EXOCET_FONT_STACK,
+  D2_FORMAL_FONT_STACK,
+  FONT_BASELINE_OFFSET,
+  FONT_PX_SIZE,
+  type D2ColorCode,
+  type D2FontName,
+} from '../src/ui/font.ts'
+import { CharacterSheetPanel } from '../src/ui/character-sheet.ts'
+import { GroundLabelOverlay } from '../src/ui/ground-labels.ts'
+import { traceBitmapContours, buildTrueTypeFont } from '../scripts/build-d2-ttf.ts'
+
+function signedContourArea(pts: Array<{ x: number; y: number }>): number {
+  let area = 0
+  for (let i = 0; i < pts.length; i++) {
+    const p1 = pts[i]!
+    const p2 = pts[(i + 1) % pts.length]!
+    area += p1.x * p2.y - p2.x * p1.y
+  }
+  return area / 2
+}
+
+describe('Diablo II v1.13c Exocet & Formal 436 Fonts (Issue #504)', () => {
+  it('bundles valid TrueType D2Exocet.ttf and D2Formal436.ttf in public/ui/fonts/ with required OpenType tables', () => {
+    const fontsDir = join(process.cwd(), 'public', 'ui', 'fonts')
+    const exocetPath = join(fontsDir, 'D2Exocet.ttf')
+    const formalPath = join(fontsDir, 'D2Formal436.ttf')
+
+    expect(existsSync(exocetPath)).toBe(true)
+    expect(existsSync(formalPath)).toBe(true)
+
+    for (const ttfPath of [exocetPath, formalPath]) {
+      const buf = readFileSync(ttfPath)
+      expect(buf.byteLength).toBeGreaterThan(20_000)
+      const view = new DataView(buf.buffer, buf.byteOffset, buf.byteLength)
+
+      // TrueType sfnt version 0x00010000
+      expect(view.getUint32(0, false)).toBe(0x00010000)
+      const numTables = view.getUint16(4, false)
+      expect(numTables).toBe(10)
+
+      const tags: string[] = []
+      for (let i = 0; i < numTables; i++) {
+        const recOff = 12 + i * 16
+        const tag = String.fromCharCode(
+          view.getUint8(recOff),
+          view.getUint8(recOff + 1),
+          view.getUint8(recOff + 2),
+          view.getUint8(recOff + 3),
+        )
+        const offset = view.getUint32(recOff + 8, false)
+        const length = view.getUint32(recOff + 12, false)
+        expect(offset + length).toBeLessThanOrEqual(buf.byteLength)
+        tags.push(tag)
+      }
+
+      expect(tags).toEqual([
+        'OS/2',
+        'cmap',
+        'glyf',
+        'head',
+        'hhea',
+        'hmtx',
+        'loca',
+        'maxp',
+        'name',
+        'post',
+      ])
+    }
+  })
+
+  it('traces clockwise outer contours and counter-clockwise inner holes for Exocet cross-inside-O (⊕) and Formal hollow O', () => {
+    // 1. Construct a 9x9 Exocet cross-inside-O (⊕): outer ring + central cross (vertical x=4, horizontal y=4)
+    const w = 9
+    const h = 9
+    const exocetO = new Uint8Array(w * h)
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const isBorder = x === 0 || x === w - 1 || y === 0 || y === h - 1
+        const isCross = x === 4 || y === 4
+        if (isBorder || isCross) {
+          exocetO[y * w + x] = 1
+        }
+      }
+    }
+
+    const exocetContours = traceBitmapContours(exocetO, w, h, h, 10)
+    // 1 outer contour + 4 quadrant holes around the central cross = 5 contours
+    expect(exocetContours).toHaveLength(5)
+    const exocetAreas = exocetContours.map(signedContourArea)
+    // In Y-up font coordinates, clockwise outer contour has negative signed area,
+    // and counter-clockwise inner holes have positive signed area.
+    const outerContours = exocetAreas.filter(a => a < 0)
+    const innerHoles = exocetAreas.filter(a => a > 0)
+    expect(outerContours).toHaveLength(1)
+    expect(innerHoles).toHaveLength(4)
+
+    // 2. Construct a 9x9 Formal hollow O: outer ring only
+    const formalO = new Uint8Array(w * h)
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const isBorder = x === 0 || x === w - 1 || y === 0 || y === h - 1
+        if (isBorder) {
+          formalO[y * w + x] = 1
+        }
+      }
+    }
+    const formalContours = traceBitmapContours(formalO, w, h, h, 10)
+    expect(formalContours).toHaveLength(2)
+    expect(formalContours.map(signedContourArea).filter(a => a < 0)).toHaveLength(1)
+    expect(formalContours.map(signedContourArea).filter(a => a > 0)).toHaveLength(1)
+
+    // 3. Verify buildTrueTypeFont produces a valid sfnt binary from DC6 frames + tblBytes
+    const frames = Array.from({ length: 256 }, (_, code) => ({
+      width: code === 79 ? w : 0,
+      height: code === 79 ? h : 0,
+      offsetX: 0,
+      offsetY: 0,
+      indices: code === 79 ? exocetO : new Uint8Array(0),
+    }))
+    const tblBytes = new Uint8Array(12 + 256 * 14)
+    tblBytes[12 + 79 * 14 + 3] = 10
+    tblBytes[12 + 79 * 14 + 8] = 79
+
+    const ttf = buildTrueTypeFont({
+      familyName: 'D2ExocetTest',
+      postScriptName: 'D2ExocetTest-Regular',
+      frames,
+      tblBytes,
+      baselineY: 8,
+      scale: 50,
+      isForeground: idx => idx > 0,
+    })
+    expect(ttf.byteLength).toBeGreaterThan(500)
+    const view = new DataView(ttf.buffer, ttf.byteOffset, ttf.byteLength)
+    expect(view.getUint32(0, false)).toBe(0x00010000)
+  })
+
+  it('registers local @font-face D2Exocet and D2Formal436 across HTML pages and GroundLabelOverlay with zero external CDN links', () => {
+    const htmlFiles = ['index.html', 'acts-en.html', 'acts.html', 'acts-zh.html']
+    for (const file of htmlFiles) {
+      const content = readFileSync(join(process.cwd(), file), 'utf8')
+      expect(content, `${file} must declare D2Exocet @font-face`).toMatch(/font-family:\s*['"]D2Exocet['"]/)
+      expect(content, `${file} must reference local /ui/fonts/D2Exocet.ttf`).toMatch(/url\(['"]\/ui\/fonts\/D2Exocet\.ttf['"]\)/)
+      expect(content, `${file} must declare D2Formal436 @font-face`).toMatch(/font-family:\s*['"]D2Formal436['"]/)
+      expect(content, `${file} must reference local /ui/fonts/D2Formal436.ttf`).toMatch(/url\(['"]\/ui\/fonts\/D2Formal436\.ttf['"]\)/)
+      expect(content, `${file} must define --font-display with D2Exocet`).toContain('--font-display: "D2Exocet"')
+      expect(content, `${file} must define --font-body with D2Formal436`).toContain('--font-body: "D2Formal436"')
+
+      // Zero external CDN links
+      expect(content).not.toContain('fonts.googleapis.com')
+      expect(content).not.toContain('fonts.gstatic.com')
+      expect(content).not.toContain('https://')
+      expect(content).not.toContain('http://')
+    }
+
+    for (const actHtml of ['acts-en.html', 'acts.html', 'acts-zh.html']) {
+      const content = readFileSync(join(process.cwd(), actHtml), 'utf8')
+      expect(content).toMatch(/#hud\s*\{[^}]*font-family:\s*var\(--font-display\)/s)
+      expect(content).toMatch(/#controls\s*\{[^}]*font-family:\s*var\(--font-display\)/s)
+      expect(content).toMatch(/#dialog\s*\{[^}]*font-family:\s*var\(--font-body\)/s)
+    }
+
+    const groundLabelsSrc = readFileSync(join(process.cwd(), 'src', 'ui', 'ground-labels.ts'), 'utf8')
+    expect(groundLabelsSrc).toContain('"D2Exocet"')
+    expect(groundLabelsSrc).toContain('"Times New Roman"')
+    expect(groundLabelsSrc).not.toContain('Georgia')
+  })
+
+  it('configures D2FontRenderer with D2Exocet and D2Formal436 stacks (never Georgia) and blits genuine 1.13c DC6 glyphs when loaded', () => {
+    expect(D2_EXOCET_FONT_STACK).toContain('"D2Exocet"')
+    expect(D2_EXOCET_FONT_STACK).toContain('"Times New Roman"')
+    expect(D2_EXOCET_FONT_STACK).not.toContain('Georgia')
+
+    expect(D2_FORMAL_FONT_STACK).toContain('"D2Formal436"')
+    expect(D2_FORMAL_FONT_STACK).toContain('"Times New Roman"')
+    expect(D2_FORMAL_FONT_STACK).not.toContain('Georgia')
+
+    const renderer = new D2FontRenderer()
+
+    // 1. Before load() or for CJK fallback, ctx.font uses D2_EXOCET_FONT_STACK for Exocet sizes and D2_FORMAL_FONT_STACK for fontformal12
+    const capturedFonts: Record<string, string> = {}
+    const fillTextCalls: Array<{ text: string; x: number; y: number; fillStyle: string }> = []
+    const fallbackCtx = {
+      save: () => {},
+      restore: () => {},
+      measureText: (t: string) => ({ width: t.length * 7 }),
+      fillText: function (this: { fillStyle: string }, text: string, x: number, y: number) {
+        fillTextCalls.push({ text, x, y, fillStyle: this.fillStyle })
+      },
+      font: '',
+      textBaseline: 'alphabetic',
+      fillStyle: '',
+    } as unknown as CanvasRenderingContext2D
+
+    const allSizes: D2FontName[] = ['font6', 'font8', 'fontexocet10', 'font16', 'font30', 'fontformal12']
+    for (const size of allSizes) {
+      renderer.drawText(fallbackCtx, 'Rogue O', 100, 100, { font: size, color: 'gold' })
+      capturedFonts[size] = fallbackCtx.font
+    }
+
+    for (const nonBoldExocetSize of ['font6', 'font8'] as D2FontName[]) {
+      expect(capturedFonts[nonBoldExocetSize]).toBe(`${FONT_PX_SIZE[nonBoldExocetSize]}px ${D2_EXOCET_FONT_STACK}`)
+    }
+    for (const boldExocetSize of ['fontexocet10', 'font16', 'font30'] as D2FontName[]) {
+      expect(capturedFonts[boldExocetSize]).toBe(`bold ${FONT_PX_SIZE[boldExocetSize]}px ${D2_EXOCET_FONT_STACK}`)
+    }
+    expect(capturedFonts.fontformal12).toBe(`${FONT_PX_SIZE.fontformal12}px ${D2_FORMAL_FONT_STACK}`)
+
+    // 2. When loaded with a font atlas + metrics.json, ASCII/Latin text blits genuine DC6 bitmap glyphs via ctx.drawImage
+    const metricsJson = JSON.parse(
+      readFileSync(join(process.cwd(), 'public', 'ui', 'fonts', 'metrics.json'), 'utf8'),
+    )
+    const mockAtlas = { width: 512, height: 512, tag: 'font16-atlas' } as unknown as HTMLImageElement
+    renderer.setFontAtlas('font16', metricsJson.font16, mockAtlas)
+
+    const drawImageCalls: Array<{
+      img: unknown
+      sx: number
+      sy: number
+      sw: number
+      sh: number
+      dx: number
+      dy: number
+      dw: number
+      dh: number
+    }> = []
+    let fillTextCount = 0
+    const blitCtx = {
+      save: () => {},
+      restore: () => {},
+      measureText: (t: string) => ({ width: t.length * 8 }),
+      fillText: () => {
+        fillTextCount++
+      },
+      drawImage: (
+        img: unknown,
+        sx: number,
+        sy: number,
+        sw: number,
+        sh: number,
+        dx: number,
+        dy: number,
+        dw: number,
+        dh: number,
+      ) => {
+        drawImageCalls.push({ img, sx, sy, sw, sh, dx, dy, dw, dh })
+      },
+      font: '',
+      textBaseline: 'alphabetic',
+      fillStyle: '',
+    } as unknown as CanvasRenderingContext2D
+
+    // Render "OT" centered at (200, 100) with shadow=true
+    renderer.drawText(blitCtx, 'OT', 200, 100, {
+      font: 'font16',
+      color: 'gold',
+      align: 'center',
+      shadow: true,
+    })
+
+    // Must use DC6 bitmap blitting (0 fillText calls, 4 drawImage calls: 2 shadow + 2 foreground for 'O' and 'T')
+    expect(fillTextCount).toBe(0)
+    expect(drawImageCalls).toHaveLength(4)
+
+    const meta16 = renderer.getFontMeta('font16')!
+    const glyphO = meta16.glyphs['O'.charCodeAt(0)]!
+    const glyphT = meta16.glyphs['T'.charCodeAt(0)]!
+    const advO = Math.max(4, glyphO.width)
+    const advT = Math.max(4, glyphT.width)
+    const expectedWidth = advO + advT
+    const expectedStartX = Math.round(200 - expectedWidth / 2)
+    const expectedDstY = Math.round(100 - FONT_BASELINE_OFFSET.font16)
+
+    // First glyph ('O'): shadow at (expectedStartX + 1, expectedDstY + 1), foreground at (expectedStartX, expectedDstY)
+    expect(drawImageCalls[0]).toMatchObject({
+      sx: glyphO.x,
+      sy: glyphO.y,
+      sw: glyphO.frameW,
+      sh: glyphO.frameH,
+      dx: expectedStartX + 1,
+      dy: expectedDstY + 1,
+      dw: glyphO.frameW,
+      dh: glyphO.frameH,
+    })
+    expect(drawImageCalls[1]).toMatchObject({
+      sx: glyphO.x,
+      sy: glyphO.y,
+      sw: glyphO.frameW,
+      sh: glyphO.frameH,
+      dx: expectedStartX,
+      dy: expectedDstY,
+      dw: glyphO.frameW,
+      dh: glyphO.frameH,
+    })
+
+    // Second glyph ('T'): shadow at (expectedStartX + advO + 1, expectedDstY + 1), foreground at (expectedStartX + advO, expectedDstY)
+    expect(drawImageCalls[2]).toMatchObject({
+      sx: glyphT.x,
+      sy: glyphT.y,
+      sw: glyphT.frameW,
+      sh: glyphT.frameH,
+      dx: expectedStartX + advO + 1,
+      dy: expectedDstY + 1,
+      dw: glyphT.frameW,
+      dh: glyphT.frameH,
+    })
+    expect(drawImageCalls[3]).toMatchObject({
+      sx: glyphT.x,
+      sy: glyphT.y,
+      sw: glyphT.frameW,
+      sh: glyphT.frameH,
+      dx: expectedStartX + advO,
+      dy: expectedDstY,
+      dw: glyphT.frameW,
+      dh: glyphT.frameH,
+    })
+
+    // 3. CJK string ("罗格营地") automatically falls back to ctx.fillText even when DC6 atlas is loaded
+    drawImageCalls.length = 0
+    fillTextCount = 0
+    renderer.drawText(blitCtx, '罗格营地', 200, 100, {
+      font: 'font16',
+      color: 'gold',
+      align: 'center',
+      shadow: true,
+    })
+    expect(drawImageCalls).toHaveLength(0)
+    expect(fillTextCount).toBeGreaterThan(0)
+  })
+
+  it('fits English Character Sheet labels inside stone recesses using DC6 font6 metrics', () => {
+    const metricsJson = JSON.parse(
+      readFileSync(join(process.cwd(), 'public', 'ui', 'fonts', 'metrics.json'), 'utf8'),
+    )
+    const renderer = new D2FontRenderer()
+    renderer.setFontAtlas('font6', metricsJson.font6, { width: 256, height: 256 } as unknown as HTMLImageElement)
+    renderer.setFontAtlas('font8', metricsJson.font8, { width: 256, height: 256 } as unknown as HTMLImageElement)
+
+    const sheet = new CharacterSheetPanel()
+    sheet.lang = 'ENG'
+    sheet.visible = true
+
+    const drawnLabels: Array<{ text: string; font: D2FontName; widthPx: number }> = []
+    const mockCtx = {
+      drawImage: () => {},
+      fillRect: () => {},
+      strokeRect: () => {},
+      save: () => {},
+      restore: () => {},
+      measureText: (t: string) => ({ width: t.length * 6 }),
+      fillText: () => {},
+      font: '',
+      textBaseline: 'alphabetic',
+      fillStyle: '',
+      strokeStyle: '',
+    } as unknown as CanvasRenderingContext2D
+
+    const spyFont = {
+      drawText: (
+        _ctx: CanvasRenderingContext2D,
+        text: string,
+        _x: number,
+        _y: number,
+        opts?: { font?: D2FontName },
+      ) => {
+        const f = opts?.font ?? 'font8'
+        drawnLabels.push({
+          text,
+          font: f,
+          widthPx: renderer.measureText(text, f),
+        })
+      },
+      measureText: (text: string, font?: D2FontName) => renderer.measureText(text, font),
+    } as unknown as D2FontRenderer
+
+    sheet.draw(
+      mockCtx,
+      {
+        hp: 340,
+        maxHp: 340,
+        mana: 420,
+        maxMana: 420,
+        stamina: 180,
+        maxStamina: 180,
+        leftSkillDmg: '3-6',
+        rightSkillDmg: '50-100',
+      },
+      {
+        borderLeftImg: null,
+        charSheetImg: null,
+        buySellBtnImg: null,
+      },
+      spyFont,
+    )
+
+    // Check that multi-word English labels use font6 and fit strictly within their 104px stone recesses (ox+162..ox+266)
+    const compactLabels = [
+      'Left Attack',
+      'Right Attack',
+      'Damage',
+      'Stat Points',
+      'Remaining',
+      'Fire Resistance',
+      'Cold Resistance',
+      'Lightning',
+      'Resistance',
+      'Poison Resistance',
+    ]
+    for (const labelText of compactLabels) {
+      const match = drawnLabels.find(d => d.text === labelText)
+      expect(match, `Expected CharacterSheetPanel to draw "${labelText}" in English mode`).toBeDefined()
+      expect(match!.font).toBe('font6')
+      expect(match!.widthPx).toBeLessThan(renderer.measureText(labelText, 'font8'))
+      expect(match!.widthPx).toBeLessThanOrEqual(104)
+    }
+
+    // Verify middle dot U+00B7 (0xB7) in metrics.json uses period width (<= 10px) rather than '?' placeholder width
+    expect(metricsJson.fontformal12.glyphs[0xb7].width).toBe(metricsJson.fontformal12.glyphs[0x2e].width)
+    expect(metricsJson.font30.glyphs[0xb7].width).toBe(metricsJson.font30.glyphs[0x2e].width)
+  })
+})