diff --git a/pictures/微信图片_20260318170012_3_20.png b/pictures/微信图片_20260318170012_3_20.png
new file mode 100644
index 0000000..b146b26
Binary files /dev/null and b/pictures/微信图片_20260318170012_3_20.png differ
diff --git a/pictures/微信图片_20260318170013_4_20.png b/pictures/微信图片_20260318170013_4_20.png
new file mode 100644
index 0000000..522f5ea
Binary files /dev/null and b/pictures/微信图片_20260318170013_4_20.png differ
diff --git a/pictures/微信图片_20260318170016_5_20.png b/pictures/微信图片_20260318170016_5_20.png
new file mode 100644
index 0000000..1708ca3
Binary files /dev/null and b/pictures/微信图片_20260318170016_5_20.png differ
diff --git a/pictures/微信图片_20260318170019_6_20.png b/pictures/微信图片_20260318170019_6_20.png
new file mode 100644
index 0000000..509a740
Binary files /dev/null and b/pictures/微信图片_20260318170019_6_20.png differ
diff --git a/pictures/微信图片_20260318170025_7_20.png b/pictures/微信图片_20260318170025_7_20.png
new file mode 100644
index 0000000..e47d5a9
Binary files /dev/null and b/pictures/微信图片_20260318170025_7_20.png differ
diff --git a/src/views/ChengduGamePage.vue b/src/views/ChengduGamePage.vue
index 4708cff..6c31645 100644
--- a/src/views/ChengduGamePage.vue
+++ b/src/views/ChengduGamePage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import deskImage from '../assets/images/desk/desk_01.png'
 import { readStoredAuth } from '../utils/auth-storage'
 
 const router = useRouter()
@@ -13,11 +14,20 @@ const wsError = ref('')
 const wsMessages = ref<string[]>([])
 const startGamePending = ref(false)
 const lastStartRequestId = ref('')
+const now = ref(new Date())
+const selectedHandIndex = ref(10)
+const chosenMissingSuit = ref<'wan' | 'tiao' | 'tong'>('tiao')
+const overlayState = ref<'missing' | 'action' | 'settlement' | null>('missing')
+
+let clockTimer: number | undefined
 
 const WS_BASE_URL = import.meta.env.VITE_GAME_WS_URL ?? 'ws://127.0.0.1:8080/ws'
 const DEFAULT_MAX_PLAYERS = 4
 
 type SeatKey = 'top' | 'right' | 'bottom' | 'left'
