Session 7: Mobile touch optimizations and click button visual polish

css/game.css

@@ -20,6 +20,23 @@
     --warning: #f39c12;
 }
 
+/* Touch Optimization */
+* {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+}
+
+input, textarea {
+    user-select: text;
+    -webkit-user-select: text;
+}
+
+body {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -95,6 +112,7 @@ h2, h3 {
     display: flex;
     justify-content: center;
     margin: 20px 0;
+    position: relative;
 }
 
 #harvest-btn {
@@ -110,6 +128,8 @@ h2, h3 {
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 20px rgba(155, 89, 182, 0.4);
+    position: relative;
+    overflow: hidden;
 }
 
 #harvest-btn:hover {
@@ -121,6 +141,67 @@ h2, h3 {
     transform: scale(0.95);
 }
 
+/* Pulse Animation */
+#harvest-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: rgba(155, 89, 182, 0.3);
+    transform: translate(-50%, -50%);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        width: 100%;
+        height: 100%;
+        opacity: 0.3;
+    }
+    50% {
+        width: 120%;
+        height: 120%;
+        opacity: 0;
+    }
+}
+
+/* Ripple Effect */
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.6);
+    transform: scale(0);
+    animation: rippleEffect 0.6s linear;
+    pointer-events: none;
+}
+
+@keyframes rippleEffect {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+/* Click button glow on active */
+#harvest-btn.clicked {
+    animation: clickGlow 0.2s ease;
+}
+
+@keyframes clickGlow {
+    0% {
+        box-shadow: 0 4px 20px rgba(155, 89, 182, 0.4);
+    }
+    50% {
+        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 4px 20px rgba(155, 89, 182, 0.6);
+    }
+    100% {
+        box-shadow: 0 4px 20px rgba(155, 89, 182, 0.4);
+    }
+}
+
 .btn-icon {
     font-size: 3rem;
 }
@@ -605,7 +686,7 @@ h2, h3 {
     #main-layout {
         grid-template-columns: 1fr 1fr;
     }
-    
+
     #side-panel {
         grid-column: span 2;
     }
@@ -615,16 +696,86 @@ h2, h3 {
     #main-layout {
         grid-template-columns: 1fr;
     }
-    
+
     #side-panel {
         grid-column: span 1;
     }
-    
+
     #game-header {
         flex-direction: column;
         gap: 10px;
         text-align: center;
     }
+
+    /* Touch-friendly button sizes */
+    .buy-btn, .prestige-btn {
+        min-height: 44px;
+        padding: 12px 20px;
+    }
+
+    .tab-btn {
+        min-height: 44px;
+        padding: 12px;
+    }
+
+    #harvest-btn {
+        width: 180px;
+        height: 180px;
+    }
+
+    /* Prevent double-tap zoom */
+    button, a, input, select {
+        touch-action: manipulation;
+    }
+}
+
+/* Mobile Touch Optimizations */
+@media (max-width: 480px) {
+    body {
+        overflow-x: hidden;
+    }
+
+    #main-layout {
+        padding: 10px;
+        gap: 10px;
+    }
+
+    section, aside {
+        padding: 15px;
+    }
+
+    #game-header {
+        padding: 15px 20px;
+    }
+
+    #game-footer {
+        flex-wrap: wrap;
+        justify-content: center;
+        padding: 10px 15px;
+    }
+
+    #game-footer button {
+        flex: 1;
+        min-width: 80px;
+    }
+
+    /* Larger touch targets */
+    .building-card, .upgrade-card {
+        padding: 15px;
+    }
+
+    .achievement {
+        padding: 12px;
+    }
+
+    .achievement-icon {
+        font-size: 1.8rem;
+    }
+
+    /* Prevent pull-to-refresh on scroll areas */
+    #buildings-list, #upgrades-list, #prestige-upgrades-list {
+        overscroll-behavior: contain;
+    }
 }
 
 /* ============================================