diff --git a/index.html b/index.html
index 6fd85a4..2aaba91 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,8 @@
 
         /* Styles for the 3D card scene and individual cards */
         .card-scene {
-            width: min(70vw, 400px);
-            height: min(70vh, 550px);
+            width: min(80vw, 380px);
+            height: min(55vh, 520px);
             margin: 0 auto;
             perspective: 1000px;
             display: flex;
@@ -52,27 +52,27 @@
 
         /* Swipe animations */
         .card-3d.swiping-left {
-            transform: translateX(-150vw) rotateZ(-30deg) scale(0.5); 
+            transform: translateX(-120vw) rotateZ(-20deg);
             opacity: 0;
-            transition: all 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
         }
 
         .card-3d.swiping-right {
-            transform: translateX(150vw) rotateZ(30deg) scale(0.5); 
+            transform: translateX(120vw) rotateZ(20deg);
             opacity: 0;
-            transition: all 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
         }
 
         /* New card animation */
         .card-3d.new-card {
-            opacity: 0;
-            transform: scale(0.8);
+            opacity: 0.5;
+            transform: scale(0.95) translateY(20px);
         }
 
         .card-3d.new-card.show {
             opacity: 1;
-            transform: scale(1);
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transform: scale(1) translateY(0);
+            transition: transform 0.4s ease-out, opacity 0.4s ease-out;
         }
 
         /* Card faces (front and back) */
@@ -303,7 +303,7 @@
         @media (max-width: 480px) {
             .card-scene {
                 width: 90vw;
-                height: 60vh;
+                height: 55vh;
             }
             .mobile-center {
                 padding: 12px;
@@ -866,7 +866,7 @@
 
             const handleTouchEnd = (e) => {
                 if (!isCurrent || !cardRef.current) return;
-                
+
                 e.preventDefault();
                 
                 const touchEndTime = Date.now();
@@ -892,8 +892,16 @@
                         currentTransform.current = { x: 0, rotation: 0 };
                     }
                 } else if (!isDragging.current && touchDuration < 300) {
-                    setIsFlipped(!isFlipped);
-                    onFlip && onFlip();
+                    const target = e.target;
+                    if (
+                        !target.closest('.chinese-character') &&
+                        !target.closest('.pinyin') &&
+                        !target.closest('.english-translation') &&
+                        !target.closest('.thai-translation')
+                    ) {
+                        setIsFlipped(!isFlipped);
+                        onFlip && onFlip();
+                    }
                 } else {
                     cardRef.current.style.transform = '';
                     cardRef.current.style.opacity = '';
@@ -904,6 +912,19 @@
                 hasMovedEnough.current = false;
             };
 
+            const handleClick = (e) => {
+                const target = e.target;
+                if (
+                    !target.closest('.chinese-character') &&
+                    !target.closest('.pinyin') &&
+                    !target.closest('.english-translation') &&
+                    !target.closest('.thai-translation')
+                ) {
+                    setIsFlipped(!isFlipped);
+                    onFlip && onFlip();
+                }
+            };
+
             const handlePronounce = (text, lang) => {
                 if (text && text.trim()) {
                     pronounceText(text.trim(), lang);
@@ -925,26 +946,31 @@
                     onTouchStart={handleTouchStart}
                     onTouchMove={handleTouchMove}
                     onTouchEnd={handleTouchEnd}
+                    onClick={handleClick}
                     style={{ touchAction: 'none' }}
                 >
                     {/* Front Face */}
                     <div className="card-face flex flex-col items-center justify-center p-6">
                         <div className="card-content">
-                            <div 
-                                className="chinese-character" 
-                                onClick={(e) => { 
-                                    e.stopPropagation(); 
-                                    handlePronounce(chineseChar, 'zh-CN'); 
+                            <div
+                                className="chinese-character"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePronounce(chineseChar, 'zh-CN');
                                 }}
+                                onTouchStart={(e) => e.stopPropagation()}
+                                onTouchEnd={(e) => e.stopPropagation()}
                             >
                                 {chineseChar}
                             </div>
-                            <div 
-                                className="pinyin" 
-                                onClick={(e) => { 
-                                    e.stopPropagation(); 
-                                    handlePronounce(pinyin, 'zh-CN'); 
+                            <div
+                                className="pinyin"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePronounce(pinyin, 'zh-CN');
                                 }}
+                                onTouchStart={(e) => e.stopPropagation()}
+                                onTouchEnd={(e) => e.stopPropagation()}
                             >
                                 {pinyin}
                             </div>
@@ -955,21 +981,25 @@
                     {/* Back Face */}
                     <div className="card-face card-back flex flex-col items-center justify-center p-6">
                         <div className="card-content">
-                            <div 
-                                className="english-translation" 
-                                onClick={(e) => { 
-                                    e.stopPropagation(); 
-                                    handlePronounce(englishTranslation, 'en-US'); 
+                            <div
+                                className="english-translation"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePronounce(englishTranslation, 'en-US');
                                 }}
+                                onTouchStart={(e) => e.stopPropagation()}
+                                onTouchEnd={(e) => e.stopPropagation()}
                             >
                                 {englishTranslation}
                             </div>
-                            <div 
-                                className="thai-translation" 
-                                onClick={(e) => { 
-                                    e.stopPropagation(); 
-                                    handlePronounce(thaiTranslation, 'th-TH'); 
+                            <div
+                                className="thai-translation"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePronounce(thaiTranslation, 'th-TH');
                                 }}
+                                onTouchStart={(e) => e.stopPropagation()}
+                                onTouchEnd={(e) => e.stopPropagation()}
                             >
                                 {thaiTranslation}
                             </div>