diff --git a/common/locales/ar.json b/common/locales/ar.json
index 0fc906d..c32601e 100644
--- a/common/locales/ar.json
+++ b/common/locales/ar.json
@@ -764,5 +764,38 @@
     "manager_center.send_badge": "إرسال شارة",
     "manager_center.send_vip": "إرسال VIP",
     "manager_center.user_level": "مستوى المستخدم",
-    "manager_center.transfer_user_country": "نقل بلد المستخدم"
+    "manager_center.transfer_user_country": "نقل بلد المستخدم",
+    "fami_level.back": "رجوع",
+    "fami_level.title": "المستوى",
+    "fami_level.wealth": "الثروة",
+    "fami_level.charm": "الجاذبية",
+    "fami_level.game": "اللعبة",
+    "fami_level.rewards": "مكافآت المستوى",
+    "fami_level.level": "المستوى",
+    "fami_level.requires": "يتطلب",
+    "fami_level.next_prefix": "تحتاج للمستوى التالي",
+    "fami_level.experience_points": "نقاط خبرة",
+    "fami_level.how_to_upgrade": "كيف ترتقي؟",
+    "fami_level.receive_gift": "تلقي هدية",
+    "fami_level.buy_car": "شراء سيارة",
+    "fami_level.buy_avatar_frame": "شراء إطار الصورة",
+    "fami_level.earned_gameplay": "تُكتسب من خلال اللعب",
+    "fami_level.coin_rate": "عملة واحدة = 1 نقطة خبرة",
+    "fami_level.max_level": "تم الوصول إلى أعلى مستوى",
+    "fami_level.no_data": "لا توجد بيانات للمستويات",
+    "fami_level.network_error": "تعذر تحميل بيانات المستوى. حاول مرة أخرى.",
+    "fami_rank.page_title": "تصنيف العائلة",
+    "fami_rank.navigation": "التنقل في التصنيف",
+    "fami_rank.back": "رجوع",
+    "fami_rank.rules": "قواعد التصنيف",
+    "fami_rank.wealth": "الثروة",
+    "fami_rank.charm": "الجاذبية",
+    "fami_rank.room": "الغرفة",
+    "fami_rank.daily": "يومي",
+    "fami_rank.weekly": "أسبوعي",
+    "fami_rank.monthly": "شهري",
+    "fami_rank.loading": "جارٍ التحميل",
+    "fami_rank.empty": "لا توجد بيانات تصنيف بعد",
+    "fami_rank.network_error": "تعذر تحميل التصنيف. حاول مرة أخرى.",
+    "fami_rank.unknown": "غير معروف"
 }
diff --git a/common/locales/en.json b/common/locales/en.json
index 4f4b3ed..80ce95a 100644
--- a/common/locales/en.json
+++ b/common/locales/en.json
@@ -770,5 +770,38 @@
     "manager_center.send_badge": "Send Badge",
     "manager_center.send_vip": "Send VIP",
     "manager_center.user_level": "User Level",
-    "manager_center.transfer_user_country": "Transfer User Country"
+    "manager_center.transfer_user_country": "Transfer User Country",
+    "fami_level.back": "Back",
+    "fami_level.title": "Level",
+    "fami_level.wealth": "Wealth",
+    "fami_level.charm": "Charm",
+    "fami_level.game": "Game",
+    "fami_level.rewards": "Level Rewards",
+    "fami_level.level": "Level",
+    "fami_level.requires": "Requires",
+    "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.receive_gift": "Receive a Gift",
+    "fami_level.buy_car": "Buy a car",
+    "fami_level.buy_avatar_frame": "Buy Avatar Frame",
+    "fami_level.earned_gameplay": "Earned through gameplay",
+    "fami_level.coin_rate": "1 Coins = 1 EXP",
+    "fami_level.max_level": "Max level reached",
+    "fami_level.no_data": "No level data",
+    "fami_level.network_error": "Unable to load level data. Please try again.",
+    "fami_rank.page_title": "Fami Ranking",
+    "fami_rank.navigation": "Ranking navigation",
+    "fami_rank.back": "Back",
+    "fami_rank.rules": "Ranking rules",
+    "fami_rank.wealth": "Wealth",
+    "fami_rank.charm": "Charm",
+    "fami_rank.room": "Room",
+    "fami_rank.daily": "Daily",
+    "fami_rank.weekly": "Weekly",
+    "fami_rank.monthly": "Monthly",
+    "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"
 }
diff --git a/common/locales/es.json b/common/locales/es.json
index 984fc71..c83e845 100644
--- a/common/locales/es.json
+++ b/common/locales/es.json
@@ -764,5 +764,38 @@
     "manager_center.send_badge": "Enviar insignia",
     "manager_center.send_vip": "Enviar VIP",
     "manager_center.user_level": "Nivel de usuario",
-    "manager_center.transfer_user_country": "Transferir país del usuario"
+    "manager_center.transfer_user_country": "Transferir país del usuario",
+    "fami_level.back": "Atrás",
+    "fami_level.title": "Nivel",
+    "fami_level.wealth": "Riqueza",
+    "fami_level.charm": "Encanto",
+    "fami_level.game": "Juego",
+    "fami_level.rewards": "Recompensas de nivel",
+    "fami_level.level": "Nivel",
+    "fami_level.requires": "Requiere",
+    "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.receive_gift": "Recibe un regalo",
+    "fami_level.buy_car": "Compra un vehículo",
+    "fami_level.buy_avatar_frame": "Compra un marco de avatar",
+    "fami_level.earned_gameplay": "Se obtiene jugando",
+    "fami_level.coin_rate": "1 moneda = 1 EXP",
+    "fami_level.max_level": "Nivel máximo alcanzado",
+    "fami_level.no_data": "No hay datos de nivel",
+    "fami_level.network_error": "No se pudieron cargar los datos de nivel. Inténtalo de nuevo.",
+    "fami_rank.page_title": "Clasificación Fami",
+    "fami_rank.navigation": "Navegación de clasificación",
+    "fami_rank.back": "Atrás",
+    "fami_rank.rules": "Reglas de clasificación",
+    "fami_rank.wealth": "Riqueza",
+    "fami_rank.charm": "Encanto",
+    "fami_rank.room": "Sala",
+    "fami_rank.daily": "Diario",
+    "fami_rank.weekly": "Semanal",
+    "fami_rank.monthly": "Mensual",
+    "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"
 }
diff --git a/common/locales/tr.json b/common/locales/tr.json
index d619f52..306a041 100644
--- a/common/locales/tr.json
+++ b/common/locales/tr.json
@@ -731,5 +731,38 @@
     "manager_center.send_badge": "Rozet Gönder",
     "manager_center.send_vip": "VIP Gönder",
     "manager_center.user_level": "Kullanıcı Seviyesi",
-    "manager_center.transfer_user_country": "Kullanıcının Ülkesini Taşı"
+    "manager_center.transfer_user_country": "Kullanıcının Ülkesini Taşı",
+    "fami_level.back": "Geri",
+    "fami_level.title": "Seviye",
+    "fami_level.wealth": "Servet",
+    "fami_level.charm": "Cazibe",
+    "fami_level.game": "Oyun",
+    "fami_level.rewards": "Seviye Ödülleri",
+    "fami_level.level": "Seviye",
+    "fami_level.requires": "Gerekli",
+    "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.receive_gift": "Hediye al",
+    "fami_level.buy_car": "Araç satın al",
+    "fami_level.buy_avatar_frame": "Avatar çerçevesi satın al",
+    "fami_level.earned_gameplay": "Oynayarak kazanılır",
+    "fami_level.coin_rate": "1 Coin = 1 EXP",
+    "fami_level.max_level": "En yüksek seviyeye ulaşıldı",
+    "fami_level.no_data": "Seviye verisi yok",
+    "fami_level.network_error": "Seviye verileri yüklenemedi. Lütfen tekrar deneyin.",
+    "fami_rank.page_title": "Fami Sıralaması",
+    "fami_rank.navigation": "Sıralama menüsü",
+    "fami_rank.back": "Geri",
+    "fami_rank.rules": "Sıralama kuralları",
+    "fami_rank.wealth": "Servet",
+    "fami_rank.charm": "Cazibe",
+    "fami_rank.room": "Oda",
+    "fami_rank.daily": "Günlük",
+    "fami_rank.weekly": "Haftalık",
+    "fami_rank.monthly": "Aylık",
+    "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"
 }
