diff --git a/components/FlipGrid.vue b/components/FlipGrid.vue
index c8fbd97..79a1147 100644
--- a/components/FlipGrid.vue
+++ b/components/FlipGrid.vue
@@ -110,7 +110,8 @@ defineExpose({ revealResults, reset })
 }
 
 .flip-card {
-  perspective: 1000px;
+  perspective: 1200px;
+  transform: translateZ(0);
 }
 
 .flip-inner {
@@ -118,11 +119,18 @@ defineExpose({ revealResults, reset })
   width: 100%;
   height: 220rpx;
   transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
   transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
 }
 
 .flip-card.flipped .flip-inner {
   transform: rotateY(180deg);
+  animation: flip-reveal 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
+}
+
+.flip-card.flipped {
+  animation: flip-pop 0.35s ease-out;
 }
 
 .flip-front, .flip-back {
@@ -130,6 +138,7 @@ defineExpose({ revealResults, reset })
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
   border-radius: $radius-md;
   overflow: hidden;
 }
@@ -155,6 +164,19 @@ defineExpose({ revealResults, reset })
   50% { opacity: 1; transform: scale(1.05); }
 }
 
+@keyframes flip-pop {
+  0% { transform: translateZ(0) scale(1); }
+  60% { transform: translateZ(0) scale(1.06); }
+  100% { transform: translateZ(0) scale(1); }
+}
+
+@keyframes flip-reveal {
+  0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); }
+  35% { transform: rotateY(120deg) rotateX(14deg) rotateZ(-6deg) scale(1.08); }
+  70% { transform: rotateY(210deg) rotateX(-10deg) rotateZ(4deg) scale(1.02); }
+  100% { transform: rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale(1); }
+}
+
 .flip-back {
   background: $bg-card;
   transform: rotateY(180deg);
diff --git a/pages/activity/wuxianshang/index.vue b/pages/activity/wuxianshang/index.vue
index 10f618f..4eb8102 100644
--- a/pages/activity/wuxianshang/index.vue
+++ b/pages/activity/wuxianshang/index.vue
@@ -1220,12 +1220,16 @@ function closeFlip() { showFlip.value = false }
   flex-direction: column; 
   height: 100%; 
   padding: 24rpx; 
+  width: 100%;
+  box-sizing: border-box;
   z-index: 2; 
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
+  overflow-y: auto;
   animation: zoomIn 0.3s $ease-bounce;
 }
 .overlay-close { 
+  align-self: center;
   margin-top: 60rpx;
   width: 240rpx;
   height: 88rpx;