From ff0f34a485af1d173bdca6df4042906f0665f6bc Mon Sep 17 00:00:00 2001
From: li <ljf@com>
Date: Mon, 19 Jan 2026 16:46:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E8=A7=86=E5=9B=BEUI=EF=BC=8C=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=EF=BC=8C=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=92=8C=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SwitchTab2.vue        |  98 +++--
 src/components/SwitchTableButton.vue |  42 +++
 src/components/TableList.vue         | 180 +++++-----
 src/views/play.vue                   | 511 ++++++++++++++++-----------
 4 files changed, 497 insertions(+), 334 deletions(-)
 create mode 100644 src/components/SwitchTableButton.vue

diff --git a/src/components/SwitchTab2.vue b/src/components/SwitchTab2.vue
index 53d4e333..d2fb5730 100644
--- a/src/components/SwitchTab2.vue
+++ b/src/components/SwitchTab2.vue
@@ -30,30 +30,25 @@
 import { mapState } from "vuex"
 import GoodRoad from "@/components/GoodRoad.vue"
 import TableList from "@/components/TableList.vue"
+
 export default {
   name: "SwitchTab",
+  components: { GoodRoad, TableList },
   props: {
-    tabInfo: Object,
-    default: () => ({
-      game_id: 1,
-      table_id: null
-    })
+    tabInfo: {
+      type: Object,
+      default: () => ({
+        game_id: 1,
+        table_id: null
+      })
+    }
   },
+  emits: ["showSwitchtab"],
   data() {
     return {
       active: 0
     }
   },
-  components: { GoodRoad, TableList },
-  created() {},
-  methods: {
-    chooseType(active) {
-      this.active = active
-    },
-    close() {
-      this.$emit("showSwitchtab", false)
-    }
-  },
   computed: {
     ...mapState({
       Lang: (state) => state.config.$lang,
@@ -63,69 +58,72 @@ export default {
       userInfo: (state) => state.app.userInfo
     })
   },
-  watch: {}
+  methods: {
+    chooseType(active) {
+      this.active = active
+    },
+    close() {
+      this.$emit("showSwitchtab", false)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-/* 深色豪华主题配色 */
+/* Dark Premium Theme Colors */
 $dark-bg: #0d0d0d;
 $dark-bg-secondary: #1a1a1a;
 $card-bg: #1e1e1e;
 $border-color: #333;
 $gold: #c5a059;
-$text-primary: #ffffff;
-$text-secondary: #888888;
+$text-primary: #fff;
+$text-secondary: #888;
 
 .switchtab {
   width: 100%;
   height: 100%;
   background: $dark-bg-secondary;
-  transform: rotateX(0deg);
+  display: flex;
+  flex-direction: column;
+
   .nav {
-    height: 1.32rem;
-    line-height: 1.32rem;
+    height: 48px;
     display: flex;
     align-items: center;
-    font-size: 0.44rem;
-    background: linear-gradient(
-      to bottom,
-      $dark-bg 0%,
-      $dark-bg 50%,
-      $dark-bg-secondary 50%,
-      $dark-bg-secondary 100%
-    );
+    font-size: 14px;
+    background: $dark-bg;
+    border-bottom: 1px solid $border-color;
+    flex-shrink: 0;
+
     .li {
-      width: 50%;
+      flex: 1;
       height: 100%;
-      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       font-weight: 600;
-      background: $dark-bg;
-      overflow: hidden;
       color: $text-secondary;
-      &.good {
-        border-bottom-right-radius: 0.3rem;
-        &.active {
-          background: $dark-bg-secondary;
-          border-top-right-radius: 0.3rem;
-          border-bottom-right-radius: 0;
-          color: $gold;
-        }
+      cursor: pointer;
+      position: relative;
+      transition: all 0.3s;
+
+      &.active {
+        color: $gold;
+        background: $dark-bg-secondary;
+        border-bottom: 2px solid $gold;
       }
-      &.switch {
-        border-bottom-left-radius: 0.3rem;
-        &.active {
-          border-top-left-radius: 0.3rem;
-          background: $dark-bg-secondary;
-          color: $gold;
-        }
+
+      &:hover:not(.active) {
+        color: lighten($text-secondary, 20%);
       }
     }
   }
+
   .content {
-    height: calc(100% - 1.3rem);
+    flex: 1;
     width: 100%;
     overflow: hidden;
     background: $dark-bg-secondary;
+    position: relative;
   }
 }
 </style>
diff --git a/src/components/SwitchTableButton.vue b/src/components/SwitchTableButton.vue
new file mode 100644
index 00000000..9d5de8eb
--- /dev/null
+++ b/src/components/SwitchTableButton.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="switch-table-btn" @click.stop="handleClick">
+    <!-- Icon can be replaced or styled via CSS class -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SwitchTableButton",
+  emits: ["click"],
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click")
+    }
+    return {
+      handleClick
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-table-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2005; /* High z-index to overlay video */
+  width: 30px;
+  height: 30px;
+  background-image: url("~@/assets/images/icon/switch_tab.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  
+  /* Add a hover effect for better UX */
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/src/components/TableList.vue b/src/components/TableList.vue
index 7ed9b421..e886f3a5 100644
--- a/src/components/TableList.vue
+++ b/src/components/TableList.vue
@@ -204,110 +204,126 @@ export default {
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-/* 深色豪华主题配色 */
+/* Dark Premium Theme Colors */
 $dark-bg: #0d0d0d;
 $dark-bg-secondary: #1a1a1a;
 $card-bg: #1e1e1e;
 $border-color: #333;
 $gold: #c5a059;
-$text-primary: #ffffff;
-$text-secondary: #888888;
+$text-primary: #fff;
+$text-secondary: #888;
 
 .tableList {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   background: $dark-bg-secondary;
+  display: flex;
+  flex-direction: column;
+
   .tabs {
     display: flex;
-    font-size: 0.45rem;
+    font-size: 14px;
     font-weight: 600;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start; /* Left align for scrollable if needed */
     color: $text-secondary;
-    padding: 0 0.5rem;
-    padding-bottom: 2px;
+    padding: 0 10px;
+    height: 40px;
+    border-bottom: 1px solid $border-color;
+    overflow-x: auto;
+    white-space: nowrap;
+    
     .li {
-      padding: 0.2rem 0;
+      padding: 0 12px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+      
       &.active {
         color: $gold;
-        border-bottom: 2px solid $gold;
-      }
-    }
-  }
-  .view {
-    overflow-y: auto;
-    height: calc(100% - 1rem);
-    padding: 0 0.5rem;
-  }
-  .list {
-    width: 100%;
-    font-size: 13px;
-    margin-top: 15px;
-    box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.3);
-    border-radius: 3px;
-    padding: 0 10px 10px 10px;
-    box-sizing: border-box;
-    color: $text-primary;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background: $card-bg;
-    border: 1px solid $border-color;
-    &:last-child {
-      margin-bottom: 20px;
-    }
-    .hd {
-      display: flex;
-      justify-content: space-between;
-      padding: 5px 0;
-      .name {
-        font-weight: 600;
-      }
-      .lable {
-        line-height: 1;
-        padding: 2px 4px;
-        font-weight: 600;
-        color: #000;
-        font-size: 10px;
-        border-radius: 2px;
-        background: linear-gradient(135deg, $gold 0%, #d4af37 100%);
-      }
-      .tip {
-        font-weight: bold;
-        background-image: linear-gradient(90deg, $gold 0%, #d4af37 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-      .sate {
-        align-items: center;
-        color: $text-secondary;
-      }
-      .result {
-        padding-left: 5px;
-        font-weight: 600;
-      }
-    }
-    .bd {
-      background: $card-bg;
-      display: flex;
-      width: 100%;
-      margin-top: 2px;
-      height: 4.2rem;
-    }
-    .ft {
-      display: flex;
-      justify-content: space-between;
-      padding: 5px 0;
-      font-size: 12px;
-      .left {
-        font-weight: bold;
-        color: $text-secondary;
-        .num {
-          margin: 0 10px 0 4px;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 12px;
+          right: 12px;
+          height: 2px;
+          background: $gold;
         }
       }
     }
   }
+
+  .view {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    
+    .list {
+      width: 100%;
+      font-size: 13px;
+      margin-bottom: 12px;
+      padding: 10px;
+      box-sizing: border-box;
+      color: $text-primary;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      background: $card-bg;
+      border: 1px solid $border-color;
+      border-radius: 8px;
+      
+      &:last-child {
+        margin-bottom: 0px;
+      }
+
+      .hd {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        margin-bottom: 8px;
+
+        .name {
+          font-weight: 600;
+          font-size: 14px;
+        }
+        
+        .lable {
+          padding: 2px 6px;
+          font-weight: 600;
+          color: #000;
+          font-size: 10px;
+          border-radius: 4px;
+          background: linear-gradient(135deg, $gold 0%, #d4af37 100%);
+          margin-left: 8px;
+        }
+
+        .sate {
+          display: flex;
+          align-items: center;
+          color: $text-secondary;
+          margin-left: auto;
+          
+          .result {
+             margin-left: 8px;
+             font-size: 12px;
+          }
+        }
+      }
+
+      .bd {
+         width: 100%;
+         height: 120px; /* specific height for WayBox canvas */
+         background: rgba(0,0,0,0.2);
+         border-radius: 4px;
+         overflow: hidden;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/play.vue b/src/views/play.vue
index d0dc113a..82fa1b20 100644
--- a/src/views/play.vue
+++ b/src/views/play.vue
@@ -7,67 +7,16 @@
     ]"
   >
     <!-- Top Navigation Bar -->
-    <div class="nav">
-      <div class="left">
-        <div class="back" @click="handleBack"></div>
-        <div class="switch-tab" @click.stop="showSwitchtab(true)"></div>
-        <div class="user">
-          <div class="name">
-            {{ userInfo.username }}
-          </div>
-          <div class="money">{{ userInfo.money }}</div>
-        </div>
-      </div>
-      <div class="right">
-        <div
-          class="cutdown"
-          v-show="
-            tableData &&
-            (tableData.sendMode == 'startBetCountDown' ||
-              tableData.sendMode == 'toBet' ||
-              tableData.sendMode == 'toBetFlase')
-          "
-        >
-          <Circle
-            v-model:current-rate="currentRate"
-            start-position="left"
-            :size="38"
-            :stroke-width="120"
-            :rate="circle.rate"
-            :color="{
-              '0%': '#3fecff',
-              '100%': '#6149f6'
-            }"
-            layer-color="rgba(255,255,255,0.3)"
-            :text="`${circle.num || 0}`"
-          />
-        </div>
-        <ul class="box">
-          <li
-            class="btn camera"
-            :class="{ off: !switchVideo }"
-            @click.stop="showSwitchCamera(true)"
-          ></li>
-          <li class="btn muise" @click="toggleAplayer"></li>
-          <li class="btn menu" @click="showMenu"></li>
-        </ul>
-      </div>
-    </div>
-
     <!-- Main View Container: Vertical Flex Stack -->
     <div class="view">
       
       <!-- 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,
-            marginLeft: foxVideo.ml
-          }"
           class="iframe"
           :class="[
             {
@@ -81,68 +30,7 @@
           :src="videoUrl"
         ></iframe>
 
-        <!-- 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
-              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>
-        </div>
+
 
         <!-- Overlays inside Top Section -->
         <div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
@@ -160,6 +48,127 @@
         >
           <setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
         </div>
+        
+        <!-- Video Overlay Controls (Moved to bottom for stacking context) -->
+        <div class="video-overlay-controls">
+           <div class="back" @click="handleBack"></div>
+           <SwitchTableButton @click="showSwitchtab(true)" />
+        </div>
+
+        <!-- Status/Countdown Overlay (Moved to absolute end for visibility) -->
+        <div class="status-overlay" v-if="tableData">
+             <!-- Dealing Status -->
+             <div class="status-circle dealing" v-if="['endBet', 'sendScanResult', 'openingBaccaratResult', 'openingDtResult', 'openingNnResult', 'openingTcResult', 'openingToningResult', 'openingDiceResult', 'openingRouletteResult'].includes(tableData.sendMode)">
+                 <span>发牌中</span>
+             </div>
+             <!-- Countdown -->
+             <div class="status-circle countdown" v-else-if="tableData.sendMode === 'startBetCountDown' || tableData.sendMode === 'toBet'">
+                 <span>{{ circle.num }}</span>
+             </div>
+             <!-- Wait/Shuffle/Other -->
+             <div class="status-circle wait" v-else-if="!tableData.sendMode || tableData.sendMode === 'changeBoot'">
+                  <span style="font-size: 12px;">洗牌中</span>
+             </div>
+        </div>
+
+
+
+        <!-- Back Button (Top Left) -->
+        <div class="video-btn-back" @click="handleBack"></div>
+
+      </div>
+
+      <!-- Top Navigation Bar (Moved below video) -->
+      <div class="nav">
+        <!-- 1. User Info -->
+        <div class="nav-item user-info">
+          <div class="icon user-icon"></div>
+          <div class="text">{{ userInfo.username }}</div>
+        </div>
+        
+        <!-- 2. Balance -->
+        <div class="nav-item balance-info">
+          <div class="icon money-icon"></div>
+          <div class="text">{{ userInfo.money }}</div>
+        </div>
+
+        <!-- 3. Table Limit -->
+        <div class="nav-item limit-info">
+          <div class="icon limit-icon"></div>
+          <div class="text">{{ tableData && tableData.limit_money }}</div> 
+        </div>
+
+        <!-- 4. Right Controls (Camera, etc.) -->
+        <div class="nav-item right-controls">
+             <!-- Camera moved to video overlay -->
+            <div class="btn muise" @click="toggleAplayer"></div>
+            <div class="btn menu" @click="showMenu"></div>
+        </div>
+      </div>
+
+      <!-- Game Betting Area (Moved below Nav) -->
+      <div class="game-area-block">
+          <div class="game-area-content">
+              <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
+                  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>
+          </div>
       </div>
 
       <!-- 2. Chip Control Bar (Middle Section, Fixed Height) -->
@@ -203,7 +212,7 @@
 import { ref, computed, watch, nextTick, onUnmounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useStore } from "vuex"
-import { Circle, showToast, showDialog, closeDialog, closeToast } from "vant"
+import { showToast, showDialog, closeDialog, closeToast } from "vant"
 import PlayTable from "@/components/PlayTable/Index.vue"
 import PlayWay from "@/components/PlayWay.vue"
 import PlayChip from "@/components/PlayChip.vue"
@@ -213,6 +222,7 @@ import ToningResult from "@/components/ToningResult"
 import DiceResult from "@/components/DiceResult"
 import RouletteResult from "@/components/RouletteResult"
 import SwitchTab from "@/components/SwitchTab2"
+import SwitchTableButton from "@/components/SwitchTableButton"
 import setCamera from "@/components/setCamera"
 import PlayTypePop from "@/components/PlayTypePop"
 import TableInfoPop from "@/components/TableInfoPop"
@@ -234,9 +244,9 @@ export default {
     PlayTable,
     PlayWay,
     PlayChip,
-    Circle,
     Poker,
     SwitchTab,
+    SwitchTableButton,
     setCamera,
     PlayTypePop,
     TableInfoPop,
@@ -1231,95 +1241,80 @@ $gold: #c5a059;
   box-sizing: border-box;
   overflow: hidden;
 
-  /* Navigation Bar */
+
+  
+  /* Navigation Bar - Redesigned */
   .nav {
     position: relative; 
     z-index: 100;
     width: 100%;
-    height: 45px;
+    height: 36px; /* Slightly compact */
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: $dark-bg-secondary;
-    border-bottom: 1px solid $border-color;
+    background: #000; /* Pure black as per ref */
+    border-bottom: 1px solid #222;
     flex-shrink: 0;
+    padding: 0 10px;
+    box-sizing: border-box;
 
-    .left {
-      height: 0.923rem;
-      display: flex;
-      align-items: center;
-      gap: 0.3rem;
-      .back {
-        width: 0.923rem;
-        height: 0.923rem;
-        background: url("~@/assets/images/icon/back.png") center center no-repeat;
-        background-size: 60% auto;
-        margin-left: 0.6rem;
-      }
-      .switch-tab {
-        width: 0.923rem;
-        height: 0.923rem;
-        background: url("~@/assets/images/icon/switch_tab.png") center center no-repeat;
-        background-size: 60% auto;
-      }
-      .user {
-        font-size: 13px;
-        font-weight: 600;
-        line-height: 1;
-        margin-left: 10px;
-        .name {
-          color: #fff;
-          padding-left: 20px;
-          margin-top: 3px;
-          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-size: 14px;
-        }
-      }
-    }
-    .right {
-      margin-right: 0.7rem;
-      display: flex;
-      align-items: center;
-      .cutdown {
-        position: absolute;
-        left: 50%;
-        top: 0.15rem;
-        margin-left: 2rem;
-        ::v-deep .van-circle__text {
-            color: #fff;
-        }
-      }
-      .box {
+    .nav-item {
         display: flex;
-        .btn {
-          width: 0.923rem;
-          height: 0.7rem;
-          padding: 0.2rem 0.1rem;
-          margin-left: 0.677rem;
-          background-size: 1.2rem;
-          background-position: center center;
-          background-repeat: no-repeat;
-          &.camera {
-            background-image: url("~@/assets/images/icon/camera.png");
-            &.off {
-              background-image: url("~@/assets/images/icon/camera_off.png");
-            }
-          }
-          &.muise {
-            background-image: url("~@/assets/images/icon/musie.png");
-          }
-          &.menu {
-            background-image: url("~@/assets/images/icon/meun.png");
-          }
+        align-items: center;
+        height: 100%;
+        color: #fff;
+        font-size: 13px;
+        
+        .icon {
+            width: 16px;
+            height: 16px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            margin-right: 6px;
+        }
+        
+        &.user-info {
+            .user-icon { background-image: url("~@/assets/images/icon/user.png"); }
+            .text { font-weight: bold; }
+        }
+        
+        &.balance-info {
+            .money-icon { background-image: url("~@/assets/images/icon/money.png"); }
+            .text { color: $gold; font-family: monospace; font-size: 14px; }
+        }
+        
+        &.limit-info {
+             /* Use switch_tab icon as placeholder for limit arrows if specific icon invalid, 
+                or styling css borders for arrows */
+             .limit-icon { 
+                 width: 12px; height: 12px;
+                 background-image: url("~@/assets/images/icon/switch_tab.png"); /* Placeholder */
+                 transform: rotate(90deg); /* Make it look like up/down sort */
+                 opacity: 0.7;
+             }
+             .text { color: #aaa; font-size: 12px; }
+        }
+        
+        &.right-controls {
+            display: flex;
+            gap: 15px;
+            
+            .btn {
+               width: 24px;
+               height: 24px;
+               background-size: contain;
+               background-repeat: no-repeat;
+               background-position: center;
+               
+               &.camera {
+                 background-image: url("~@/assets/images/icon/camera.png");
+                 &.off { background-image: url("~@/assets/images/icon/camera_off.png"); }
+               }
+               &.muise { background-image: url("~@/assets/images/icon/musie.png"); }
+               &.menu { background-image: url("~@/assets/images/icon/meun.png"); }
+            }
         }
-      }
     }
   }
 
@@ -1328,7 +1323,7 @@ $gold: #c5a059;
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: calc(100% - 45px); /* Subtract nav height */
+    height: 100%; /* Full height, Nav is now inside */
     position: relative;
     overflow: hidden;
 
@@ -1342,14 +1337,13 @@ $gold: #c5a059;
       
       .iframe {
         border: none;
-        /* Remove fixed width/height to allow JS dynamic sizing */
-        /* width: 100%; */
-        /* height: 100%; */
+        width: 100%;
+        height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1;
-        /* object-fit: cover; Remove object-fit as it might conflict with iframe content */
+        object-fit: cover; /* This won't affect iframe content but is good for semantics if it were a video tag. */
       }
       
       .game-area {
@@ -1379,12 +1373,125 @@ $gold: #c5a059;
         border-top-left-radius: 0.3rem;
         &.camera { width: 40%; }
       }
+
+      /* Separated Video Controls */
+      .video-btn-back {
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          z-index: 2005; /* Highest priority */
+          width: 30px;
+          height: 30px;
+          background-image: url("~@/assets/images/icon/back.png");
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+      }
+
+      /* Overlay Camera Icon */
+      .video-overlay-camera {
+          position: absolute;
+          top: 10px;
+          right: 60px; /* Switch is at 10px, so this is left of it */
+          z-index: 2001;
+          width: 30px;
+          height: 30px;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          background-image: url("~@/assets/images/icon/camera.png");
+          
+          &.off {
+              background-image: url("~@/assets/images/icon/camera_off.png");
+          }
+      }
+
+      /* Status Overlay Styles */
+      .status-overlay {
+          position: absolute;
+          top: 60px; /* Moved down to avoid row overlap, or move Left? Let's move LEFT of Camera */
+          left: 50%;
+          transform: translateX(-50%); /* Removed translateZ to avoid potential clipping/context issues */
+          z-index: 2005; /* Matches highest priority buttons */
+          display: flex;
+          pointer-events: none; /* Allow clicks to pass through if needed, though buttons inside might need events. Actually, user might want to see it. It's display only. */
+          align-items: center;
+          justify-content: center;
+
+          .status-circle {
+              width: 50px;
+              height: 50px;
+              border-radius: 50%;
+              background: rgba(0,0,0,0.6);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+              font-weight: bold;
+              font-size: 16px;
+              border: 2px solid rgba(255, 255, 255, 0.2);
+              backdrop-filter: blur(4px);
+              
+              &.dealing {
+                  background: rgba(46, 204, 113, 0.8); /* Green */
+                  border-color: #2ecc71;
+                  font-size: 14px;
+              }
+              
+              &.countdown {
+                  background: rgba(231, 76, 60, 0.8); /* Red/Orange for countdown */
+                  border-color: #e74c3c;
+                  font-size: 24px;
+              }
+              
+              &.wait {
+                  background: rgba(52, 152, 219, 0.8);
+                  border-color: #3498db;
+              }
+          }
+      }
+    }
+
+    /* 4. Game Table Area (New Flex Item) */
+    .game-area-block {
+        width: 100%;
+        height: 200px; /* Fixed height for table area */
+        flex-shrink: 0;
+        position: relative;
+        background: transparent;
+        z-index: 10;
+        overflow: hidden;
+
+        /* Content wrapper that mimics old absolute positioning for internal components */
+        .game-area-content {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            
+             /* Ensure PlayTable fits inside this block */
+             ::v-deep .playtable {
+                 .view {
+                     bottom: 0 !important; /* Anchor to bottom of this block */
+                     top: auto !important;
+                     height: 100% !important; /* Fill the block */
+                     transform: none !important; /* Reset 3D transform for flat view if needed, or keep if 3D desired within this block */
+                 }
+                 
+                 /* Adjust portrait mode specifically if needed */
+                 @media screen and (orientation: portrait) {
+                     .view {
+                        height: 100% !important;
+                        border-radius: 0 !important;
+                     }
+                 }
+             }
+        }
     }
 
     /* 2. Chip Control Bar (Middle) - Fixed Height */
     .bet-chip-bar {
       width: 100%;
-      height: 70px;
+      height: 60px;
       flex-shrink: 0;
       position: relative;
       z-index: 20;
@@ -1395,7 +1502,7 @@ $gold: #c5a059;
     /* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
     .roadmap-container {
       width: 100%;
-      height: 180px; 
+      height: 160px; 
       flex-shrink: 0;
       background: #fff;
       position: relative;