diff --git a/level/fami-assets/avatar.png b/level/fami-assets/avatar.png
new file mode 100644
index 0000000..d27cfb7
Binary files /dev/null and b/level/fami-assets/avatar.png differ
diff --git a/level/fami-assets/charm-bg.png b/level/fami-assets/charm-bg.png
new file mode 100644
index 0000000..d3bbd1a
Binary files /dev/null and b/level/fami-assets/charm-bg.png differ
diff --git a/level/fami-assets/charm-card-overlay.png b/level/fami-assets/charm-card-overlay.png
new file mode 100644
index 0000000..09d0a7c
Binary files /dev/null and b/level/fami-assets/charm-card-overlay.png differ
diff --git a/level/fami-assets/game-bg.png b/level/fami-assets/game-bg.png
new file mode 100644
index 0000000..64d4ffd
Binary files /dev/null and b/level/fami-assets/game-bg.png differ
diff --git a/level/fami-assets/game-card-overlay.png b/level/fami-assets/game-card-overlay.png
new file mode 100644
index 0000000..a830047
Binary files /dev/null and b/level/fami-assets/game-card-overlay.png differ
diff --git a/level/fami-assets/level-badge.png b/level/fami-assets/level-badge.png
new file mode 100644
index 0000000..e65da3c
Binary files /dev/null and b/level/fami-assets/level-badge.png differ
diff --git a/level/fami-assets/level-ring.png b/level/fami-assets/level-ring.png
new file mode 100644
index 0000000..6a12186
Binary files /dev/null and b/level/fami-assets/level-ring.png differ
diff --git a/level/fami-assets/upgrade-car.svg b/level/fami-assets/upgrade-car.svg
new file mode 100644
index 0000000..38c0169
--- /dev/null
+++ b/level/fami-assets/upgrade-car.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2090055541">
+<rect id="Rectangle 346254111" width="54" height="54" rx="27" fill="url(#paint0_linear_0_52)"/>
+<path id="Vector" d="M43.1127 20.9313H39.9276C39.7823 20.9338 39.6387 20.973 39.5124 21.0439L38.0771 16.6802C37.619 14.1992 35.8865 13 33.7595 13H20.2702C17.8271 13 16.3447 14.6073 15.9518 16.6777L14.5124 21.0556C14.3789 20.9752 14.2269 20.9318 14.0716 20.9296H10.8873C10.7709 20.9294 10.6556 20.9523 10.5481 20.9972C10.4405 21.042 10.3427 21.1079 10.2603 21.191C10.1779 21.2741 10.1125 21.3727 10.0678 21.4814C10.0232 21.59 10.0001 21.7065 10 21.8242V22.6003C10 23.0935 10.397 23.4957 10.8873 23.4957L12.0923 23.7044C11.6877 24.5129 11.4829 25.4086 11.4956 26.3147L11.0491 31.4637C11.0491 31.6123 11.0598 31.7641 11.078 31.9177C11.0601 32.014 11.0504 32.1118 11.0491 32.2098V38.4044C11.0491 39.2865 11.7572 40 12.6313 40H15.0456C15.2532 40.0004 15.4588 39.9595 15.6508 39.8795C15.8427 39.7996 16.0172 39.6821 16.1642 39.5339C16.3112 39.3858 16.4279 39.2097 16.5076 39.0159C16.5873 38.8221 16.6284 38.6143 16.6287 38.4044V36.4149H37.4002V38.4044C37.4002 39.2865 38.1084 40 38.9825 40H41.3984C41.6059 40.0003 41.8115 39.9593 42.0033 39.8793C42.1952 39.7993 42.3695 39.6818 42.5165 39.5336C42.6634 39.3855 42.78 39.2095 42.8597 39.0157C42.9393 38.822 42.9804 38.6142 42.9807 38.4044V32.2089C42.9807 32.1113 42.9699 32.0137 42.9509 31.9177C42.9691 31.7641 42.9807 31.6123 42.9807 31.4629L42.5333 26.3139C42.5333 25.3116 42.3154 24.4529 41.9341 23.7002L43.1119 23.4982C43.2284 23.4986 43.3438 23.4756 43.4516 23.4308C43.5593 23.3859 43.6572 23.32 43.7397 23.2369C43.8222 23.1537 43.8877 23.0549 43.9324 22.946C43.977 22.8372 44 22.7206 44 22.6028V21.8267C43.9989 21.5891 43.9049 21.3616 43.7385 21.1939C43.5721 21.0261 43.3469 20.9317 43.1119 20.9313H43.1127ZM17.0149 20.0158L18.0689 17.1851L18.0822 17.1183C18.187 16.5475 18.4206 16.4441 18.7672 16.0034H35.2732C35.6232 16.4574 35.8411 16.5726 35.936 17.1142L37.0082 20.0183L37.4011 21.5955C37.3119 22.7497 35.936 23.661 34.7945 23.661H19.2286C18.0846 23.661 16.7087 22.7497 16.6204 21.5947L17.0149 20.0158ZM17.7528 33.4782C17.4326 33.4736 17.1166 33.404 16.8235 33.2736C16.5304 33.1432 16.2661 32.9547 16.0464 32.7193C15.8266 32.4838 15.6558 32.2061 15.5441 31.9027C15.4324 31.5992 15.382 31.2762 15.396 30.9528C15.41 30.6293 15.488 30.312 15.6255 30.0196C15.7629 29.7271 15.957 29.4656 16.1962 29.2504C16.4355 29.0352 16.715 28.8707 17.0182 28.7666C17.3215 28.6626 17.6423 28.6211 17.9616 28.6447C18.5827 28.6906 19.1616 28.9793 19.5756 29.4497C19.9895 29.92 20.2059 30.535 20.1787 31.164C20.1515 31.793 19.883 32.3865 19.43 32.8186C18.9771 33.2507 18.3755 33.4873 17.7528 33.4782ZM31.1414 31.6949C31.1407 31.8857 31.0653 32.0684 30.9316 32.2031C30.7979 32.3378 30.6169 32.4134 30.4282 32.4134H23.7038C23.5153 32.4134 23.3344 32.3379 23.2007 32.2034C23.0671 32.0689 22.9916 31.8864 22.9907 31.6957V29.6753C22.9907 29.2781 23.311 28.9568 23.7038 28.9568H30.4282C30.8211 28.9568 31.1414 29.2781 31.1414 29.6745V31.6949ZM36.2703 33.4782C35.9559 33.4788 35.6445 33.4167 35.3538 33.2955C35.0631 33.1744 34.7989 32.9965 34.5763 32.7721C34.3536 32.5476 34.1768 32.2811 34.0561 31.9875C33.9354 31.694 33.873 31.3794 33.8726 31.0615C33.873 30.7436 33.9354 30.4289 34.0561 30.1354C34.1768 29.8419 34.3536 29.5753 34.5763 29.3509C34.7989 29.1265 35.0631 28.9486 35.3538 28.8274C35.6445 28.7062 35.9559 28.6442 36.2703 28.6447C36.5846 28.6443 36.896 28.7064 37.1865 28.8277C37.4771 28.9489 37.7412 29.1268 37.9638 29.3512C38.1864 29.5756 38.363 29.8421 38.4837 30.1356C38.6044 30.429 38.6668 30.7437 38.6672 31.0615C38.6659 31.7032 38.4127 32.3181 37.9633 32.7713C37.5139 33.2244 36.905 33.4787 36.2703 33.4782Z" fill="var(--fill-0, white)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_52" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBE5F"/>
+<stop offset="1" stop-color="#F46E00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/level/fami-assets/upgrade-charm.svg b/level/fami-assets/upgrade-charm.svg
new file mode 100644
index 0000000..438c261
--- /dev/null
+++ b/level/fami-assets/upgrade-charm.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2090055540">
+<rect id="Rectangle 346254111" width="54" height="54" rx="27" fill="url(#paint0_linear_0_41)"/>
+<path id="Vector" d="M27.9375 28.3424V38.9703C27.9375 39.0943 27.832 39.1958 27.7031 39.1958H26.2969C26.168 39.1958 26.0625 39.0943 26.0625 38.9703V28.3424H13.875V39.1958C13.875 40.1909 14.7158 41 15.75 41H38.25C39.2871 41 40.125 40.1909 40.125 39.1958V28.3424H27.9375ZM38.25 18.4474H37.0195C36.832 18.4474 36.7207 18.2445 36.8262 18.095C37.2832 17.441 37.5059 16.7222 37.459 16.0089C37.4033 15.1576 36.958 14.419 36.1758 13.8721C35.6133 13.4802 34.8662 13.1955 34.0752 13.0658C32.6396 12.8347 31.1191 13.2265 29.7891 14.1737C29.0742 14.684 28.4238 15.3352 27.8437 16.1245C27.4717 16.6291 26.6895 16.6291 26.3174 16.1245C25.7373 15.3352 25.0869 14.6811 24.3721 14.1737C23.0449 13.2265 21.5244 12.8318 20.0889 13.0658C19.2979 13.1955 18.5508 13.4802 17.9883 13.8721C17.2061 14.4162 16.7607 15.1547 16.7051 16.0089C16.6582 16.7222 16.8779 17.441 17.3379 18.095C17.4434 18.2445 17.335 18.4474 17.1445 18.4474H15.75C13.6787 18.4474 12 20.0628 12 22.0558V25.6642C12 26.0843 12.2988 26.4395 12.7031 26.5382H41.2969C41.7012 26.4395 42 26.0843 42 25.6642V22.0558C42 20.0628 40.3213 18.4474 38.25 18.4474ZM28.7607 18.112C30.3193 15.3915 32.2939 14.605 33.7617 14.8446C33.9404 14.8728 35.5195 15.1576 35.5869 16.1245C35.6426 16.9674 34.6758 18.0838 33.0088 18.4474H28.9658C28.7871 18.4474 28.6758 18.2642 28.7607 18.112ZM18.5742 16.1245C18.6387 15.1576 20.2178 14.8757 20.3994 14.8446C21.8701 14.6078 23.8447 15.3915 25.4004 18.112C25.4883 18.2614 25.374 18.4474 25.1953 18.4474H21.1523C19.4883 18.0809 18.5186 16.9674 18.5742 16.1245Z" fill="var(--fill-0, white)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_41" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E25FFF"/>
+<stop offset="1" stop-color="#9200F4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/level/fami-assets/upgrade-frame.svg b/level/fami-assets/upgrade-frame.svg
new file mode 100644
index 0000000..ca646c8
--- /dev/null
+++ b/level/fami-assets/upgrade-frame.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2090055542">
+<rect id="Rectangle 346254111" width="54" height="54" rx="27" fill="url(#paint0_linear_0_58)"/>
+<path id="Union" d="M29.0098 11.5957L31.4375 10.3252L33.1572 12.1826L34.9785 11.2051L34.1602 15.3232C38.9189 17.8052 42.1571 22.6822 42.1572 28.2891C42.1571 36.4089 35.3666 42.9999 27 43C18.6333 43 11.8429 36.409 11.8428 28.2891C11.8429 22.8375 14.9035 18.0752 19.4473 15.5342L18.5908 11.2051L20.4111 12.1826L22.1309 10.3252L24.5586 11.5957L26.7842 9.05371L29.0098 11.5957ZM26.877 21.3721C23.5263 21.3722 20.797 24.0032 20.7969 27.252C20.7969 29.3246 21.9037 31.133 23.5713 32.1768C20.6802 33.0863 18.3263 35.1637 17.1191 37.8369C19.6444 40.2987 23.1391 41.8232 27 41.8232C30.7734 41.8232 34.1963 40.3661 36.707 38.002C35.5269 35.2498 33.1439 33.1048 30.1826 32.1768C31.8501 31.1329 32.957 29.3246 32.957 27.252C32.9569 24.0031 30.2277 21.3721 26.877 21.3721ZM20.917 12.6709L22.6367 13.6484L23.9521 12.1826L22.1309 11.3027L20.917 12.6709ZM29.4141 12.1826L30.6279 13.6484L32.3477 12.6709L31.1338 11.3027L29.4141 12.1826ZM26.6836 7.00098C27.0881 7.00124 27.4921 7.39233 27.4922 7.7832C27.4921 8.17405 27.189 8.56522 26.6836 8.56543C26.279 8.56543 25.8742 8.17416 25.874 7.7832C25.8741 7.3922 26.1778 7.00098 26.6836 7.00098Z" fill="var(--fill-0, white)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_58" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBE5F"/>
+<stop offset="1" stop-color="#F46E00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/level/fami-assets/upgrade-game.svg b/level/fami-assets/upgrade-game.svg
new file mode 100644
index 0000000..54cbe79
--- /dev/null
+++ b/level/fami-assets/upgrade-game.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2090055541">
+<path id="Rectangle 346254111" d="M0 27C0 12.0883 12.0883 0 27 0V0C41.9117 0 54 12.0883 54 27V27C54 41.9117 41.9117 54 27 54V54C12.0883 54 0 41.9117 0 27V27Z" fill="url(#paint0_linear_0_73)"/>
+<path id="Vector" d="M42.8277 31.0058C41.787 21.6828 39.9456 15 34.1012 15C31.139 15 29.6178 18.1352 26.9758 18.3827C24.2538 18.1352 22.8127 15 19.8505 15C14.0061 15 12.1647 21.6828 11.204 30.9233C10.6436 35.8736 11.1239 39.9988 14.0862 39.9988C18.2493 39.9988 18.4094 36.1211 21.3716 34.306C22.4925 33.7285 24.9743 33.4809 27.0559 33.3984C29.1375 33.4809 31.6193 33.7285 32.7402 34.306C35.7024 36.1211 35.8625 39.9988 40.0256 39.9988C42.9078 40.0813 43.3081 35.9561 42.8277 31.0058ZM19.9306 30.1808C17.6088 30.1808 15.7674 28.2007 15.7674 25.8906C15.7674 23.5804 17.6088 21.6003 19.9306 21.6003C22.2523 21.6003 24.0937 23.4979 24.0937 25.8906C24.0937 28.2832 22.1722 30.1808 19.9306 30.1808ZM38.5846 26.7156H35.3021V30.0983H33.7009V26.7156H30.4184V25.0655H33.7009V21.7653H35.3021V25.0655H38.5846V26.7156Z" fill="var(--fill-0, white)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_73" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#13D026"/>
+<stop offset="1" stop-color="#18A56A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/level/fami-assets/upgrade-gift.svg b/level/fami-assets/upgrade-gift.svg
new file mode 100644
index 0000000..e5b9249
--- /dev/null
+++ b/level/fami-assets/upgrade-gift.svg
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2090055540">
+<rect id="Rectangle 346254111" width="54" height="54" rx="27" fill="url(#paint0_linear_0_55)"/>
+<path id="Vector" d="M27.9375 28.3424V38.9703C27.9375 39.0943 27.832 39.1958 27.7031 39.1958H26.2969C26.168 39.1958 26.0625 39.0943 26.0625 38.9703V28.3424H13.875V39.1958C13.875 40.1909 14.7158 41 15.75 41H38.25C39.2871 41 40.125 40.1909 40.125 39.1958V28.3424H27.9375ZM38.25 18.4474H37.0195C36.832 18.4474 36.7207 18.2445 36.8262 18.095C37.2832 17.441 37.5059 16.7222 37.459 16.0089C37.4033 15.1576 36.958 14.419 36.1758 13.8721C35.6133 13.4802 34.8662 13.1955 34.0752 13.0658C32.6396 12.8347 31.1191 13.2265 29.7891 14.1737C29.0742 14.684 28.4238 15.3352 27.8437 16.1245C27.4717 16.6291 26.6895 16.6291 26.3174 16.1245C25.7373 15.3352 25.0869 14.6811 24.3721 14.1737C23.0449 13.2265 21.5244 12.8318 20.0889 13.0658C19.2979 13.1955 18.5508 13.4802 17.9883 13.8721C17.2061 14.4162 16.7607 15.1547 16.7051 16.0089C16.6582 16.7222 16.8779 17.441 17.3379 18.095C17.4434 18.2445 17.335 18.4474 17.1445 18.4474H15.75C13.6787 18.4474 12 20.0628 12 22.0558V25.6642C12 26.0843 12.2988 26.4395 12.7031 26.5382H41.2969C41.7012 26.4395 42 26.0843 42 25.6642V22.0558C42 20.0628 40.3213 18.4474 38.25 18.4474ZM28.7607 18.112C30.3193 15.3915 32.2939 14.605 33.7617 14.8446C33.9404 14.8728 35.5195 15.1576 35.5869 16.1245C35.6426 16.9674 34.6758 18.0838 33.0088 18.4474H28.9658C28.7871 18.4474 28.6758 18.2642 28.7607 18.112ZM18.5742 16.1245C18.6387 15.1576 20.2178 14.8757 20.3994 14.8446C21.8701 14.6078 23.8447 15.3915 25.4004 18.112C25.4883 18.2614 25.374 18.4474 25.1953 18.4474H21.1523C19.4883 18.0809 18.5186 16.9674 18.5742 16.1245Z" fill="var(--fill-0, white)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_55" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBE5F"/>
+<stop offset="1" stop-color="#F46E00"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/level/fami-assets/wealth-bg.png b/level/fami-assets/wealth-bg.png
new file mode 100644
index 0000000..dc68df4
Binary files /dev/null and b/level/fami-assets/wealth-bg.png differ
diff --git a/level/fami-assets/wealth-card.png b/level/fami-assets/wealth-card.png
new file mode 100644
index 0000000..76e003a
Binary files /dev/null and b/level/fami-assets/wealth-card.png differ
diff --git a/level/fami.html b/level/fami.html
new file mode 100644
index 0000000..e0f02bc
--- /dev/null
+++ b/level/fami.html
@@ -0,0 +1,1469 @@
+<!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"
+        />
+        <title>Level</title>
+        <link rel="stylesheet" href="../common/theme.css" />
+        <style>
+            * {
+                box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            :root {
+                --level-bg: #0d0b20;
+                --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');
+            }
+
+            html,
+            body {
+                margin: 0;
+                width: 100%;
+                min-height: 100%;
+                overflow-x: clip;
+                overflow-y: visible;
+                background: #080611;
+                color: #fff;
+                font-family:
+                    -apple-system, BlinkMacSystemFont, 'SF Pro Text',
+                    'Source Han Sans SC', 'Segoe UI', Arial, sans-serif;
+            }
+
+            body {
+                display: flex;
+                justify-content: center;
+            }
+
+            button {
+                margin: 0;
+                border: 0;
+                padding: 0;
+                background: transparent;
+                color: inherit;
+                font: inherit;
+                cursor: pointer;
+            }
+
+            .level-page {
+                position: relative;
+                isolation: isolate;
+                width: min(100%, 375px);
+                min-height: 100vh;
+                overflow: visible;
+                padding-bottom: calc(38px + env(safe-area-inset-bottom));
+                background: var(--level-bg);
+                direction: ltr;
+            }
+
+            .level-page[data-theme='wealth'] {
+                --level-bg: #0d0b20;
+                --header-bg: rgba(13, 11, 32, 0.94);
+                --accent: #ffad3d;
+                --atmosphere: url('./fami-assets/wealth-bg.png');
+            }
+
+            .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');
+            }
+
+            .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 {
+                position: absolute;
+                z-index: -2;
+                inset: 0 0 auto;
+                height: 375px;
+                background: var(--atmosphere) top center / cover no-repeat;
+                pointer-events: none;
+            }
+
+            .atmosphere::after {
+                content: '';
+                position: absolute;
+                inset: auto 0 0;
+                height: 158px;
+                background: linear-gradient(
+                    to bottom,
+                    rgba(0, 0, 0, 0),
+                    var(--level-bg) 86%
+                );
+            }
+
+            /* 导航栏和 Tab 作为同一个吸顶层移动，避免 iOS 回弹滚动时两层之间出现缝隙。 */
+            .sticky-header {
+                position: sticky;
+                z-index: 50;
+                top: 0;
+                height: 88px;
+                isolation: isolate;
+            }
+
+            .sticky-header::before {
+                content: '';
+                position: absolute;
+                z-index: -1;
+                inset: 0;
+                background: var(--header-bg);
+                opacity: 0;
+                backdrop-filter: blur(14px);
+                -webkit-backdrop-filter: blur(14px);
+                transition: opacity 160ms ease;
+            }
+
+            .sticky-header.is-scrolled::before {
+                opacity: 1;
+            }
+
+            .top-nav {
+                position: relative;
+                height: 44px;
+            }
+
+            .back {
+                position: absolute;
+                top: 10px;
+                left: 16px;
+                width: 24px;
+                height: 24px;
+                overflow: hidden;
+                text-indent: -999px;
+            }
+
+            .back::before {
+                content: '';
+                position: absolute;
+                top: 5px;
+                left: 7px;
+                width: 10px;
+                height: 10px;
+                border-bottom: 1.8px solid #fff;
+                border-left: 1.8px solid #fff;
+                transform: rotate(45deg);
+            }
+
+            .title {
+                position: absolute;
+                top: 11px;
+                right: 48px;
+                left: 48px;
+                font-size: 18px;
+                font-weight: 500;
+                line-height: 22px;
+                text-align: center;
+                text-transform: capitalize;
+            }
+
+            .tabs {
+                height: 44px;
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .tab {
+                position: relative;
+                height: 44px;
+                padding-top: 11px;
+                color: rgba(255, 255, 255, 0.5);
+                font-size: 18px;
+                font-weight: 700;
+                line-height: 20px;
+                text-align: center;
+                text-transform: capitalize;
+            }
+
+            .tab.active {
+                color: #fff;
+            }
+
+            .tab.active::after {
+                content: '';
+                position: absolute;
+                bottom: 3px;
+                left: 50%;
+                width: 16px;
+                height: 3px;
+                border-radius: 31px;
+                background: #fff;
+                transform: translateX(-50%);
+            }
+
+            .current-card {
+                position: relative;
+                height: 114px;
+                margin: 24px 16px 0;
+            }
+
+            .current-card__bg {
+                position: absolute;
+                inset: 0;
+                width: 100%;
+                height: 100%;
+                object-fit: fill;
+                pointer-events: none;
+            }
+
+            .avatar {
+                position: absolute;
+                z-index: 1;
+                top: 21px;
+                left: 25px;
+                width: 67px;
+                height: 67px;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+
+            .avatar-frame {
+                position: absolute;
+                z-index: 2;
+                top: 13px;
+                left: 17px;
+                display: none;
+                width: 83px;
+                height: 83px;
+                object-fit: contain;
+                pointer-events: none;
+            }
+
+            .current-copy {
+                position: absolute;
+                top: 19px;
+                left: 125px;
+                width: 184px;
+            }
+
+            .current-heading {
+                height: 20px;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                font-size: 16px;
+                font-weight: 600;
+                line-height: 20px;
+                text-transform: uppercase;
+            }
+
+            .mini-badge {
+                position: relative;
+                width: 42px;
+                height: 16px;
+                flex: 0 0 42px;
+            }
+
+            .mini-badge img {
+                display: block;
+                width: 42px;
+                height: 16px;
+            }
+
+            .mini-badge span {
+                position: absolute;
+                top: 2px;
+                left: 22px;
+                width: 17px;
+                font-family: 'DIN Alternate', Arial, sans-serif;
+                font-size: 8px;
+                font-weight: 700;
+                line-height: 11px;
+                text-align: center;
+            }
+
+            .progress {
+                position: absolute;
+                top: 30px;
+                left: 0;
+                width: 184px;
+                height: 6px;
+                overflow: hidden;
+                border-radius: 32px;
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            .progress span {
+                display: block;
+                width: 25%;
+                height: 100%;
+                border-radius: inherit;
+                background: #ffc977;
+            }
+
+            .next-level {
+                position: absolute;
+                top: 46px;
+                left: 0;
+                width: 184px;
+                font-size: 11px;
+                font-weight: 600;
+                line-height: 14px;
+            }
+
+            .next-level strong {
+                color: #ffb805;
+            }
+
+            .rewards {
+                margin: 26px 16px 0;
+            }
+
+            .section-title {
+                height: 20px;
+                margin: 0;
+                font-size: 16px;
+                font-weight: 500;
+                line-height: 20px;
+            }
+
+            .timeline {
+                position: relative;
+                display: grid;
+                gap: 12px;
+                margin-top: 13px;
+            }
+
+            .timeline::before {
+                content: '';
+                position: absolute;
+                top: 3px;
+                bottom: 0;
+                left: 13px;
+                width: 1px;
+                background: rgba(255, 255, 255, 0.22);
+            }
+
+            .timeline[aria-busy='true'] {
+                opacity: 0.72;
+            }
+
+            .tier-empty {
+                min-height: 46px;
+                margin-left: 32px;
+                padding: 15px 12px;
+                border-radius: 8px;
+                background: var(--row-bg);
+                color: rgba(255, 255, 255, 0.6);
+                font-size: 12px;
+                line-height: 16px;
+                text-align: center;
+            }
+
+            .level-row {
+                position: relative;
+                height: 46px;
+                margin-left: 32px;
+                border-radius: 8px;
+                background: var(--row-bg);
+            }
+
+            .level-row::before {
+                content: '';
+                position: absolute;
+                top: 1px;
+                left: -37px;
+                width: 4px;
+                height: 4px;
+                border-radius: 50%;
+                background: #4f4f4f;
+            }
+
+            .level-row:first-child::before {
+                top: 0;
+                left: -38px;
+                width: 6px;
+                height: 6px;
+                background: var(--accent);
+                box-shadow: 0 0 4px var(--accent);
+            }
+
+            .level-name {
+                position: absolute;
+                top: 7px;
+                left: 12px;
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 14px;
+                white-space: nowrap;
+            }
+
+            .requirement {
+                position: absolute;
+                top: 28px;
+                left: 12px;
+                color: rgba(255, 255, 255, 0.6);
+                font-size: 8px;
+                line-height: 10px;
+                white-space: nowrap;
+            }
+
+            .row-badge {
+                position: absolute;
+                top: 15px;
+                right: 74px;
+                width: 42px;
+                height: 16px;
+            }
+
+            .row-ring {
+                position: absolute;
+                top: 2px;
+                right: 16px;
+                width: 42px;
+                height: 42px;
+                object-fit: contain;
+            }
+
+            .upgrade {
+                margin-top: 30px;
+                text-align: center;
+            }
+
+            .upgrade-title {
+                margin: 0;
+                color: var(--accent);
+                font-size: 20px;
+                font-weight: 700;
+                line-height: 24px;
+            }
+
+            .upgrade-methods {
+                display: none;
+                margin-top: 18px;
+            }
+
+            [data-theme='wealth'] .methods-wealth {
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
+
+            [data-theme='charm'] .methods-charm,
+            [data-theme='game'] .methods-game {
+                display: block;
+            }
+
+            .method img {
+                display: block;
+                width: 54px;
+                height: 54px;
+                margin: 0 auto;
+            }
+
+            .method-name,
+            .method-rate {
+                font-size: 14px;
+                line-height: 18px;
+                white-space: nowrap;
+            }
+
+            .method-name {
+                margin-top: 10px;
+                font-weight: 500;
+            }
+
+            .method-rate {
+                margin-top: 1px;
+            }
+
+            [dir='rtl'] .current-copy,
+            [dir='rtl'] .level-name,
+            [dir='rtl'] .requirement {
+                direction: rtl;
+                text-align: left;
+            }
+
+            @media (max-width: 374px) {
+                .current-copy {
+                    right: 18px;
+                    left: auto;
+                    width: calc(100% - 143px);
+                }
+
+                .progress,
+                .next-level {
+                    width: 100%;
+                }
+
+                .row-badge {
+                    right: 68px;
+                }
+
+                .row-ring {
+                    right: 12px;
+                }
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .sticky-header::before {
+                    transition: none;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <main id="levelPage" class="level-page" data-theme="wealth">
+            <div class="atmosphere" aria-hidden="true"></div>
+
+            <header id="stickyHeader" class="sticky-header">
+                <nav class="top-nav" aria-label="Level navigation">
+                    <button
+                        id="backButton"
+                        class="back"
+                        type="button"
+                        aria-label="Back"
+                        data-i18n="fami_level.back"
+                        data-i18n-aria="fami_level.back"
+                    >
+                        Back
+                    </button>
+                    <div class="title" data-i18n="fami_level.title">Level</div>
+                </nav>
+                <div id="tabs" class="tabs" role="tablist">
+                    <button
+                        class="tab active"
+                        type="button"
+                        role="tab"
+                        data-tab="wealth"
+                        aria-selected="true"
+                        data-i18n="fami_level.wealth"
+                    >
+                        Wealth
+                    </button>
+                    <button
+                        class="tab"
+                        type="button"
+                        role="tab"
+                        data-tab="charm"
+                        aria-selected="false"
+                        data-i18n="fami_level.charm"
+                    >
+                        Charm
+                    </button>
+                    <button
+                        class="tab"
+                        type="button"
+                        role="tab"
+                        data-tab="game"
+                        aria-selected="false"
+                        data-i18n="fami_level.game"
+                    >
+                        Game
+                    </button>
+                </div>
+            </header>
+
+            <section class="current-card" aria-label="Current level">
+                <img
+                    id="cardBackground"
+                    class="current-card__bg"
+                    src="./fami-assets/wealth-card.png"
+                    alt=""
+                />
+                <img
+                    id="avatar"
+                    class="avatar"
+                    src="./fami-assets/avatar.png"
+                    alt=""
+                />
+                <img id="avatarFrame" class="avatar-frame" alt="" />
+                <div class="current-copy">
+                    <div class="current-heading">
+                        <span id="currentLevel">LV20</span>
+                        <span
+                            id="miniBadge"
+                            class="mini-badge"
+                            aria-label="Badge level 81"
+                        >
+                            <img
+                                id="currentBadgeImage"
+                                src="./fami-assets/level-badge.png"
+                                alt=""
+                            />
+                            <span id="badgeLevel">81</span>
+                        </span>
+                    </div>
+                    <div
+                        class="progress"
+                        role="progressbar"
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                        aria-valuenow="25"
+                    >
+                        <span id="progressValue"></span>
+                    </div>
+                    <div class="next-level">
+                        <span id="nextLevelProgress">
+                            <span data-i18n="fami_level.next_prefix"
+                                >To the next level need</span
+                            >
+                            <strong id="nextExperience">5000.0</strong>
+                            <span data-i18n="fami_level.experience_points"
+                                >experience points</span
+                            >
+                        </span>
+                        <span
+                            id="maxLevelText"
+                            data-i18n="fami_level.max_level"
+                            hidden
+                            >Max level reached</span
+                        >
+                    </div>
+                </div>
+            </section>
+
+            <section class="rewards">
+                <h2 class="section-title" data-i18n="fami_level.rewards">
+                    Level Rewards
+                </h2>
+                <div id="timeline" class="timeline"></div>
+            </section>
+
+            <section class="upgrade">
+                <h2 class="upgrade-title" data-i18n="fami_level.how_to_upgrade">
+                    How to upgrade?
+                </h2>
+
+                <div class="upgrade-methods methods-wealth">
+                    <article class="method">
+                        <img src="./fami-assets/upgrade-gift.svg" alt="" />
+                        <div
+                            class="method-name"
+                            data-i18n="fami_level.receive_gift"
+                        >
+                            Receive a Gift
+                        </div>
+                        <div
+                            class="method-rate"
+                            data-i18n="fami_level.coin_rate"
+                        >
+                            1 Coins = 1 EXP
+                        </div>
+                    </article>
+                    <article class="method">
+                        <img src="./fami-assets/upgrade-car.svg" alt="" />
+                        <div class="method-name" data-i18n="fami_level.buy_car">
+                            Buy a car
+                        </div>
+                        <div
+                            class="method-rate"
+                            data-i18n="fami_level.coin_rate"
+                        >
+                            1 Coins = 1 EXP
+                        </div>
+                    </article>
+                    <article class="method">
+                        <img src="./fami-assets/upgrade-frame.svg" alt="" />
+                        <div
+                            class="method-name"
+                            data-i18n="fami_level.buy_avatar_frame"
+                        >
+                            Buy Avatar Frame
+                        </div>
+                        <div
+                            class="method-rate"
+                            data-i18n="fami_level.coin_rate"
+                        >
+                            1 Coins = 1 EXP
+                        </div>
+                    </article>
+                </div>
+
+                <div class="upgrade-methods methods-charm">
+                    <article class="method">
+                        <img src="./fami-assets/upgrade-charm.svg" alt="" />
+                        <div
+                            class="method-name"
+                            data-i18n="fami_level.receive_gift"
+                        >
+                            Receive a gift
+                        </div>
+                        <div
+                            class="method-rate"
+                            data-i18n="fami_level.coin_rate"
+                        >
+                            1 Coins = 1 EXP
+                        </div>
+                    </article>
+                </div>
+
+                <div class="upgrade-methods methods-game">
+                    <article class="method">
+                        <img src="./fami-assets/upgrade-game.svg" alt="" />
+                        <div
+                            class="method-name"
+                            data-i18n="fami_level.earned_gameplay"
+                        >
+                            Earned through gameplay
+                        </div>
+                        <div
+                            class="method-rate"
+                            data-i18n="fami_level.coin_rate"
+                        >
+                            1 Coins = 1 EXP
+                        </div>
+                    </article>
+                </div>
+            </section>
+        </main>
+
+        <script>
+            /* 该入口只服务 Fami。先固化 URL 与页面默认 App，再加载公共 API，确保请求头和用户资料接口始终使用同一租户。 */
+            (function () {
+                window.HyAppDefaultAppCode = 'fami';
+                var url = new URL(window.location.href);
+                var changed =
+                    url.searchParams.has('app') ||
+                    url.searchParams.has('appCode');
+                url.searchParams.delete('app');
+                url.searchParams.delete('appCode');
+                if (url.searchParams.get('app_code') !== 'fami') {
+                    url.searchParams.set('app_code', 'fami');
+                    changed = true;
+                }
+                if (changed && window.history && window.history.replaceState) {
+                    window.history.replaceState(null, '', url.toString());
+                }
+            })();
+            window.HyAppI18nSupported = ['en', 'ar', 'tr', 'es'];
+        </script>
+        <script src="../common/api.js"></script>
+        <script src="../common/toast.js"></script>
+        <script src="../common/params.js"></script>
+        <script src="../common/jsbridge.js"></script>
+        <script src="../common/i18n.js"></script>
+        <script>
+            (function () {
+                var THEMES = ['wealth', 'charm', 'game'];
+                var PREVIEW_LEVEL_RANGES = [
+                    '0',
+                    '1-9',
+                    '10-19',
+                    '20-29',
+                    '30-39',
+                    '40-49',
+                    '50-59',
+                    '60-69',
+                    '70-79',
+                    '80-89',
+                    '90-99',
+                    '100',
+                ];
+                var CARD_ASSETS = {
+                    wealth: './fami-assets/wealth-card.png',
+                    charm: './fami-assets/charm-card-overlay.png',
+                    game: './fami-assets/game-card-overlay.png',
+                };
+                var LOCAL_AVATAR = './fami-assets/avatar.png';
+                var LOCAL_BADGE = './fami-assets/level-badge.png';
+                var LOCAL_FRAME = './fami-assets/level-ring.png';
+                var page = document.getElementById('levelPage');
+                var header = document.getElementById('stickyHeader');
+                var timeline = document.getElementById('timeline');
+                var tabs = Array.prototype.slice.call(
+                    document.querySelectorAll('[data-tab]')
+                );
+                var params = new URLSearchParams(window.location.search);
+                var state = {
+                    theme: normalizeTheme(
+                        params.get('tab') || params.get('type')
+                    ),
+                    details: {},
+                    loadedTracks: {},
+                    loadingTracks: {},
+                    requestIDs: {},
+                    nextRequestID: 0,
+                    userAvatar: '',
+                };
+
+                function byId(id) {
+                    return document.getElementById(id);
+                }
+
+                function translated(key, fallback) {
+                    return window.HyAppI18n
+                        ? window.HyAppI18n.t(key, fallback)
+                        : fallback;
+                }
+
+                function formatNumber(value) {
+                    var locale = window.HyAppI18n
+                        ? window.HyAppI18n.lang()
+                        : 'en';
+                    return Number(value || 0).toLocaleString(locale, {
+                        maximumFractionDigits: 0,
+                    });
+                }
+
+                function readField(source, snakeKey, camelKey) {
+                    if (!source) return null;
+                    return source[snakeKey] != null
+                        ? source[snakeKey]
+                        : source[camelKey];
+                }
+
+                function escapeHTML(value) {
+                    return String(value == null ? '' : value).replace(
+                        /[&<>"']/g,
+                        function (character) {
+                            return {
+                                '&': '&amp;',
+                                '<': '&lt;',
+                                '>': '&gt;',
+                                '"': '&quot;',
+                                "'": '&#39;',
+                            }[character];
+                        }
+                    );
+                }
+
+                function staticImageURL(resource) {
+                    var candidates = [
+                        readField(resource, 'preview_url', 'previewUrl'),
+                        readField(resource, 'asset_url', 'assetUrl'),
+                        readField(resource, 'animation_url', 'animationUrl'),
+                    ];
+                    for (var index = 0; index < candidates.length; index += 1) {
+                        var url = String(candidates[index] || '').trim();
+                        /* 列表使用 img 展示静态素材；动画主资源不能直接塞入 img，必须等待接口提供静态预览图。 */
+                        if (
+                            /^(https?:\/\/|\/|\.\.\/|\.\/)/i.test(url) &&
+                            /\.(avif|gif|jpe?g|png|svg|webp)(\?|#|$)/i.test(url)
+                        ) {
+                            return url;
+                        }
+                    }
+                    return '';
+                }
+
+                function tierResource(tier, snakeKey, camelKey) {
+                    return readField(tier, snakeKey, camelKey) || {};
+                }
+
+                function renderPreviewTimeline() {
+                    timeline.innerHTML = PREVIEW_LEVEL_RANGES.map(
+                        function (range) {
+                            var requirement =
+                                translated('fami_level.requires', 'Requires') +
+                                ' 0–5,000 ' +
+                                translated(
+                                    'fami_level.experience_points',
+                                    'experience points'
+                                );
+                            return (
+                                '<article class="level-row">' +
+                                '<div class="level-name">' +
+                                escapeHTML(
+                                    translated('fami_level.level', 'Level')
+                                ) +
+                                ' ' +
+                                escapeHTML(range) +
+                                '</div>' +
+                                '<div class="requirement">' +
+                                escapeHTML(requirement) +
+                                '</div>' +
+                                '<img class="row-badge" src="' +
+                                LOCAL_BADGE +
+                                '" alt="">' +
+                                '<img class="row-ring" src="' +
+                                LOCAL_FRAME +
+                                '" alt="">' +
+                                '</article>'
+                            );
+                        }
+                    ).join('');
+                }
+
+                function requirementForTier(detail, tier) {
+                    var minLevel = Number(
+                        readField(tier, 'min_level', 'minLevel') || 0
+                    );
+                    var maxLevel = Number(
+                        readField(tier, 'max_level', 'maxLevel') || 0
+                    );
+                    var values = ((detail && detail.rules) || [])
+                        .filter(function (rule) {
+                            var level = Number(
+                                readField(rule, 'level', 'level') || 0
+                            );
+                            var status = String(
+                                readField(rule, 'status', 'status') || 'active'
+                            );
+                            return (
+                                status === 'active' &&
+                                level >= minLevel &&
+                                level <= maxLevel
+                            );
+                        })
+                        .map(function (rule) {
+                            return Number(
+                                readField(
+                                    rule,
+                                    'required_value',
+                                    'requiredValue'
+                                ) || 0
+                            );
+                        })
+                        .filter(function (value) {
+                            return Number.isFinite(value) && value >= 0;
+                        })
+                        .sort(function (left, right) {
+                            return left - right;
+                        });
+                    if (!values.length) return '—';
+                    var first = formatNumber(values[0]);
+                    var last = formatNumber(values[values.length - 1]);
+                    return first === last ? first : first + '–' + last;
+                }
+
+                function renderAPITimeline(detail) {
+                    var tiers = ((detail && detail.tiers) || [])
+                        .slice()
+                        .filter(function (tier) {
+                            return (
+                                String(
+                                    readField(tier, 'status', 'status') ||
+                                        'active'
+                                ) === 'active'
+                            );
+                        })
+                        .sort(function (left, right) {
+                            return (
+                                Number(
+                                    readField(left, 'min_level', 'minLevel') ||
+                                        0
+                                ) -
+                                Number(
+                                    readField(right, 'min_level', 'minLevel') ||
+                                        0
+                                )
+                            );
+                        });
+                    if (!tiers.length) {
+                        timeline.innerHTML =
+                            '<div class="tier-empty">' +
+                            escapeHTML(
+                                translated(
+                                    'fami_level.no_data',
+                                    'No level data'
+                                )
+                            ) +
+                            '</div>';
+                        return;
+                    }
+                    timeline.innerHTML = tiers
+                        .map(function (tier) {
+                            var minLevel = Number(
+                                readField(tier, 'min_level', 'minLevel') || 0
+                            );
+                            var maxLevel = Number(
+                                readField(tier, 'max_level', 'maxLevel') || 0
+                            );
+                            var range =
+                                minLevel === maxLevel
+                                    ? String(minLevel)
+                                    : minLevel + '-' + maxLevel;
+                            var badgeURL = staticImageURL(
+                                tierResource(
+                                    tier,
+                                    'display_badge_resource',
+                                    'displayBadgeResource'
+                                )
+                            );
+                            var frameURL = staticImageURL(
+                                tierResource(
+                                    tier,
+                                    'display_avatar_frame_resource',
+                                    'displayAvatarFrameResource'
+                                )
+                            );
+                            var requirement =
+                                translated('fami_level.requires', 'Requires') +
+                                ' ' +
+                                requirementForTier(detail, tier) +
+                                ' ' +
+                                translated(
+                                    'fami_level.experience_points',
+                                    'experience points'
+                                );
+                            return (
+                                '<article class="level-row">' +
+                                '<div class="level-name">' +
+                                escapeHTML(
+                                    translated('fami_level.level', 'Level')
+                                ) +
+                                ' ' +
+                                escapeHTML(range) +
+                                '</div>' +
+                                '<div class="requirement">' +
+                                escapeHTML(requirement) +
+                                '</div>' +
+                                (badgeURL
+                                    ? '<img class="row-badge" src="' +
+                                      escapeHTML(badgeURL) +
+                                      '" alt="">'
+                                    : '') +
+                                (frameURL
+                                    ? '<img class="row-ring" src="' +
+                                      escapeHTML(frameURL) +
+                                      '" alt="">'
+                                    : '') +
+                                '</article>'
+                            );
+                        })
+                        .join('');
+
+                    timeline.querySelectorAll('img').forEach(function (image) {
+                        image.addEventListener(
+                            'error',
+                            function () {
+                                /* 单个 CDN 素材失效时只隐藏对应素材，等级数据和其他行仍保持可读。 */
+                                image.style.display = 'none';
+                            },
+                            { once: true }
+                        );
+                    });
+                }
+
+                function renderTimeline() {
+                    timeline.setAttribute(
+                        'aria-busy',
+                        state.loadingTracks[state.theme] ? 'true' : 'false'
+                    );
+                    if (!state.loadedTracks[state.theme]) {
+                        renderPreviewTimeline();
+                        return;
+                    }
+                    renderAPITimeline(state.details[state.theme] || {});
+                }
+
+                function normalizeTheme(value) {
+                    var theme = String(value || '')
+                        .trim()
+                        .toLowerCase();
+                    return THEMES.indexOf(theme) >= 0 ? theme : 'wealth';
+                }
+
+                function clampNumber(value, fallback, min, max) {
+                    if (value === null || String(value).trim() === '')
+                        return fallback;
+                    var parsed = Number(value);
+                    if (!Number.isFinite(parsed)) return fallback;
+                    return Math.min(max, Math.max(min, parsed));
+                }
+
+                function validAvatarURL(value) {
+                    var url = String(value || '').trim();
+                    return /^(https?:\/\/|\/\/|\/|\.\.\/|\.\/)/i.test(url)
+                        ? url
+                        : '';
+                }
+
+                function setAvatarSource(value) {
+                    var avatar = byId('avatar');
+                    var source = validAvatarURL(value) || LOCAL_AVATAR;
+                    avatar.onerror = function () {
+                        if (avatar.getAttribute('src') !== LOCAL_AVATAR) {
+                            avatar.src = LOCAL_AVATAR;
+                        }
+                    };
+                    if (avatar.getAttribute('src') !== source)
+                        avatar.src = source;
+                }
+
+                function setOptionalImage(element, source) {
+                    if (!source) {
+                        element.removeAttribute('src');
+                        element.style.display = 'none';
+                        return;
+                    }
+                    element.style.display = 'block';
+                    element.onerror = function () {
+                        element.style.display = 'none';
+                    };
+                    element.src = source;
+                }
+
+                function overviewRatio(overview) {
+                    var current = Number(
+                        readField(
+                            overview,
+                            'current_level_required_value',
+                            'currentLevelRequiredValue'
+                        ) || 0
+                    );
+                    var next = Number(
+                        readField(
+                            overview,
+                            'next_level_required_value',
+                            'nextLevelRequiredValue'
+                        ) || 0
+                    );
+                    var total = Number(
+                        readField(overview, 'total_value', 'totalValue') || 0
+                    );
+                    if (next <= current)
+                        return total >= current && current > 0 ? 1 : 0;
+                    return Math.max(
+                        0,
+                        Math.min(1, (total - current) / (next - current))
+                    );
+                }
+
+                function renderPreviewOverview() {
+                    /* 没有 App token 时保留设计稿预览能力，便于本地核对；真实登录态会被接口数据完整覆盖。 */
+                    var level = Math.round(
+                        clampNumber(params.get('level'), 20, 0, 100)
+                    );
+                    var badge = Math.round(
+                        clampNumber(params.get('badge_level'), 81, 0, 999)
+                    );
+                    var progress = clampNumber(
+                        params.get('progress'),
+                        25,
+                        0,
+                        100
+                    );
+                    var nextExperience = clampNumber(
+                        params.get('next_exp'),
+                        5000,
+                        0,
+                        999999999
+                    );
+                    byId('currentLevel').textContent = 'LV' + level;
+                    byId('badgeLevel').textContent = badge;
+                    byId('miniBadge').style.display = 'block';
+                    byId('currentBadgeImage').src = LOCAL_BADGE;
+                    byId('nextExperience').textContent =
+                        nextExperience.toFixed(1);
+                    byId('nextLevelProgress').hidden = false;
+                    byId('maxLevelText').hidden = true;
+                    byId('progressValue').style.width = progress + '%';
+                    document
+                        .querySelector('.progress')
+                        .setAttribute(
+                            'aria-valuenow',
+                            String(Math.round(progress))
+                        );
+                    setOptionalImage(byId('avatarFrame'), '');
+                    setAvatarSource(state.userAvatar || params.get('avatar'));
+                }
+
+                function renderAPIOverview(overview) {
+                    var level = Number(
+                        readField(overview, 'level', 'level') || 0
+                    );
+                    var nextLevel = Number(
+                        readField(overview, 'next_level', 'nextLevel') || 0
+                    );
+                    var currentRequired = Number(
+                        readField(
+                            overview,
+                            'current_level_required_value',
+                            'currentLevelRequiredValue'
+                        ) || 0
+                    );
+                    var nextRequired = Number(
+                        readField(
+                            overview,
+                            'next_level_required_value',
+                            'nextLevelRequiredValue'
+                        ) || 0
+                    );
+                    var total = Number(
+                        readField(overview, 'total_value', 'totalValue') || 0
+                    );
+                    var isMaxLevel =
+                        nextLevel <= 0 || nextRequired <= currentRequired;
+                    var progress = isMaxLevel
+                        ? 100
+                        : Math.round(overviewRatio(overview) * 100);
+                    var badgeURL = staticImageURL(
+                        readField(
+                            overview,
+                            'display_badge_resource',
+                            'displayBadgeResource'
+                        ) || {}
+                    );
+                    var badgeSourceLevel = Number(
+                        readField(
+                            overview,
+                            'display_badge_source_level',
+                            'displayBadgeSourceLevel'
+                        ) || level
+                    );
+                    var badge = byId('miniBadge');
+                    var badgeImage = byId('currentBadgeImage');
+
+                    byId('currentLevel').textContent = 'LV' + level;
+                    byId('progressValue').style.width = progress + '%';
+                    document
+                        .querySelector('.progress')
+                        .setAttribute('aria-valuenow', String(progress));
+                    byId('nextLevelProgress').hidden = isMaxLevel;
+                    byId('maxLevelText').hidden = !isMaxLevel;
+                    if (!isMaxLevel) {
+                        byId('nextExperience').textContent = formatNumber(
+                            Math.max(0, nextRequired - total)
+                        );
+                    }
+
+                    if (badgeURL) {
+                        badge.style.display = 'block';
+                        byId('badgeLevel').textContent = badgeSourceLevel;
+                        badgeImage.style.display = 'block';
+                        badgeImage.onerror = function () {
+                            badge.style.display = 'none';
+                        };
+                        badgeImage.src = badgeURL;
+                    } else {
+                        badge.style.display = 'none';
+                    }
+                    setOptionalImage(
+                        byId('avatarFrame'),
+                        staticImageURL(
+                            readField(
+                                overview,
+                                'display_avatar_frame_resource',
+                                'displayAvatarFrameResource'
+                            ) || {}
+                        )
+                    );
+                    setAvatarSource(state.userAvatar || params.get('avatar'));
+                }
+
+                function renderOverview() {
+                    var detail = state.details[state.theme];
+                    if (!detail || !detail.overview) {
+                        renderPreviewOverview();
+                        return;
+                    }
+                    renderAPIOverview(detail.overview);
+                }
+
+                function render() {
+                    byId('cardBackground').src = CARD_ASSETS[state.theme];
+                    renderOverview();
+                    renderTimeline();
+                }
+
+                function applyTheme(value, syncURL) {
+                    var theme = normalizeTheme(value);
+                    state.theme = theme;
+                    page.dataset.theme = theme;
+                    tabs.forEach(function (tab) {
+                        var active = tab.dataset.tab === theme;
+                        tab.classList.toggle('active', active);
+                        tab.setAttribute('aria-selected', String(active));
+                    });
+
+                    /* 切换主题时保留滚动位置；用户对照等级区间时不会被强制拉回页面顶部。 */
+                    if (syncURL && window.history.replaceState) {
+                        params.set('tab', theme);
+                        window.history.replaceState(
+                            null,
+                            '',
+                            window.location.pathname +
+                                '?' +
+                                params.toString() +
+                                window.location.hash
+                        );
+                    }
+                    render();
+                }
+
+                function profileFromCurrent(current) {
+                    var user = current && current.user;
+                    return (user && (user.profile || user.user || user)) || {};
+                }
+
+                function profileAvatar(profile) {
+                    return String(
+                        (profile &&
+                            (profile.avatar ||
+                                profile.user_avatar ||
+                                profile.userAvatar ||
+                                profile.avatar_url ||
+                                profile.avatarUrl ||
+                                profile.profile_avatar ||
+                                profile.profileAvatar)) ||
+                            ''
+                    );
+                }
+
+                function showNetworkError() {
+                    if (!window.HyAppToast) return;
+                    window.HyAppToast.show(
+                        translated(
+                            'fami_level.network_error',
+                            'Unable to load level data. Please try again.'
+                        )
+                    );
+                }
+
+                function canRequestLevel() {
+                    return Boolean(
+                        window.HyAppAPI &&
+                        window.HyAppAPI.level &&
+                        window.HyAppAPI.getAccessToken &&
+                        window.HyAppAPI.getAccessToken()
+                    );
+                }
+
+                function loadOverview() {
+                    if (!canRequestLevel()) return Promise.resolve(null);
+                    return window.HyAppAPI.level
+                        .overview()
+                        .then(function (data) {
+                            ((data && data.tracks) || []).forEach(
+                                function (overview) {
+                                    var theme = normalizeTheme(
+                                        overview && overview.track
+                                    );
+                                    if (
+                                        !overview ||
+                                        THEMES.indexOf(overview.track) < 0
+                                    )
+                                        return;
+                                    if (!state.details[theme])
+                                        state.details[theme] = {};
+                                    state.details[theme].overview = overview;
+                                }
+                            );
+                            renderOverview();
+                            return data;
+                        })
+                        .catch(function () {
+                            /* 单轨详情仍可独立完成页面渲染，总览失败不重复弹错干扰用户。 */
+                            return null;
+                        });
+                }
+
+                function loadTrack(value, syncURL) {
+                    var theme = normalizeTheme(value);
+                    var requestID = ++state.nextRequestID;
+                    state.requestIDs[theme] = requestID;
+                    applyTheme(theme, syncURL);
+                    if (!canRequestLevel()) return Promise.resolve(null);
+
+                    state.loadingTracks[theme] = true;
+                    renderTimeline();
+                    return window.HyAppAPI.level
+                        .track(theme)
+                        .then(function (data) {
+                            /* 快速切换 Tab 时旧响应只能写回自己的缓存，不能覆盖同轨道较新的请求。 */
+                            if (state.requestIDs[theme] !== requestID)
+                                return null;
+                            state.details[theme] = data || {};
+                            state.loadedTracks[theme] = true;
+                            if (state.theme === theme) render();
+                            return data;
+                        })
+                        .catch(function () {
+                            if (
+                                state.requestIDs[theme] === requestID &&
+                                state.theme === theme
+                            ) {
+                                showNetworkError();
+                            }
+                            return null;
+                        })
+                        .finally(function () {
+                            if (state.requestIDs[theme] !== requestID) return;
+                            state.loadingTracks[theme] = false;
+                            if (state.theme === theme) renderTimeline();
+                        });
+                }
+
+                function loadUserProfile() {
+                    if (!window.HyAppParams || !window.HyAppParams.loadUser) {
+                        return Promise.resolve(null);
+                    }
+                    return window.HyAppParams.loadUser()
+                        .then(function (current) {
+                            state.userAvatar = profileAvatar(
+                                profileFromCurrent(current)
+                            );
+                            renderOverview();
+                            return current;
+                        })
+                        .catch(function () {
+                            /* 用户头像失败不影响等级主接口，继续使用设计稿头像兜底。 */
+                            return null;
+                        });
+                }
+
+                function hasNativeBridge() {
+                    return Boolean(
+                        (window.flutter_inappwebview &&
+                            window.flutter_inappwebview.callHandler) ||
+                        (window.HyAppBridgeChannel &&
+                            window.HyAppBridgeChannel.postMessage) ||
+                        (window.FlutterBridge &&
+                            window.FlutterBridge.postMessage) ||
+                        (window.webkit &&
+                            window.webkit.messageHandlers &&
+                            window.webkit.messageHandlers.HyAppBridge)
+                    );
+                }
+
+                byId('tabs').addEventListener('click', function (event) {
+                    var tab = event.target.closest('[data-tab]');
+                    if (!tab || tab.dataset.tab === state.theme) return;
+                    loadTrack(tab.dataset.tab, true);
+                });
+
+                byId('backButton').addEventListener('click', function () {
+                    /* App 内交给原生关闭 WebView；普通浏览器预览才走 history，避免空桥接吞掉返回。 */
+                    if (hasNativeBridge() && window.HyAppBridge) {
+                        window.HyAppBridge.back();
+                        return;
+                    }
+                    if (window.history.length > 1) window.history.back();
+                });
+
+                window.addEventListener(
+                    'scroll',
+                    function () {
+                        header.classList.toggle(
+                            'is-scrolled',
+                            window.scrollY > 8
+                        );
+                    },
+                    { passive: true }
+                );
+
+                window.addEventListener('hyapp:i18n-ready', function () {
+                    /* 接口行是在语言包之后动态生成的，语言切换后需要按当前数据重新排版文案和数字。 */
+                    render();
+                });
+
+                applyTheme(state.theme, false);
+
+                if (window.HyAppBridge) {
+                    window.HyAppBridge.ready({
+                        page: 'fami-level',
+                        app_code: 'fami',
+                        tab: state.theme,
+                    });
+                }
+
+                loadTrack(state.theme, false).finally(function () {
+                    loadOverview();
+                    loadUserProfile();
+                });
+            })();
+        </script>
+    </body>
+</html>
diff --git a/rank/assets/fami/bg-charm.webp b/rank/assets/fami/bg-charm.webp
new file mode 100644
index 0000000..f4e5f41
Binary files /dev/null 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
new file mode 100644
index 0000000..2e34185
Binary files /dev/null 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
new file mode 100644
index 0000000..2ca6f4b
Binary files /dev/null and b/rank/assets/fami/bg-wealth.webp differ
diff --git a/rank/assets/fami/coin.webp b/rank/assets/fami/coin.webp
new file mode 100644
index 0000000..a488723
Binary files /dev/null and b/rank/assets/fami/coin.webp differ
diff --git a/rank/assets/fami/default-row.webp b/rank/assets/fami/default-row.webp
new file mode 100644
index 0000000..51907f8
Binary files /dev/null and b/rank/assets/fami/default-row.webp differ
diff --git a/rank/assets/fami/default-top.webp b/rank/assets/fami/default-top.webp
new file mode 100644
index 0000000..42cf951
Binary files /dev/null and b/rank/assets/fami/default-top.webp differ
diff --git a/rank/assets/fami/mine-charm.webp b/rank/assets/fami/mine-charm.webp
new file mode 100644
index 0000000..dcf3efe
Binary files /dev/null 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
new file mode 100644
index 0000000..0a70457
Binary files /dev/null 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
new file mode 100644
index 0000000..e55aff9
Binary files /dev/null and b/rank/assets/fami/mine-wealth.webp differ
diff --git a/rank/assets/fami/mock-badge.webp b/rank/assets/fami/mock-badge.webp
new file mode 100644
index 0000000..ecad338
Binary files /dev/null and b/rank/assets/fami/mock-badge.webp differ
diff --git a/rank/assets/fami/period-active.webp b/rank/assets/fami/period-active.webp
new file mode 100644
index 0000000..8a8c2d5
Binary files /dev/null and b/rank/assets/fami/period-active.webp differ
diff --git a/rank/assets/fami/row-ornament.webp b/rank/assets/fami/row-ornament.webp
new file mode 100644
index 0000000..c23b313
Binary files /dev/null and b/rank/assets/fami/row-ornament.webp differ
diff --git a/rank/assets/fami/side-banner-bronze.webp b/rank/assets/fami/side-banner-bronze.webp
new file mode 100644
index 0000000..01c9e17
Binary files /dev/null and b/rank/assets/fami/side-banner-bronze.webp differ
diff --git a/rank/assets/fami/side-banner-silver.webp b/rank/assets/fami/side-banner-silver.webp
new file mode 100644
index 0000000..8ddc273
Binary files /dev/null and b/rank/assets/fami/side-banner-silver.webp differ
diff --git a/rank/assets/fami/side-frame-bronze.webp b/rank/assets/fami/side-frame-bronze.webp
new file mode 100644
index 0000000..2e5e43e
Binary files /dev/null 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
new file mode 100644
index 0000000..4e59700
Binary files /dev/null and b/rank/assets/fami/side-frame-silver.webp differ
diff --git a/rank/assets/fami/top-banner.webp b/rank/assets/fami/top-banner.webp
new file mode 100644
index 0000000..ab9f97e
Binary files /dev/null and b/rank/assets/fami/top-banner.webp differ
diff --git a/rank/assets/fami/top-frame.webp b/rank/assets/fami/top-frame.webp
new file mode 100644
index 0000000..57d1636
Binary files /dev/null and b/rank/assets/fami/top-frame.webp differ
diff --git a/rank/fami.html b/rank/fami.html
new file mode 100644
index 0000000..71dffe0
--- /dev/null
+++ b/rank/fami.html
@@ -0,0 +1,1553 @@
+<!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="#07160d" />
+        <title data-i18n="fami_rank.page_title">Fami Ranking</title>
+        <link rel="stylesheet" href="../common/theme.css" />
+        <style>
+            :root {
+                --rank-zoom: 1;
+                --rank-bg: url('assets/fami/bg-wealth.webp');
+                --rank-base: #04150b;
+                --rank-base-fade: rgba(4, 21, 11, 0.82);
+                --rank-panel: rgba(5, 42, 24, 0.78);
+                --rank-panel-deep: rgba(1, 23, 12, 0.94);
+                --rank-mine: url('assets/fami/mine-wealth.webp');
+                --rank-gold: #ffd875;
+                --rank-gold-strong: #f3b934;
+                --rank-text: #fff8e6;
+            }
+
+            * {
+                box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            html,
+            body {
+                min-height: 100%;
+                margin: 0;
+                background: #050a07;
+                color: var(--rank-text);
+                font-family: Arial, 'Helvetica Neue', sans-serif;
+                overscroll-behavior-y: none;
+            }
+
+            body {
+                overflow-x: hidden;
+            }
+
+            button {
+                margin: 0;
+                padding: 0;
+                border: 0;
+                outline: none;
+                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;
+                /* sticky 必须以页面视口为滚动容器；这里不能设置 clip/hidden，否则 WebView 会让吸顶导航随榜单一起滚走。 */
+                overflow: visible;
+                isolation: isolate;
+                background-color: var(--rank-base);
+                zoom: var(--rank-zoom);
+            }
+
+            .rank-background {
+                position: absolute;
+                z-index: -2;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: 375px;
+                background-color: var(--rank-base);
+                background-image: var(--rank-bg);
+                background-position: center top;
+                background-repeat: no-repeat;
+                background-size: 375px auto;
+            }
+
+            /* 三张 Figma 背景以 @2x 导出，最短图在 CSS 坐标 656px 结束；渐隐在 655px 前变成底色，避免图片结尾形成横向断层。 */
+            .rank-background::after {
+                position: absolute;
+                top: 520px;
+                left: 0;
+                width: 375px;
+                height: 150px;
+                background: linear-gradient(
+                    180deg,
+                    transparent 0%,
+                    var(--rank-base-fade) 48%,
+                    var(--rank-base) 90%,
+                    var(--rank-base) 100%
+                );
+                content: '';
+                pointer-events: none;
+            }
+
+            .sticky-header {
+                position: sticky;
+                z-index: 50;
+                top: 0;
+                width: 375px;
+                height: 96px;
+                background: linear-gradient(
+                    180deg,
+                    rgba(2, 7, 5, 0.7) 0%,
+                    rgba(2, 7, 5, 0.48) 58%,
+                    rgba(2, 7, 5, 0) 100%
+                );
+                backdrop-filter: blur(1.5px);
+            }
+
+            .top-nav {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 44px;
+            }
+
+            .back-button {
+                position: absolute;
+                top: 0;
+                left: 14px;
+                display: grid;
+                width: 42px;
+                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));
+            }
+
+            .board-tabs {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 37px;
+                height: 44px;
+                margin-left: 4px;
+            }
+
+            .board-tab {
+                min-width: 48px;
+                height: 44px;
+                color: #fff;
+                font-size: 17px;
+                line-height: 44px;
+                text-align: center;
+                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
+                white-space: nowrap;
+            }
+
+            .board-tab.is-active {
+                color: #ffd369;
+                font-weight: 700;
+                text-shadow:
+                    0 0 8px rgba(255, 189, 44, 0.52),
+                    0 1px 3px rgba(0, 0, 0, 0.9);
+            }
+
+            .period-tabs {
+                position: absolute;
+                top: 52px;
+                left: 56px;
+                display: flex;
+                width: 263px;
+                height: 40px;
+                align-items: center;
+                justify-content: space-between;
+                border-radius: 20px;
+                background: rgba(5, 6, 5, 0.88);
+                box-shadow:
+                    inset 0 0 0 1px rgba(245, 180, 54, 0.8),
+                    0 2px 8px rgba(0, 0, 0, 0.34);
+            }
+
+            .period-tab {
+                position: relative;
+                z-index: 1;
+                width: 87px;
+                height: 40px;
+                color: #fff;
+                font-size: 13px;
+                line-height: 40px;
+                text-align: center;
+                white-space: nowrap;
+            }
+
+            .period-tab::before {
+                position: absolute;
+                z-index: -1;
+                top: 0;
+                left: -2px;
+                display: none;
+                width: 92px;
+                height: 40px;
+                background: url('assets/fami/period-active.webp') center / 92px
+                    40px no-repeat;
+                content: '';
+            }
+
+            .period-tab.is-active {
+                color: #815018;
+                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
+            }
+
+            .period-tab.is-active::before {
+                display: block;
+            }
+
+            .podium {
+                position: relative;
+                width: 375px;
+                height: 458px;
+            }
+
+            .podium-card {
+                position: absolute;
+                overflow: visible;
+            }
+
+            .podium-card .avatar {
+                position: absolute;
+                z-index: 1;
+                border-radius: 3px;
+                object-fit: cover;
+                background: #050505;
+            }
+
+            .podium-card .frame,
+            .podium-card .banner {
+                position: absolute;
+                pointer-events: none;
+            }
+
+            .podium-card .frame {
+                /* Figma 中铭牌节点先绘制、皇冠框后绘制；皇冠编号必须完整压在铭牌上方。 */
+                z-index: 3;
+            }
+
+            .podium-card .banner {
+                z-index: 2;
+            }
+
+            .podium-card .podium-copy {
+                position: absolute;
+                z-index: 4;
+                color: #694417;
+                text-align: center;
+            }
+
+            .podium-card .podium-name {
+                display: block;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 18px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .badge-strip {
+                display: flex;
+                height: 14px;
+                align-items: center;
+                justify-content: center;
+                gap: 1px;
+                overflow: hidden;
+            }
+
+            .badge-strip img {
+                width: auto;
+                max-width: 24px;
+                height: 12px;
+                object-fit: contain;
+            }
+
+            .podium-score,
+            .row-score,
+            .mine-score {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 3px;
+                white-space: nowrap;
+            }
+
+            .podium-score {
+                height: 16px;
+                font-size: 10px;
+                line-height: 16px;
+            }
+
+            .score-coin {
+                width: 12px;
+                height: 12px;
+                object-fit: contain;
+            }
+
+            .podium-card.top-one {
+                top: 7px;
+                left: 0;
+                width: 375px;
+                height: 301px;
+            }
+
+            .top-one .frame {
+                top: 0;
+                left: 53px;
+                width: 270px;
+                height: 180px;
+            }
+
+            .top-one .avatar {
+                top: 75px;
+                left: 151px;
+                width: 78px;
+                height: 78px;
+            }
+
+            .top-one .banner {
+                top: 155px;
+                left: 119px;
+                width: 137px;
+                height: 121px;
+            }
+
+            .top-one .podium-copy {
+                top: 191px;
+                left: 126px;
+                width: 123px;
+            }
+
+            .top-one .badge-strip {
+                margin-top: 1px;
+            }
+
+            .podium-card.side {
+                top: 234px;
+                width: 169px;
+                height: 224px;
+            }
+
+            .podium-card.top-two {
+                left: 0;
+            }
+
+            .podium-card.top-three {
+                right: 0;
+                width: 163px;
+            }
+
+            .side .frame {
+                top: 0;
+                left: 0;
+                width: 169px;
+                height: 147px;
+            }
+
+            .top-three .frame {
+                width: 163px;
+                height: 144px;
+            }
+
+            .side .avatar {
+                top: 43px;
+                left: 46px;
+                width: 68px;
+                height: 68px;
+            }
+
+            .top-three .avatar {
+                left: 46px;
+            }
+
+            .side .banner {
+                top: 117px;
+                left: 35px;
+                width: 98px;
+                height: 107px;
+            }
+
+            .top-three .banner {
+                left: 31px;
+                width: 99px;
+            }
+
+            .side .podium-copy {
+                top: 145px;
+                left: 43px;
+                width: 82px;
+            }
+
+            .top-three .podium-copy {
+                left: 39px;
+            }
+
+            .side .podium-name {
+                font-size: 12px;
+                line-height: 16px;
+            }
+
+            .side .badge-strip {
+                height: 13px;
+            }
+
+            .side .badge-strip img {
+                max-width: 19px;
+                height: 10px;
+            }
+
+            .side .podium-score {
+                font-size: 9px;
+            }
+
+            .rank-list {
+                position: relative;
+                z-index: 2;
+                width: 375px;
+                min-height: 407px;
+                padding-bottom: 110px;
+            }
+
+            .rank-item {
+                position: relative;
+                display: block;
+                width: 375px;
+                height: 81px;
+                text-align: left;
+            }
+
+            .rank-row-svg {
+                position: absolute;
+                top: 8px;
+                left: 10px;
+                width: 355px;
+                height: 63px;
+                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34));
+            }
+
+            .row-ornament {
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 96px;
+                width: 184px;
+                height: 14px;
+                object-fit: contain;
+            }
+
+            .rank-number {
+                position: absolute;
+                z-index: 3;
+                top: 27px;
+                left: 21px;
+                width: 25px;
+                color: #fff;
+                font-size: 16px;
+                line-height: 22px;
+                text-align: center;
+                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
+            }
+
+            .row-avatar {
+                position: absolute;
+                z-index: 3;
+                top: 18px;
+                left: 48px;
+                width: 44px;
+                height: 44px;
+                border-radius: 50%;
+                object-fit: cover;
+                background: #1b1b1b;
+                box-shadow: 0 0 0 1px rgba(255, 225, 143, 0.32);
+            }
+
+            .row-main {
+                position: absolute;
+                z-index: 3;
+                top: 17px;
+                left: 99px;
+                width: 145px;
+                height: 48px;
+            }
+
+            .row-name {
+                display: block;
+                overflow: hidden;
+                color: #fff;
+                font-size: 15px;
+                line-height: 23px;
+                text-overflow: ellipsis;
+                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
+                white-space: nowrap;
+            }
+
+            .row-badges {
+                display: flex;
+                height: 17px;
+                align-items: center;
+                gap: 2px;
+                overflow: hidden;
+            }
+
+            .row-badges img {
+                width: auto;
+                max-width: 24px;
+                height: 14px;
+                object-fit: contain;
+            }
+
+            .row-score {
+                position: absolute;
+                z-index: 3;
+                top: 28px;
+                right: 25px;
+                width: 91px;
+                color: #fff;
+                font-size: 16px;
+                line-height: 22px;
+                text-align: right;
+                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+            }
+
+            .empty-state,
+            .error-state {
+                display: none;
+                width: 100%;
+                min-height: 120px;
+                align-items: center;
+                justify-content: center;
+                padding: 24px;
+                color: rgba(255, 248, 230, 0.76);
+                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: -22px;
+                left: 50%;
+                display: block;
+                width: 375px;
+                height: 117px;
+                margin-left: -187.5px;
+                overflow: hidden;
+                isolation: isolate;
+                text-align: left;
+                zoom: var(--rank-zoom);
+            }
+
+            .my-rank::before {
+                position: absolute;
+                z-index: 0;
+                inset: 0;
+                background: var(--rank-mine) center / 375px 117px no-repeat;
+                content: '';
+            }
+
+            .my-rank::after {
+                position: absolute;
+                z-index: 1;
+                top: 22px;
+                left: 5px;
+                width: 365px;
+                height: 85px;
+                /* 对应 Figma Vector 3158：只给金框内部做 2.11px 背景模糊，文字、头像和外侧金框继续保持清晰。 */
+                background: rgba(2, 12, 7, 0.02);
+                -webkit-backdrop-filter: blur(2.11px);
+                backdrop-filter: blur(2.11px);
+                clip-path: polygon(
+                    3.33% 0,
+                    96.67% 0,
+                    100% 14.29%,
+                    100% 85.88%,
+                    96.67% 100%,
+                    3.33% 100%,
+                    0 85.88%,
+                    0 14.29%
+                );
+                clip-path: path(
+                    'M12.1491 0C10.8813 7.60248 3.52147 11.2629 0 12.1429C0.176073 30.6211 0.52822 68.6335 0.52822 72.8571C8.55716 74.9689 11.6208 81.4803 12.1491 84.472L181.708 85L182.764 83.4161L184.349 85H352.851C353.696 78.2422 361.302 74.232 365 73.0716V12.1429C357.394 10.4534 353.731 3.34369 352.851 0H246.151C241.08 1.68944 236.995 0.703934 235.586 0H230.304C228.191 0 228.191 0 228.719 1.0559C228.191 1.58385 225.022 2.1118 222.381 1.58385C214.457 5.80745 203.365 2.63975 200.724 1.0559C199.033 3.1677 195.089 2.28778 193.329 1.58385C193.329 1.75983 193.223 2.1118 192.8 2.1118C192.378 2.1118 190.159 1.40787 189.103 1.0559C188.751 1.40787 188.046 2.21739 188.046 2.63975C187.518 2.63975 183.821 5.80745 182.764 6.86335C182.764 6.01863 179.595 3.34369 178.01 2.1118L176.954 1.0559C176.531 1.47826 173.96 1.93582 172.728 2.1118H171.671C170.404 2.95652 166.918 2.1118 165.333 1.58385C163.572 2.1118 159.1 3.27329 155.297 3.69565C151.493 4.11801 145.965 2.46377 143.676 1.58385H138.922C138.394 1.58385 137.443 1.47826 137.865 1.0559C138.288 0.63354 137.337 0.175983 136.809 0H130.47C125.822 2.1118 121.491 0.879917 119.906 0H12.1491Z'
+                );
+                content: '';
+                pointer-events: none;
+            }
+
+            .mine-number {
+                position: absolute;
+                z-index: 2;
+                top: 40px;
+                left: 18px;
+                width: 26px;
+                color: #fff;
+                font-size: 20px;
+                line-height: 28px;
+                text-align: center;
+                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+            }
+
+            .mine-avatar {
+                position: absolute;
+                z-index: 2;
+                top: 33px;
+                left: 48px;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 0 0 1px rgba(255, 228, 152, 0.52);
+            }
+
+            .mine-main {
+                position: absolute;
+                z-index: 2;
+                top: 33px;
+                left: 103px;
+                width: 145px;
+            }
+
+            .mine-name {
+                display: block;
+                overflow: hidden;
+                color: #fff;
+                font-size: 16px;
+                line-height: 24px;
+                text-overflow: ellipsis;
+                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86);
+                white-space: nowrap;
+            }
+
+            .mine-badges {
+                justify-content: flex-start;
+            }
+
+            .mine-score {
+                position: absolute;
+                z-index: 2;
+                top: 42px;
+                right: 18px;
+                width: 104px;
+                color: #fff;
+                font-size: 16px;
+                line-height: 22px;
+                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86);
+            }
+
+            .loading-overlay {
+                position: fixed;
+                z-index: 100;
+                inset: 0;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                background: rgba(0, 0, 0, 0.2);
+                pointer-events: none;
+            }
+
+            .loading-overlay.is-visible {
+                display: flex;
+            }
+
+            .loading-dot {
+                width: 30px;
+                height: 30px;
+                border: 3px solid rgba(255, 255, 255, 0.26);
+                border-top-color: var(--rank-gold);
+                border-radius: 50%;
+                animation: loading-spin 0.8s linear infinite;
+            }
+
+            @keyframes loading-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'];
+            // 该入口只属于 Fami：在公共 API/参数脚本加载前同步默认值和 URL，确保用户概览与排行榜请求都发送 X-App-Code: fami。
+            window.HyAppDefaultAppCode = 'fami';
+            (function enforceFamiAppCode() {
+                try {
+                    var entryURL = new URL(window.location.href);
+                    if (entryURL.searchParams.get('app_code') !== 'fami') {
+                        entryURL.searchParams.set('app_code', 'fami');
+                        window.history.replaceState(
+                            null,
+                            '',
+                            entryURL.toString()
+                        );
+                    }
+                } catch (_) {
+                    // 某些旧 WebView 禁止 file:// 改写 history；页面默认值仍会让公共请求层固定使用 Fami。
+                }
+            })();
+        </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" id="stickyHeader">
+                <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="charm"
+                            data-i18n="fami_rank.charm"
+                        >
+                            Charm
+                        </button>
+                        <button
+                            class="board-tab"
+                            type="button"
+                            data-board="room"
+                            data-i18n="fami_rank.room"
+                        >
+                            Room
+                        </button>
+                    </div>
+                </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/fami/';
+                var BOARD_CONFIG = {
+                    // UI 使用业务名称，接口继续使用后端既有枚举；集中映射可避免标签文案直接泄漏到请求协议。
+                    wealth: {
+                        apiType: 'sent',
+                        background: 'bg-wealth.webp',
+                        mine: 'mine-wealth.webp',
+                        base: '#04150b',
+                        fade: 'rgba(4, 21, 11, 0.82)',
+                        panel: 'rgba(5, 42, 24, 0.78)',
+                    },
+                    charm: {
+                        apiType: 'received',
+                        background: 'bg-charm.webp',
+                        mine: 'mine-charm.webp',
+                        base: '#050619',
+                        fade: 'rgba(5, 6, 25, 0.82)',
+                        panel: 'rgba(11, 17, 55, 0.8)',
+                    },
+                    room: {
+                        apiType: 'room',
+                        background: 'bg-room.webp',
+                        mine: 'mine-room.webp',
+                        base: '#130417',
+                        fade: 'rgba(19, 4, 23, 0.82)',
+                        panel: 'rgba(48, 10, 48, 0.78)',
+                    },
+                };
+                var PERIODS = ['today', 'week', 'month'];
+                var query = new URLSearchParams(window.location.search);
+                var queryBoard = query.get('board') || query.get('board_type');
+                var state = {
+                    board: normalizeBoard(queryBoard),
+                    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',
+                        received: 'charm',
+                        wealth: 'wealth',
+                        charm: 'charm',
+                        room: 'room',
+                    };
+                    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 escapeAttr(value) {
+                    return escapeHTML(value);
+                }
+
+                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 的 file/HTTP 页面必须走 Fami 真实接口。
+                    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 userId = item.user_id || user.user_id || '';
+                    var roomId = item.room_id || room.room_id || '';
+                    var badgeURLs =
+                        user.short_badge_cover_urls ||
+                        user.shortBadgeCoverUrls ||
+                        [];
+                    if (!Array.isArray(badgeURLs)) badgeURLs = [];
+
+                    return {
+                        rank: Number(item.rank || 0),
+                        giftValue: Number(
+                            item.gift_value || item.giftValue || item.value || 0
+                        ),
+                        userId: String(userId || ''),
+                        roomId: String(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: badgeURLs.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.nick_name ||
+                            profile.nickName ||
+                            profile.username ||
+                            profile.display_user_id ||
+                            profile.displayUserId ||
+                            profile.user_id ||
+                            profile.userId ||
+                            t('fami_rank.unknown', 'Unknown'),
+                        avatar:
+                            profile.avatar ||
+                            profile.user_avatar ||
+                            profile.userAvatar ||
+                            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: 'fami_user_' + (index + 1),
+                            roomId: 'fami_room_' + (index + 1),
+                            name: index < 3 ? 'Namenamename' : 'Namenamename',
+                            avatar:
+                                ASSET_ROOT +
+                                (index < 3
+                                    ? 'default-top.webp'
+                                    : 'default-row.webp'),
+                            // mock 仅用于设计核对；生产数据没有徽章时必须保持为空，不能伪造用户权益。
+                            badges: Array.from(
+                                { length: index < 3 ? 3 : 4 },
+                                function () {
+                                    return ASSET_ROOT + 'mock-badge.webp';
+                                }
+                            ),
+                        };
+                    });
+                }
+
+                function visibleItems() {
+                    return mockEnabled() ? mockItems() : state.items;
+                }
+
+                function itemAvatar(item, podium) {
+                    if (item && item.avatar) return item.avatar;
+                    return (
+                        ASSET_ROOT +
+                        (podium ? 'default-top.webp' : 'default-row.webp')
+                    );
+                }
+
+                function badgeMarkup(item, className) {
+                    var badges =
+                        item && Array.isArray(item.badges) ? item.badges : [];
+                    // 短徽章是后端权益结果：空数组直接不渲染，避免用占位图误导用户当前等级/权益。
+                    return (
+                        '<span class="' +
+                        className +
+                        '">' +
+                        badges
+                            .slice(0, 4)
+                            .map(function (url) {
+                                return (
+                                    '<img class="rank-badge" src="' +
+                                    escapeAttr(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 frame =
+                        rank === 1
+                            ? 'top-frame.webp'
+                            : rank === 2
+                              ? 'side-frame-silver.webp'
+                              : 'side-frame-bronze.webp';
+                    var banner =
+                        rank === 1
+                            ? 'top-banner.webp'
+                            : rank === 2
+                              ? 'side-banner-silver.webp'
+                              : 'side-banner-bronze.webp';
+
+                    return (
+                        '<button class="' +
+                        classes +
+                        '" type="button" data-rank="' +
+                        rank +
+                        '"' +
+                        (item ? '' : ' disabled') +
+                        '><img class="avatar" src="' +
+                        escapeAttr(itemAvatar(actual, true)) +
+                        '" alt="" /><img class="frame" src="' +
+                        ASSET_ROOT +
+                        frame +
+                        '" alt="" /><img class="banner" src="' +
+                        ASSET_ROOT +
+                        banner +
+                        '" alt="" /><span class="podium-copy"><span class="podium-name">' +
+                        escapeHTML(actual.name) +
+                        '</span>' +
+                        badgeMarkup(actual, 'badge-strip') +
+                        scoreMarkup(actual, 'podium-score') +
+                        '</span></button>'
+                    );
+                }
+
+                function rowFrameMarkup() {
+                    return '<svg class="rank-row-svg" viewBox="0 0 355 63" aria-hidden="true"><path d="M10 0.75H345L354.25 10V53L345 62.25H10L0.75 53V10Z" fill="var(--rank-panel)" stroke="#EBC339" stroke-width="1.5"/><path d="M14 4H341L350 13V50L341 59H14L5 50V13Z" fill="none" stroke="rgba(255,218,101,.25)" stroke-width=".75"/></svg>';
+                }
+
+                function rowMarkup(item) {
+                    return (
+                        '<button class="rank-item" type="button" data-rank="' +
+                        item.rank +
+                        '">' +
+                        rowFrameMarkup() +
+                        '<img class="row-ornament" src="' +
+                        ASSET_ROOT +
+                        'row-ornament.webp" alt="" /><span class="rank-number">' +
+                        item.rank +
+                        '</span><img class="row-avatar" src="' +
+                        escapeAttr(itemAvatar(item, false)) +
+                        '" alt="" /><span class="row-main"><span class="row-name">' +
+                        escapeHTML(item.name) +
+                        '</span>' +
+                        badgeMarkup(item, 'row-badges') +
+                        '</span>' +
+                        scoreMarkup(item, 'row-score') +
+                        '</button>'
+                    );
+                }
+
+                function renderPodium() {
+                    var items = visibleItems();
+                    byId('podium').innerHTML =
+                        podiumMarkup(items[0], 1) +
+                        podiumMarkup(items[1], 2) +
+                        podiumMarkup(items[2], 3);
+                }
+
+                function renderList() {
+                    var items = visibleItems();
+                    var listItems = items.slice(3);
+                    byId('rankList').innerHTML = listItems
+                        .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
+                    );
+                }
+
+                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="' +
+                        escapeAttr(itemAvatar(item, false)) +
+                        '" alt="" /><span class="mine-main"><span class="mine-name">' +
+                        escapeHTML(item.name) +
+                        '</span>' +
+                        badgeMarkup(item, 'badge-strip mine-badges') +
+                        '</span>' +
+                        scoreMarkup(item, 'mine-score');
+                }
+
+                function currentMineItem() {
+                    if (mockEnabled()) return mockItems()[3];
+                    // 接口未返回 my_rank 表示用户尚未上榜；仍展示真实头像/昵称，排名用 --、贡献值用 0，避免整条个人栏消失。
+                    return state.myRank || state.currentUser;
+                }
+
+                function applyTheme() {
+                    var config = BOARD_CONFIG[state.board];
+                    var root = document.documentElement;
+                    root.style.setProperty(
+                        '--rank-bg',
+                        'url("' + ASSET_ROOT + config.background + '")'
+                    );
+                    root.style.setProperty(
+                        '--rank-mine',
+                        'url("' + ASSET_ROOT + config.mine + '")'
+                    );
+                    root.style.setProperty('--rank-base', config.base);
+                    root.style.setProperty('--rank-base-fade', config.fade);
+                    root.style.setProperty('--rank-panel', config.panel);
+                }
+
+                function syncTabs() {
+                    document
+                        .querySelectorAll('[data-board]')
+                        .forEach(function (tab) {
+                            tab.classList.toggle(
+                                'is-active',
+                                tab.getAttribute('data-board') === state.board
+                            );
+                        });
+                    document
+                        .querySelectorAll('[data-period]')
+                        .forEach(function (tab) {
+                            tab.classList.toggle(
+                                'is-active',
+                                tab.getAttribute('data-period') === state.period
+                            );
+                        });
+                }
+
+                function syncLoading() {
+                    byId('loadingOverlay').classList.toggle(
+                        'is-visible',
+                        state.loading
+                    );
+                    byId('loadingOverlay').setAttribute(
+                        'aria-hidden',
+                        state.loading ? 'false' : 'true'
+                    );
+                }
+
+                function render() {
+                    applyTheme();
+                    syncTabs();
+                    syncLoading();
+                    renderPodium();
+                    renderList();
+                    renderMine();
+                }
+
+                function updateURLState() {
+                    if (!window.history || !window.history.replaceState) return;
+                    var url = new URL(window.location.href);
+                    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 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 itemByRank(rank) {
+                    return visibleItems().find(function (item) {
+                        return String(item.rank) === String(rank);
+                    });
+                }
+
+                function resizeCanvas() {
+                    // 设计稿基准宽度为 375；更窄设备整体等比缩放，避免绝对坐标被挤压后破坏皇冠和榜单框对齐。
+                    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();
+                });
+
+                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('frame') ||
+                            image.classList.contains('banner') ||
+                            image.classList.contains('row-ornament') ||
+                            image.classList.contains('score-coin')
+                        ) {
+                            return;
+                        }
+                        // 头像地址可能因 CDN 失效而加载失败；只回退头像，不替换徽章或装饰，避免掩盖真实权益/资源问题。
+                        image.src =
+                            ASSET_ROOT +
+                            (image.classList.contains('avatar')
+                                ? 'default-top.webp'
+                                : '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', function () {
+                    // 用户名兜底文案依赖当前语言，因此语言切换后需要重绘动态节点而不只是替换静态标签。
+                    render();
+                });
+
+                // WebView/file 预览刷新时会恢复旧滚动位置，导致首屏直接落在皇冠中段；排行榜入口必须始终从吸顶导航开始。
+                if ('scrollRestoration' in window.history) {
+                    window.history.scrollRestoration = 'manual';
+                }
+                window.scrollTo(0, 0);
+                resizeCanvas();
+                render();
+                window.HyAppBridge.ready({ page: 'rank/fami' });
+
+                // 先让公共参数层同步 token/app_code 并尝试取当前用户；用户概览失败不应阻断榜单主请求。
+                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>