feat: 牛牛牌面区改为2×2网格布局+路单加大+页面可滚动

- poker-section 从40px扩大到120px，牌面改为2×2网格（上行庄家+闲一，下行闲二+闲三）
- 单张牌从16×22px放大到30×42px，点数清晰可辨
- 路单区nn-mode从130px扩大到180px
- .view容器开启overflow-y:auto，内容超出屏幕可下滑
- 视频区flex自适应+min-height:200px保底

src/assets/style/portrait.scss

@@ -362,11 +362,10 @@ $tie-green: #27ae60;
 
       /* 视频区域容器 - 最大化显示完整视频 */
       .video {
-        flex: 1;
+        flex: 1 1 auto;
         position: relative;
         width: 100%;
-        min-height: 360px;
+        min-height: 200px;
-        max-height: 50vh;
         background: #000;
         order: 1;
         overflow: hidden;

src/views/play.vue

@@ -1374,11 +1374,13 @@ $gold: #c5a059;
     width: 100%;
     height: 100%; /* Full height, Nav is now inside */
     position: relative;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     /* 1. Video Container (Top) - Flex Grow */
     .video-container {
-      flex: 1; /* Grow to fill available space */
+      flex: 1 1 auto; /* 自适应但不被过度压缩 */
+      min-height: 200px;
       position: relative;
       width: 100%;
       background: #000;
@@ -1551,10 +1553,10 @@ $gold: #c5a059;
       border-top: 1px solid #333;
     }
 
-    /* 3. Poker Section for NN/TC - Compact horizontal layout */
+    /* 3. Poker Section for NN/TC - 2x2 Grid layout */
     .poker-section {
       width: 100%;
-      height: 40px; /* 减小高度 */
+      height: 120px; /* 2行布局：上行庄家+闲一，下行闲二+闲三 */
       flex-shrink: 0;
       position: relative;
       z-index: 20;
@@ -1563,45 +1565,49 @@ $gold: #c5a059;
       overflow: hidden;
 
       ::v-deep .nn-compact {
-        /* Override default poker-box styles for compact mode */
         .poker-box.nn {
           position: relative !important;
           height: 100% !important;
           width: 100% !important;
           display: flex !important;
-          flex-direction: row !important;
+          flex-wrap: wrap !important;
-          align-items: center !important;
+          padding: 4px !important;
-          justify-content: space-around !important;
-          padding: 2px 4px !important;
           box-sizing: border-box !important;
           background: transparent !important;
 
           .list {
-            flex: 1 !important;
+            width: 50% !important;
-            height: 100% !important;
+            height: 50% !important;
+            flex: none !important;
             min-width: 0 !important;
-            padding: 0 2px !important;
+            padding: 2px 6px !important;
-            border-left: 1px solid #444 !important;
+            border-bottom: 1px solid #333 !important;
+            border-left: none !important;
             display: flex !important;
             flex-direction: row !important;
             align-items: center !important;
             justify-content: center !important;
             position: relative !important;
+            box-sizing: border-box !important;
 
-            &:first-child {
+            /* 右列加左边框 */
-              border-left: none !important;
+            &:nth-child(2n) {
+              border-left: 1px solid #444 !important;
+            }
+            /* 下行去掉底边框 */
+            &:nth-child(n+3) {
+              border-bottom: none !important;
             }
 
             .title {
               position: relative !important;
               display: block !important;
-              font-size: 8px !important;
+              font-size: 11px !important;
-              padding: 2px 3px !important;
+              padding: 2px 5px !important;
               border-radius: 2px !important;
               white-space: nowrap !important;
-              margin-right: 2px !important;
+              margin-right: 4px !important;
               flex-shrink: 0 !important;
-              /* 确保颜色样式正确应用 */
               &.red {
                 background: #ff494b !important;
                 color: #fff !important;
@@ -1617,10 +1623,10 @@ $gold: #c5a059;
               width: auto !important;
               left: 50% !important;
               top: auto !important;
-              bottom: 2px !important;
+              bottom: 1px !important;
               transform: translateX(-50%) !important;
-              font-size: 10px !important;
+              font-size: 11px !important;
-              padding: 1px 4px !important;
+              padding: 1px 6px !important;
               margin: 0 !important;
               background: rgba(0, 0, 0, 0.7) !important;
               border-radius: 2px !important;
@@ -1628,9 +1634,9 @@ $gold: #c5a059;
             }
 
             .item {
-              width: 16px !important;
+              width: 30px !important;
-              height: 22px !important;
+              height: 42px !important;
-              margin: 0 -3px !important;
+              margin: 0 -2px !important;
               margin-top: 0 !important;
               padding: 0 !important;
 
@@ -1736,7 +1742,7 @@ $gold: #c5a059;
 
       /* NN/TC mode - larger roadmap */
       &.nn-mode {
-        height: 130px;
+        height: 180px;
       }
 
       /* Deep overrides to ensure standard layout and white background support */