diff --git a/common/locales/ar.json b/common/locales/ar.json
index c32601e..6582f9e 100644
--- a/common/locales/ar.json
+++ b/common/locales/ar.json
@@ -776,6 +776,7 @@
     "fami_level.next_prefix": "تحتاج للمستوى التالي",
     "fami_level.experience_points": "نقاط خبرة",
     "fami_level.how_to_upgrade": "كيف ترتقي؟",
+    "fami_level.send_gift": "إرسال هدية",
     "fami_level.receive_gift": "تلقي هدية",
     "fami_level.buy_car": "شراء سيارة",
     "fami_level.buy_avatar_frame": "شراء إطار الصورة",
@@ -797,5 +798,7 @@
     "fami_rank.loading": "جارٍ التحميل",
     "fami_rank.empty": "لا توجد بيانات تصنيف بعد",
     "fami_rank.network_error": "تعذر تحميل التصنيف. حاول مرة أخرى.",
-    "fami_rank.unknown": "غير معروف"
+    "fami_rank.unknown": "غير معروف",
+    "huwaa_rank.page_title": "تصنيف هوا",
+    "huwaa_rank.game": "اللعبة"
 }
diff --git a/common/locales/en.json b/common/locales/en.json
index 80ce95a..aa30016 100644
--- a/common/locales/en.json
+++ b/common/locales/en.json
@@ -782,6 +782,7 @@
     "fami_level.next_prefix": "To the next level need",
     "fami_level.experience_points": "experience points",
     "fami_level.how_to_upgrade": "How to upgrade?",
+    "fami_level.send_gift": "Send a Gift",
     "fami_level.receive_gift": "Receive a Gift",
     "fami_level.buy_car": "Buy a car",
     "fami_level.buy_avatar_frame": "Buy Avatar Frame",
@@ -803,5 +804,7 @@
     "fami_rank.loading": "Loading",
     "fami_rank.empty": "No ranking data yet",
     "fami_rank.network_error": "Unable to load the ranking. Please try again.",
-    "fami_rank.unknown": "Unknown"
+    "fami_rank.unknown": "Unknown",
+    "huwaa_rank.page_title": "Huwaa Ranking",
+    "huwaa_rank.game": "Game"
 }
diff --git a/common/locales/es.json b/common/locales/es.json
index c83e845..faf6f21 100644
--- a/common/locales/es.json
+++ b/common/locales/es.json
@@ -776,6 +776,7 @@
     "fami_level.next_prefix": "Para el siguiente nivel necesitas",
     "fami_level.experience_points": "puntos de experiencia",
     "fami_level.how_to_upgrade": "¿Cómo subir de nivel?",
+    "fami_level.send_gift": "Envía un regalo",
     "fami_level.receive_gift": "Recibe un regalo",
     "fami_level.buy_car": "Compra un vehículo",
     "fami_level.buy_avatar_frame": "Compra un marco de avatar",
@@ -797,5 +798,7 @@
     "fami_rank.loading": "Cargando",
     "fami_rank.empty": "Aún no hay datos de clasificación",
     "fami_rank.network_error": "No se pudo cargar la clasificación. Inténtalo de nuevo.",
-    "fami_rank.unknown": "Desconocido"
+    "fami_rank.unknown": "Desconocido",
+    "huwaa_rank.page_title": "Clasificación Huwaa",
+    "huwaa_rank.game": "Juego"
 }
diff --git a/common/locales/tr.json b/common/locales/tr.json
index 306a041..98e0319 100644
--- a/common/locales/tr.json
+++ b/common/locales/tr.json
@@ -743,6 +743,7 @@
     "fami_level.next_prefix": "Sonraki seviye için",
     "fami_level.experience_points": "deneyim puanı",
     "fami_level.how_to_upgrade": "Nasıl yükseltilir?",
+    "fami_level.send_gift": "Hediye gönder",
     "fami_level.receive_gift": "Hediye al",
     "fami_level.buy_car": "Araç satın al",
     "fami_level.buy_avatar_frame": "Avatar çerçevesi satın al",
@@ -764,5 +765,7 @@
     "fami_rank.loading": "Yükleniyor",
     "fami_rank.empty": "Henüz sıralama verisi yok",
     "fami_rank.network_error": "Sıralama yüklenemedi. Lütfen tekrar deneyin.",
-    "fami_rank.unknown": "Bilinmiyor"
+    "fami_rank.unknown": "Bilinmiyor",
+    "huwaa_rank.page_title": "Huwaa Sıralaması",
+    "huwaa_rank.game": "Oyun"
 }
diff --git a/level/fami-assets/avatar.png b/level/fami-assets/avatar.png
deleted file mode 100644
index d27cfb7..0000000
Binary files a/level/fami-assets/avatar.png and /dev/null differ
diff --git a/level/fami-assets/avatar.webp b/level/fami-assets/avatar.webp
new file mode 100644
index 0000000..092450e
Binary files /dev/null and b/level/fami-assets/avatar.webp differ
diff --git a/level/fami-assets/charm-bg.png b/level/fami-assets/charm-bg.png
deleted file mode 100644
index d3bbd1a..0000000
Binary files a/level/fami-assets/charm-bg.png and /dev/null differ
diff --git a/level/fami-assets/charm-bg.webp b/level/fami-assets/charm-bg.webp
new file mode 100644
index 0000000..5e3bd39
Binary files /dev/null and b/level/fami-assets/charm-bg.webp differ
diff --git a/level/fami-assets/charm-card-overlay.png b/level/fami-assets/charm-card-overlay.png
deleted file mode 100644
index 09d0a7c..0000000
Binary files a/level/fami-assets/charm-card-overlay.png and /dev/null differ
diff --git a/level/fami-assets/charm-card-overlay.webp b/level/fami-assets/charm-card-overlay.webp
new file mode 100644
index 0000000..6fa403a
Binary files /dev/null and b/level/fami-assets/charm-card-overlay.webp differ
diff --git a/level/fami-assets/game-bg.png b/level/fami-assets/game-bg.png
deleted file mode 100644
index 64d4ffd..0000000
Binary files a/level/fami-assets/game-bg.png and /dev/null differ
diff --git a/level/fami-assets/game-bg.webp b/level/fami-assets/game-bg.webp
new file mode 100644
index 0000000..e3e135b
Binary files /dev/null and b/level/fami-assets/game-bg.webp differ
diff --git a/level/fami-assets/game-card-overlay.png b/level/fami-assets/game-card-overlay.png
deleted file mode 100644
index a830047..0000000
Binary files a/level/fami-assets/game-card-overlay.png and /dev/null differ
diff --git a/level/fami-assets/game-card-overlay.webp b/level/fami-assets/game-card-overlay.webp
new file mode 100644
index 0000000..3808206
Binary files /dev/null and b/level/fami-assets/game-card-overlay.webp differ
diff --git a/level/fami-assets/level-badge.png b/level/fami-assets/level-badge.png
deleted file mode 100644
index e65da3c..0000000
Binary files a/level/fami-assets/level-badge.png and /dev/null differ
diff --git a/level/fami-assets/level-badge.webp b/level/fami-assets/level-badge.webp
new file mode 100644
index 0000000..627c2cb
Binary files /dev/null and b/level/fami-assets/level-badge.webp differ
diff --git a/level/fami-assets/level-ring.png b/level/fami-assets/level-ring.png
deleted file mode 100644
index 6a12186..0000000
Binary files a/level/fami-assets/level-ring.png and /dev/null differ
diff --git a/level/fami-assets/level-ring.webp b/level/fami-assets/level-ring.webp
new file mode 100644
index 0000000..3d5562d
Binary files /dev/null and b/level/fami-assets/level-ring.webp differ
diff --git a/level/fami-assets/wealth-bg.png b/level/fami-assets/wealth-bg.png
deleted file mode 100644
index dc68df4..0000000
Binary files a/level/fami-assets/wealth-bg.png and /dev/null differ
diff --git a/level/fami-assets/wealth-bg.webp b/level/fami-assets/wealth-bg.webp
new file mode 100644
index 0000000..3b59f95
Binary files /dev/null and b/level/fami-assets/wealth-bg.webp differ
diff --git a/level/fami-assets/wealth-card.png b/level/fami-assets/wealth-card.png
deleted file mode 100644
index 76e003a..0000000
Binary files a/level/fami-assets/wealth-card.png and /dev/null differ
diff --git a/level/fami-assets/wealth-card.webp b/level/fami-assets/wealth-card.webp
new file mode 100644
index 0000000..98740db
Binary files /dev/null and b/level/fami-assets/wealth-card.webp differ
diff --git a/level/fami.html b/level/fami.html
index e0f02bc..99a5c43 100644
--- a/level/fami.html
+++ b/level/fami.html
@@ -19,7 +19,7 @@
                 --header-bg: rgba(13, 11, 32, 0.94);
                 --row-bg: rgba(255, 255, 255, 0.04);
                 --accent: #ffad3d;
