refactor: 调整扫雷游戏底部面板和弹窗样式，并移除部分引导和动画样式

pages-game/game/minesweeper/play.scss

@@ -1182,6 +1182,7 @@
             font-size: 16rpx;
         }
     }
+}
 
 // =====================================
 // 底部面板
@@ -1221,44 +1222,63 @@
     }
 }
 
+
 // =====================================
-    // 弹窗
+// 弹窗 (全屏遮罩)
 // =====================================
 .modal-overlay {
     position: fixed;
-        inset: 0;
+    top: 0;
-        background: rgba(0, 0, 0, 0.8);
+    left: 0;
-        backdrop-filter: blur(10rpx);
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(12rpx);
     display: flex;
     justify-content: center;
     align-items: center;
-        z-index: 1000;
+    z-index: 10000; // 确保在最厚层
 }
 
 .modal-content {
-        width: 520rpx;
+    width: 560rpx;
     padding: $spacing-xxl $spacing-xl;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: $spacing-lg;
+    animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
 }
 
 .modal-emoji {
-        font-size: 100rpx;
+    font-size: 110rpx;
+    filter: drop-shadow(0 0 20rpx rgba(255, 255, 255, 0.2));
 }
 
 .modal-title {
-        font-size: 40rpx;
+    font-size: 44rpx;
     font-weight: 900;
     color: $text-dark-main;
-        margin-top: $spacing-md;
+    text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
 }
 
 .result-details {
     margin: $spacing-lg 0;
     padding: $spacing-md;
-        background: rgba($bg-dark-card, 0.5);
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: $radius-md;
     width: 100%;
 
@@ -1276,9 +1296,22 @@
 .guide-modal {
     width: 90%;
     max-width: 640rpx;
-        max-height: 80vh;
+    max-height: 85vh;
     display: flex;
     flex-direction: column;
+    animation: slideUp 0.4s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(100rpx);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .guide-header {
@@ -1296,20 +1329,20 @@
 }
 
 .close-btn {
-        width: 56rpx;
+    width: 64rpx;
-        height: 56rpx;
+    height: 64rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: $font-lg;
     color: $text-dark-sub;
-        background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.08);
     border-radius: 50%;
 }
 
 .guide-body {
     padding: $spacing-lg;
-        max-height: 60vh;
+    max-height: 65vh;
 }
 
 .section-title {
@@ -1330,19 +1363,19 @@
     display: flex;
     align-items: flex-start;
     gap: $spacing-md;
-        padding: $spacing-sm;
+    padding: $spacing-md;
-        background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.04);
     border-radius: $radius-md;
 
     .icon {
-            font-size: 32rpx;
+        font-size: 36rpx;
         flex-shrink: 0;
     }
 
     .desc {
         display: flex;
         flex-direction: column;
-            gap: 4rpx;
+        gap: 6rpx;
     }
 
     .name {
@@ -1358,78 +1391,7 @@
     }
 }
 
-    // =====================================
+// 通用辅助类 (全局可用)
-    // 飘字动画
-    // =====================================
-    .float-label {
-        position: absolute;
-        font-size: $font-md;
-        font-weight: 900;
-        pointer-events: none;
-        animation: floatUp 1s ease-out forwards;
-        z-index: 100;
-        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8);
-
-        &.global {
-            position: fixed;
-        }
-
-        &.text-damage {
-            color: $color-error;
-        }
-
-        &.text-heal {
-            color: $color-success;
-        }
-
-        &.text-effect {
-            color: $accent-cyan;
-        }
-    }
-
-    @keyframes floatUp {
-        0% {
-            opacity: 1;
-            transform: translateY(0) scale(1);
-        }
-
-        100% {
-            opacity: 0;
-            transform: translateY(-60rpx) scale(0.8);
-        }
-    }
-
-    // =====================================
-    // 屏幕震动 & 通用动画
-    // =====================================
-    .screen-shake {
-        animation: screenShake 0.4s ease-in-out;
-    }
-
-    @keyframes screenShake {
-
-        0%,
-        100% {
-            transform: translateX(0);
-        }
-
-        20% {
-            transform: translateX(-8rpx);
-        }
-
-        40% {
-            transform: translateX(8rpx);
-        }
-
-        60% {
-            transform: translateX(-4rpx);
-        }
-
-        80% {
-            transform: translateX(4rpx);
-        }
-    }
-
 .fadeInUp {
     animation: fadeInUp 0.5s ease-out both;
 }
@@ -1463,4 +1425,15 @@
         opacity: 1;
     }
 }
+
+.bg-red {
+    background-color: $color-error !important;
+}
+
+.bg-yellow {
+    background-color: $color-warning !important;
+}
+
+.bg-green {
+    background-color: $color-success !important;
 }

pages-game/game/minesweeper/play.vue

@@ -232,25 +232,16 @@
       </view>
     </view>
 
-    <!-- 结算弹窗 -->
+    <!-- 结算弹窗 - 移至根级，确保不被 game-screen 的销毁影响 -->
-<<<<<<< HEAD
+    <view v-if="showResultModal" class="modal-overlay" style="z-index: 9999;">
-    <view v-if="shouldShowResultModal" class="modal-overlay">
       <view class="modal-content glass-card">
         <text class="modal-emoji">{{ getGameResultEmoji() }}</text>
         <text class="modal-title">{{ getGameResultTitle() }}</text>
-        <view class="result-details" v-if="gameState.players">
+        <view class="result-details" v-if="gameState && gameState.players">
           <text class="detail-text">{{ getResultMessage() }}</text>
         </view>
         <view
           class="btn-primary"
-=======
-    <view v-if="showSettlement" class="modal-overlay">
-      <view class="modal-content glass-card">
-        <text class="modal-emoji">{{ settlementWinnerId === 'draw' ? '🤝' : (settlementWinnerId === myUserId ? '🏆' : '💀') }}</text>
-        <text class="modal-title">{{ settlementWinnerId === 'draw' ? '平局' : (settlementWinnerId === myUserId ? '胜利！' : '很遗憾失败了') }}</text>
-        <view 
-          class="btn-primary" 
->>>>>>> 5ec793a (feat: 为扫雷游戏添加房间列表功能，支持加入和围观现有对局。)
           :class="{ disabled: isRefreshing }"
           @tap="refreshAndPlayAgain"
         >
@@ -259,6 +250,8 @@
       </view>
     </view>
 
+
+
     <!-- 玩法说明弹窗 -->
     <view v-if="showGuide" class="modal-overlay" @tap="showGuide = false">
       <view class="guide-modal glass-card" @tap.stop>
@@ -326,6 +319,7 @@ export default {
       isSpectator: false,
       showSettlement: false,
       settlementWinnerId: '',
+      showResultModal: false,
       // Timers
       matchInterval: null,
       turnInterval: null,
@@ -392,6 +386,12 @@ export default {
     }
   },
   watch: {
+    shouldShowResultModal(newVal) {
+      console.log('[WATCH] shouldShowResultModal changed:', newVal);
+      if (newVal) {
+        this.showResultModal = true;
+      }
+    },
     logs() {
        this.$nextTick(() => {
          this.logsScrollTop = 99999 + Math.random();