update PLAY button（add Matching State）

css/style.css

@@ -871,7 +871,8 @@ body {
     opacity: 1;
     position: relative;
     top: -0.5vh;
-    animation: pulse-opacity 5s infinite ease-in-out;
+    transition: opacity 0.5s ease-in-out;
+    animation: play-text-pulse 5s infinite ease-in-out;
 }
 
 .tips-text {
@@ -888,6 +889,63 @@ body {
     margin-top: -0.5vh;
 }
 
+/* 匹配状态的高亮样式 */
+.matching-highlight {
+    color: #fff !important;
+    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(227, 182, 47, 0.9), 0 0 32px rgba(227, 182, 47, 0.7) !important;
+}
+
+/* 匹配状态下的按钮样式 */
+.multi-layer-button.matching-state {
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.multi-layer-button.matching-state .layer-1 {
+    opacity: 0;
+    filter: blur(0px);
+}
+
+.multi-layer-button.matching-state .layer-2 {
+    opacity: 1;
+    filter: blur(0px);
+}
+
+.multi-layer-button.matching-state .layer-3 {
+    opacity: 0;
+    filter: blur(0px);
+}
+
+/* 匹配状态下禁用闪光动画 */
+.multi-layer-button.matching-state.bro-loading:after {
+    animation: none !important;
+    -webkit-animation: none !important;
+}
+
+/* 匹配状态下禁用play-text动画 */
+.multi-layer-button.matching-state .play-text {
+    animation: none !important;
+    -webkit-animation: none !important;
+}
+
+/* 匹配状态下不显示hover-text */
+.multi-layer-button.matching-state .hover-text {
+    opacity: 0 !important;
+}
+
+.multi-layer-button.matching-state .default-text {
+    opacity: 1 !important;
+}
+
+@keyframes matching-pulse {
+    from {
+        opacity: 0.8;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 /* Tips text container */
 .tips-text-container {
     position: relative;
@@ -1019,4 +1077,16 @@ body {
         background-position: 0 0;
         opacity: 0
     }
+}
+
+@keyframes play-text-pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.6;
+    }
+    100% {
+        opacity: 1;
+    }
 }