-                --atmosphere: url('./fami-assets/wealth-bg.png');
+                --atmosphere: url('./fami-assets/wealth-bg.webp');
             }
 
             html,
@@ -54,7 +54,8 @@
             .level-page {
                 position: relative;
                 isolation: isolate;
-                width: min(100%, 375px);
+                /* 页面宽度跟随 WebView，375px 只作为设计基准，不在大屏设备两侧留下空白。 */
+                width: 100%;
                 min-height: 100vh;
                 overflow: visible;
                 padding-bottom: calc(38px + env(safe-area-inset-bottom));
@@ -66,21 +67,21 @@
                 --level-bg: #0d0b20;
                 --header-bg: rgba(13, 11, 32, 0.94);
                 --accent: #ffad3d;
-                --atmosphere: url('./fami-assets/wealth-bg.png');
+                --atmosphere: url('./fami-assets/wealth-bg.webp');
             }
 
             .level-page[data-theme='charm'] {
                 --level-bg: #201a16;
                 --header-bg: rgba(32, 26, 22, 0.94);
                 --accent: #f718e9;
-                --atmosphere: url('./fami-assets/charm-bg.png');
+                --atmosphere: url('./fami-assets/charm-bg.webp');
             }
 
             .level-page[data-theme='game'] {
                 --level-bg: #08140c;
                 --header-bg: rgba(8, 20, 12, 0.94);
                 --accent: #11ef67;
-                --atmosphere: url('./fami-assets/game-bg.png');
+                --atmosphere: url('./fami-assets/game-bg.webp');
             }
 
             .atmosphere {
@@ -243,8 +244,9 @@
             .current-copy {
                 position: absolute;
                 top: 19px;
+                right: 34px;
                 left: 125px;
-                width: 184px;
+                width: auto;
             }
 
             .current-heading {
@@ -287,7 +289,7 @@
                 position: absolute;
                 top: 30px;
                 left: 0;
-                width: 184px;
+                width: 100%;
                 height: 6px;
                 overflow: hidden;
                 border-radius: 32px;
@@ -306,7 +308,7 @@
                 position: absolute;
                 top: 46px;
                 left: 0;
-                width: 184px;
+                width: 100%;
                 font-size: 11px;
                 font-weight: 600;
                 line-height: 14px;
@@ -463,7 +465,8 @@
 
             .method-name,
             .method-rate {
-                font-size: 14px;
+                /* 三列升级方式在 320px 小屏仍需保留列间留白，375px 起恢复设计稿字号。 */
+                font-size: clamp(12px, 3.733vw, 14px);
                 line-height: 18px;
                 white-space: nowrap;
             }
@@ -491,11 +494,6 @@
                     width: calc(100% - 143px);
                 }
 
-                .progress,
-                .next-level {
-                    width: 100%;
-                }
-
                 .row-badge {
                     right: 68px;
                 }
@@ -568,13 +566,13 @@
                 <img
                     id="cardBackground"
                     class="current-card__bg"
-                    src="./fami-assets/wealth-card.png"
+                    src="./fami-assets/wealth-card.webp"
                     alt=""
                 />
                 <img
                     id="avatar"
                     class="avatar"
-                    src="./fami-assets/avatar.png"
+                    src="./fami-assets/avatar.webp"
                     alt=""
                 />
                 <img id="avatarFrame" class="avatar-frame" alt="" />
@@ -588,7 +586,7 @@
                         >
                             <img
                                 id="currentBadgeImage"
-                                src="./fami-assets/level-badge.png"
+                                src="./fami-assets/level-badge.webp"
                                 alt=""
                             />
                             <span id="badgeLevel">81</span>
@@ -640,9 +638,9 @@
                         <img src="./fami-assets/upgrade-gift.svg" alt="" />
                         <div
                             class="method-name"
-                            data-i18n="fami_level.receive_gift"
+                            data-i18n="fami_level.send_gift"
                         >
-                            Receive a Gift
+                            Send a Gift
                         </div>
                         <div
                             class="method-rate"
@@ -761,13 +759,13 @@
                     '100',
                 ];
                 var CARD_ASSETS = {
-                    wealth: './fami-assets/wealth-card.png',
-                    charm: './fami-assets/charm-card-overlay.png',
-                    game: './fami-assets/game-card-overlay.png',
+                    wealth: './fami-assets/wealth-card.webp',
+                    charm: './fami-assets/charm-card-overlay.webp',
+                    game: './fami-assets/game-card-overlay.webp',
                 };
-                var LOCAL_AVATAR = './fami-assets/avatar.png';
-                var LOCAL_BADGE = './fami-assets/level-badge.png';
-                var LOCAL_FRAME = './fami-assets/level-ring.png';
+                var LOCAL_AVATAR = './fami-assets/avatar.webp';
+                var LOCAL_BADGE = './fami-assets/level-badge.webp';
+                var LOCAL_FRAME = './fami-assets/level-ring.webp';
                 var page = document.getElementById('levelPage');
                 var header = document.getElementById('stickyHeader');
                 var timeline = document.getElementById('timeline');
