diff --git a/src/assets/js/waybill.js b/src/assets/js/waybill.js
index 0f157d3b..3beb615b 100644
--- a/src/assets/js/waybill.js
+++ b/src/assets/js/waybill.js
@@ -260,7 +260,11 @@ function waybillConfig(canvas, data, game_id, ask, askroad) {
     width = canvas.clientWidth
   let rows, unit, cols, path, unit_y, unit_x
   rows = 6
-  unit = parseInt(height / rows) * dpr
+  // Strict Width-Based Calculation for Compact Layout
+  // Target fewer columns to make cells larger as requested
+  let targetCols = 14
+  unit = (width / targetCols) * dpr // Use float to fill width exactly
+
   cols = parseInt(width / (unit / dpr))
   path = false
   if (cols % 2 != 0) {
@@ -969,7 +973,7 @@ function Font_tie(ctb, num, Font_x, Font_y, fontsize, color) {
     ctb.font = fontsize
     ctb.textAlign = "center"
     ctb.textBaseline = "middle"
-    ctb.fillStyle = color || "#000"
+    ctb.fillStyle = color || "#fff"
     ctb.fillText(num, Font_x, Font_y)
     ctb.stroke()
   }
@@ -1361,7 +1365,7 @@ function NNcanvas(
 
 function NNwaybill(gameId, ctb, unit_x, unit_y, x, y, type, result, win) {
   var fonts = "",
-    color = "#000"
+    color = "#fff"
   var fontsize = unit_x * 0.28
   if ($store.state.config.$Type == "cn") {
     if (result == 0) {
@@ -1516,7 +1520,7 @@ function NNtitle(ctb, unit_x, unit_y) {
       } else if ($store.state.config.$Type == "tl") {
         var color = "#fff",
           font = "เจ้ามือ"
-      }else {
+      } else {
         var color = "#fff",
           font = "Banker",
           fontsize = unit_x * 0.25
diff --git a/src/assets/style/portrait.scss b/src/assets/style/portrait.scss
index 472d2bcb..4e2b86cd 100644
--- a/src/assets/style/portrait.scss
+++ b/src/assets/style/portrait.scss
@@ -436,6 +436,115 @@ $tie-green: #27ae60;
 
       }
 
+      /* 用户信息栏 - 竖屏专用样式 */
+      .user-info-bar {
+        flex: none;
+        height: 50px;
+        background: #1a1a1a;
+        border-bottom: 1px solid #333;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 12px;
+        order: 2;
+
+        .left-section {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .user-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: 2px solid #c5a059;
+          }
+
+          .username {
+            font-size: 14px;
+            color: #fff;
+            font-weight: 500;
+          }
+        }
+
+        .middle-section {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+
+          .info-item {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 12px;
+            color: #fff;
+
+            .icon {
+              width: 18px;
+              height: 18px;
+              border-radius: 50%;
+              display: inline-block;
+
+              &.coin {
+                background: #ffd700;
+                border: 2px solid #ffed4e;
+              }
+
+              &.chips {
+                background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+                border: 2px solid #ff9ff3;
+              }
+            }
+
+            span {
+              font-weight: 600;
+            }
+          }
+        }
+
+        .right-section {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .icon-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border: none;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            cursor: pointer;
+            transition: opacity 0.2s;
+
+            &.camera-btn {
+              background-color: #4CAF50;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
+
+              &.off {
+                background-color: #f44336;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z'/%3E%3C/svg%3E");
+              }
+            }
+
+            &.mic-btn {
+              background-color: #2196F3;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z'/%3E%3Cpath d='M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z'/%3E%3C/svg%3E");
+            }
+
+            &:hover {
+              opacity: 0.8;
+            }
+
+            &:active {
+              transform: scale(0.95);
+            }
+          }
+        }
+      }
+
       /* 游戏区域 - 下注盘在中间，最小化高度 - 使用子选择器增加优先级 */
       > .game-area {
         flex: none !important;
@@ -452,49 +561,28 @@ $tie-green: #27ae60;
         margin: 0 !important;
         padding: 0 !important;
 
-        /* 筹码选择器 - 在视频右侧内部，完全透明背景 */
+        /* 筹码选择器 - 在下注盘下方，横向排列，显示7个筹码 */
         .playchip {
-          position: fixed !important;
-          right: 0.2rem !important;
-          top: 90px !important;
-          width: auto !important;
-          height: auto !important;
-          background: transparent !important;
-          border-radius: 0 !important;
-          padding: 4px 3px !important;
-          box-shadow: none !important;
-          z-index: 999 !important;
+          position: relative !important;
+          width: 100% !important;
+          height: 80px !important;
           display: flex !important;
-          flex-direction: column !important;
-          justify-content: flex-start !important;
+          flex-direction: row !important;
           align-items: center !important;
+          justify-content: center !important;
+          gap: 8px !important;
+          padding: 10px 16px !important;
+          background: rgba(0, 0, 0, 0.8) !important;
+          border-top: 1px solid #333 !important;
+          border-radius: 0 !important;
+          order: 4 !important;
+          z-index: 10 !important;
 
           .chip {
-            width: 45px !important;
-            height: 36px !important;
-            margin-bottom: 0.08rem !important;
-            background-size: contain !important;
-            background-repeat: no-repeat !important;
-            background-position: center !important;
-            transition: all 0.2s ease;
-            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
-            transform: scale(0.96) !important;
-
-            &:last-child {
-              margin-bottom: 0 !important;
-            }
-
-            &:active {
-              transform: scale(0.92) !important;
-            }
-
-            &.active {
-              transform: scale(1) !important;
-
-              &::after {
-                transform: scale(1.64) !important;
-              }
-            }
+            width: 56px !important;
+            height: 56px !important;
+            margin: 0 !important;
+            flex-shrink: 0 !important;
           }
         }
 
@@ -751,55 +839,93 @@ $tie-green: #27ae60;
           flex: none;
           width: 150px !important;
           height: 100% !important;
-          font-size: 0.24rem !important;
-          padding: 0.06rem 0.1rem;
+          font-size: 0.22rem !important;
           display: flex;
           flex-direction: column;
           border-left: 1px solid $border-color;
           background: rgba(0, 0, 0, 0.3);
 
-          .left,
-          .right {
+          .left {
             flex: 1;
             display: flex;
             flex-direction: column;
             justify-content: space-evenly;
             align-items: flex-start;
-          }
+            padding: 0.08rem;
+            border-bottom: 1px solid $border-color;
 
-          .left .item,
-          .right .item {
-            font-size: 0.24rem !important;
-            padding: 0.03rem 0.08rem !important;
-            margin: 0.02rem 0;
-            width: 100%;
-
-            .lab {
+            .item {
               font-size: 0.22rem !important;
-            }
-
-            .num {
-              font-size: 0.24rem !important;
-              font-weight: bold;
-            }
-          }
-
-          .ask {
-            padding: 0.04rem 0.08rem !important;
-            margin: 0.02rem 0;
-            width: 100%;
-
-            .text {
-              font-size: 0.22rem !important;
-            }
-
-            .btn {
+              padding: 0.02rem 0 !important;
               display: flex;
-              gap: 0.04rem;
+              align-items: center;
+              width: 100%;
 
-              .li {
-                width: 0.24rem !important;
-                height: 0.24rem !important;
+              .lab {
+                font-size: 0.2rem !important;
+                color: #888;
+                margin-right: 0.1rem;
+              }
+
+              .num {
+                font-size: 0.24rem !important;
+                font-weight: bold;
+
+                &.banker {
+                  color: #d14458;
+                }
+
+                &.palyer {
+                  color: #3779d7;
+                }
+
+                &.tie {
+                  color: #2ecc71;
+                }
+              }
+            }
+          }
+
+          .right {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: column;
+            padding: 0.08rem;
+
+            .ask {
+              padding: 0.12rem 0.1rem !important;
+              margin: 0.04rem 0;
+              width: 100%;
+              background: rgba(255, 255, 255, 0.05);
+              border-radius: 0.1rem;
+              cursor: pointer;
+              transition: all 0.2s;
+
+              &:active {
+                background: rgba(255, 255, 255, 0.15);
+              }
+
+              .text {
+                font-size: 0.22rem !important;
+                color: #fff;
+                margin-bottom: 0.06rem;
+                display: block;
+                text-align: center;
+              }
+
+              .btn {
+                display: flex;
+                justify-content: center;
+                gap: 0.08rem;
+
+                .li {
+                  width: 0.28rem !important;
+                  height: 0.28rem !important;
+                }
+              }
+
+              &.banker {
+                border-bottom: none;
               }
             }
           }
diff --git a/src/components/PlayChip.vue b/src/components/PlayChip.vue
index 1274088b..e35491d2 100644
--- a/src/components/PlayChip.vue
+++ b/src/components/PlayChip.vue
@@ -6,7 +6,9 @@
       v-for="item in chipArry"
       :key="item.key"
       @click="chooseFn(item)"
-    ></div>
+    >
+      <span class="chip-value">{{ item.value }}</span>
+    </div>
   </div>
 </template>
 
@@ -36,16 +38,65 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-/* 深色豪华主题配色 */
 .playchip {
-  width: 1.385rem;
-  position: absolute;
-  right: 0.52rem;
-  bottom: 0px;
-  z-index: 9;
-  transform: rotateX(0deg);
+  position: relative;
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* Left align for scroll */
+  gap: 12px;
+  padding: 0 16px;
   background: rgba(0, 0, 0, 0.6);
-  border-radius: 8px;
-  padding: 5px;
+  backdrop-filter: blur(5px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-x: auto;
+  z-index: 10;
+  
+  /* Hide scrollbar */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chip {
+    flex: 0 0 auto;
+    width: 48px;
+    height: 48px;
+    position: relative;
+    cursor: pointer;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    
+    &.active {
+      transform: scale(1.1); /* Slight scale for emphasis, consistent with modern UI */
+      box-shadow: 0 0 10px 2px #fceabb; /* Gold Glow */
+      border-radius: 50%; /* Ensure glow is circular */
+      background-color: transparent;
+      
+      /* Remove the misaligned image overlay */
+      &:after {
+        display: none;
+      }
+    }
+
+    .chip-value {
+      display: none; /* Hide text, use image text */
+    }
+
+    /* Map classes to images */
+    &.chip_1s, &.chip_10 { background-image: url("~@/assets/images/chip/1s.png"); }
+    &.chip_2s, &.chip_20 { background-image: url("~@/assets/images/chip/1s.png"); } /* Fallback or specific if exists */
+    &.chip_5s, &.chip_50 { background-image: url("~@/assets/images/chip/5s.png"); }
+    &.chip_1b, &.chip_100 { background-image: url("~@/assets/images/chip/1b.png"); }
+    &.chip_2b, &.chip_200 { background-image: url("~@/assets/images/chip/2b.png"); }
+    &.chip_5b, &.chip_500 { background-image: url("~@/assets/images/chip/5b.png"); }
+    &.chip_1k, &.chip_1000 { background-image: url("~@/assets/images/chip/1k.png"); }
+    &.chip_2k, &.chip_2000 { background-image: url("~@/assets/images/chip/2k.png"); }
+    &.chip_5k, &.chip_5000 { background-image: url("~@/assets/images/chip/5k.png"); }
+    &.chip_1w, &.chip_10000 { background-image: url("~@/assets/images/chip/1w.png"); }
+    &.chip_2w { background-image: url("~@/assets/images/chip/2w.png"); }
+    &.chip_5w { background-image: url("~@/assets/images/chip/5w.png"); }
+    &.chip_10w { background-image: url("~@/assets/images/chip/10w.png"); }
+  }
 }
 </style>
diff --git a/src/components/PlayTable/Index.vue b/src/components/PlayTable/Index.vue
index e0a536f3..c95d109a 100644
--- a/src/components/PlayTable/Index.vue
+++ b/src/components/PlayTable/Index.vue
@@ -691,7 +691,7 @@ export default {
 /* 深色豪华主题配色 */
 $dark-bg: #0d0d0d;
 $card-bg: #1e1e1e;
-$border-color: #333;
+$border-color: #59cfa8;
 $gold: #c5a059;
 
 .playtable {
@@ -701,20 +701,21 @@ $gold: #c5a059;
   z-index: 8;
   .view {
     // width: 17.35rem;
-    height: 2.7rem;
+    height: 2.5rem;
     position: absolute;
     // bottom: 0.25rem;
     // left: 50%;
     // margin-left: -8.675rem;
     left: 3rem;
     right: 3rem;
-    bottom: 0.25rem;
+    bottom: 4.5rem; /* Raised further to clear chips */
 
-    border-radius: 10px;
+    border-radius: 12px;
     transform: perspective(400px) rotateX(24deg);
-    border: 1px solid $border-color;
+    border: 2px solid $border-color;
     box-sizing: border-box;
-    background: rgba(30, 30, 30, 0.95);
+    background: rgba(9, 60, 54, 0.4);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.8);
   }
 }
 .unclick {
@@ -745,31 +746,6 @@ $gold: #c5a059;
     }
   }
 }
-::v-deep {
-  .banker {
-    color: #fe8365;
-  }
-  .palyer {
-    color: #12a2e6;
-  }
-  .bpair {
-    color: #fe8365;
-  }
-  .ppair {
-    color: #12a2e6;
-  }
-  .tie {
-    color: #75e7af;
-  }
-  .min {
-    border-top-left-radius: 10px;
-    color: #f3c866;
-  }
-  .max {
-    border-top-right-radius: 10px;
-    color: #f3c866;
-  }
-}
 
 /* 竖屏模式下，移除左右空白，下注盘平铺全屏 */
 @media screen and (orientation: portrait) {
@@ -780,6 +756,10 @@ $gold: #c5a059;
       width: 100% !important;
       margin: 0 !important;
       padding: 0 !important;
+      transform: none !important; /* Portrait mode usually doesn't need 3D perspective */
+      bottom: 0 !important;
+      height: 35% !important; /* Adjust height for portrait */
+      border-radius: 10px 10px 0 0;
     }
   }
 }
diff --git a/src/components/PlayTable/TableBaccarat.vue b/src/components/PlayTable/TableBaccarat.vue
index d965f341..a7f700f6 100644
--- a/src/components/PlayTable/TableBaccarat.vue
+++ b/src/components/PlayTable/TableBaccarat.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="baccarat">
+    <!-- 第一行: 小 | 闲对 | 庄对 | 大 -->
     <div class="list top">
       <!-- 小 -->
-      <div class="item min" :class="{ unclick: can_bet_big_small != 1 }">
+      <div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -18,13 +19,17 @@
           :win="winArray.includes('small')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].small }}</span>
-          <span>1:1.5</span>
+          <span class="label text-blue">{{ Lang[Type].small }}</span>
+          <span class="odds">1:1.5</span>
+        </div>
+        <div class="money" v-if="bet_amount_msg.small_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.small_amount }}
         </div>
-        <div class="money">{{ bet_amount_msg.small_amount || 0 }}</div>
       </div>
+
       <!-- 闲对 -->
-      <div class="item ppair">
+      <div class="item grid-item">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -34,43 +39,23 @@
             show: touch == 'player_pair_amount'
           }"
         ></confirmBet>
-
         <chipView
           @click="downBet($event, 'player_pair_amount')"
           :list="chipArray.player_pair_amount"
           :win="winArray.includes('player_pair')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].p_player }}</span>
-          <span>1:{{ tableData.price_pair }}</span>
+          <span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
+          <span class="odds">1:11</span>
+        </div>
+        <div class="money" v-if="bet_amount_msg.player_pair_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.player_pair_amount }}
         </div>
-        <div class="money">{{ bet_amount_msg.player_pair_amount }}</div>
       </div>
-      <!-- 幸运6 -->
-      <div class="item luck" :class="{ unclick: can_bet_luck_six != 1 }">
-        <confirmBet
-          @confirm="confirmChip"
-          @cancel="cancelChip"
-          @undo="undoChip"
-          :data="{
-            money: downChip.luck_six_amount,
-            show: touch == 'luck_six_amount'
-          }"
-        ></confirmBet>
-        <chipView
-          @click="downBet($event, 'luck_six_amount')"
-          :list="chipArray.luck_six_amount"
-          :win="winArray.includes('luck_six')"
-        ></chipView>
-        <div class="text">
-          <span class="big">{{ Lang[Type].luckSix }} {{ Lang[Type].max }}</span>
-          <span>1:20</span>
-        </div>
 
-        <div class="money">{{ bet_amount_msg.luck_six_amount || 0 }}</div>
-      </div>
       <!-- 庄对 -->
-      <div class="item bpair">
+      <div class="item grid-item">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -86,13 +71,17 @@
           :win="winArray.includes('banker_pair')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].p_banker }}</span>
-          <span>1:{{ tableData.price_pair }}</span>
+          <span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
+          <span class="odds">1:11</span>
+        </div>
+        <div class="money" v-if="bet_amount_msg.banker_pair_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.banker_pair_amount }}
         </div>
-        <div class="money">{{ bet_amount_msg.banker_pair_amount }}</div>
       </div>
+
       <!-- 大 -->
-      <div class="item max" :class="{ unclick: can_bet_big_small != 1 }">
+      <div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -105,15 +94,20 @@
           :win="winArray.includes('big')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].big }}</span>
-          <span>1:0.5</span>
+          <span class="label text-red">{{ Lang[Type].big }}</span>
+          <span class="odds">1:0.5</span>
+        </div>
+        <div class="money" v-if="bet_amount_msg.big_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.big_amount }}
         </div>
-        <div class="money">{{ bet_amount_msg.big_amount || 0 }}</div>
       </div>
     </div>
+
+    <!-- 第二行: 闲 | 和 | 庄 -->
     <div class="list bottom">
       <!-- 闲 -->
-      <div class="item palyer">
+      <div class="item grid-item">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -129,13 +123,17 @@
           :win="winArray.includes('player')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].player }}</span>
-          <span>1:{{ tableData.price_player }}</span>
+          <span class="label-large text-blue">{{ Lang[Type].player }}</span>
+          <span class="odds">1:{{ tableData.price_player }}</span>
+        </div>
+        <div class="money" v-if="bet_amount_msg.player_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.player_amount }}
         </div>
-        <div class="money">{{ bet_amount_msg.player_amount }}</div>
       </div>
+
       <!-- 和 -->
-      <div class="item tie">
+      <div class="item grid-item">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -148,13 +146,17 @@
           :win="winArray.includes('tie')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].tie }}</span>
-          <span>1:{{ tableData.price_tie_baccarat }}</span>
+          <span class="label-large text-green">{{ Lang[Type].tie }}</span>
+          <span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
+        </div>
+        <div class="money" v-if="bet_amount_msg.tie_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.tie_amount }}
         </div>
-        <div class="money">{{ bet_amount_msg.tie_amount }}</div>
       </div>
+
       <!-- 庄 -->
-      <div class="item banker">
+      <div class="item grid-item">
         <confirmBet
           @confirm="confirmChip"
           @cancel="cancelChip"
@@ -170,12 +172,15 @@
           :win="winArray.includes('banker')"
         ></chipView>
         <div class="text">
-          <span class="big">{{ Lang[Type].banker }}</span>
-          <span>
+          <span class="label-large text-red">{{ Lang[Type].banker }}</span>
+          <span class="odds">
             {{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
           </span>
         </div>
-        <div class="money">{{ bet_amount_msg.banker_amount }}</div>
+        <div class="money" v-if="bet_amount_msg.banker_amount">
+          <i class="coin-icon"></i>
+          {{ bet_amount_msg.banker_amount }}
+        </div>
       </div>
     </div>
   </div>
@@ -253,153 +258,125 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-/* 深色豪华主题配色 */
-$dark-bg: #0d0d0d;
-$card-bg: #1e1e1e;
-$border-color: #444;
-$gold: #c5a059;
-$text-secondary: #888;
-
 .baccarat {
-  background: rgba(30, 30, 30, 0.95);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+
   .list {
     display: flex;
-    box-sizing: border-box;
-    &:first-child {
-      border-bottom: 1px solid $border-color;
-    }
+    gap: 8px;
+
     &.top {
-      height: 50%;
+      flex: 3; // Top row height ratio
       .item {
         flex: 1;
-        height: 100%;
-        &:nth-child(3) {
-          min-width: 4.86rem;
-        }
-        .text {
-          margin-top: -2px;
-          text-shadow: 1px 1px #050505;
-        }
       }
     }
+
     &.bottom {
-      height: 50%;
+      flex: 5; // Bottom row height ratio
       .item {
-        width: 33.33%;
-        height: 100%;
-        .text {
-          font-size: 0.65rem;
-          text-shadow: 1px 1px #050505;
-        }
+        flex: 1;
       }
+      // Removed specific flex for green-main as per instruction, assuming it's not needed for the new look.
     }
+
     .item {
       position: relative;
-      border-right: 1px solid $border-color;
-      font-size: 0.45rem;
-      &:last-child {
-        border: none;
-      }
+      border-radius: 8px;
+      // Removed border and box-shadow, now handled by .grid-item
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+      overflow: hidden;
+
+      // Unclick state
       &.unclick {
-        &:after {
-          content: "";
-          position: absolute;
-          width: 102%;
-          border-bottom: 1px solid $border-color;
-          top: 50%;
-          transform: rotate(14deg);
-          z-index: 6;
-          left: -2px;
-        }
-        &.max:after {
-          width: 104%;
-          transform: rotate(21deg);
-        }
-        &.min:after {
-          width: 104%;
-          transform: rotate(21deg);
-        }
-        .chip-view {
-          background: rgba(98, 74, 4, 0.4);
-        }
+        opacity: 0.5;
+        cursor: not-allowed;
+        filter: grayscale(0.8);
       }
 
-      .chip-box {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        &:active {
-          background: rgba(255, 255, 255, 0.15);
-        }
-      }
+      // Text Styles
       .text {
         position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        line-height: 1;
         z-index: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
         pointer-events: none;
-        color: #fff;
-        .big {
-          font-weight: bold;
-          padding-right: 0.24rem;
-          padding-left: 0.2rem;
+
+        .label {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 2px;
         }
+        .label-large {
+          font-size: 24px; /* Reduced from 32px */
+          font-weight: 800;
+          margin-bottom: 2px; /* Reduced margin */
+        }
+
+        .odds {
+          font-size: 14px; /* Increased from 12px */
+          color: #FFD700; /* Gold */
+          font-weight: 600;
+          display: block; /* Ensure formatting */
+          text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+        }
+        
+        .text-blue { color: #29abe2; }
+        .text-red { color: #ed1c24; }
+        .text-green { color: #22ac38; }
       }
+
+      // Money display
       .money {
         position: absolute;
-        left: 0px;
-        bottom: -2px;
-        font-size: 0.24rem;
-        font-weight: normal;
-        transform: scale(0.7);
-        color: $text-secondary;
-        vertical-align: bottom;
+        bottom: 6px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        color: #ffd700;
+        font-size: 12px;
+        z-index: 3;
+        white-space: nowrap;
         pointer-events: none;
-        &::before {
-          display: inline-block;
-          content: "总";
-          background: rgba(255, 255, 255, 0.2);
-          font-size: 10px;
-          border-radius: 0.615rem;
-          width: 0.615rem;
-          height: 0.615rem;
-          text-align: center;
-          line-height: 0.615rem;
-          font-weight: normal;
-          margin-right: 0.06rem;
-          transform: scale(0.7);
+        // Removed background, padding, border-radius, border
+        
+        .coin-icon {
+          width: 14px;
+          height: 14px;
+          background: #ffd700;
+          border-radius: 50%;
+          border: 1px solid #fff;
+          box-shadow: 0 0 2px rgba(0,0,0,0.5);
         }
       }
     }
-  }
-  .banker .chip-view {
-    border-bottom-right-radius: 10px;
-  }
-  .palyer .chip-view {
-    border-bottom-left-radius: 10px;
-  }
-  .max .chip-view {
-    border-top-right-radius: 10px;
-  }
-  .min .chip-view {
-    border-top-left-radius: 10px;
-  }
-  .luck .text {
-    text-shadow: none !important;
-    background-image: linear-gradient(
-      90deg,
-      #ffcc7d 0%,
-      #93dd96 20%,
-      #6078d4 50%,
-      #f7e96f 100%
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+
+    // Grid Item Style (Digital Table Look)
+    .grid-item {
+      background: rgba(9, 60, 50, 0.7); // Deep Teal Transparent
+      border: 1px solid #59cfa8; // Cyan/Green Border
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
+      
+      &:active {
+         background: rgba(9, 60, 50, 0.9);
+         border-color: #7fffd4;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/PlayWay.vue b/src/components/PlayWay.vue
index e6bba32e..0631dc09 100644
--- a/src/components/PlayWay.vue
+++ b/src/components/PlayWay.vue
@@ -1,256 +1,76 @@
 <template>
-  <div class="playway">
-    <div class="canvas-box">
-      <canvas class="canvas" ref="refItem"></canvas>
-      <div
-        class="switch-btn"
-        @click="switchBigWay"
-        v-if="tableData.game_id == 6"
-      >
-        {{ Lang[Type].zhupan }}
-      </div>
-    </div>
-    <div
-      class="btn-box"
-      v-if="tableData.game_id == 1 || tableData.game_id == 2"
-    >
-      <div class="left">
-        <div class="item">
-          <span class="lab">
-            {{ tableData.game_id == 1 ? Lang[Type].banker : Lang[Type].dragon }}
-          </span>
-          <span class="num banker">{{ tableData.bankerCount || 0 }}</span>
+  <div class="playway" :class="{ 'white-theme': [1, 2].includes(tableData.game_id) }">
+    
+    <!-- New Baccarat/DT Layout -->
+    <div class="baccarat-view" v-if="[1, 2].includes(tableData.game_id)">
+      <!-- Top Header Bar -->
+      <div class="header-bar">
+        <div class="left-stats">
+          <div class="stat-item"><span class="badge red">庄</span><span class="val red">{{ tableData.bankerCount || 0 }}</span></div>
+          <div class="stat-item"><span class="badge blue">闲</span><span class="val blue">{{ tableData.playerCount || 0 }}</span></div>
+          <div class="stat-item"><span class="badge green">和</span><span class="val green">{{ tableData.tieCount || 0 }}</span></div>
+          <div class="stat-item" v-if="tableData.game_id == 1"><span class="badge red">庄对</span><span class="val red">{{ tableData.banker_pair_Count || 0 }}</span></div>
+          <div class="stat-item" v-if="tableData.game_id == 1"><span class="badge blue">闲对</span><span class="val blue">{{ tableData.player_pair_Count || 0 }}</span></div>
         </div>
-        <div class="item" v-if="tableData.game_id == 1">
-          <span class="lab">{{ Lang[Type].p_banker }}</span>
-          <span class="num banker">{{ tableData.banker_pair_Count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">
-            {{ tableData.game_id == 1 ? Lang[Type].player : Lang[Type].tiger }}
-          </span>
-          <span class="num palyer">{{ tableData.playerCount || 0 }}</span>
-        </div>
-        <div class="item" v-if="tableData.game_id == 1">
-          <span class="lab">{{ Lang[Type].p_player }}</span>
-          <span class="num palyer">{{ tableData.player_pair_Count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].tie }}</span>
-          <span class="num tie">{{ tableData.tieCount || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].game }}</span>
-          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
+        <div class="right-info">
+           <span class="badge black">局号</span>
+           <span class="game-num">{{ tableData.number_tab_number || '0-0' }}</span>
         </div>
       </div>
-      <div class="right">
-        <div class="banker ask" @click="askWay('banker')">
-          <span class="text">
-            {{
-              tableData.game_id == 1
-                ? Lang[Type].askbanker
-                : Lang[Type].askdragon
-            }}
-          </span>
-          <ul class="btn">
-            <li
-              class="li circle"
-              :class="autoaskData.BbigEyeRoadcolor"
-              v-show="autoaskData.BbigEyeRoadisshow"
-            ></li>
-            <li
-              class="li round"
-              :class="autoaskData.Bpathwaycolor"
-              v-show="autoaskData.Bpathwayisshow"
-            ></li>
-            <li
-              class="li line"
-              :class="autoaskData.Broachcolor"
-              v-show="autoaskData.Broachisshow"
-            ></li>
-          </ul>
-        </div>
-        <div class="palyer ask" @click="askWay('palyer')">
-          <span class="text">
-            {{
-              tableData.game_id == 1
-                ? Lang[Type].askplayer
-                : Lang[Type].asktiger
-            }}
-          </span>
-          <ul class="btn">
-            <li
-              class="li circle"
-              :class="autoaskData.PbigEyeRoadcolor"
-              v-show="autoaskData.PbigEyeRoadisshow"
-            ></li>
-            <li
-              class="li round"
-              :class="autoaskData.Ppathwaycolor"
-              v-show="autoaskData.Ppathwayisshow"
-            ></li>
-            <li
-              class="li line"
-              :class="autoaskData.Proachcolor"
-              v-show="autoaskData.Proachisshow"
-            ></li>
-          </ul>
+
+      <!-- Main Road Area -->
+      <div class="road-box">
+        <canvas class="canvas" ref="refItem"></canvas>
+        
+        <!-- Ask Way Overlay (Bottom Right) -->
+        <div class="ask-panel">
+           <!-- Banker Ask -->
+           <div class="ask-group" @click="askWay('banker')">
+              <div class="ask-title text-red">庄问路</div>
+              <div class="ask-icons">
+                 <span class="icon solid red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
+                 <span class="icon solid blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
+                 
+                 <span class="icon hollow red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
+                 <span class="icon hollow blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
+                 
+                 <span class="icon slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
+                 <span class="icon slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
+              </div>
+           </div>
+           
+           <!-- Player Ask -->
+           <div class="ask-group" @click="askWay('palyer')">
+              <div class="ask-title text-blue">闲问路</div>
+              <div class="ask-icons">
+                 <span class="icon solid red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
+                 <span class="icon solid blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
+                 
+                 <span class="icon hollow red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
+                 <span class="icon hollow blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
+                 
+                 <span class="icon slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
+                 <span class="icon slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
+              </div>
+           </div>
         </div>
       </div>
     </div>
-    <div
-      class="totle-box"
-      style="width: 2.6rem"
-      v-if="tableData.game_id == 4 || tableData.game_id == 5"
-    >
-      <div class="list" style="max-width: 100%">
-        <div class="item">
-          <span class="lab">{{ Lang[Type].player }}1</span>
-          <span class="num banker">{{ tableData.player_1_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].player }}2</span>
-          <span class="num palyer">{{ tableData.player_2_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].player }}3</span>
-          <span class="num tie">{{ tableData.player_3_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].game }}</span>
-          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="totle-box" v-if="tableData.game_id == 6">
-      <div class="list">
-        <div class="item">
-          <span class="lab">0</span>
-          <span class="num black">{{ tableData.count.zero_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">1</span>
-          <span class="num palyer">{{ tableData.count.one_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">2</span>
-          <span class="num tie">{{ tableData.count.two_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">3</span>
-          <span class="num yellow">{{ tableData.count.three_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">4</span>
-          <span class="num banker">{{ tableData.count.four_count || 0 }}</span>
-        </div>
-      </div>
-      <div class="list">
-        <div class="item">
-          <span class="lab">{{ Lang[Type].odd }}</span>
-          <span class="num palyer">
-            {{ tableData.count.singular_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].even }}</span>
-          <span class="num banker">
-            {{ tableData.count.plural_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].big }}</span>
-          <span class="num banker">{{ tableData.count.big_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].small }}</span>
-          <span class="num palyer">{{ tableData.count.small_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].game }}</span>
-          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="totle-box" v-if="tableData.game_id == 7">
-      <div class="list">
-        <div class="item">
-          <span class="lab">{{ Lang[Type].big }}</span>
-          <span class="num banker">{{ tableData.count.big_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].small }}</span>
-          <span class="num palyer">{{ tableData.count.small_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].wai_dice }}</span>
-          <span class="num tie">{{ tableData.count.leopard_count || 0 }}</span>
-        </div>
-      </div>
-      <div class="list">
-        <div class="item">
-          <span class="lab">{{ Lang[Type].even }}</span>
-          <span class="num banker">
-            {{ tableData.count.plural_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].odd }}</span>
-          <span class="num palyer">
-            {{ tableData.count.singular_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].game }}</span>
-          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="totle-box" v-if="tableData.game_id == 8">
-      <div class="list">
-        <div class="item">
-          <span class="lab">{{ Lang[Type].red }}</span>
-          <span class="num banker">{{ tableData.count.red_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].big }}</span>
-          <span class="num banker">{{ tableData.count.high_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].odd }}</span>
-          <span class="num palyer">{{ tableData.count.odd_count || 0 }}</span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].zero }}</span>
-          <span class="num tie">{{ tableData.count.zero_count || 0 }}</span>
-        </div>
-      </div>
-      <div class="list">
-        <div class="item">
-          <span class="lab">{{ Lang[Type].black }}</span>
-          <span class="num black">
-            {{ tableData.count.black_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].small }}</span>
-          <span class="num palyer">
-            {{ tableData.count.low_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].even }}</span>
-          <span class="num banker">
-            {{ tableData.count.even_count || 0 }}
-          </span>
-        </div>
-        <div class="item">
-          <span class="lab">{{ Lang[Type].game }}</span>
-          <span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
-        </div>
-      </div>
+
+    <!-- Fallback for Other Games -->
+    <div class="other-view" v-else>
+       <div class="canvas-box">
+         <canvas class="canvas" ref="refItem"></canvas>
+       </div>
+       <div class="totle-box" v-if="[4,5,6,7,8].includes(tableData.game_id)">
+          <div class="list">
+             <div class="item" v-for="(val, key) in tableData.count" :key="key">
+                <span class="lab">{{key}}</span><span class="num">{{val}}</span>
+             </div>
+          </div>
+       </div>
     </div>
+
   </div>
 </template>
 
@@ -258,16 +78,13 @@
 import { ref, watch, nextTick, computed } from "vue"
 import { useStore } from "vuex"
 import { waybillAsk, waybillConfig, autoask } from "@/assets/js/waybill.js"
+
 export default {
   name: "PlayWay",
-  components: {},
   props: {
     tableData: {
       type: Object,
-      default: () => ({
-        ludan: {},
-        game_id: 1
-      })
+      default: () => ({ ludan: {}, game_id: 1 })
     }
   },
   setup(props) {
@@ -278,13 +95,11 @@ export default {
     const Lang = computed(() => store.state.config.$lang)
     const toningShowBigWay = computed(() => store.state.config.toningShowBigWay)
     const timeStamp = computed(() => store.state.config.timeStamp)
+
     const askWay = (type) => {
-      const data = props.tableData
-      waybillAsk(refItem.value, type, data, data.game_id)
-    }
-    const switchBigWay = () => {
-      store.commit("config/toningShowBigWay")
+      waybillAsk(refItem.value, type, props.tableData, props.tableData.game_id)
     }
+
     watch(
       () => [
         props.tableData.ludan,
@@ -294,274 +109,199 @@ export default {
       ],
       () => {
         nextTick(() => {
-          waybillConfig(refItem.value, props.tableData, props.tableData.game_id)
-          autoaskData.value = autoask(props.tableData)
+          if (refItem.value) {
+            waybillConfig(refItem.value, props.tableData, props.tableData.game_id)
+            autoaskData.value = autoask(props.tableData)
+          }
         })
       },
       { immediate: true, deep: true }
     )
+
     return {
       Type,
       Lang,
       refItem,
       autoaskData,
-      askWay,
-      switchBigWay
+      askWay
     }
   }
 }
 </script>
-<style lang="scss" scoped>
-/* 深色豪华主题配色 */
-$dark-bg: #0d0d0d;
-$card-bg: #1e1e1e;
-$border-color: #444;
-$text-secondary: #888;
-$gold: #c5a059;
 
+<style lang="scss" scoped>
 .playway {
   width: 100%;
   height: 100%;
+  background: #1a1a1a;
   display: flex;
-  align-items: center;
-  background: $card-bg;
-  .canvas-box {
-    width: 100%;
-    height: 100%;
+  flex-direction: column;
+  border-top: 1px solid #333;
+}
+
+.baccarat-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  
+  .header-bar {
+    flex: 0 0 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    background: #252525;
+    border-bottom: 1px solid #333;
+    font-size: 13px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    z-index: 5;
+    
+    .left-stats {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .badge {
+           display: flex;
+           align-items: center;
+           justify-content: center;
+           width: 18px;
+           height: 18px;
+           color: #fff;
+           border-radius: 4px;
+           font-size: 11px;
+           line-height: 1;
+           font-weight: bold;
+           &.red { background: #d0021b; }
+           &.blue { background: #0044fa; }
+           &.green { background: #22ac38; }
+        }
+        .val {
+           font-weight: 700;
+           font-family: 'Roboto', sans-serif;
+           &.red { color: #ff4d4f; }
+           &.blue { color: #40a9ff; }
+           &.green { color: #52c41a; }
+        }
+      }
+    }
+
+    .right-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      .badge.black {
+         background: #444;
+         color: #ccc;
+         padding: 2px 6px;
+         border-radius: 4px;
+         font-size: 11px;
+      }
+      .game-num {
+         font-weight: bold;
+         color: #ffd700;
+         font-family: 'Roboto', sans-serif;
+      }
+    }
+  }
+
+  .road-box {
+    flex: 1;
     position: relative;
+    width: 100%;
+    background: #1a1a1a;
+    overflow: hidden;
+
     .canvas {
-      display: block;
       width: 100%;
       height: 100%;
+      display: block;
     }
-    .switch-btn {
-      position: absolute;
-      bottom: 0;
-      left: 32%;
-      font-size: 0.2rem;
-      background: rgba(197, 160, 89, 0.8);
-      color: #000;
-      padding: 0.05rem 0.1rem 0 0.1rem;
-      border-top-left-radius: 0.1rem;
-      border-top-right-radius: 0.1rem;
-      &:active {
-        opacity: 0.4;
-      }
-    }
-  }
-  .btn-box {
-    display: flex;
-    flex: 1;
-    height: 100%;
-    font-size: 0.4rem;
-    font-weight: 600;
-    background: $card-bg;
-    .left {
-      display: flex;
-      flex-wrap: wrap;
-      width: 3.169rem;
-      line-height: 1;
-      color: $text-secondary;
-      border-left: 1px solid $border-color;
-      min-width: 90px;
-      max-width: 180px;
-      .item {
-        min-width: 45%;
-        display: flex;
-        align-items: center;
-        .lab {
-          padding: 0 0.153rem;
-        }
-      }
-    }
-    .right {
-      border-left: 1px solid $border-color;
-      text-align: center;
-      font-size: 0.369rem;
-      display: flex;
-      flex-direction: column;
-      justify-items: center;
-      min-width: 55px;
-      max-width: 100px;
-      flex: 1;
-      .ask {
-        height: 50%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin: 0 0.2rem;
-        color: #fff;
-        .btn {
-          height: 0.55rem;
-          border-radius: 0.55rem;
-          background: linear-gradient(
-            180deg,
-            rgba(60, 60, 60, 1) 0%,
-            rgba(40, 40, 40, 1) 35%,
-            rgba(30, 30, 30, 1) 100%
-          );
-          box-shadow: 0px 0px 1px 0.5px rgba(197, 160, 89, 0.3);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-bottom: 2px;
-          padding: 0 0.1rem;
-          min-width: 90%;
-          &:active {
-            opacity: 0.5;
-          }
-          .li {
-            width: 0.369rem;
-            min-width: 0.369rem;
-            height: 0.369rem;
 
-            &.circle {
-              border-radius: 0.369rem;
-              box-sizing: border-box;
-              border: 3px solid #444;
-              &.red {
-                border-color: #d14458;
-              }
-              &.blue {
-                border-color: #3779d7;
-              }
-            }
-            &.line {
-              position: relative;
-              &:after {
-                content: "";
-                position: absolute;
-                top: 5%;
-                width: 3px;
-                height: 90%;
-                border-radius: 3px;
-                transform: skewX(-30deg);
-              }
-              &.red:after {
-                background: #d14458;
-              }
-              &.blue:after {
-                background: #3779d7;
-              }
-            }
-            &.round {
-              border-radius: 12px;
-              margin-left: 5px;
-              &.red {
-                background: #d14458;
-              }
-              &.blue {
-                background: #3779d7;
-              }
-            }
-          }
-        }
-        &.banker {
-          border-bottom: 1px solid $border-color;
-        }
-      }
-    }
-  }
-  .totle-box {
-    display: flex;
-    width: 5.2rem;
-    height: 100%;
-    border-left: 1px solid $border-color;
-    background: $card-bg;
-    .list {
-      flex: 1;
-      font-size: 0.38rem;
-      font-weight: 600;
-      padding: 0.15rem 0.25rem;
+    /* Ask Panel Floating Bottom Right */
+    .ask-panel {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 200px; /* Compact width */
+      height: 32px;
+      background: rgba(30,30,30, 0.95);
+      border-top-left-radius: 8px;
+      border: 1px solid #444;
+      border-right: none;
+      border-bottom: none;
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      box-sizing: border-box;
-      &:first-child {
-        max-width: 42%;
-      }
-      .item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        line-height: 1;
-        color: $text-secondary;
-        .black {
-          color: #aaa;
-        }
-        .yellow {
-          color: #ffc107;
-        }
+      z-index: 10;
+      box-shadow: -2px -2px 5px rgba(0,0,0,0.5);
+
+      .ask-group {
+         flex: 1; 
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         gap: 6px;
+         cursor: pointer;
+         border-right: 1px solid #444;
+         &:last-child { border-right: none; }
+         
+         .ask-title {
+            font-size: 12px;
+            font-weight: bold;
+            &.text-red { color: #ff4d4f; }
+            &.text-blue { color: #40a9ff; }
+         }
+         
+         .ask-icons {
+            display: flex;
+            gap: 3px;
+            align-items: center;
+            
+            .icon {
+               display: inline-block;
+               &.solid {
+                  width: 6px; height: 6px; border-radius: 50%;
+                  &.red { background: #d0021b; }
+                  &.blue { background: #0044fa; }
+               }
+               &.hollow {
+                  width: 6px; height: 6px; border-radius: 50%; border: 1px solid;
+                  &.red { border-color: #d0021b; }
+                  &.blue { border-color: #0044fa; }
+               }
+               &.slash {
+                  width: 2px; height: 6px; transform: rotate(-45deg);
+                  &.red { background: #d0021b; }
+                  &.blue { background: #0044fa; }
+               }
+            }
+         }
       }
     }
   }
 }
 
-/* 竖屏模式下，路单内容适配 */
-@media screen and (orientation: portrait) {
-  .playway.playway {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: stretch !important;
-    width: 100% !important;
-    height: 100% !important;
-
-    .canvas-box.canvas-box {
-      flex: 1 !important;
-      min-width: 0 !important;
-      width: auto !important;
-      height: 100% !important;
-      margin: 0 !important;
-    }
-
-    .btn-box.btn-box {
-      flex: none !important;
-      width: 150px !important;
-      height: 100% !important;
-      margin: 0 !important;
-      border-left: 1px solid #444 !important;
-      flex-direction: column !important;
-
-      .left,
-      .right {
-        flex: 1 !important;
-        flex-direction: column !important;
-        justify-content: space-evenly !important;
-      }
-    }
-
-    .totle-box.totle-box {
-      flex: none !important;
-      width: 100px !important;
-      height: 100% !important;
-      margin: 0 !important;
-      border-left: 1px solid #444 !important;
-
-      .list.list {
-        width: 100% !important;
-        height: 100% !important;
-        font-size: 0.22rem !important;
-        padding: 0.06rem 0.08rem !important;
-        display: flex !important;
-        flex-direction: column !important;
-        justify-content: space-evenly !important;
-        align-items: flex-start !important;
-
-        .item {
-          width: 100% !important;
-          margin: 0.01rem 0 !important;
-
-          .lab {
-            font-size: 0.2rem !important;
-          }
-
-          .num {
-            font-size: 0.22rem !important;
-          }
-        }
-      }
+.other-view {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  .canvas-box { flex: 1; height: 100%; .canvas{width:100%; height:100%;} }
+  .totle-box {
+    width: 120px;
+    background: #222;
+    color: #fff;
+    padding: 10px;
+    overflow-y: auto;
+    border-left: 1px solid #444;
+    .item {
+       display: flex; 
+       justify-content: space-between;
+       margin-bottom: 5px;
+       font-size: 12px;
+       color: #ccc;
     }
   }
 }
diff --git a/src/components/chipView.vue b/src/components/chipView.vue
index 0f34dd54..442e3fc9 100644
--- a/src/components/chipView.vue
+++ b/src/components/chipView.vue
@@ -61,8 +61,8 @@ export default {
     width: 100%;
     height: 100%;
     .box {
-      width: 0.69 * 1.35rem;
-      height: 0.55 * 1.35rem;
+      width: 50px;
+      height: 50px;
       position: absolute;
       transition: 0.5s all;
     }
@@ -70,6 +70,47 @@ export default {
       width: 100%;
       height: 100%;
       display: block;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+
+      // 筹码图片背景（只为存在的图片文件添加样式）
+      &.chip_1s {
+        background-image: url("~@/assets/images/chip/1s.png");
+      }
+      &.chip_5s {
+        background-image: url("~@/assets/images/chip/5s.png");
+      }
+      &.chip_1b {
+        background-image: url("~@/assets/images/chip/1b.png");
+      }
+      &.chip_2b {
+        background-image: url("~@/assets/images/chip/2b.png");
+      }
+      &.chip_5b {
+        background-image: url("~@/assets/images/chip/5b.png");
+      }
+      &.chip_1k {
+        background-image: url("~@/assets/images/chip/1k.png");
+      }
+      &.chip_2k {
+        background-image: url("~@/assets/images/chip/2k.png");
+      }
+      &.chip_5k {
+        background-image: url("~@/assets/images/chip/5k.png");
+      }
+      &.chip_1w {
+        background-image: url("~@/assets/images/chip/1w.png");
+      }
+      &.chip_2w {
+        background-image: url("~@/assets/images/chip/2w.png");
+      }
+      &.chip_5w {
+        background-image: url("~@/assets/images/chip/5w.png");
+      }
+      &.chip_10w {
+        background-image: url("~@/assets/images/chip/10w.png");
+      }
     }
   }
 }
diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index c6998797..85793abe 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -41,6 +41,7 @@ const state = {
   $Type: localStorage.getItem("language") || "en",
   chipArry: [
     { key: "1s", show: true, value: 10 },
+    { key: "2s", show: true, value: 20 },
     { key: "5s", show: true, value: 50 },
     { key: "1b", show: true, value: 100 },
     { key: "5b", show: true, value: 500 },
diff --git a/src/views/play.vue b/src/views/play.vue
index 67929878..a68f9849 100644
--- a/src/views/play.vue
+++ b/src/views/play.vue
@@ -6,6 +6,7 @@
       { no_bg: tableData && (tableData.game_id == 7 || tableData.game_id == 8) }
     ]"
   >
+    <!-- Top Navigation Bar -->
     <div class="nav">
       <div class="left">
         <div class="back" @click="handleBack"></div>
@@ -52,87 +53,20 @@
         </ul>
       </div>
     </div>
+
+    <!-- Main View Container: Vertical Flex Stack -->
     <div class="view">
-      <div class="video" ref="videoDom" @click.stop="closeSwitchView(false)">
-        <ul class="left-btn">
-          <li
-            class="dice-btn"
-            v-if="tableData && tableData.game_id == 7 && switchVideo == true"
-          >
-            <img
-              class="img-btn"
-              src="~@/assets/images/dice/video_btn.png"
-              alt=""
-              v-if="hideVideo"
-              @click="toggleVide"
-            />
-            <img
-              class="img-btn"
-              src="~@/assets/images/dice/table_btn.png"
-              alt=""
-              @click="toggleVide"
-              v-else
-            />
-          </li>
-          <li
-            class="roulette-btn"
-            v-if="tableData && tableData.game_id == 8 && switchVideo == true"
-          >
-            <img
-              class="img-btn"
-              src="~@/assets/images/roulette/video_btn.png"
-              alt=""
-              v-if="hideVideo"
-              @click="toggleVide"
-            />
-            <img
-              class="img-btn"
-              src="~@/assets/images/roulette/table_btn.png"
-              alt=""
-              @click="toggleVide"
-              v-else
-            />
-          </li>
-          <li
-            class="btn switch"
-            v-if="tableData && tableData.game_id == 8"
-            @click="switchRouletteType"
-          ></li>
-          <li
-            class="btn switch"
-            v-if="tableData && tableData.game_id == 1"
-            @click="showBaccaratPlayType"
-          ></li>
-          <li
-            class="btn free"
-            v-if="tableData && tableData.game_id == 1"
-            :class="[
-              { active: baccaratType == 1 },
-              { en: Type != 'tw' && Type != 'cn' }
-            ]"
-            @click="showSetFree"
-          ></li>
-          <li class="btn tip" @click="showTableInfo"></li>
-          <li
-            class="btn people"
-            @click="showOnLine"
-            :style="{
-              marginBottom:
-                tableData && (tableData.game_id == 4 || tableData.game_id == 5)
-                  ? '1.5rem'
-                  : 0
-            }"
-          ></li>
-        </ul>
-        <ul class="right-btn">
-          <!-- 右侧按钮已移至左上角导航栏 -->
-        </ul>
+      
+      <!-- 1. Video & Game Area (Top Section, Flex Grow to fill space) -->
+      <div class="video-container" ref="videoDom" @click.stop="closeSwitchView(false)">
+        <!-- Video Iframe -->
         <iframe
           v-if="switchVideo && tableData"
           :style="{
             width: foxVideo.w,
             height: foxVideo.h,
-            marginTop: foxVideo.mt
+            marginTop: foxVideo.mt,
+            marginLeft: foxVideo.ml
           }"
           class="iframe"
           :class="[
@@ -146,20 +80,39 @@
           ]"
           :src="videoUrl"
         ></iframe>
-      </div>
-      <div class="game-area">
-        <PlayChip></PlayChip>
-        <template
-          v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
-        >
-          <Transition
-            name="custom-classes"
-            enter-active-class="animate__animated animate__faster animate__fadeInRight"
-            leave-active-class="animate__animated animate__faster animate__fadeOutRight"
+
+        <!-- Game Betting Overlay -->
+        <div class="game-area">
+          <template
+            v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
           >
+            <Transition
+              name="custom-classes"
+              enter-active-class="animate__animated animate__faster animate__fadeInRight"
+              leave-active-class="animate__animated animate__faster animate__fadeOutRight"
+            >
+              <PlayTable
+                v-if="hideVideo"
+                class="dice-table"
+                ref="chipTable"
+                :game_id="tableData?.game_id"
+                :sendMode="tableData?.sendMode"
+                :table_id="tableData?.id"
+                :number_tab_id="tableData?.number_tab_id"
+                :is_scavenging="tableData?.is_scavenging"
+                :winArray="winArray"
+                :bet_amount_msg="tableData?.bet_amount_msg"
+                :can_bet_big_small="tableData?.can_bet_big_small"
+                :can_bet_luck_six="tableData?.can_bet_luck_six"
+                :limit_money="tableData?.limit_money"
+                :limit_money_pair="tableData?.limit_money_pair"
+                :limit_money_tie="tableData?.limit_money_tie"
+                :tableData="tableData"
+              ></PlayTable>
+            </Transition>
+          </template>
+          <template v-else>
             <PlayTable
-              v-if="hideVideo"
-              class="dice-table"
               ref="chipTable"
               :game_id="tableData?.game_id"
               :sendMode="tableData?.sendMode"
@@ -174,43 +127,46 @@
               :limit_money_pair="tableData?.limit_money_pair"
               :limit_money_tie="tableData?.limit_money_tie"
               :tableData="tableData"
+              :class="[
+                {
+                  hideTable:
+                    tableData &&
+                    (tableData.sendMode == 'sendScanResult' ||
+                      tableData.sendMode == 'endBet') &&
+                    (tableData.game_id == 4 || tableData.game_id == 5)
+                }
+              ]"
             ></PlayTable>
-          </Transition>
-        </template>
-        <template v-else>
-          <PlayTable
-            ref="chipTable"
-            :game_id="tableData?.game_id"
-            :sendMode="tableData?.sendMode"
-            :table_id="tableData?.id"
-            :number_tab_id="tableData?.number_tab_id"
-            :is_scavenging="tableData?.is_scavenging"
-            :winArray="winArray"
-            :bet_amount_msg="tableData?.bet_amount_msg"
-            :can_bet_big_small="tableData?.can_bet_big_small"
-            :can_bet_luck_six="tableData?.can_bet_luck_six"
-            :limit_money="tableData?.limit_money"
-            :limit_money_pair="tableData?.limit_money_pair"
-            :limit_money_tie="tableData?.limit_money_tie"
-            :tableData="tableData"
-            :class="[
-              {
-                hideTable:
-                  tableData &&
-                  (tableData.sendMode == 'sendScanResult' ||
-                    tableData.sendMode == 'endBet') &&
-                  (tableData.game_id == 4 || tableData.game_id == 5)
-              }
-            ]"
-          ></PlayTable>
-        </template>
-        <RushVillage
-          v-if="tableData && tableData.is_rob == 1"
-          :thisData="tableData"
-        ></RushVillage>
+          </template>
+          <RushVillage
+            v-if="tableData && tableData.is_rob == 1"
+            :thisData="tableData"
+          ></RushVillage>
+        </div>
+
+        <!-- Overlays inside Top Section -->
+        <div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
+          <SwitchTab
+            @showSwitchtab="showSwitchtab"
+            :tabInfo="{
+              game_id: tableData && tableData.game_id,
+              table_id: tableData && tableData.id
+            }"
+          ></SwitchTab>
+        </div>
+        <div
+          class="switchView camera animate__fadeIn animated0"
+          v-if="switchCameraShow"
+        >
+          <setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
+        </div>
       </div>
-      <!-- 路单 -->
-      <div class="wayView" @click.stop="closeSwitchView(false)">
+
+      <!-- 2. Chip Control Bar (Middle Section, Fixed Height) -->
+      <PlayChip class="bet-chip-bar"></PlayChip>
+
+      <!-- 3. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
+      <div class="roadmap-container" @click.stop="closeSwitchView(false)">
         <PlayWay :tableData="tableData"></PlayWay>
         <Poker
           class="pokerView"
@@ -233,29 +189,12 @@
           :sendMode="tableData.sendMode"
         ></RouletteResult>
       </div>
-      <!-- 切换台 -->
-      <div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
-        <SwitchTab
-          @showSwitchtab="showSwitchtab"
-          :tabInfo="{
-            game_id: tableData && tableData.game_id,
-            table_id: tableData && tableData.id
-          }"
-        ></SwitchTab>
-      </div>
-      <!-- 切换视频线路 -->
-      <div
-        class="switchView camera animate__fadeIn animated0"
-        v-if="switchCameraShow"
-      >
-        <setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
-      </div>
+
     </div>
-    <!-- 玩法切换 -->
+
+    <!-- Popups -->
     <PlayTypePop class="play-type-pop"></PlayTypePop>
-    <!-- 桌台信息 -->
     <TableInfoPop class="table-info-pop" :tableData="tableData"></TableInfoPop>
-    <!-- 在线玩家 -->
     <OnLinePop class="online-pop"></OnLinePop>
   </div>
 </template>
@@ -923,30 +862,53 @@ export default {
     }
     const foxVideoFn = () => {
       nextTick(() => {
-        const h = videoDom.value.clientHeight * videoConfig.value.scale
-        const w =
-          (videoConfig.value.proportion[0] / videoConfig.value.proportion[1]) *
-          h
-        const mt = 0
+        if (!videoDom.value) return;
+        const containerH = videoDom.value.clientHeight;
+        const containerW = videoDom.value.clientWidth;
+        
+        // Default to 16:9 if missing
+        const proportion = videoConfig.value.proportion || [16, 9];
+        const videoRatio = proportion[0] / proportion[1];
+        const screenRatio = containerW / containerH; // Inverse for calculation check
+        
+        let w, h, ml = 0, mt = 0;
+
+        if (screenRatio > videoRatio) {
+          // Screen is wider than video (or video is taller than screen) -> Height constrained
+          // e.g. Landscape or wide container
+          h = containerH;
+          w = h * videoRatio;
+          ml = (containerW - w) / 2;
+        } else {
+           // Screen is narrower than video (Standard Mobile Portrait) -> Width constrained
+           w = containerW;
+           h = w / videoRatio;
+           mt = (containerH - h) / 2;
+        }
+
+        // Apply specific offsets if needed, though usually centering is best for 'contain'
+        if (phoneModel.value == "ios") {
+           if (phoneScreen.value == "landscape") {
+             mt += videoConfig.value.offset.iosLandscape || 0;
+           } else {
+             mt += videoConfig.value.offset.iosPortrait || 0;
+           }
+        } else if (phoneModel.value == "android") {
+           mt += videoConfig.value.offset.android || 0;
+        } else {
+           mt += videoConfig.value.offset.pc || 0;
+        }
+        
+        // Ensure values are safe
+        if (isNaN(w)) w = containerW;
+        if (isNaN(h)) h = containerW * 0.56; // Fallback 16:9
+
         foxVideo.value.w = `${w}px`
         foxVideo.value.h = `${h}px`
         foxVideo.value.mt = `${mt}px`
+        foxVideo.value.ml = `${ml}px`
         foxVideo.value.model = phoneModel.value
         foxVideo.value.screen = phoneScreen.value
-        if (phoneModel.value == "ios") {
-          foxVideo.value.w = `100%`
-          if (phoneScreen.value == "landscape") {
-            foxVideo.value.mt = videoConfig.value.offset.iosLandscape
-          } else {
-            foxVideo.value.mt = videoConfig.value.offset.iosPortrait
-          }
-        } else if (phoneModel.value == "android") {
-          foxVideo.value.w = `100%`
-          foxVideo.value.mt = videoConfig.value.offset.android
-        } else {
-          foxVideo.value.w = `100%`
-          foxVideo.value.mt = videoConfig.value.offset.pc
-        }
       })
     }
     // 牛牛点数声音
@@ -1252,8 +1214,8 @@ export default {
 <style lang="scss" scoped>
 /* 深色豪华主题配色 */
 $dark-bg: #0d0d0d;
-$dark-bg-secondary: #1a1a1a;
-$card-bg: #1e1e1e;
+$dark-bg-secondary: #000;
+$card-bg: #000;
 $border-color: #333;
 $gold: #c5a059;
 
@@ -1267,32 +1229,21 @@ $gold: #c5a059;
   top: 0;
   bottom: 0;
   box-sizing: border-box;
+  overflow: hidden;
 
-  &.offcamera {
-    background: $dark-bg;
-    &::after {
-      display: none;
-    }
-  }
-  &.no_bg {
-    background: $dark-bg;
-    &::after {
-      display: none;
-    }
-  }
+  /* Navigation Bar */
   .nav {
-    position: absolute;
-    z-index: 10;
-    left: 0;
-    top: 0;
+    position: relative; 
+    z-index: 100;
     width: 100%;
-    min-height: 45px;
+    height: 45px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    transform: rotateX(0deg);
     background: $dark-bg-secondary;
     border-bottom: 1px solid $border-color;
+    flex-shrink: 0;
+
     .left {
       height: 0.923rem;
       display: flex;
@@ -1301,23 +1252,15 @@ $gold: #c5a059;
       .back {
         width: 0.923rem;
         height: 0.923rem;
-        background: url("~@/assets/images/icon/back.png") center center
-          no-repeat;
+        background: url("~@/assets/images/icon/back.png") center center no-repeat;
         background-size: 60% auto;
         margin-left: 0.6rem;
-        &:active {
-          opacity: 0.5;
-        }
       }
       .switch-tab {
         width: 0.923rem;
         height: 0.923rem;
-        background: url("~@/assets/images/icon/switch_tab.png") center center
-          no-repeat;
+        background: url("~@/assets/images/icon/switch_tab.png") center center no-repeat;
         background-size: 60% auto;
-        &:active {
-          opacity: 0.5;
-        }
       }
       .user {
         font-size: 13px;
@@ -1328,16 +1271,14 @@ $gold: #c5a059;
           color: #fff;
           padding-left: 20px;
           margin-top: 3px;
-          background: url("~@/assets/images/icon/user.png") left center
-            no-repeat;
+          background: url("~@/assets/images/icon/user.png") left center no-repeat;
           background-size: 14px;
         }
         .money {
           color: $gold;
           padding-left: 20px;
           margin-top: 3px;
-          background: url("~@/assets/images/icon/money.png") left center
-            no-repeat;
+          background: url("~@/assets/images/icon/money.png") left center no-repeat;
           background-size: 14px;
         }
       }
@@ -1351,10 +1292,8 @@ $gold: #c5a059;
         left: 50%;
         top: 0.15rem;
         margin-left: 2rem;
-        ::v-deep {
-          .van-circle__text {
+        ::v-deep .van-circle__text {
             color: #fff;
-          }
         }
       }
       .box {
@@ -1367,9 +1306,6 @@ $gold: #c5a059;
           background-size: 1.2rem;
           background-position: center center;
           background-repeat: no-repeat;
-          &:active {
-            opacity: 0.5;
-          }
           &.camera {
             background-image: url("~@/assets/images/icon/camera.png");
             &.off {
@@ -1386,183 +1322,119 @@ $gold: #c5a059;
       }
     }
   }
+
+  /* Main View Container - Vertical Flex */
   .view {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 100%;
-    align-items: center;
-    .video {
-      width: 100%;
-      // height: 100%;
-      position: relative;
-      overflow: hidden;
-      flex: 1;
-      .left-btn {
-        position: absolute;
-        left: 0.6rem;
-        bottom: 0.5rem;
-        width: 1rem;
-        z-index: 9;
-        transform: rotateX(0deg);
-        .dice-btn,
-        .roulette-btn {
-          width: 1.5rem;
-          margin-bottom: 3rem;
-          .img-btn {
-            width: 100%;
-            &:active {
-              opacity: 0.5;
-            }
-          }
-        }
-        .roulette-btn {
-          margin-bottom: 1rem;
-        }
+    height: calc(100% - 45px); /* Subtract nav height */
+    position: relative;
+    overflow: hidden;
 
-        .btn {
-          width: 1.3rem;
-          height: 1.3rem;
-          margin-bottom: 0.553rem;
-          background-size: 100%;
-          background-position: center center;
-          background-repeat: no-repeat;
-          &:active {
-            opacity: 0.5;
-          }
-          &.switch {
-            background-image: url("~@/assets/images/icon/switch.png");
-          }
-          &.free {
-            background-image: url("~@/assets/images/icon/free.png");
-            &.active {
-              background-image: url("~@/assets/images/icon/free_active.png");
-            }
-            &.en {
-              background-image: url("~@/assets/images/icon/en_free.png");
-              &.active {
-                background-image: url("~@/assets/images/icon/en_free_active.png");
-              }
-            }
-          }
-          &.tip {
-            background-image: url("~@/assets/images/icon/tip.png");
-          }
-          &.people {
-            background-image: url("~@/assets/images/icon/people.png");
-          }
-        }
-      }
-      .right-btn {
-        position: absolute;
-        right: 2.7rem;
-        top: 1.5rem;
-        width: 0.923rem;
-        z-index: 9;
-        transform: rotateX(0deg);
-        .btn {
-          width: 1.2rem;
-          height: 1.2rem;
-          margin-bottom: 0.4rem;
-          background-size: 100%;
-          background-position: center center;
-          background-repeat: no-repeat;
-          &:active {
-            opacity: 0.5;
-          }
-          &.switch-tab {
-            background-image: url("~@/assets/images/icon/switch_tab.png");
-          }
-          &.continue {
-            background-image: url("~@/assets/images/icon/continue.png");
-          }
-        }
-      }
-      .dice-table {
-        background: $dark-bg;
-        transform: rotateX(1deg);
-      }
-      .hideTable {
-        display: none;
-      }
+    /* 1. Video Container (Top) - Flex Grow */
+    .video-container {
+      flex: 1; /* Grow to fill available space */
+      position: relative;
+      width: 100%;
+      background: #000;
+      overflow: hidden;
+      
       .iframe {
         border: none;
-        width: 100%;
+        /* Remove fixed width/height to allow JS dynamic sizing */
+        /* width: 100%; */
+        /* height: 100%; */
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
+        top: 0;
         left: 0;
         z-index: 1;
-        transition: all 2s, left 0s, top 0s, width 0s, height 0s;
+        /* object-fit: cover; Remove object-fit as it might conflict with iframe content */
+      }
+      
+      .game-area {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 10;
         pointer-events: none;
-        &.scale {
-          transition-delay: 2s;
-          transform: translateY(-70%) scale(2);
-        }
-        &.hideVideo {
-          display: none;
+        
+        /* Enable clicks on children */
+        ::v-deep .playtable, ::v-deep .rushvillage {
+          pointer-events: auto;
         }
       }
+      
+      /* Switch Views (Camera/Tables)Overlay */
+      .switchView {
+        position: absolute;
+        width: 60%;
+        height: 100%;
+        bottom: 0;
+        right: 0;
+        z-index: 100;
+        background: $dark-bg-secondary;
+        border-top-left-radius: 0.3rem;
+        &.camera { width: 40%; }
+      }
     }
-  }
-  .wayView {
-    position: relative;
-    width: 100%;
-    height: 2.31rem;
-    background: $card-bg;
-    border-top: 1px solid $border-color;
-    // overflow: hidden;
-    .pokerView {
-      position: absolute;
+
+    /* 2. Chip Control Bar (Middle) - Fixed Height */
+    .bet-chip-bar {
       width: 100%;
-      height: 100%;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
+      height: 70px;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 20;
+      background: #111;
+      border-top: 1px solid #333;
     }
-  }
-  .switchView {
-    position: absolute;
-    width: 60%;
-    height: 100%;
-    bottom: 0;
-    right: 0;
-    z-index: 10001;
-    transform: rotateX(0deg);
-    border-top-left-radius: 0.3rem;
-    border-bottom-left-radius: 0.3rem;
-    overflow: hidden;
-    background: $dark-bg-secondary;
-    &.camera {
-      width: 40%;
-    }
-  }
-}
 
-/* 竖屏模式下，路单区域平铺全屏 */
-@media screen and (orientation: portrait) {
-  .play .view {
-    .wayView {
-      width: 100% !important;
-      max-width: 100% !important;
-      height: 250px !important;
-      min-height: 250px !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      display: flex !important;
-      flex-direction: row !important;
-
-      .pokerView {
-        order: 1 !important;
-        flex: none !important;
-        width: 200px !important;
+    /* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
+    .roadmap-container {
+      width: 100%;
+      height: auto; 
+      flex-shrink: 0;
+      background: #000;
+      position: relative;
+      z-index: 20;
+      
+      .wayView {
+        width: 100%;
+        height: auto;
       }
 
-      .playway {
-        order: 2 !important;
-        flex: 1 !important;
+      /* Deep overrides to fix canvas distortion */
+      ::v-deep .playway {
+        height: auto !important;
+        background: #000 !important;
+        
+        &.white-theme {
+           background: #000 !important;
+        }
+      }
+      ::v-deep .baccarat-view {
+        height: auto !important;
+      }
+      ::v-deep .road-box {
+        flex: none !important;
+        height: auto !important;
+        background: #000 !important;
+      }
+      ::v-deep .header-bar {
+        background: #1a1a1a !important; 
+        border-bottom: 1px solid #333 !important;
+        color: #fff !important;
+        .game-num { color: #fff !important; }
+      }
+      ::v-deep .canvas {
+        height: auto !important;
+        min-height: 0 !important;
+        flex: none !important;
+        width: 100% !important;
+        display: block !important;
       }
     }
   }