fix(mobile): 优化火柴人动画布局避免标签重叠

- 昵称和数量标签顶部对齐在同一水平高度
- 添加4px最小间距防止起步阶段标签重叠
- 火柴人从昵称右边开始移动到红旗位置

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/mobile-app/lib/features/authorization/presentation/widgets/stickman_race_widget.dart

@@ -234,24 +234,27 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
         // 添加上下弹跳效果
         final bounce = _bounceController.value * 3;
 
-        // 计算可用宽度：屏幕宽度 - 页面padding(32) - 容器padding(32) - 红旗区域(40) - 火柴人宽度一半(30)
+        // 计算可用宽度：屏幕宽度 - 页面padding(32) - 容器padding(32) - 红旗区域(40)
         // 让火柴人在100%时正好到达红旗位置
         final screenWidth = MediaQuery.of(context).size.width;
         final containerWidth = screenWidth - 32 - 32; // 页面padding + 容器padding
-        final stickmanHalfWidth = 30.0; // 火柴人宽度的一半，用于居中对齐
+        final stickmanWidth = 60.0; // 火柴人+数量标签的宽度
-        final flagAreaWidth = 40.0; // 红旗区域宽度（红旗在right:8位置，图标24+边距）
+        final flagAreaWidth = 40.0; // 红旗区域宽度
         final nicknameAreaWidth = 65.0; // 昵称区域宽度
-        final availableWidth = containerWidth - flagAreaWidth - stickmanHalfWidth - nicknameAreaWidth;
+        final gap = 4.0; // 昵称和火柴人之间的最小间距
-        final leftPosition = nicknameAreaWidth + availableWidth * horizontalProgress;
+        // 火柴人可移动的范围：从昵称右边开始到红旗位置
+        final availableWidth = containerWidth - nicknameAreaWidth - gap - stickmanWidth - flagAreaWidth;
+        final stickmanLeftPosition = nicknameAreaWidth + gap + availableWidth * horizontalProgress;
 
         return Positioned(
           left: 0,
           top: verticalPosition - bounce,
+          child: SizedBox(
+            width: containerWidth,
             child: Row(
-            mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-              // 昵称标签 - 固定在左边
+                // 昵称标签 - 固定在左边，与数量标签同一水平高度
                 SizedBox(
                   width: nicknameAreaWidth,
                   child: Container(
@@ -260,7 +263,7 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
                       color: data.isCurrentUser
                           ? const Color(0xFFD4AF37).withValues(alpha: 0.2)
                           : Colors.white.withValues(alpha: 0.8),
-                    borderRadius: BorderRadius.circular(4),
+                      borderRadius: BorderRadius.circular(8),
                       border: data.isCurrentUser
                           ? Border.all(color: const Color(0xFFD4AF37), width: 1)
                           : null,
@@ -281,12 +284,11 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
                     ),
                   ),
                 ),
-              // 火柴人和数量标签
+                // 间隔 + 火柴人位置
                 SizedBox(
-                width: leftPosition - nicknameAreaWidth + stickmanHalfWidth * 2,
+                  width: stickmanLeftPosition - nicknameAreaWidth,
-                child: Row(
+                ),
-                  mainAxisAlignment: MainAxisAlignment.end,
+                // 火柴人和数量标签
-                  children: [
                 Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
@@ -326,8 +328,6 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
               ],
             ),
           ),
-            ],
-          ),
         );
       },
     );