diff --git a/rank/assets/fami/bg-charm.webp b/rank/assets/fami/bg-charm.webp
index f4e5f41..7a10932 100644
Binary files a/rank/assets/fami/bg-charm.webp and b/rank/assets/fami/bg-charm.webp differ
diff --git a/rank/assets/fami/bg-room.webp b/rank/assets/fami/bg-room.webp
index 2e34185..2393f03 100644
Binary files a/rank/assets/fami/bg-room.webp and b/rank/assets/fami/bg-room.webp differ
diff --git a/rank/assets/fami/bg-wealth.webp b/rank/assets/fami/bg-wealth.webp
index 2ca6f4b..c5fe53e 100644
Binary files a/rank/assets/fami/bg-wealth.webp and b/rank/assets/fami/bg-wealth.webp differ
diff --git a/rank/assets/fami/mine-charm.webp b/rank/assets/fami/mine-charm.webp
index dcf3efe..80c715a 100644
Binary files a/rank/assets/fami/mine-charm.webp and b/rank/assets/fami/mine-charm.webp differ
diff --git a/rank/assets/fami/mine-room.webp b/rank/assets/fami/mine-room.webp
index 0a70457..e6e7e7b 100644
Binary files a/rank/assets/fami/mine-room.webp and b/rank/assets/fami/mine-room.webp differ
diff --git a/rank/assets/fami/mine-wealth.webp b/rank/assets/fami/mine-wealth.webp
index e55aff9..7001faf 100644
Binary files a/rank/assets/fami/mine-wealth.webp and b/rank/assets/fami/mine-wealth.webp differ
diff --git a/rank/assets/fami/side-frame-bronze.webp b/rank/assets/fami/side-frame-bronze.webp
index 2e5e43e..202498e 100644
Binary files a/rank/assets/fami/side-frame-bronze.webp and b/rank/assets/fami/side-frame-bronze.webp differ
diff --git a/rank/assets/fami/side-frame-silver.webp b/rank/assets/fami/side-frame-silver.webp
index 4e59700..a8dc216 100644
Binary files a/rank/assets/fami/side-frame-silver.webp and b/rank/assets/fami/side-frame-silver.webp differ
diff --git a/rank/assets/fami/top-frame.webp b/rank/assets/fami/top-frame.webp
index 57d1636..1c98dae 100644
Binary files a/rank/assets/fami/top-frame.webp and b/rank/assets/fami/top-frame.webp differ
diff --git a/rank/assets/huwaa/bg-charm.webp b/rank/assets/huwaa/bg-charm.webp
new file mode 100644
index 0000000..e34d428
Binary files /dev/null and b/rank/assets/huwaa/bg-charm.webp differ
diff --git a/rank/assets/huwaa/bg-game.webp b/rank/assets/huwaa/bg-game.webp
new file mode 100644
index 0000000..8b42804
Binary files /dev/null and b/rank/assets/huwaa/bg-game.webp differ
diff --git a/rank/assets/huwaa/bg-room.webp b/rank/assets/huwaa/bg-room.webp
new file mode 100644
index 0000000..0e73c4d
Binary files /dev/null and b/rank/assets/huwaa/bg-room.webp differ
diff --git a/rank/assets/huwaa/bg-wealth.webp b/rank/assets/huwaa/bg-wealth.webp
new file mode 100644
index 0000000..50fd10f
Binary files /dev/null and b/rank/assets/huwaa/bg-wealth.webp differ
diff --git a/rank/assets/huwaa/coin.webp b/rank/assets/huwaa/coin.webp
new file mode 100644
index 0000000..b8e8d75
Binary files /dev/null and b/rank/assets/huwaa/coin.webp differ
diff --git a/rank/assets/huwaa/default-row.webp b/rank/assets/huwaa/default-row.webp
new file mode 100644
index 0000000..51907f8
Binary files /dev/null and b/rank/assets/huwaa/default-row.webp differ
diff --git a/rank/assets/huwaa/default-side.webp b/rank/assets/huwaa/default-side.webp
new file mode 100644
index 0000000..80c048f
Binary files /dev/null and b/rank/assets/huwaa/default-side.webp differ
diff --git a/rank/assets/huwaa/default-top.webp b/rank/assets/huwaa/default-top.webp
new file mode 100644
index 0000000..642a25c
Binary files /dev/null and b/rank/assets/huwaa/default-top.webp differ
diff --git a/rank/assets/huwaa/game-bronze.webp b/rank/assets/huwaa/game-bronze.webp
new file mode 100644
index 0000000..265c9e1
Binary files /dev/null and b/rank/assets/huwaa/game-bronze.webp differ
diff --git a/rank/assets/huwaa/game-silver.webp b/rank/assets/huwaa/game-silver.webp
new file mode 100644
index 0000000..42879a0
Binary files /dev/null and b/rank/assets/huwaa/game-silver.webp differ
diff --git a/rank/assets/huwaa/game-top.webp b/rank/assets/huwaa/game-top.webp
new file mode 100644
index 0000000..b03460b
Binary files /dev/null and b/rank/assets/huwaa/game-top.webp differ
diff --git a/rank/assets/huwaa/mock-badge.webp b/rank/assets/huwaa/mock-badge.webp
new file mode 100644
index 0000000..0949458
Binary files /dev/null and b/rank/assets/huwaa/mock-badge.webp differ
diff --git a/rank/assets/huwaa/period-active.webp b/rank/assets/huwaa/period-active.webp
new file mode 100644
index 0000000..893cafe
Binary files /dev/null and b/rank/assets/huwaa/period-active.webp differ
diff --git a/rank/assets/huwaa/row-charm.svg b/rank/assets/huwaa/row-charm.svg
new file mode 100644
index 0000000..7c313c2
--- /dev/null
+++ b/rank/assets/huwaa/row-charm.svg
@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #211333)" stroke="url(#paint0_linear_0_8)"/>
+<defs>
+<linearGradient id="paint0_linear_0_8" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/rank/assets/huwaa/row-game.svg b/rank/assets/huwaa/row-game.svg
new file mode 100644
index 0000000..eaac09e
--- /dev/null
+++ b/rank/assets/huwaa/row-game.svg
@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #372000)" stroke="url(#paint0_linear_0_5)"/>
+<defs>
+<linearGradient id="paint0_linear_0_5" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/rank/assets/huwaa/row-ornament.webp b/rank/assets/huwaa/row-ornament.webp
new file mode 100644
index 0000000..c8c8ace
Binary files /dev/null and b/rank/assets/huwaa/row-ornament.webp differ
diff --git a/rank/assets/huwaa/row-room.svg b/rank/assets/huwaa/row-room.svg
new file mode 100644
index 0000000..8851505
--- /dev/null
+++ b/rank/assets/huwaa/row-room.svg
@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #001A31)" stroke="url(#paint0_linear_0_43)"/>
+<defs>
+<linearGradient id="paint0_linear_0_43" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/rank/assets/huwaa/row-wealth.svg b/rank/assets/huwaa/row-wealth.svg
new file mode 100644
index 0000000..cba63e2
--- /dev/null
+++ b/rank/assets/huwaa/row-wealth.svg
@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 355 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2585" d="M345.584 0.5C346.127 3.02517 348.51 7.61259 354.5 9.375V54.0391C352.956 54.2004 350.869 54.7646 349.09 56.002C347.2 57.3167 345.662 59.393 345.513 62.5H9.9082C9.57898 61.034 8.78221 59.0476 7.34277 57.3623C5.83075 55.5921 3.60569 54.152 0.5 54.0117V9.47656C3.14532 9.24455 7.86964 7.1799 9.87207 0.5H345.584Z" fill="var(--fill-0, #372000)" stroke="url(#paint0_linear_0_11)"/>
+<defs>
+<linearGradient id="paint0_linear_0_11" x1="177.5" y1="0" x2="177.5" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAE242"/>
+<stop offset="1" stop-color="#FFBE69"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/rank/assets/huwaa/side-banner-bronze.webp b/rank/assets/huwaa/side-banner-bronze.webp
new file mode 100644
index 0000000..1ce77a3
Binary files /dev/null and b/rank/assets/huwaa/side-banner-bronze.webp differ
diff --git a/rank/assets/huwaa/side-banner-silver.webp b/rank/assets/huwaa/side-banner-silver.webp
new file mode 100644
index 0000000..830dc13
Binary files /dev/null and b/rank/assets/huwaa/side-banner-silver.webp differ
diff --git a/rank/assets/huwaa/side-frame-bronze.webp b/rank/assets/huwaa/side-frame-bronze.webp
new file mode 100644
index 0000000..09511a3
Binary files /dev/null and b/rank/assets/huwaa/side-frame-bronze.webp differ
diff --git a/rank/assets/huwaa/side-frame-silver.webp b/rank/assets/huwaa/side-frame-silver.webp
new file mode 100644
index 0000000..1439d64
Binary files /dev/null and b/rank/assets/huwaa/side-frame-silver.webp differ
diff --git a/rank/assets/huwaa/top-banner.webp b/rank/assets/huwaa/top-banner.webp
new file mode 100644
index 0000000..68b7176
Binary files /dev/null and b/rank/assets/huwaa/top-banner.webp differ
diff --git a/rank/assets/huwaa/top-frame.webp b/rank/assets/huwaa/top-frame.webp
new file mode 100644
index 0000000..9a2499d
Binary files /dev/null and b/rank/assets/huwaa/top-frame.webp differ
diff --git a/rank/huwaa.html b/rank/huwaa.html
new file mode 100644
index 0000000..be24260
--- /dev/null
+++ b/rank/huwaa.html
@@ -0,0 +1,1638 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+        />
+        <meta name="theme-color" content="#3e1b00" />
+        <title data-i18n="huwaa_rank.page_title">Huwaa Ranking</title>
+        <link rel="stylesheet" href="../common/theme.css" />
+        <style>
+            :root {
+                --rank-zoom: 1;
+                --rank-bg: url('assets/huwaa/bg-wealth.webp');
+                --rank-base: #3e1b00;
+                --rank-fade: rgba(62, 27, 0, 0.9);
+                --rank-shade: rgba(58, 34, 16, 0.58);
+                --row-frame: url('assets/huwaa/row-wealth.svg');
+                --row-photo-opacity: 0.14;
+                --mine-start: #ffe27d;
+                --mine-end: #d78d0d;
+                --mine-glow: rgba(255, 210, 106, 0.68);
+                --mine-text: #6a4300;
+                --gold: #ffc928;
+            }
+
+            * {
+                box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            html,
+            body {
+                min-height: 100%;
+                margin: 0;
+                background: var(--rank-base);
+                color: #fff;
+                font-family: Arial, 'Helvetica Neue', sans-serif;
+                overscroll-behavior-y: none;
+            }
+
+            body {
+                overflow-x: hidden;
+            }
+
+            button {
+                margin: 0;
+                padding: 0;
+                border: 0;
+                outline: 0;
+                color: inherit;
+                font: inherit;
+                background: transparent;
+                cursor: pointer;
+            }
+
+            img {
+                display: block;
+                user-select: none;
+                -webkit-user-drag: none;
+            }
+
+            .rank-app {
+                position: relative;
+                width: 375px;
+                min-height: 100vh;
+                margin: 0 auto;
+                overflow: visible;
+                isolation: isolate;
+                background: var(--rank-base);
+                zoom: var(--rank-zoom);
+            }
+
+            .rank-background {
+                position: absolute;
+                z-index: -2;
+                inset: 0 0 auto;
+                width: 375px;
+                min-height: 100%;
+                overflow: hidden;
+                background: var(--rank-base);
+                pointer-events: none;
+            }
+
+            .rank-background::before {
+                position: absolute;
+                top: -115px;
+                left: 0;
+                width: 375px;
+                height: 666px;
+                background: var(--rank-bg) center / 375px 666px no-repeat;
+                content: '';
+            }
+
+            /* Figma 的背景蒙版在原稿 y=595 结束；移除 44px 状态栏后，渐隐必须在 y=551 前收进主题底色，避免列表中段出现断层。 */
+            .rank-background::after {
+                position: absolute;
+                top: 425px;
+                left: 0;
+                width: 375px;
+                height: 140px;
+                background: linear-gradient(
+                    180deg,
+                    transparent,
+                    var(--rank-fade) 72%,
+                    var(--rank-base) 100%
+                );
+                content: '';
+            }
+
+            .sticky-header {
+                position: sticky;
+                z-index: 50;
+                top: 0;
+                width: 375px;
+                height: 88px;
+                background: linear-gradient(
+                    180deg,
+                    var(--rank-shade) 0%,
+                    rgba(9, 5, 35, 0.16) 72%,
+                    transparent 100%
+                );
+            }
+
+            .top-nav {
+                position: relative;
+                width: 375px;
+                height: 44px;
+            }
+
+            .back-button {
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 8px;
+                display: grid;
+                width: 40px;
+                height: 44px;
+                place-items: center;
+            }
+
+            .back-button::before {
+                width: 10px;
+                height: 10px;
+                border-bottom: 2px solid #fff;
+                border-left: 2px solid #fff;
+                content: '';
+                transform: rotate(45deg);
+                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
+            }
+
+            .help-button {
+                position: absolute;
+                z-index: 2;
+                top: 11px;
+                right: 18px;
+                width: 14px;
+                height: 14px;
+                border: 1px solid rgba(255, 255, 255, 0.8);
+                border-radius: 50%;
+                color: #fff;
+                font-size: 10px;
+                line-height: 12px;
+                text-align: center;
+            }
+
+            .board-tabs {
+                position: absolute;
+                top: 0;
+                left: 57px;
+                display: grid;
+                width: 263px;
+                height: 44px;
+                grid-template-columns: 70px 60px 72px 61px;
+                align-items: center;
+            }
+
+            .board-tab {
+                position: relative;
+                height: 44px;
+                color: #e2e2e2;
+                font-size: 16px;
+                line-height: 44px;
+                text-align: center;
+                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76);
+                white-space: nowrap;
+            }
+
+            .board-tab.is-active {
+                color: var(--gold);
+                text-shadow:
+                    0 0 7px rgba(255, 202, 45, 0.68),
+                    0 1px 2px rgba(0, 0, 0, 0.76);
+            }
+
+            .board-tab.is-active::after {
+                position: absolute;
+                bottom: 3px;
+                left: 50%;
+                width: 16px;
+                height: 3px;
+                margin-left: -8px;
+                border-radius: 3px;
+                background: var(--gold);
+                box-shadow: 0 0 7px rgba(255, 201, 40, 0.85);
+                content: '';
+            }
+
+            .period-tabs {
+                position: absolute;
+                top: 53px;
+                left: 65px;
+                display: grid;
+                width: 258px;
+                height: 29px;
+                border: 1px solid #ffc376;
+                border-radius: 15px;
+                background: #23180a;
+                grid-template-columns: repeat(3, 86px);
+            }
+
+            .period-tab {
+                position: relative;
+                z-index: 1;
+                height: 29px;
+                color: #fff;
+                font-size: 12px;
+                line-height: 28px;
+                text-align: center;
+                white-space: nowrap;
+            }
+
+            .period-tab::before {
+                position: absolute;
+                z-index: -1;
+                top: -6px;
+                left: -6px;
+                display: none;
+                width: 92px;
+                height: 40px;
+                background: url('assets/huwaa/period-active.webp') center / 92px
+                    40px no-repeat;
+                content: '';
+            }
+
+            .period-tab.is-active {
+                color: #492307;
+            }
+
+            .period-tab.is-active::before {
+                display: block;
+            }
+
+            .podium {
+                position: relative;
+                z-index: 1;
+                width: 375px;
+                height: 278px;
+            }
+
+            .podium-card {
+                position: absolute;
+                overflow: visible;
+                text-align: center;
+            }
+
+            .podium-card.top-one {
+                top: 6px;
+                left: 114px;
+                width: 147px;
+                height: 225px;
+            }
+
+            .podium-card.side {
+                top: 89px;
+                width: 119px;
+                height: 202px;
+            }
+
+            .podium-card.top-two {
+                left: 4px;
+            }
+
+            .podium-card.top-three {
+                right: 4px;
+            }
+
+            .podium-avatar,
+            .podium-frame,
+            .podium-banner,
+            .game-frame {
+                position: absolute;
+                pointer-events: none;
+            }
+
+            .podium-avatar {
+                z-index: 1;
+                border-radius: 50%;
+                object-fit: cover;
+                background: #241504;
+            }
+
+            .podium-banner {
+                z-index: 0;
+            }
+
+            .podium-frame,
+            .game-frame {
+                z-index: 2;
+            }
+
+            .top-one .podium-avatar {
+                top: 29px;
+                left: 37px;
+                width: 73px;
+                height: 73px;
+            }
+
+            .top-one .podium-frame {
+                inset: 0 auto auto 0;
+                width: 147px;
+                height: 138px;
+            }
+
+            .top-one .podium-banner {
+                top: 83px;
+                left: 12px;
+                width: 122px;
+                height: 142px;
+            }
+
+            .side .podium-avatar {
+                top: 18px;
+                left: 25px;
+                width: 70px;
+                height: 70px;
+            }
+
+            .side .podium-frame {
+                inset: 0 auto auto 0;
+                width: 119px;
+                height: 119px;
+            }
+
+            .side .podium-banner {
+                top: 68px;
+                left: 11px;
+                width: 98px;
+                height: 134px;
+            }
+
+            .top-three .podium-banner {
+                width: 99px;
+            }
+
+            .game-frame {
+                inset: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            .rank-app.is-game .top-one {
+                top: 2px;
+                height: 221px;
+            }
+
+            .rank-app.is-game .side {
+                height: 197px;
+            }
+
+            .podium-copy {
+                position: absolute;
+                z-index: 3;
+                color: #6a4300;
+                text-align: center;
+            }
+
+            .top-one .podium-copy {
+                top: 140px;
+                left: 23px;
+                width: 100px;
+            }
+
+            .side .podium-copy {
+                top: 122px;
+                left: 20px;
+                width: 79px;
+            }
+
+            .podium-name {
+                display: block;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 14px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .side .podium-name {
+                font-size: 12px;
+                line-height: 14px;
+            }
+
+            .badge-strip {
+                display: flex;
+                height: 20px;
+                align-items: center;
+                justify-content: center;
+                gap: 1px;
+                overflow: hidden;
+            }
+
+            .rank-badge {
+                width: auto;
+                max-width: 19px;
+                height: 16px;
+                object-fit: contain;
+            }
+
+            .side .rank-badge {
+                max-width: 17px;
+                height: 14px;
+            }
+
+            .podium-score,
+            .row-score,
+            .mine-score {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+                white-space: nowrap;
+            }
+
+            .podium-score {
+                justify-content: center;
+                height: 14px;
+                font-size: 10px;
+                line-height: 14px;
+            }
+
+            .score-coin {
+                width: 12px;
+                height: 12px;
+                object-fit: contain;
+            }
+
+            .side .podium-score,
+            .side .score-coin {
+                font-size: 9px;
+            }
+
+            .side .score-coin {
+                width: 10px;
+                height: 10px;
+            }
+
+            .rank-list {
+                position: relative;
+                z-index: 2;
+                width: 375px;
+                min-height: 375px;
+                padding-bottom: 104px;
+            }
+
+            .rank-item {
+                position: relative;
+                display: block;
+                width: 375px;
+                height: 75px;
+                text-align: left;
+            }
+
+            .row-frame,
+            .row-photo {
+                position: absolute;
+                top: 8px;
+                left: 10px;
+                width: 355px;
+                height: 63px;
+            }
+
+            .row-frame {
+                z-index: 0;
+                content: var(--row-frame);
+                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
+            }
+
+            .row-photo {
+                z-index: 1;
+                background: var(--rank-bg) center -204px / 375px 666px no-repeat;
+                clip-path: polygon(
+                    2.8% 0,
+                    97.3% 0,
+                    100% 15%,
+                    100% 86%,
+                    97.3% 100%,
+                    2.8% 100%,
+                    0 86%,
+                    0 15%
+                );
+                opacity: var(--row-photo-opacity);
+            }
+
+            .row-ornament {
+                position: absolute;
+                z-index: 3;
+                top: 0;
+                left: 133px;
+                width: 110px;
+                height: 14px;
+            }
+
+            .rank-number {
+                position: absolute;
+                z-index: 4;
+                top: 31px;
+                left: 21px;
+                width: 20px;
+                font-size: 16px;
+                line-height: 18px;
+                text-align: center;
+            }
+
+            .row-avatar {
+                position: absolute;
+                z-index: 4;
+                top: 19px;
+                left: 48px;
+                width: 42px;
+                height: 42px;
+                border-radius: 50%;
+                object-fit: cover;
+                background: #1c120b;
+            }
+
+            .row-main {
+                position: absolute;
+                z-index: 4;
+                top: 19px;
+                left: 98px;
+                width: 148px;
+                height: 45px;
+            }
+
+            .row-name {
+                display: block;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 17px;
+                text-overflow: ellipsis;
+                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+                white-space: nowrap;
+            }
+
+            .row-badges {
+                display: flex;
+                height: 20px;
+                align-items: center;
+                gap: 3px;
+                overflow: hidden;
+            }
+
+            .row-badges .rank-badge {
+                max-width: 17px;
+                height: 14px;
+            }
+
+            .row-score {
+                position: absolute;
+                z-index: 4;
+                top: 29px;
+                right: 29px;
+                justify-content: flex-end;
+                width: 86px;
+                font-size: 16px;
+                line-height: 20px;
+                text-align: right;
+            }
+
+            .row-score .score-coin {
+                width: 14px;
+                height: 14px;
+            }
+
+            .empty-state,
+            .error-state {
+                display: none;
+                min-height: 150px;
+                align-items: center;
+                justify-content: center;
+                padding: 24px;
+                color: rgba(255, 255, 255, 0.8);
+                font-size: 14px;
+                text-align: center;
+                text-shadow: 0 1px 3px #000;
+            }
+
+            .empty-state.is-visible,
+            .error-state.is-visible {
+                display: flex;
+            }
+
+            .my-rank {
+                position: fixed;
+                z-index: 80;
+                bottom: 0;
+                left: 50%;
+                display: block;
+                width: 375px;
+                height: 82px;
+                margin-left: -187.5px;
+                overflow: hidden;
+                border-top: 1px solid #ffe76d;
+                border-radius: 8px 8px 0 0;
+                color: var(--mine-text);
+                text-align: left;
+                background:
+                    linear-gradient(
+                        180deg,
+                        var(--mine-glow) 0%,
+                        transparent 100%
+                    ),
+                    linear-gradient(90deg, var(--mine-start), var(--mine-end));
+                box-shadow: 0 -5px 16px rgba(26, 12, 0, 0.22);
+                zoom: var(--rank-zoom);
+            }
+
+            .my-rank::before {
+                position: absolute;
+                top: -1px;
+                left: 40px;
+                width: 88px;
+                height: 1px;
+                background: linear-gradient(
+                    90deg,
+                    transparent,
+                    #fff,
+                    transparent
+                );
+                content: '';
+                opacity: 0.7;
+            }
+
+            .mine-number {
+                position: absolute;
+                top: 22px;
+                left: 18px;
+                width: 12px;
+                font-size: 20px;
+                line-height: 22px;
+                text-align: center;
+            }
+
+            .mine-avatar {
+                position: absolute;
+                top: 11px;
+                left: 46px;
+                width: 44px;
+                height: 44px;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+
+            .mine-main {
+                position: absolute;
+                top: 12px;
+                left: 100px;
+                width: 150px;
+            }
+
+            .mine-name {
+                display: block;
+                overflow: hidden;
+                font-size: 16px;
+                line-height: 18px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .mine-badges {
+                height: 23px;
+                justify-content: flex-start;
+                gap: 5px;
+            }
+
+            .mine-badges .rank-badge {
+                max-width: 18px;
+                height: 16px;
+            }
+
+            .mine-score {
+                position: absolute;
+                top: 24px;
+                right: 22px;
+                justify-content: flex-end;
+                width: 90px;
+                font-size: 16px;
+                line-height: 20px;
+            }
+
+            .mine-score .score-coin {
+                width: 14px;
+                height: 14px;
+            }
+
+            .home-indicator {
+                position: absolute;
+                right: 121px;
+                bottom: 9px;
+                left: 121px;
+                height: 5px;
+                border-radius: 3px;
+                background: #fff;
+            }
+
+            .loading-overlay {
+                position: fixed;
+                z-index: 120;
+                inset: 0;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                background: rgba(0, 0, 0, 0.16);
+            }
+
+            .loading-overlay.is-visible {
+                display: flex;
+            }
+
+            .loading-dot {
+                width: 30px;
+                height: 30px;
+                border: 3px solid rgba(255, 255, 255, 0.28);
+                border-top-color: #ffd349;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            [dir='rtl'] .rank-item,
+            [dir='rtl'] .my-rank {
+                direction: ltr;
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .loading-dot {
+                    animation-duration: 1.8s;
+                }
+            }
+        </style>
+        <script>
+            window.HyAppI18nSupported = ['en', 'ar', 'tr', 'es'];
+            // Huwaa 独立入口必须在公共 API/参数脚本执行前固定 app_code；否则 localStorage 中其他品牌值会污染请求头与用户概览。
+            window.HyAppDefaultAppCode = 'huwaa';
+            (function enforceHuwaaAppCode() {
+                try {
+                    var entryURL = new URL(window.location.href);
+                    if (entryURL.searchParams.get('app_code') !== 'huwaa') {
+                        entryURL.searchParams.set('app_code', 'huwaa');
+                        window.history.replaceState(
+                            null,
+                            '',
+                            entryURL.toString()
+                        );
+                    }
+                } catch (_) {
+                    // 旧 WebView 可能禁止 file:// 改写 history；默认值仍保证请求层发送 X-App-Code: huwaa。
+                }
+            })();
+        </script>
+        <script src="../common/api.js"></script>
+        <script src="../common/params.js"></script>
+        <script src="../common/jsbridge.js"></script>
+        <script src="../common/i18n.js"></script>
+    </head>
+    <body>
+        <main class="rank-app" id="rankApp">
+            <div class="rank-background" aria-hidden="true"></div>
+
+            <header class="sticky-header">
+                <nav
+                    class="top-nav"
+                    data-i18n-aria="fami_rank.navigation"
+                    aria-label="Ranking navigation"
+                >
+                    <button
+                        class="back-button"
+                        id="backButton"
+                        type="button"
+                        data-i18n-aria="fami_rank.back"
+                        aria-label="Back"
+                    ></button>
+                    <div class="board-tabs" id="boardTabs">
+                        <button
+                            class="board-tab"
+                            type="button"
+                            data-board="wealth"
+                            data-i18n="fami_rank.wealth"
+                        >
+                            Wealth
+                        </button>
+                        <button
+                            class="board-tab"
+                            type="button"
+                            data-board="room"
+                            data-i18n="fami_rank.room"
+                        >
+                            Room
+                        </button>
+                        <button
+                            class="board-tab"
+                            type="button"
+                            data-board="charm"
+                            data-i18n="fami_rank.charm"
+                        >
+                            Charm
+                        </button>
+                        <button
+                            class="board-tab"
+                            type="button"
+                            data-board="game"
+                            data-i18n="huwaa_rank.game"
+                        >
+                            Game
+                        </button>
+                    </div>
+                    <button
+                        class="help-button"
+                        id="helpButton"
+                        type="button"
+                        data-i18n-aria="fami_rank.rules"
+                        aria-label="Ranking rules"
+                    >
+                        ?
+                    </button>
+                </nav>
+
+                <div class="period-tabs" id="periodTabs">
+                    <button
+                        class="period-tab"
+                        type="button"
+                        data-period="today"
+                        data-i18n="fami_rank.daily"
+                    >
+                        Daily
+                    </button>
+                    <button
+                        class="period-tab"
+                        type="button"
+                        data-period="week"
+                        data-i18n="fami_rank.weekly"
+                    >
+                        Weekly
+                    </button>
+                    <button
+                        class="period-tab"
+                        type="button"
+                        data-period="month"
+                        data-i18n="fami_rank.monthly"
+                    >
+                        Monthly
+                    </button>
+                </div>
+            </header>
+
+            <section class="podium" id="podium" aria-live="polite"></section>
+            <section class="rank-list" id="rankList"></section>
+            <div
+                class="empty-state"
+                id="emptyState"
+                data-i18n="fami_rank.empty"
+            >
+                No ranking data yet
+            </div>
+            <div
+                class="error-state"
+                id="errorState"
+                data-i18n="fami_rank.network_error"
+            >
+                Unable to load the ranking. Please try again.
+            </div>
+        </main>
+
+        <button class="my-rank" id="myRank" type="button" hidden></button>
+        <div
+            class="loading-overlay"
+            id="loadingOverlay"
+            aria-hidden="true"
+            data-i18n-aria="fami_rank.loading"
+            aria-label="Loading"
+        >
+            <span class="loading-dot"></span>
+        </div>
+
+        <script>
+            (function () {
+                'use strict';
+
+                var ASSET_ROOT = 'assets/huwaa/';
+                var BOARD_CONFIG = {
+                    // UI 名称与后端枚举解耦；切换主题时只从这里读取协议值，避免翻译文案或 URL 别名直接进入接口。
+                    wealth: {
+                        apiType: 'sent',
+                        background: 'bg-wealth.webp',
+                        rowFrame: 'row-wealth.svg',
+                        base: '#3e1b00',
+                        fade: 'rgba(62, 27, 0, .9)',
+                        shade: 'rgba(58, 34, 16, .58)',
+                        photoOpacity: '.14',
+                        mineStart: '#ffe27d',
+                        mineEnd: '#d78d0d',
+                        mineGlow: 'rgba(255, 210, 106, .68)',
+                        mineText: '#6a4300',
+                    },
+                    room: {
+                        apiType: 'room',
+                        background: 'bg-room.webp',
+                        rowFrame: 'row-room.svg',
+                        base: '#003958',
+                        fade: 'rgba(0, 57, 88, .92)',
+                        shade: 'rgba(9, 5, 35, .38)',
+                        photoOpacity: '.14',
+                        mineStart: '#5577f4',
+                        mineEnd: '#122b81',
+                        mineGlow: 'rgba(101, 136, 255, .72)',
+                        mineText: '#fff',
+                    },
+                    charm: {
+                        apiType: 'received',
+                        background: 'bg-charm.webp',
+                        rowFrame: 'row-charm.svg',
+                        base: '#2f0044',
+                        fade: 'rgba(47, 0, 68, .92)',
+                        shade: 'rgba(9, 5, 35, .36)',
+                        photoOpacity: '.14',
+                        mineStart: '#c230df',
+                        mineEnd: '#6c128a',
+                        mineGlow: 'rgba(213, 80, 255, .7)',
+                        mineText: '#fff',
+                    },
+                    game: {
+                        // 游戏榜设计已预留独立枚举；当前端先于服务端发布时，接口会落入标准错误态而不会误用财富榜数据。
+                        apiType: 'game',
+                        background: 'bg-game.webp',
+                        rowFrame: 'row-game.svg',
+                        base: '#190c03',
+                        fade: 'rgba(25, 12, 3, .94)',
+                        shade: 'rgba(9, 5, 35, .36)',
+                        photoOpacity: '.2',
+                        mineStart: '#ffe27d',
+                        mineEnd: '#d78d0d',
+                        mineGlow: 'rgba(255, 210, 106, .68)',
+                        mineText: '#6a4300',
+                    },
+                };
+                var PERIODS = ['today', 'week', 'month'];
+                var query = new URLSearchParams(window.location.search);
+                var state = {
+                    board: normalizeBoard(
+                        query.get('board') || query.get('board_type')
+                    ),
+                    period:
+                        PERIODS.indexOf(query.get('period')) >= 0
+                            ? query.get('period')
+                            : 'today',
+                    page: 1,
+                    pageSize: 20,
+                    total: 0,
+                    items: [],
+                    myRank: null,
+                    currentUser: null,
+                    loading: false,
+                    loaded: false,
+                    error: null,
+                    requestSerial: 0,
+                };
+
+                function byId(id) {
+                    return document.getElementById(id);
+                }
+
+                function normalizeBoard(value) {
+                    var aliases = {
+                        sent: 'wealth',
+                        wealth: 'wealth',
+                        received: 'charm',
+                        charm: 'charm',
+                        room: 'room',
+                        rooms: 'room',
+                        game: 'game',
+                        gaming: 'game',
+                    };
+                    return (
+                        aliases[String(value || '').toLowerCase()] || 'wealth'
+                    );
+                }
+
+                function escapeHTML(value) {
+                    return String(value == null ? '' : value)
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;');
+                }
+
+                function t(key, fallback) {
+                    return window.HyAppI18n && window.HyAppI18n.t
+                        ? window.HyAppI18n.t(key, fallback)
+                        : fallback;
+                }
+
+                function mockEnabled() {
+                    var hasToken = Boolean(
+                        window.HyAppAPI &&
+                        window.HyAppAPI.getAccessToken &&
+                        window.HyAppAPI.getAccessToken()
+                    );
+                    // APP 可能以 file:// 承载 H5；只有文件预览且无 token 时启用样例，携带 token 必须走 Huwaa 真实请求。
+                    return (
+                        query.get('mock') === '1' ||
+                        (window.location.protocol === 'file:' && !hasToken)
+                    );
+                }
+
+                function compactNumber(value) {
+                    var number = Number(value || 0);
+                    if (!Number.isFinite(number)) number = 0;
+                    if (number >= 1000000000)
+                        return trimDecimal(number / 1000000000) + 'b';
+                    if (number >= 1000000)
+                        return trimDecimal(number / 1000000) + 'm';
+                    if (number >= 1000) return trimDecimal(number / 1000) + 'k';
+                    return String(Math.round(number));
+                }
+
+                function trimDecimal(value) {
+                    return value
+                        .toFixed(value >= 100 ? 0 : 1)
+                        .replace(/\.0$/, '');
+                }
+
+                function normalizeItem(raw) {
+                    var item = raw || {};
+                    var user = item.user || {};
+                    var room = item.room || {};
+                    var badges =
+                        user.short_badge_cover_urls ||
+                        user.shortBadgeCoverUrls ||
+                        [];
+                    if (!Array.isArray(badges)) badges = [];
+                    return {
+                        rank: Number(item.rank || 0),
+                        giftValue: Number(
+                            item.gift_value || item.giftValue || item.value || 0
+                        ),
+                        userId: String(
+                            item.user_id || user.user_id || user.userId || ''
+                        ),
+                        roomId: String(
+                            item.room_id || room.room_id || room.roomId || ''
+                        ),
+                        name:
+                            user.username ||
+                            user.nickname ||
+                            user.display_user_id ||
+                            room.title ||
+                            room.name ||
+                            room.room_short_id ||
+                            t('fami_rank.unknown', 'Unknown'),
+                        avatar:
+                            user.avatar ||
+                            user.avatar_url ||
+                            user.avatarUrl ||
+                            room.cover_url ||
+                            room.coverUrl ||
+                            room.room_avatar ||
+                            room.avatar ||
+                            '',
+                        badges: badges.filter(function (url) {
+                            return typeof url === 'string' && url.trim();
+                        }),
+                    };
+                }
+
+                function normalizeCurrentUser(current) {
+                    var overview = current && current.user;
+                    var profile =
+                        (overview &&
+                            (overview.profile || overview.user || overview)) ||
+                        {};
+                    var badges =
+                        profile.short_badge_cover_urls ||
+                        profile.shortBadgeCoverUrls ||
+                        [];
+                    if (!Array.isArray(badges)) badges = [];
+                    return {
+                        rank: 0,
+                        giftValue: 0,
+                        userId: String(
+                            profile.user_id ||
+                                profile.userId ||
+                                profile.id ||
+                                ''
+                        ),
+                        roomId: '',
+                        name:
+                            profile.nickname ||
+                            profile.username ||
+                            profile.display_user_id ||
+                            profile.user_id ||
+                            t('fami_rank.unknown', 'Unknown'),
+                        avatar:
+                            profile.avatar ||
+                            profile.avatar_url ||
+                            profile.avatarUrl ||
+                            '',
+                        badges: badges.filter(function (url) {
+                            return typeof url === 'string' && url.trim();
+                        }),
+                    };
+                }
+
+                function normalizePayload(data, reset) {
+                    var incoming = (
+                        data && Array.isArray(data.items) ? data.items : []
+                    )
+                        .map(normalizeItem)
+                        .filter(function (item) {
+                            return item.rank > 0;
+                        });
+                    state.items = reset
+                        ? incoming
+                        : state.items.concat(incoming);
+                    state.total = Number(
+                        (data && data.total) || state.items.length || 0
+                    );
+                    state.page = Number((data && data.page) || state.page);
+                    state.pageSize = Number(
+                        (data && (data.page_size || data.pageSize)) ||
+                            state.pageSize
+                    );
+                    state.myRank =
+                        data && data.my_rank
+                            ? normalizeItem(data.my_rank)
+                            : null;
+                    state.loaded = true;
+                    state.error = null;
+                }
+
+                function mockItems() {
+                    return Array.from({ length: 14 }, function (_, index) {
+                        return {
+                            rank: index + 1,
+                            giftValue:
+                                index < 3 ? 1232345 : 102400 - index * 700,
+                            userId: 'huwaa_user_' + (index + 1),
+                            roomId: 'huwaa_room_' + (index + 1),
+                            name: 'Namenamename',
+                            avatar:
+                                ASSET_ROOT +
+                                (index === 0
+                                    ? 'default-top.webp'
+                                    : index < 3
+                                      ? 'default-side.webp'
+                                      : 'default-row.webp'),
+                            // 样例徽章只用于 Figma 核对；真实接口为空时必须不渲染，不能伪造用户权益。
+                            badges: Array.from(
+                                { length: index === 0 ? 5 : 4 },
+                                function () {
+                                    return ASSET_ROOT + 'mock-badge.webp';
+                                }
+                            ),
+                        };
+                    });
+                }
+
+                function visibleItems() {
+                    return mockEnabled() ? mockItems() : state.items;
+                }
+
+                function itemAvatar(item, rank) {
+                    if (item && item.avatar) return item.avatar;
+                    if (rank === 1) return ASSET_ROOT + 'default-top.webp';
+                    if (rank === 2 || rank === 3)
+                        return ASSET_ROOT + 'default-side.webp';
+                    return ASSET_ROOT + 'default-row.webp';
+                }
+
+                function badgeMarkup(item, className, limit) {
+                    var badges =
+                        item && Array.isArray(item.badges) ? item.badges : [];
+                    return (
+                        '<span class="' +
+                        className +
+                        '">' +
+                        badges
+                            .slice(0, limit)
+                            .map(function (url) {
+                                return (
+                                    '<img class="rank-badge" src="' +
+                                    escapeHTML(url) +
+                                    '" alt="" />'
+                                );
+                            })
+                            .join('') +
+                        '</span>'
+                    );
+                }
+
+                function scoreMarkup(item, className) {
+                    return (
+                        '<span class="' +
+                        className +
+                        '"><img class="score-coin" src="' +
+                        ASSET_ROOT +
+                        'coin.webp" alt="" /><span>' +
+                        compactNumber(item ? item.giftValue : 0) +
+                        '</span></span>'
+                    );
+                }
+
+                function podiumMarkup(item, rank) {
+                    var actual = item || {
+                        rank: rank,
+                        name: t('fami_rank.unknown', 'Unknown'),
+                        giftValue: 0,
+                        badges: [],
+                    };
+                    var classes =
+                        rank === 1
+                            ? 'podium-card top-one'
+                            : rank === 2
+                              ? 'podium-card side top-two'
+                              : 'podium-card side top-three';
+                    var normalFrame =
+                        rank === 1
+                            ? 'top-frame.webp'
+                            : rank === 2
+                              ? 'side-frame-silver.webp'
+                              : 'side-frame-bronze.webp';
+                    var normalBanner =
+                        rank === 1
+                            ? 'top-banner.webp'
+                            : rank === 2
+                              ? 'side-banner-silver.webp'
+                              : 'side-banner-bronze.webp';
+                    var gameFrame =
+                        rank === 1
+                            ? 'game-top.webp'
+                            : rank === 2
+                              ? 'game-silver.webp'
+                              : 'game-bronze.webp';
+                    var art =
+                        state.board === 'game'
+                            ? '<img class="game-frame" src="' +
+                              ASSET_ROOT +
+                              gameFrame +
+                              '" alt="" />'
+                            : '<img class="podium-banner" src="' +
+                              ASSET_ROOT +
+                              normalBanner +
+                              '" alt="" /><img class="podium-avatar" src="' +
+                              escapeHTML(itemAvatar(actual, rank)) +
+                              '" alt="" /><img class="podium-frame" src="' +
+                              ASSET_ROOT +
+                              normalFrame +
+                              '" alt="" />';
+                    return (
+                        '<button class="' +
+                        classes +
+                        '" type="button" data-rank="' +
+                        rank +
+                        '"' +
+                        (item ? '' : ' disabled') +
+                        '>' +
+                        art +
+                        '<span class="podium-copy"><span class="podium-name">' +
+                        escapeHTML(actual.name) +
+                        '</span>' +
+                        badgeMarkup(actual, 'badge-strip', rank === 1 ? 5 : 4) +
+                        scoreMarkup(actual, 'podium-score') +
+                        '</span></button>'
+                    );
+                }
+
+                function rowMarkup(item) {
+                    return (
+                        '<button class="rank-item" type="button" data-rank="' +
+                        item.rank +
+                        '"><img class="row-frame" src="' +
+                        ASSET_ROOT +
+                        BOARD_CONFIG[state.board].rowFrame +
+                        '" alt="" /><span class="row-photo"></span><img class="row-ornament" src="' +
+                        ASSET_ROOT +
+                        'row-ornament.webp" alt="" /><span class="rank-number">' +
+                        item.rank +
+                        '</span><img class="row-avatar" src="' +
+                        escapeHTML(itemAvatar(item, 0)) +
+                        '" alt="" /><span class="row-main"><span class="row-name">' +
+                        escapeHTML(item.name) +
+                        '</span>' +
+                        badgeMarkup(item, 'row-badges', 4) +
+                        '</span>' +
+                        scoreMarkup(item, 'row-score') +
+                        '</button>'
+                    );
+                }
+
+                function currentMineItem() {
+                    if (mockEnabled()) {
+                        var sample = mockItems()[3];
+                        sample.badges.push(ASSET_ROOT + 'mock-badge.webp');
+                        return sample;
+                    }
+                    // 未上榜仍保留真实用户资料，排名显示 --、值显示 0；否则底栏会在弱活跃用户上整条消失。
+                    return state.myRank || state.currentUser;
+                }
+
+                function renderMine() {
+                    var item = currentMineItem();
+                    var mine = byId('myRank');
+                    mine.hidden = !item;
+                    if (!item) {
+                        mine.innerHTML = '';
+                        return;
+                    }
+                    mine.innerHTML =
+                        '<span class="mine-number">' +
+                        (item.rank || '--') +
+                        '</span><img class="mine-avatar" src="' +
+                        escapeHTML(itemAvatar(item, 0)) +
+                        '" alt="" /><span class="mine-main"><span class="mine-name">' +
+                        escapeHTML(item.name) +
+                        '</span>' +
+                        badgeMarkup(item, 'badge-strip mine-badges', 5) +
+                        '</span>' +
+                        scoreMarkup(item, 'mine-score') +
+                        '<span class="home-indicator"></span>';
+                }
+
+                function render() {
+                    var config = BOARD_CONFIG[state.board];
+                    var root = document.documentElement;
+                    root.style.setProperty(
+                        '--rank-bg',
+                        'url("' + ASSET_ROOT + config.background + '")'
+                    );
+                    root.style.setProperty('--rank-base', config.base);
+                    root.style.setProperty('--rank-fade', config.fade);
+                    root.style.setProperty('--rank-shade', config.shade);
+                    root.style.setProperty(
+                        '--row-photo-opacity',
+                        config.photoOpacity
+                    );
+                    root.style.setProperty('--mine-start', config.mineStart);
+                    root.style.setProperty('--mine-end', config.mineEnd);
+                    root.style.setProperty('--mine-glow', config.mineGlow);
+                    root.style.setProperty('--mine-text', config.mineText);
+                    document
+                        .querySelector('meta[name="theme-color"]')
+                        .setAttribute('content', config.base);
+                    byId('rankApp').classList.toggle(
+                        'is-game',
+                        state.board === 'game'
+                    );
+                    document
+                        .querySelectorAll('[data-board]')
+                        .forEach(function (node) {
+                            node.classList.toggle(
+                                'is-active',
+                                node.getAttribute('data-board') === state.board
+                            );
+                        });
+                    document
+                        .querySelectorAll('[data-period]')
+                        .forEach(function (node) {
+                            node.classList.toggle(
+                                'is-active',
+                                node.getAttribute('data-period') ===
+                                    state.period
+                            );
+                        });
+                    var items = visibleItems();
+                    byId('podium').innerHTML =
+                        podiumMarkup(items[0], 1) +
+                        podiumMarkup(items[1], 2) +
+                        podiumMarkup(items[2], 3);
+                    byId('rankList').innerHTML = items
+                        .slice(3)
+                        .map(rowMarkup)
+                        .join('');
+                    byId('emptyState').classList.toggle(
+                        'is-visible',
+                        state.loaded && !state.error && items.length === 0
+                    );
+                    byId('errorState').classList.toggle(
+                        'is-visible',
+                        state.loaded &&
+                            Boolean(state.error) &&
+                            items.length === 0
+                    );
+                    byId('loadingOverlay').classList.toggle(
+                        'is-visible',
+                        state.loading
+                    );
+                    byId('loadingOverlay').setAttribute(
+                        'aria-hidden',
+                        state.loading ? 'false' : 'true'
+                    );
+                    renderMine();
+                }
+
+                function updateURLState() {
+                    if (!window.history || !window.history.replaceState) return;
+                    var url = new URL(window.location.href);
+                    url.searchParams.set('app_code', 'huwaa');
+                    url.searchParams.set('board', state.board);
+                    url.searchParams.set('period', state.period);
+                    window.history.replaceState(null, '', url.toString());
+                }
+
+                function load(reset) {
+                    if (reset) {
+                        state.page = 1;
+                        state.items = [];
+                        state.total = 0;
+                        state.myRank = null;
+                        state.loaded = false;
+                        state.error = null;
+                    }
+                    if (mockEnabled()) {
+                        state.loaded = true;
+                        state.loading = false;
+                        state.error = null;
+                        render();
+                        return Promise.resolve();
+                    }
+                    if (!window.HyAppAPI || !window.HyAppAPI.getAccessToken()) {
+                        state.loaded = true;
+                        state.loading = false;
+                        state.error = new Error('missing_token');
+                        render();
+                        return Promise.resolve();
+                    }
+                    var requestedPage = state.page;
+                    var serial = ++state.requestSerial;
+                    state.loading = true;
+                    state.error = null;
+                    render();
+                    return window.HyAppAPI.get(
+                        '/api/v1/activities/user-leaderboards',
+                        {
+                            board_type: BOARD_CONFIG[state.board].apiType,
+                            period: state.period,
+                            page: requestedPage,
+                            page_size: state.pageSize,
+                        }
+                    )
+                        .then(function (payload) {
+                            // 切榜、切周期可能并发；只接收最后一次请求，防止慢响应把当前主题覆盖回旧榜。
+                            if (serial !== state.requestSerial) return;
+                            normalizePayload(payload, reset);
+                        })
+                        .catch(function (error) {
+                            if (serial !== state.requestSerial) return;
+                            state.loaded = true;
+                            state.error = error;
+                            // 翻页失败回滚页码，下一次触底才会重试失败页而不是永久跳页。
+                            if (!reset)
+                                state.page = Math.max(1, requestedPage - 1);
+                        })
+                        .finally(function () {
+                            if (serial !== state.requestSerial) return;
+                            state.loading = false;
+                            render();
+                        });
+                }
+
+                function switchBoard(board) {
+                    if (!BOARD_CONFIG[board] || state.board === board) return;
+                    state.board = board;
+                    state.requestSerial += 1;
+                    updateURLState();
+                    window.scrollTo(0, 0);
+                    load(true);
+                }
+
+                function switchPeriod(period) {
+                    if (PERIODS.indexOf(period) < 0 || state.period === period)
+                        return;
+                    state.period = period;
+                    state.requestSerial += 1;
+                    updateURLState();
+                    window.scrollTo(0, 0);
+                    load(true);
+                }
+
+                function itemByRank(rank) {
+                    return visibleItems().find(function (item) {
+                        return String(item.rank) === String(rank);
+                    });
+                }
+
+                function openItem(item) {
+                    if (!item) return;
+                    if (state.board === 'room') {
+                        if (item.roomId)
+                            window.HyAppBridge.openRoom(item.roomId);
+                        return;
+                    }
+                    if (item.userId) window.HyAppBridge.openUser(item.userId);
+                }
+
+                function resizeCanvas() {
+                    // 375px 是 Figma 基准；窄屏整体缩放，避免皇冠、榜框的绝对坐标被流式布局挤散。
+                    var zoom = Math.min(1, window.innerWidth / 375);
+                    document.documentElement.style.setProperty(
+                        '--rank-zoom',
+                        String(zoom)
+                    );
+                }
+
+                byId('boardTabs').addEventListener('click', function (event) {
+                    var target = event.target.closest('[data-board]');
+                    if (target) switchBoard(target.getAttribute('data-board'));
+                });
+                byId('periodTabs').addEventListener('click', function (event) {
+                    var target = event.target.closest('[data-period]');
+                    if (target)
+                        switchPeriod(target.getAttribute('data-period'));
+                });
+                byId('podium').addEventListener('click', function (event) {
+                    var target = event.target.closest('[data-rank]');
+                    if (target)
+                        openItem(itemByRank(target.getAttribute('data-rank')));
+                });
+                byId('rankList').addEventListener('click', function (event) {
+                    var target = event.target.closest('[data-rank]');
+                    if (target)
+                        openItem(itemByRank(target.getAttribute('data-rank')));
+                });
+                byId('myRank').addEventListener('click', function () {
+                    openItem(currentMineItem());
+                });
+                byId('backButton').addEventListener('click', function () {
+                    window.HyAppBridge.back();
+                });
+                byId('helpButton').addEventListener('click', function () {
+                    if (window.HyAppBridge.openRankNote)
+                        window.HyAppBridge.openRankNote(state.board);
+                });
+
+                document.addEventListener(
+                    'error',
+                    function (event) {
+                        var image = event.target;
+                        if (!image || image.tagName !== 'IMG') return;
+                        if (image.classList.contains('rank-badge')) {
+                            // 失效远端徽章直接移除；本地替代图会错误展示用户并未拥有的权益。
+                            image.remove();
+                            return;
+                        }
+                        if (
+                            image.classList.contains('row-frame') ||
+                            image.classList.contains('row-ornament') ||
+                            image.classList.contains('podium-frame') ||
+                            image.classList.contains('podium-banner') ||
+                            image.classList.contains('game-frame') ||
+                            image.classList.contains('score-coin')
+                        ) {
+                            return;
+                        }
+                        // CDN 头像失败只回退头像资源，装饰和徽章保持真实失败语义。
+                        image.src = ASSET_ROOT + 'default-row.webp';
+                    },
+                    true
+                );
+
+                window.addEventListener('scroll', function () {
+                    if (
+                        mockEnabled() ||
+                        state.loading ||
+                        !state.loaded ||
+                        !state.total ||
+                        state.items.length >= state.total
+                    ) {
+                        return;
+                    }
+                    if (
+                        window.innerHeight + window.scrollY >=
+                        document.documentElement.scrollHeight - 180
+                    ) {
+                        state.page += 1;
+                        load(false);
+                    }
+                });
+                window.addEventListener('resize', resizeCanvas);
+                window.addEventListener('hyapp:i18n-ready', render);
+
+                // WebView 刷新会恢复旧滚动位置；排行榜入口固定从吸顶导航开始，避免首屏直接落在三甲中段。
+                if ('scrollRestoration' in window.history) {
+                    window.history.scrollRestoration = 'manual';
+                }
+                window.scrollTo(0, 0);
+                resizeCanvas();
+                updateURLState();
+                render();
+                window.HyAppBridge.ready({ page: 'rank/huwaa' });
+
+                // 用户概览失败不能阻断排行榜；接口未返回 my_rank 时仍可用概览填充个人底栏。
+                Promise.resolve(
+                    window.HyAppParams && window.HyAppParams.loadUser
+                        ? window.HyAppParams.loadUser()
+                        : null
+                )
+                    .then(function (current) {
+                        state.currentUser = current
+                            ? normalizeCurrentUser(current)
+                            : null;
+                        render();
+                    })
+                    .catch(function () {
+                        return null;
+                    })
+                    .finally(function () {
+                        load(true);
+                    });
+            })();
+        </script>
+    </body>
+</html>