diff --git a/pages/index.vue b/pages/index.vue
index 399df25..fdcb641 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -82,22 +82,40 @@
 
              <!-- Roadmap Visualization (Body) -->
              <view class="card-body">
-                <!-- Roadmap Grid (Zhupan / Bead Plate) -->
-                <!-- Assuming 6 rows x N columns -->
-                <view class="roadmap-grid">
-                   <!-- Render grid cells -->
-                   <view 
-                     v-for="(cell, cIdx) in item.beadRoad" 
+                <!-- 百家乐/龙虎: 珠盘路圆圈 -->
+                <view class="roadmap-grid" v-if="item.game_id !== 4 && item.game_id !== 5">
+                   <view
+                     v-for="(cell, cIdx) in item.beadRoad"
                      :key="cIdx"
                      class="road-cell"
-                     :style="{ 
-                        left: ((cell.show_x - 1) * cellWidth) + 'px', 
-                        top: ((cell.show_y - 1) * cellHeight) + 'px' 
+                     :style="{
+                        left: ((cell.show_x - 1) * cellWidth) + 'px',
+                        top: ((cell.show_y - 1) * cellHeight) + 'px'
                      }"
                      :class="getCellClass(cell.result)"
                    >
-                     <text class="cell-text" v-if="item.game_id !== 4 && item.game_id !== 5">{{ getResultText(cell.result) }}</text>
-                     <!-- NN/ThreeCard specialized display could go here -->
+                     <text class="cell-text">{{ getResultText(cell.result) }}</text>
+                   </view>
+                </view>
+                <!-- 牛牛/三卡: 表格路单 -->
+                <view class="nn-roadmap" v-else>
+                   <view class="nn-row" v-for="row in 4" :key="row">
+                     <view class="nn-label" :class="row === 1 ? 'nn-label-banker' : 'nn-label-player'">
+                       {{ ['', '庄', '闲1', '闲2', '闲3'][row] }}
+                     </view>
+                     <scroll-view scroll-x class="nn-cells">
+                       <view class="nn-cells-inner">
+                         <view
+                           v-for="(cell, cIdx) in getNNRowData(item.beadRoad, row)"
+                           :key="cIdx"
+                           class="nn-cell"
+                           :class="{ 'nn-win': cell.is_win == 1 }"
+                         >
+                           <text class="nn-text" :class="cell.type == 1 ? 'nn-text-red' : 'nn-text-blue'">{{ getNNResultText(cell.result) }}</text>
+                           <text class="nn-win-tag" v-if="cell.is_win == 1">WIN</text>
+                         </view>
+                       </view>
+                     </scroll-view>
                    </view>
                 </view>
 
@@ -257,6 +275,18 @@ export default {
         if (result === 3) return '和';
         return '';
     },
+    getNNRowData(beadRoad, row) {
+        return beadRoad.filter(cell => cell.show_y === row);
+    },
+    getNNResultText(result) {
+        if (result == 0) return '无牛';
+        if (result >= 1 && result <= 9) return '牛' + result;
+        if (result == 10) return '牛牛';
+        if (result == 11) return '五公';
+        if (result == 12) return '豹子';
+        if (result == 13) return '同花顺';
+        return '牛' + result;
+    },
     getStatusClass(status) {
         // 1: betting, 2: dealing/disabled
         if (status === 1) return 'status-betting';
@@ -514,7 +544,74 @@ export default {
                        }
                    }
                }
-               
+
+               .nn-roadmap {
+                   width: 100%;
+                   height: 100%;
+                   display: flex;
+                   flex-direction: column;
+                   background: #1a1a2e;
+
+                   .nn-row {
+                       display: flex;
+                       flex: 1;
+                       border-bottom: 1px solid #333;
+
+                       &:last-child { border-bottom: none; }
+                   }
+
+                   .nn-label {
+                       width: 32px;
+                       display: flex;
+                       align-items: center;
+                       justify-content: center;
+                       font-size: 9px;
+                       font-weight: bold;
+                       color: #fff;
+                       flex-shrink: 0;
+
+                       &.nn-label-banker { background: #c0392b; }
+                       &.nn-label-player { background: #2c5fa1; }
+                   }
+
+                   .nn-cells {
+                       flex: 1;
+                       white-space: nowrap;
+                   }
+
+                   .nn-cells-inner {
+                       display: flex;
+                       height: 100%;
+                   }
+
+                   .nn-cell {
+                       min-width: 36px;
+                       display: flex;
+                       flex-direction: column;
+                       align-items: center;
+                       justify-content: center;
+                       border-right: 1px solid #333;
+                       padding: 0 2px;
+                       position: relative;
+                   }
+
+                   .nn-text {
+                       font-size: 9px;
+                       font-weight: bold;
+                       &.nn-text-red { color: #e74c3c; }
+                       &.nn-text-blue { color: #5dade2; }
+                   }
+
+                   .nn-win-tag {
+                       font-size: 7px;
+                       color: #fff;
+                       background: #2c5fa1;
+                       padding: 0 2px;
+                       border-radius: 2px;
+                       line-height: 1.3;
+                   }
+               }
+
                .center-overlay {
                    position: absolute;
                    top: 50%;