+type TileSuit = 'wan' | 'tong' | 'tiao' | 'honor'
+type MissingSuit = 'wan' | 'tiao' | 'tong'
+type TileDirection = 'bottom' | 'top' | 'left' | 'right'
 
 interface RoomPlayerState {
   index: number
@@ -39,12 +49,46 @@ interface ActionEventLike {
   type?: unknown
   status?: unknown
   requestId?: unknown
-  roomId?: unknown
-  room_id?: unknown
   payload?: unknown
   data?: unknown
 }
 
+interface TileModel {
+  key: string
+  suit: TileSuit
+  rank: number
+  glow?: boolean
+}
+
+interface SeatRenderItem {
+  key: SeatKey
+  player: RoomPlayerState | null
+  isSelf: boolean
+  isTurn: boolean
+  label: string
+  subLabel: string
+}
+
+const bottomTileModules = import.meta.glob('../assets/images/tiles/bottom/*.png', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>
+
+const topTileModules = import.meta.glob('../assets/images/tiles/top/*.png', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>
+
+const leftTileModules = import.meta.glob('../assets/images/tiles/left/*.png', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>
+
+const rightTileModules = import.meta.glob('../assets/images/tiles/right/*.png', {
+  eager: true,
+  import: 'default',
+}) as Record<string, string>
+
 const roomId = computed(() => {
   return typeof route.params.roomId === 'string' ? route.params.roomId : ''
 })
@@ -99,7 +143,7 @@ const canStartGame = computed(() => {
   )
 })
 
-const seatViews = computed(() => {
+const seatViews = computed<SeatRenderItem[]>(() => {
   const seats: Record<SeatKey, RoomPlayerState | null> = {
     top: null,
     right: null,
@@ -129,13 +173,71 @@ const seatViews = computed(() => {
   return order.map((seat) => {
     const player = seats[seat]
     const isSelf = Boolean(player) && player?.playerId === currentUserId.value
+    const fallbackLabels: Record<SeatKey, string> = {
+      top: '对家',
+      right: '上家',
+      bottom: '我',
+      left: '下家',
+    }
+
     return {
       key: seat,
       player,
       isSelf,
       isTurn: turnSeat === seat,
-      label: player ? (isSelf ? '你' : player.playerId) : '空位',
-      subLabel: player ? `座位 ${player.index}` : '',
+      label: player
+        ? isSelf
+          ? loggedInUserName.value || '我'
+          : `玩家 ${player.index + 1}`
+        : fallbackLabels[seat],
+      subLabel: player ? `座位 ${player.index + 1}` : '等待入座',
+    }
+  })
+})
+
+const seatDecor = computed(() => {
+  const missingBySeat: Record<SeatKey, MissingSuit> = {
+    top: 'wan',
+    right: 'wan',
+    bottom: chosenMissingSuit.value,
+    left: 'tiao',
+  }
+
+  const richPlayers = [
+    {
+      seat: 'top',
+      avatar: '云',
+      money: '136.1亿',
+      dealer: false,
+    },
+    {
+      seat: 'right',
+      avatar: '熊',
+      money: '159亿',
+      dealer: false,
+    },
+    {
+      seat: 'bottom',
+      avatar: '我',
+      money: '89.2亿',
+      dealer: false,
+    },
+    {
+      seat: 'left',
+      avatar: '宝',
+      money: '87.8亿',
+      dealer: true,
+    },
+  ] as const
+
+  return richPlayers.map((item) => {
+    const seatInfo = seatViews.value.find((seat) => seat.key === item.seat)
+    return {
+      ...item,
+      name: seatInfo?.label ?? '玩家',
+      missingSuit: missingBySeat[item.seat],
+      isTurn: seatInfo?.isTurn ?? false,
+      isOnline: Boolean(seatInfo?.player) || item.seat === 'bottom',
     }
   })
 })
@@ -145,11 +247,291 @@ const roomStatusText = computed(() => {
     return '对局中'
   }
   if (roomState.value.status === 'finished') {
-    return '已结束'
+    return '已结算'
   }
-  return '等待中'
+  return '等待开局'
 })
 
+const wallCount = computed(() => {
+  if (roomState.value.status === 'finished') {
+    return 27
+  }
+  if (roomState.value.status === 'playing') {
+    return 30
+  }
+  return 55
+})
+
+const centerTimer = computed(() => {
+  if (roomState.value.status === 'finished') {
+    return '09'
+  }
+  if (roomState.value.status === 'playing') {
+    return overlayState.value === 'action' ? '11' : '12'
+  }
+  return '00'
+})
+
+const currentPhaseText = computed(() => {
+  if (overlayState.value === 'missing') {
+    return '请选择定缺花色，没有该花色才能胡牌'
+  }
+  if (overlayState.value === 'action') {
+    return '检测到可操作，选择碰牌或过牌'
+  }
+  if (overlayState.value === 'settlement') {
+    return '本局结束，准备进入下一局'
+  }
+  return roomState.value.status === 'playing' ? '轮到你出牌' : '等待玩家准备'
+})
+
+const statusRibbon = computed(() => {
+  if (overlayState.value === 'settlement') {
+    return '+6亿 胡'
+  }
+  if (overlayState.value === 'action') {
+    return '可操作'
+  }
+  if (overlayState.value === 'missing') {
+    return '已定缺'
+  }
+  return '四川麻将'
+})
+
+const networkLabel = computed(() => {
+  if (wsStatus.value === 'connected') {
+    return '22ms'
+  }
+  if (wsStatus.value === 'connecting') {
+    return '连接中'
+  }
+  return '离线'
+})
+
+const formattedClock = computed(() => {
+  const month = String(now.value.getMonth() + 1).padStart(2, '0')
+  const day = String(now.value.getDate()).padStart(2, '0')
+  const hours = String(now.value.getHours()).padStart(2, '0')
+  const minutes = String(now.value.getMinutes()).padStart(2, '0')
+  return `${month}-${day} ${hours}:${minutes}`
+})
+
+const bottomHandTiles = computed<TileModel[]>(() => {
+  if (roomState.value.status === 'finished') {
+    return [
+      { key: 'wan-6a', suit: 'wan', rank: 6 },
+      { key: 'wan-6b', suit: 'wan', rank: 6 },
+      { key: 'tong-4a', suit: 'tong', rank: 4 },
+      { key: 'tong-4b', suit: 'tong', rank: 4 },
+      { key: 'tong-6', suit: 'tong', rank: 6 },
+      { key: 'tong-8', suit: 'tong', rank: 8 },
+      { key: 'tong-9', suit: 'tong', rank: 9 },
+    ]
+  }
+
+  if (roomState.value.status === 'playing') {
+    return [
+      { key: 'wan-2', suit: 'wan', rank: 2 },
+      { key: 'wan-5', suit: 'wan', rank: 5 },
+      { key: 'wan-6a', suit: 'wan', rank: 6 },
+      { key: 'wan-6b', suit: 'wan', rank: 6 },
+      { key: 'wan-7', suit: 'wan', rank: 7 },
+      { key: 'wan-8', suit: 'wan', rank: 8 },
+      { key: 'tong-4', suit: 'tong', rank: 4 },
+      { key: 'tong-8a', suit: 'tong', rank: 8 },
+      { key: 'tong-8b', suit: 'tong', rank: 8, glow: true },
+      { key: 'tong-9', suit: 'tong', rank: 9 },
+      { key: 'tiao-7', suit: 'tiao', rank: 7, glow: true },
+      { key: 'tiao-8', suit: 'tiao', rank: 8, glow: true },
+    ]
+  }
+
+  return [
+    { key: 'wan-2', suit: 'wan', rank: 2 },
+    { key: 'wan-5', suit: 'wan', rank: 5 },
+    { key: 'wan-6a', suit: 'wan', rank: 6 },
+    { key: 'wan-6b', suit: 'wan', rank: 6 },
+    { key: 'wan-7', suit: 'wan', rank: 7 },
+    { key: 'wan-8', suit: 'wan', rank: 8 },
+    { key: 'tiao-2', suit: 'tiao', rank: 2 },
+    { key: 'tiao-7', suit: 'tiao', rank: 7 },
+    { key: 'tiao-8', suit: 'tiao', rank: 8 },
+    { key: 'tiao-9', suit: 'tiao', rank: 9 },
+    { key: 'tong-4', suit: 'tong', rank: 4 },
+    { key: 'tong-8', suit: 'tong', rank: 8 },
+    { key: 'tong-9', suit: 'tong', rank: 9 },
+  ]
+})
+
+const discardsBySeat = computed<Record<SeatKey, TileModel[]>>(() => {
+  if (roomState.value.status === 'finished') {
+    return {
+      top: [
+        { key: 't1', suit: 'tiao', rank: 9 },
+        { key: 't2', suit: 'wan', rank: 4 },
+        { key: 't3', suit: 'wan', rank: 4 },
+        { key: 't4', suit: 'wan', rank: 4 },
+        { key: 't5', suit: 'wan', rank: 4 },
+      ],
+      right: [
+        { key: 'r1', suit: 'tong', rank: 9 },
+        { key: 'r2', suit: 'tiao', rank: 7 },
+        { key: 'r3', suit: 'tiao', rank: 8 },
+        { key: 'r4', suit: 'honor', rank: 5 },
+        { key: 'r5', suit: 'honor', rank: 5 },
+      ],
+      bottom: [
+        { key: 'b1', suit: 'tiao', rank: 7 },
+        { key: 'b2', suit: 'tiao', rank: 8 },
+        { key: 'b3', suit: 'tiao', rank: 9 },
+        { key: 'b4', suit: 'tiao', rank: 1 },
+        { key: 'b5', suit: 'wan', rank: 3 },
+        { key: 'b6', suit: 'wan', rank: 5 },
+      ],
+      left: [
+        { key: 'l1', suit: 'tiao', rank: 4 },
+        { key: 'l2', suit: 'tiao', rank: 5 },
+        { key: 'l3', suit: 'tiao', rank: 7 },
+        { key: 'l4', suit: 'honor', rank: 5 },
+      ],
+    }
+  }
+
+  if (roomState.value.status === 'playing') {
+    return {
+      top: [
+        { key: 't1', suit: 'tiao', rank: 9 },
+        { key: 't2', suit: 'wan', rank: 4 },
+        { key: 't3', suit: 'wan', rank: 4 },
+        { key: 't4', suit: 'wan', rank: 4 },
+        { key: 't5', suit: 'wan', rank: 4 },
+      ],
+      right: [
+        { key: 'r1', suit: 'tong', rank: 9 },
+        { key: 'r2', suit: 'tiao', rank: 7 },
+        { key: 'r3', suit: 'tiao', rank: 8 },
+        { key: 'r4', suit: 'honor', rank: 5 },
+      ],
+      bottom: [
+        { key: 'b1', suit: 'tiao', rank: 7 },
+        { key: 'b2', suit: 'tiao', rank: 8 },
+        { key: 'b3', suit: 'tiao', rank: 9 },
+        { key: 'b4', suit: 'wan', rank: 3 },
+        { key: 'b5', suit: 'wan', rank: 5 },
+      ],
+      left: [
+        { key: 'l1', suit: 'tiao', rank: 4 },
+        { key: 'l2', suit: 'tiao', rank: 5 },
+        { key: 'l3', suit: 'tiao', rank: 7 },
+        { key: 'l4', suit: 'honor', rank: 5 },
+      ],
+    }
+  }
+
+  return {
+    top: [],
+    right: [],
+    bottom: [],
+    left: [],
+  }
+})
+
+const meldsBySeat = computed<Record<SeatKey, TileModel[][]>>(() => {
+  if (roomState.value.status === 'finished') {
+    return {
+      top: [[{ key: 'mt1', suit: 'tiao', rank: 6 }, { key: 'mt2', suit: 'tiao', rank: 7 }, { key: 'mt3', suit: 'tiao', rank: 8 }]],
+      right: [[{ key: 'mr1', suit: 'tiao', rank: 8 }, { key: 'mr2', suit: 'tiao', rank: 8 }, { key: 'mr3', suit: 'tiao', rank: 8 }]],
+      bottom: [
+        [{ key: 'mb1', suit: 'wan', rank: 7 }, { key: 'mb2', suit: 'wan', rank: 7 }, { key: 'mb3', suit: 'wan', rank: 7 }],
+        [{ key: 'mb4', suit: 'tong', rank: 8 }, { key: 'mb5', suit: 'tong', rank: 8 }, { key: 'mb6', suit: 'tong', rank: 8 }],
+      ],
+      left: [],
+    }
+  }
+
+  if (roomState.value.status === 'playing') {
+    return {
+      top: [],
+      right: [],
+      bottom: [[{ key: 'mb1', suit: 'tong', rank: 8 }, { key: 'mb2', suit: 'tong', rank: 8 }, { key: 'mb3', suit: 'tong', rank: 8 }]],
+      left: [],
+    }
+  }
+
+  return {
+    top: [],
+    right: [],
+    bottom: [],
+    left: [],
+  }
+})
+
+const wallBacks = computed(() => {
+  return {
+    top: Array.from({ length: 14 }, (_, index) => `top-wall-${index}`),
+    right: Array.from({ length: 11 }, (_, index) => `right-wall-${index}`),
+    bottom: Array.from({ length: 13 }, (_, index) => `bottom-wall-${index}`),
+    left: Array.from({ length: 11 }, (_, index) => `left-wall-${index}`),
+  }
+})
+
+function getTileModules(direction: TileDirection): Record<string, string> {
+  if (direction === 'top') {
+    return topTileModules
+  }
+  if (direction === 'left') {
+    return leftTileModules
+  }
+  if (direction === 'right') {
+    return rightTileModules
+  }
+  return bottomTileModules
+}
+
+function tilePath(direction: TileDirection, suit: TileSuit, rank: number): string {
+  const prefixByDirection: Record<TileDirection, string> = {
+    bottom: 'p4b',
+    top: 'p2s',
+    left: 'p3s',
+    right: 'p1s',
+  }
+  const suitIndexBySuit: Record<TileSuit, number> = {
+    wan: 1,
+    tong: 2,
+    tiao: 3,
+    honor: 4,
+  }
+  const prefix = prefixByDirection[direction]
+  const suitIndex = suitIndexBySuit[suit]
+  return `../assets/images/tiles/${direction}/${prefix}${suitIndex}_${rank}.png`
+}
+
+function getTileImage(direction: TileDirection, tile: TileModel): string {
+  const modules = getTileModules(direction)
+  return modules[tilePath(direction, tile.suit, tile.rank)] ?? ''
+}
+
+function getBackImage(direction: TileDirection): string {
+  const modules = getTileModules(direction)
+  const nameByDirection: Record<TileDirection, string> = {
+    bottom: '../assets/images/tiles/bottom/tdbgs_4.png',
+    top: '../assets/images/tiles/top/tdbgs_2.png',
+    left: '../assets/images/tiles/left/tdbgs_3.png',
+    right: '../assets/images/tiles/right/tdbgs_1.png',
+  }
+  return modules[nameByDirection[direction]] ?? ''
+}
+
+function missingSuitLabel(suit: MissingSuit): string {
+  if (suit === 'wan') {
+    return '万'
+  }
+  if (suit === 'tiao') {
+    return '条'
+  }
+  return '筒'
+}
+
 function backHall(): void {
   sendLeaveRoom()
   void router.push('/hall')
@@ -158,22 +540,22 @@ function backHall(): void {
 function pushWsMessage(text: string): void {
   const line = `[${new Date().toLocaleTimeString()}] ${text}`
   wsMessages.value.unshift(line)
-  if (wsMessages.value.length > 80) {
-    wsMessages.value.length = 80
+  if (wsMessages.value.length > 60) {
+    wsMessages.value.length = 60
   }
 }
 
 function logWsSend(message: unknown): void {
-  console.log('[WS][client] 发送:', message)
+  console.log('[WS][client] send', message)
 }
 
 function logWsReceive(kind: string, payload?: unknown): void {
-  const now = new Date().toLocaleTimeString()
+  const timestamp = new Date().toLocaleTimeString()
   if (payload === undefined) {
-    console.log(`[WS][${now}] 收到${kind}`)
+    console.log(`[WS][${timestamp}] ${kind}`)
     return
   }
-  console.log(`[WS][${now}] 收到${kind}:`, payload)
+  console.log(`[WS][${timestamp}] ${kind}:`, payload)
 }
 
 function disconnectWs(): void {
@@ -343,7 +725,6 @@ function sendStartGame(): void {
   }
 
   const sender = currentUserId.value
-
   if (!sender) {
     return
   }
@@ -362,6 +743,7 @@ function sendStartGame(): void {
     trace_id: createRequestId('trace'),
     payload: {},
   }
+
   logWsSend(message)
   ws.value.send(JSON.stringify(message))
   pushWsMessage(`[client] 请求开始游戏 requestId=${requestId}`)
@@ -392,7 +774,7 @@ function sendLeaveRoom(): void {
 
   logWsSend(message)
   ws.value.send(JSON.stringify(message))
-  pushWsMessage(`[client] 请求退出房间 requestId=${requestId}`)
+  pushWsMessage(`[client] 请求离开房间 requestId=${requestId}`)
 }
 
 function connectWs(): void {
@@ -416,23 +798,22 @@ function connectWs(): void {
   }
 
   socket.onmessage = (event) => {
-  if (typeof event.data === 'string') {
-    logWsReceive('文本消息', event.data)
-    try {
-      const parsed = JSON.parse(event.data)
-      logWsReceive('JSON消息', parsed)
+    if (typeof event.data === 'string') {
+      logWsReceive('收到文本消息', event.data)
+      try {
+        const parsed = JSON.parse(event.data)
+        logWsReceive('收到 JSON 消息', parsed)
+        pushWsMessage(`[server] ${JSON.stringify(parsed)}`)
+      } catch {
+        pushWsMessage(`[server] ${event.data}`)
+      }
 
-      pushWsMessage(`[server] ${JSON.stringify(parsed, null, 2)}`)
-    } catch {
-      pushWsMessage(`[server] ${event.data}`)
+      consumeGameEvent(event.data)
+      return
     }
 
-    consumeGameEvent(event.data)
-    return
-  }
-
-  logWsReceive('二进制消息')
-  pushWsMessage('[binary] 收到二进制消息')
+    logWsReceive('收到二进制消息')
+    pushWsMessage('[binary] 收到二进制消息')
   }
 
   socket.onerror = () => {
@@ -446,6 +827,26 @@ function connectWs(): void {
   }
 }
 
+function chooseSuit(suit: MissingSuit): void {
+  chosenMissingSuit.value = suit
+  overlayState.value = null
+  pushWsMessage(`[ui] 已选择定缺 ${missingSuitLabel(suit)}`)
+}
+
+function dismissActionOverlay(action: 'peng' | 'pass'): void {
+  overlayState.value = null
+  pushWsMessage(`[ui] 选择${action === 'peng' ? '碰牌' : '过牌'}`)
+}
+
+function startNextRound(): void {
+  overlayState.value = null
+  roomState.value = {
+    ...roomState.value,
+    status: 'playing',
+  }
+  pushWsMessage('[ui] 准备下一局')
+}
+
 watch(
   roomId,
   (nextRoomId) => {
@@ -458,6 +859,7 @@ watch(
       players: [],
       currentTurnIndex: null,
     }
+    overlayState.value = 'missing'
     startGamePending.value = false
     lastStartRequestId.value = ''
   },
@@ -488,92 +890,1205 @@ watch(
     if (status === 'playing' || status === 'finished') {
       startGamePending.value = false
     }
+
+    if (status === 'waiting') {
+      overlayState.value = 'missing'
+      return
+    }
+
+    if (status === 'playing' && overlayState.value === 'settlement') {
+      overlayState.value = 'action'
+      return
+    }
+
+    if (status === 'finished') {
+      overlayState.value = 'settlement'
+    }
   },
+  { immediate: true },
 )
 
 onMounted(() => {
   connectWs()
+  clockTimer = window.setInterval(() => {
+    now.value = new Date()
+  }, 1000)
 })
 
 onBeforeUnmount(() => {
   disconnectWs()
+  if (clockTimer !== undefined) {
+    window.clearInterval(clockTimer)
+  }
 })
 </script>
 
 <template>
-  <section class="hall-page game-page">
-    <header class="hall-header game-header">
-      <div>
-        <h1>成都麻将对局</h1>
-        <p v-if="loggedInUserName" class="sub-title">玩家：{{ loggedInUserName }}</p>
+  <section class="game-page mahjong-stage">
+    <header class="game-topbar">
+      <div class="topbar-left">
+        <button class="chrome-btn" type="button" @click="backHall">☰</button>
+        <div class="status-chip wall-chip">
+          <span class="signal-block"></span>
+          <strong>{{ wallCount }}</strong>
+        </div>
+        <div class="status-chip room-chip">
+          <span class="room-chip-label">房间</span>
+          <strong>{{ roomState.name || roomName || '成都麻将' }}</strong>
+        </div>
       </div>
-      <div class="header-actions">
-        <button class="ghost-btn" type="button" @click="backHall">返回大厅</button>
-      </div>
-    </header>
 
-    <section class="table-panel game-table-panel">
-      <div class="room-brief">
-        <span class="room-brief-title">当前房间</span>
-        <span class="room-brief-item">
-          <em>房间名：</em>
-          <strong>{{ roomState.name || roomName || '未命名房间' }}</strong>
-        </span>
-        <span class="room-brief-item room-brief-id">
-          <em>room_id：</em>
-          <strong>{{ roomId || '未选择房间' }}</strong>
-        </span>
-        <span class="room-brief-item">
-          <em>状态：</em>
-          <strong>{{ roomStatusText }}</strong>
-        </span>
-        <span class="room-brief-item">
-          <em>人数：</em>
-          <strong>{{ roomState.players.length }}/{{ roomState.maxPlayers }}</strong>
-        </span>
+      <div class="topbar-center">
+        <div class="title-stack">
+          <p class="game-title">成都麻将实战桌</p>
+          <p class="game-subtitle">{{ roomStatusText }} · {{ currentPhaseText }}</p>
+        </div>
+      </div>
+
+      <div class="topbar-right">
+        <div class="status-chip net-chip">
+          <span class="wifi-dot" :class="`is-${wsStatus}`"></span>
+          <strong>{{ networkLabel }}</strong>
+        </div>
+        <div class="status-chip clock-chip">{{ formattedClock }}</div>
+        <button class="header-btn ghost-btn" type="button" @click="connectWs">重连</button>
         <button
-          class="ghost-btn ws-reconnect"
+          class="header-btn primary-btn"
           type="button"
           :disabled="!canStartGame || startGamePending"
           @click="sendStartGame"
         >
-          {{ startGamePending ? '开局请求中...' : '开始游戏' }}
+          {{ startGamePending ? '开局中...' : '开始' }}
         </button>
       </div>
-      <div class="mahjong-table game-mahjong-table" :class="{ active: Boolean(roomId) }">
-        <div
-          v-for="seat in seatViews"
-          :key="seat.key"
-          class="seat"
-          :class="[
-            `seat-${seat.key}`,
-            { occupied: Boolean(seat.player), 'seat-me': seat.isSelf, 'seat-turn': seat.isTurn },
-          ]"
-        >
-          <strong>{{ seat.label }}</strong>
-          <small v-if="seat.subLabel">{{ seat.subLabel }}</small>
-          <span v-if="seat.isTurn" class="turn-indicator">出牌中</span>
-        </div>
-        <div class="table-center">
-          <p>Chengdu Mahjong</p>
-          <p>{{ roomState.id || roomId || 'Waiting...' }}</p>
-        </div>
-      </div>
+    </header>
 
-      <section class="ws-panel">
-        <div class="ws-panel-head">
-          <strong>实时消息</strong>
-          <div class="ws-actions">
-            <span class="ws-state" :class="`is-${wsStatus}`">{{ wsStatus }}</span>
-            <button class="ghost-btn ws-reconnect" type="button" @click="connectWs">重连</button>
+    <section class="table-shell">
+      <img class="table-desk" :src="deskImage" alt="" />
+      <div class="table-felt">
+        <div class="felt-frame outer"></div>
+        <div class="felt-frame inner"></div>
+        <div class="table-watermark">
+          <span>{{ statusRibbon }}</span>
+          <strong>指尖四川麻将</strong>
+          <small>底注 6亿 · 封顶 32倍</small>
+        </div>
+
+        <article
+          v-for="player in seatDecor"
+          :key="player.seat"
+          class="player-badge"
+          :class="[`seat-${player.seat}`, { 'is-turn': player.isTurn, offline: !player.isOnline }]"
+        >
+          <div class="avatar-card">{{ player.avatar }}</div>
+          <div class="player-meta">
+            <p>{{ player.name }}</p>
+            <strong>{{ player.money }}</strong>
+          </div>
+          <span v-if="player.dealer" class="dealer-mark">庄</span>
+          <span class="missing-mark">{{ missingSuitLabel(player.missingSuit) }}</span>
+        </article>
+
+        <div class="wall wall-top">
+          <img v-for="key in wallBacks.top" :key="key" :src="getBackImage('top')" alt="" />
+        </div>
+        <div class="wall wall-right">
+          <img v-for="key in wallBacks.right" :key="key" :src="getBackImage('right')" alt="" />
+        </div>
+        <div class="wall wall-bottom">
+          <img v-for="key in wallBacks.bottom" :key="key" :src="getBackImage('bottom')" alt="" />
+        </div>
+        <div class="wall wall-left">
+          <img v-for="key in wallBacks.left" :key="key" :src="getBackImage('left')" alt="" />
+        </div>
+
+        <div class="center-deck" :class="`state-${roomState.status}`">
+          <span class="wind north">北</span>
+          <span class="wind west">西</span>
+          <span class="wind south">南</span>
+          <span class="wind east">东</span>
+          <strong>{{ centerTimer }}</strong>
+        </div>
+
+        <div
+          v-for="seat in (['top', 'right', 'bottom', 'left'] as SeatKey[])"
+          :key="`${seat}-melds`"
+          class="meld-lane"
+          :class="`lane-${seat}`"
+        >
+          <div v-for="(meld, meldIndex) in meldsBySeat[seat]" :key="`${seat}-meld-${meldIndex}`" class="meld-group">
+            <img
+              v-for="tile in meld"
+              :key="tile.key"
+              :src="getTileImage(seat === 'bottom' ? 'bottom' : seat, tile)"
+              alt=""
+            />
           </div>
         </div>
-        <p v-if="wsError" class="message error">{{ wsError }}</p>
-        <div class="ws-log">
-          <p v-if="wsMessages.length === 0" class="ws-empty">等待服务器消息...</p>
-          <p v-for="(line, idx) in wsMessages" :key="idx" class="ws-line">{{ line }}</p>
+
+        <div
+          v-for="seat in (['top', 'right', 'bottom', 'left'] as SeatKey[])"
+          :key="`${seat}-discards`"
+          class="discard-lane"
+          :class="`lane-${seat}`"
+        >
+          <img
+            v-for="tile in discardsBySeat[seat]"
+            :key="tile.key"
+            :src="getTileImage(seat === 'bottom' ? 'bottom' : seat, tile)"
+            alt=""
+          />
         </div>
-      </section>
+
+        <div class="phase-banner" :class="`phase-${overlayState ?? 'idle'}`">
+          {{ currentPhaseText }}
+        </div>
+
+        <div v-if="overlayState === 'missing'" class="overlay-panel choose-panel">
+          <h2>请选择定缺的花色</h2>
+          <p>你选择后，缺门信息会展示在头像侧边。</p>
+          <div class="choose-actions">
+            <button class="suit-btn suit-wan" type="button" @click="chooseSuit('wan')">万</button>
+            <button class="suit-btn suit-tiao" type="button" @click="chooseSuit('tiao')">条</button>
+            <button class="suit-btn suit-tong" type="button" @click="chooseSuit('tong')">筒</button>
+          </div>
+        </div>
+
+        <div v-if="overlayState === 'action'" class="overlay-panel action-panel">
+          <p>右侧玩家刚打出一张牌，你可以选择响应。</p>
+          <div class="action-burst">
+            <button class="burst-btn peng" type="button" @click="dismissActionOverlay('peng')">碰</button>
+            <button class="burst-btn pass" type="button" @click="dismissActionOverlay('pass')">过</button>
+          </div>
+        </div>
+
+        <div v-if="overlayState === 'settlement'" class="overlay-panel result-panel">
+          <div class="settlement-score">
+            <span class="loss-score">-6亿</span>
+            <span class="win-score">+6亿</span>
+          </div>
+          <h2>胡</h2>
+          <p>清晰展示了结束态、得分和下一局入口。</p>
+          <button class="next-round-btn" type="button" @click="startNextRound">下一局</button>
+        </div>
+
+        <div class="bottom-hand">
+          <div class="hand-row">
+            <button
+              v-for="(tile, index) in bottomHandTiles"
+              :key="tile.key"
+              class="hand-tile"
+              :class="{ selected: index === selectedHandIndex, glow: tile.glow }"
+              type="button"
+              @click="selectedHandIndex = index"
+            >
+              <img :src="getTileImage('bottom', tile)" alt="" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="game-footer">
+      <div class="room-summary">
+        <span>玩家：{{ loggedInUserName || '未登录玩家' }}</span>
+        <span>Room ID：{{ roomState.id || roomId || '未选择房间' }}</span>
+        <span>人数：{{ roomState.players.length }}/{{ roomState.maxPlayers }}</span>
+        <span>WebSocket：{{ wsStatus }}</span>
+      </div>
+
+      <div class="ws-console">
+        <div class="console-head">
+          <strong>实时消息</strong>
+          <span v-if="wsError" class="console-error">{{ wsError }}</span>
+        </div>
+        <div class="console-body">
+          <p v-if="wsMessages.length === 0" class="console-empty">等待服务器消息...</p>
+          <p v-for="(line, idx) in wsMessages" :key="idx" class="console-line">{{ line }}</p>
+        </div>
+      </div>
     </section>
   </section>
 </template>
+
+<style scoped>
+.mahjong-stage {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 14px;
+  background:
+    radial-gradient(circle at top, rgba(143, 91, 63, 0.1), transparent 35%),
+    linear-gradient(180deg, #341d1c 0%, #201211 48%, #130b0b 100%);
+}
+
+.game-topbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  align-items: center;
+  padding: 10px 14px;
+  border: 1px solid rgba(255, 223, 148, 0.16);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(44, 22, 24, 0.96), rgba(24, 13, 14, 0.98)),
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.02) 0,
+      rgba(255, 255, 255, 0.02) 1px,
+      rgba(0, 0, 0, 0.02) 1px,
+      rgba(0, 0, 0, 0.02) 6px
+    );
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
+}
+
+.topbar-left,
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.topbar-right {
+  justify-content: flex-end;
+}
+
+.topbar-center {
+  display: flex;
+  justify-content: center;
+}
+
+.title-stack {
+  text-align: center;
+}
+
+.game-title {
+  font-size: 24px;
+  font-weight: 800;
+  color: #f8e9ae;
+  letter-spacing: 2px;
+}
+
+.game-subtitle {
+  margin-top: 2px;
+  font-size: 13px;
+  color: #cfbfa2;
+}
+
+.chrome-btn {
+  width: 48px;
+  height: 48px;
+  border: 0;
+  border-radius: 50%;
+  color: #dceaf2;
+  background: radial-gradient(circle at 35% 30%, #7b8388, #364147 68%, #232b2f 100%);
+  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.26);
+  cursor: pointer;
+}
+
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 12, 15, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.signal-block {
+  width: 22px;
+  height: 18px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #1ce948, #148f2c);
+  box-shadow: 0 0 10px rgba(28, 233, 72, 0.35);
+}
+
+.room-chip-label {
+  font-size: 12px;
+  color: #bfcecc;
+}
+
+.wifi-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #999;
+}
+
+.wifi-dot.is-connected {
+  background: #29de58;
+  box-shadow: 0 0 12px rgba(41, 222, 88, 0.35);
+}
+
+.wifi-dot.is-connecting {
+  background: #e0b244;
+}
+
+.wifi-dot.is-disconnected {
+  background: #d56363;
+}
+
+.header-btn {
+  height: 40px;
+  padding: 0 16px;
+}
+
+.table-shell {
+  position: relative;
+  flex: 1;
+  min-height: 760px;
+  padding: 14px;
+  border-radius: 26px;
+  background:
+    linear-gradient(145deg, rgba(57, 37, 27, 0.95), rgba(24, 15, 12, 0.95)),
+    radial-gradient(circle at top left, rgba(255, 230, 149, 0.08), transparent 28%);
+  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+}
+
+.table-desk {
+  position: absolute;
+  inset: 14px;
+  width: calc(100% - 28px);
+  height: calc(100% - 28px);
+  object-fit: cover;
+  opacity: 0.2;
+  mix-blend-mode: screen;
+  pointer-events: none;
+}
+
+.table-felt {
+  position: relative;
+  height: 100%;
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at 50% 35%, rgba(143, 187, 248, 0.32), transparent 28%),
+    linear-gradient(180deg, #4d6d98 0%, #3a5f8e 52%, #315480 100%);
+  border: 2px solid rgba(255, 211, 128, 0.42);
+  box-shadow:
+    inset 0 0 0 3px rgba(0, 0, 0, 0.18),
+    inset 0 0 40px rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+}
+
+.felt-frame {
+  position: absolute;
+  inset: 54px 112px;
+  border: 2px solid rgba(202, 221, 255, 0.14);
+  border-radius: 12px;
+}
+
+.felt-frame.inner {
+  inset: 118px 244px 168px;
+}
+
+.table-watermark {
+  position: absolute;
+  left: 50%;
+  bottom: 136px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: rgba(0, 0, 0, 0.2);
+  text-align: center;
+  pointer-events: none;
+}
+
+.table-watermark span {
+  color: rgba(255, 244, 184, 0.68);
+  font-size: 14px;
+}
+
+.table-watermark strong {
+  font-size: 54px;
+  font-weight: 900;
+  letter-spacing: 4px;
+  opacity: 0.38;
+}
+
+.table-watermark small {
+  font-size: 28px;
+  opacity: 0.36;
+}
+
+.player-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 2;
+}
+
+.player-badge.is-turn .avatar-card {
+  box-shadow: 0 0 0 2px rgba(255, 242, 184, 0.72), 0 10px 24px rgba(0, 0, 0, 0.26);
+}
+
+.player-badge.offline {
+  opacity: 0.65;
+}
+
+.avatar-card {
+  display: grid;
+  place-items: center;
+  width: 74px;
+  height: 74px;
+  border: 2px solid rgba(188, 242, 223, 0.5);
+  border-radius: 4px;
+  color: #fff4dd;
+  font-size: 30px;
+  font-weight: 900;
+  background:
+    linear-gradient(145deg, rgba(107, 212, 177, 0.88), rgba(44, 110, 133, 0.92)),
+    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.28), transparent 45%);
+}
+
+.player-meta {
+  min-width: 88px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+}
+
+.player-meta p {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.player-meta strong {
+  display: block;
+  margin-top: 4px;
+  color: #ffdd4b;
+  font-size: 18px;
+}
+
+.dealer-mark,
+.missing-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  font-size: 20px;
+  font-weight: 900;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
+}
+
+.dealer-mark {
+  background: radial-gradient(circle at 35% 30%, #ffe782, #bf8308 72%);
+  color: #5c3400;
+}
+
+.missing-mark {
+  background: radial-gradient(circle at 35% 30%, #a7e8ff, #2d7db6 78%);
+  color: #f6fcff;
+}
+
+.seat-top {
+  top: 28px;
+  right: 180px;
+}
+
+.seat-right {
+  top: 150px;
+  right: 42px;
+}
+
+.seat-bottom {
+  left: 56px;
+  bottom: 116px;
+}
+
+.seat-left {
+  left: 42px;
+  top: 180px;
+}
+
+.wall {
+  position: absolute;
+  display: flex;
+  gap: 2px;
+  z-index: 1;
+}
+
+.wall img {
+  display: block;
+}
+
+.wall-top {
+  left: 50%;
+  top: 24px;
+  transform: translateX(-50%);
+}
+
+.wall-top img {
+  width: 52px;
+  height: auto;
+}
+
+.wall-bottom {
+  left: 50%;
+  bottom: 146px;
+  transform: translateX(-50%);
+}
+
+.wall-bottom img {
+  width: 54px;
+  height: auto;
+}
+
+.wall-left {
+  left: 94px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.wall-left img,
+.wall-right img {
+  width: 46px;
+  height: auto;
+}
+
+.wall-right {
+  right: 104px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.center-deck {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 164px;
+  height: 132px;
+  transform: translate(-50%, -50%);
+  border-radius: 22px;
+  background:
+    linear-gradient(145deg, #4c1f24 0 22%, #2d2f38 22% 74%, #173f1f 74% 100%);
+  border: 4px solid rgba(230, 190, 95, 0.32);
+  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.22);
+}
+
+.center-deck strong {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #2eb4ff;
+  font-size: 42px;
+  font-weight: 900;
+  letter-spacing: 4px;
+}
+
+.wind {
+  position: absolute;
+  color: rgba(255, 255, 255, 0.46);
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.wind.north {
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.wind.south {
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.wind.west {
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
+}
+
+.wind.east {
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+}
+
+.meld-lane,
+.discard-lane {
+  position: absolute;
+  display: flex;
+  gap: 4px;
+  z-index: 2;
+}
+
+.meld-lane {
+  gap: 12px;
+}
+
+.meld-group {
+  display: flex;
+  gap: 2px;
+}
+
+.lane-top {
+  left: 50%;
+  top: 118px;
+  transform: translateX(-50%);
+}
+
+.lane-right {
+  top: 50%;
+  right: 240px;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.lane-bottom {
+  left: 50%;
+  bottom: 220px;
+  transform: translateX(-50%);
+}
+
+.meld-lane.lane-left,
+.discard-lane.lane-left {
+  top: 50%;
+  left: 226px;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.meld-lane img,
+.discard-lane img {
+  display: block;
+}
+
+.discard-lane.lane-top img,
+.meld-lane.lane-top img {
+  width: 54px;
+}
+
+.discard-lane.lane-bottom img,
+.meld-lane.lane-bottom img {
+  width: 58px;
+}
+
+.discard-lane.lane-right img,
+.discard-lane.lane-left img,
+.meld-lane.lane-right img,
+.meld-lane.lane-left img {
+  width: 44px;
+}
+
+.discard-lane.lane-top {
+  top: 188px;
+}
+
+.discard-lane.lane-bottom {
+  bottom: 282px;
+  max-width: 580px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.discard-lane.lane-right {
+  right: 260px;
+}
+
+.discard-lane.lane-left {
+  left: 248px;
+}
+
+.phase-banner {
+  position: absolute;
+  left: 50%;
+  top: 58%;
+  transform: translate(-50%, -50%);
+  min-width: 380px;
+  padding: 16px 28px;
+  border-radius: 14px;
+  background: rgba(17, 24, 45, 0.3);
+  color: #f8f7f2;
+  font-size: 18px;
+  text-align: center;
+  letter-spacing: 1px;
+  z-index: 3;
+}
+
+.overlay-panel {
+  position: absolute;
+  left: 50%;
+  bottom: 146px;
+  transform: translateX(-50%);
+  z-index: 4;
+}
+
+.choose-panel,
+.action-panel,
+.result-panel {
+  padding: 18px 22px;
+  border-radius: 22px;
+  border: 1px solid rgba(255, 235, 181, 0.22);
+  background: linear-gradient(180deg, rgba(13, 24, 52, 0.62), rgba(8, 18, 34, 0.82));
+  backdrop-filter: blur(5px);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+.choose-panel h2,
+.result-panel h2 {
+  font-size: 34px;
+  color: #fbe497;
+}
+
+.choose-panel p,
+.action-panel p,
+.result-panel p {
+  margin-top: 6px;
+  color: #dfe8ff;
+}
+
+.choose-actions,
+.action-burst {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 16px;
+}
+
+.suit-btn,
+.burst-btn {
+  width: 108px;
+  height: 108px;
+  border: 0;
+  border-radius: 50%;
+  color: #fffaf2;
+  font-size: 56px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.28), 0 18px 24px rgba(0, 0, 0, 0.22);
+}
+
+.suit-wan {
+  background: radial-gradient(circle at 35% 30%, #ff9b77, #e5392a 70%);
+}
+
+.suit-tiao {
+  background: radial-gradient(circle at 35% 30%, #8ceda6, #00a447 72%);
+}
+
+.suit-tong {
+  background: radial-gradient(circle at 35% 30%, #89e0ff, #3d81d7 72%);
+}
+
+.burst-btn.peng {
+  background: radial-gradient(circle at 35% 30%, #ffe57c, #f0ac11 72%);
+  color: #6f4200;
+}
+
+.burst-btn.pass {
+  background: radial-gradient(circle at 35% 30%, #81f6d3, #12ad84 72%);
+}
+
+.settlement-score {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 8px;
+  font-size: 34px;
+  font-weight: 900;
+}
+
+.loss-score {
+  color: #7ad0ff;
+}
+
+.win-score {
+  color: #ffe25a;
+}
+
+.next-round-btn {
+  min-width: 260px;
+  height: 82px;
+  margin-top: 18px;
+  border: 0;
+  border-radius: 18px;
+  color: #774600;
+  font-size: 36px;
+  font-weight: 900;
+  background: linear-gradient(180deg, #ffef84, #ffca2b);
+  box-shadow: 0 20px 28px rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+}
+
+.bottom-hand {
+  position: absolute;
+  left: 50%;
+  right: 46px;
+  bottom: 14px;
+  transform: translateX(-50%);
+  z-index: 3;
+}
+
+.hand-row {
+  display: flex;
+  justify-content: center;
+  gap: 2px;
+}
+
+.hand-tile {
+  position: relative;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: transform 0.18s ease, filter 0.18s ease;
+}
+
+.hand-tile img {
+  display: block;
+  width: 86px;
+  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.22));
+}
+
+.hand-tile.selected {
+  transform: translateY(-20px);
+}
+
+.hand-tile.glow img {
+  filter: drop-shadow(0 0 16px rgba(246, 178, 48, 0.75));
+}
+
+.game-footer {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 12px;
+}
+
+.room-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  padding: 14px 18px;
+  border-radius: 16px;
+  background: rgba(10, 13, 20, 0.66);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #d8e0e5;
+}
+
+.ws-console {
+  border-radius: 16px;
+  background: rgba(10, 13, 20, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.console-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  color: #f7e4b0;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.console-error {
+  color: #ffadad;
+  font-size: 13px;
+}
+
+.console-body {
+  max-height: 140px;
+  overflow: auto;
+  padding: 12px 14px;
+}
+
+.console-line,
+.console-empty {
+  font-size: 12px;
+  color: #d2d9e0;
+  line-height: 1.5;
+}
+
+.console-line + .console-line {
+  margin-top: 6px;
+}
+
+@media (max-width: 1280px) {
+  .game-topbar {
+    grid-template-columns: 1fr;
+  }
+
+  .topbar-left,
+  .topbar-center,
+  .topbar-right {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .table-shell {
+    min-height: 680px;
+  }
+
+  .seat-top {
+    right: 104px;
+  }
+
+  .discard-lane.lane-right {
+    right: 220px;
+  }
+
+  .discard-lane.lane-left {
+    left: 208px;
+  }
+
+  .meld-lane.lane-right {
+    right: 204px;
+  }
+
+  .meld-lane.lane-left,
+  .discard-lane.lane-left {
+    left: 188px;
+  }
+
+  .hand-tile img {
+    width: 74px;
+  }
+}
+
+@media (max-width: 980px) {
+  .mahjong-stage {
+    padding: 10px;
+  }
+
+  .table-shell {
+    min-height: 600px;
+  }
+
+  .game-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .player-meta {
+    min-width: 0;
+  }
+
+  .player-meta p {
+    font-size: 14px;
+  }
+
+  .player-meta strong {
+    font-size: 16px;
+  }
+
+  .avatar-card {
+    width: 60px;
+    height: 60px;
+    font-size: 24px;
+  }
+
+  .hand-tile img {
+    width: 62px;
+  }
+
+  .phase-banner {
+    min-width: min(92%, 380px);
+    font-size: 15px;
+  }
+
+  .suit-btn,
+  .burst-btn {
+    width: 88px;
+    height: 88px;
+    font-size: 46px;
+  }
+
+  .next-round-btn {
+    min-width: 220px;
+    height: 68px;
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 720px) {
+  .table-shell {
+    min-height: 520px;
+    padding: 10px;
+  }
+
+  .table-desk {
+    inset: 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+  }
+
+  .felt-frame {
+    display: none;
+  }
+
+  .seat-top,
+  .seat-right,
+  .seat-left,
+  .seat-bottom {
+    scale: 0.84;
+    transform-origin: center;
+  }
+
+  .seat-top {
+    top: 8px;
+    right: 24px;
+  }
+
+  .seat-right {
+    top: 88px;
+    right: -10px;
+  }
+
+  .seat-left {
+    left: -10px;
+    top: 118px;
+  }
+
+  .seat-bottom {
+    left: 10px;
+    bottom: 98px;
+  }
+
+  .wall-top img {
+    width: 34px;
+  }
+
+  .wall-bottom {
+    bottom: 114px;
+  }
+
+  .wall-bottom img {
+    width: 36px;
+  }
+
+  .wall-left {
+    left: 18px;
+  }
+
+  .wall-right {
+    right: 18px;
+  }
+
+  .wall-left img,
+  .wall-right img {
+    width: 28px;
+  }
+
+  .center-deck {
+    width: 124px;
+    height: 100px;
+  }
+
+  .center-deck strong {
+    font-size: 30px;
+  }
+
+  .wind {
+    font-size: 16px;
+  }
+
+  .discard-lane.lane-top,
+  .meld-lane.lane-top {
+    top: 94px;
+  }
+
+  .discard-lane.lane-right,
+  .meld-lane.lane-right {
+    right: 88px;
+  }
+
+  .discard-lane.lane-left,
+  .meld-lane.lane-left {
+    left: 88px;
+  }
+
+  .discard-lane.lane-bottom,
+  .meld-lane.lane-bottom {
+    bottom: 184px;
+  }
+
+  .discard-lane.lane-top img,
+  .meld-lane.lane-top img {
+    width: 34px;
+  }
+
+  .discard-lane.lane-bottom img,
+  .meld-lane.lane-bottom img {
+    width: 34px;
+  }
+
+  .discard-lane.lane-left img,
+  .discard-lane.lane-right img,
+  .meld-lane.lane-left img,
+  .meld-lane.lane-right img {
+    width: 26px;
+  }
+
+  .bottom-hand {
+    right: 8px;
+    left: 8px;
+    transform: none;
+  }
+
+  .hand-row {
+    gap: 0;
+    overflow-x: auto;
+    justify-content: flex-start;
+    padding-bottom: 4px;
+  }
+
+  .hand-tile img {
+    width: 54px;
+  }
+
+  .hand-tile.selected {
+    transform: translateY(-12px);
+  }
+
+  .overlay-panel {
+    bottom: 86px;
+    width: calc(100% - 32px);
+  }
+
+  .choose-actions,
+  .action-burst {
+    gap: 10px;
+  }
+
+  .suit-btn,
+  .burst-btn {
+    width: 72px;
+    height: 72px;
+    font-size: 36px;
+  }
+
+  .settlement-score {
+    font-size: 28px;
+  }
+
+  .choose-panel h2,
+  .result-panel h2 {
+    font-size: 28px;
+  }
+
+  .table-watermark {
+    bottom: 98px;
+  }
+
+  .table-watermark strong {
+    font-size: 34px;
+  }
+
+  .table-watermark small {
+    font-size: 16px;
+  }
+}
+</style>