feat(game): 实现麻将手牌按花色分组显示功能

- 添加 HandSuitLabel 类型定义区分万筒条三种花色
- 创建手牌花色排序映射和标签映射配置
- 实现 visibleHandTileGroups 计算属性按花色对手牌进行分组
- 新增 player-hand-group 样式类支持分组布局
- 调整 tile-chip 尺寸适配新的分组显示方式
- 修改底部控制面板位置避免遮挡手牌区域

src/assets/styles/room.css

@@ -807,7 +807,7 @@
 .bottom-control-panel {
   position: absolute;
   left: 50%;
-  bottom: 8px;
+  bottom: 100px;
   transform: translateX(-50%);
   width: min(100% - 120px, 1180px);
   padding: 8px 14px 12px;
@@ -880,17 +880,24 @@
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  gap: 4px;
+  gap: 12px;
   overflow-x: auto;
   padding-bottom: 2px;
 }
 
+.player-hand-group {
+  display: flex;
+  align-items: flex-end;
+  gap: 0;
+  flex-shrink: 0;
+}
+
 .tile-chip {
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  min-width: 90px;
-  height: 126px;
+  min-width: 74px;
+  height: 104px;
   padding: 0;
   border: 0;
   background: transparent;
@@ -1083,8 +1090,8 @@
   }
 
   .tile-chip {
-    min-width: 70px;
-    height: 102px;
+    min-width: 60px;
+    height: 88px;
     font-size: 24px;
   }
 
@@ -1160,8 +1167,8 @@
   }
 
   .tile-chip {
-    min-width: 48px;
-    height: 76px;
+    min-width: 42px;
+    height: 64px;
     font-size: 16px;
   }