修复 Firefox 中翻转卡片按钮的可见性问题

Author: shuaiplus

client/css/body.css

@@ -63,6 +63,19 @@ body {
 	z-index: 10;
 }
 
+/* Firefox兼容性修复：控制翻转时按钮的可见性 */
+.flip-card-inner.flipped .flip-card-front .help-btn {
+	visibility: hidden;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.flip-card-inner:not(.flipped) .flip-card-back .help-btn {
+	visibility: hidden;
+	opacity: 0;
+	pointer-events: none;
+}
+
 .help-btn:hover {
 	background: #30a8f7;
 	border-color: #30a8f7;

client/js/ui.js

@@ -598,13 +598,19 @@ export function initFlipCard() {
 
 	// 当前旋转角度 / Current rotation angle
 	let currentRotation = 0;
-	
-	// 执行翻转操作 / Execute flip operation
+		// 执行翻转操作 / Execute flip operation
 	function performFlip() {
 		currentRotation += 180;
 		const flipCardInner = flipCard.querySelector('.flip-card-inner');
 		if (flipCardInner) {
 			flipCardInner.style.transform = `rotateX(${currentRotation}deg)`;
+			
+			// 添加或移除flipped类来控制按钮可见性（Firefox兼容性修复）
+			if (currentRotation % 360 === 180 || currentRotation % 360 === -180) {
+				flipCardInner.classList.add('flipped');
+			} else {
+				flipCardInner.classList.remove('flipped');
+			}
 		}
 	}