Enhance image swipe app mobile experience

Major improvements:
- Added responsive mobile view with optimized touch interactions
- Implemented image caching to preload up to 2 images for faster transitions
- Made images enter consistently from left side regardless of swipe direction
- Enhanced swipe animations with reduced tilt and better fade-out effects
- Reduced swipe sensitivity on mobile for better tap/swipe distinction
- Removed headings and reduced history button height for more screen space
- Added progressive fade effect during manual swipes
- Sped up slide-in animations for snappier experience
- Fixed multiple edge cases for better overall stability

styles.css

@@ -5,20 +5,27 @@
     font-family: 'Arial', sans-serif;
 }
 
-body {
+html, body {
     background-color: #f5f5f5;
     color: #333;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
 }
 
 .container {
     max-width: 500px;
     margin: 0 auto;
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 .header {
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 .subtitle {
@@ -29,8 +36,8 @@ body {
 
 .history-link {
     display: inline-block;
-    margin-bottom: 20px;
-    padding: 8px 15px;
+    margin-bottom: 10px;
+    padding: 5px 12px;
     background-color: #333;
     color: white;
     text-decoration: none;
@@ -45,9 +52,17 @@ body {
 
 .swipe-container {
     position: relative;
-    height: 400px;
+    flex: 1;
+    min-height: 400px;
     margin-bottom: 20px;
     perspective: 1000px;
+    border-style: solid;
+    border-width: 8px;
+    border-left-color: #ff4757; /* Red - Left (Discard) */
+    border-right-color: #2ed573; /* Green - Right (Keep) */
+    border-top-color: #1e90ff; /* Blue - Top (Favorite) */
+    border-bottom-color: #ffa502; /* Yellow - Bottom (Review Later) */
+    border-radius: 15px;
 }
 
 .image-card {
@@ -61,6 +76,43 @@ body {
     transform-origin: center center;
     background-color: white;
     touch-action: none; /* Prevents default touch actions like scrolling */
+    cursor: grab; /* Indicates the card is draggable */
+}
+
+/* Animation for new card sliding in from left (desktop) */
+@keyframes slideInFromLeft {
+    0% {
+        transform: translateX(-100%) rotate(-5deg);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0) rotate(0deg);
+        opacity: 1;
+    }
+}
+
+.image-card.new-card {
+    animation: slideInFromLeft 0.25s ease-out forwards;
+    will-change: transform, opacity;
+}
+
+/* Simple fade-in animation for mobile */
+@keyframes fadeIn {
+    0% {
+        opacity: 0.4;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.image-card.new-card-mobile {
+    animation: fadeIn 0.2s ease-out forwards;
+    will-change: opacity;
+}
+
+.image-card:active {
+    cursor: grabbing; /* Changes cursor when actively dragging */
 }
 
 .image-card img {
@@ -90,23 +142,27 @@ body {
 }
 
 .image-card.swipe-left {
-    transform: translateX(-150%) rotate(-20deg);
+    transform: translateX(-350%) rotate(-15deg);
     opacity: 0;
+    transition: transform 0.5s ease-out, opacity 0.25s ease-out;
 }
 
 .image-card.swipe-right {
-    transform: translateX(150%) rotate(20deg);
+    transform: translateX(350%) rotate(15deg);
     opacity: 0;
+    transition: transform 0.5s ease-out, opacity 0.25s ease-out;
 }
 
 .image-card.swipe-up {
-    transform: translateY(-150%) rotate(5deg);
+    transform: translateY(-350%) rotate(5deg);
     opacity: 0;
+    transition: transform 0.5s ease-out, opacity 0.25s ease-out;
 }
 
 .image-card.swipe-down {
-    transform: translateY(150%) rotate(-5deg);
+    transform: translateY(350%) rotate(-5deg);
     opacity: 0;
+    transition: transform 0.5s ease-out, opacity 0.25s ease-out;
 }
 
 .action-hint {
@@ -149,18 +205,23 @@ body {
 
 .action-buttons {
     display: flex;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 20px;
+    justify-content: space-between;
+    margin: 15px 0 20px;
+    width: 100%;
 }
 
 .action-btn {
-    padding: 10px 20px;
+    flex: 1;
+    padding: 12px 5px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-weight: bold;
     transition: all 0.2s;
+    margin: 0 5px;
+    text-align: center;
+    font-size: 0.9rem;
+    white-space: nowrap;
 }
 
 #btn-left {
@@ -243,6 +304,62 @@ body {
     background-color: #ffa502;
 }
 
+/* Mobile-specific styles */
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+        max-width: 100%;
+    }
+    
+    /* Override desktop animation for mobile */
+    .image-card.new-card {
+        animation: none;
+    }
+    
+    .swipe-container {
+        min-height: 60vh;
+        margin: 10px 0 15px;
+    }
+    
+    .header {
+        margin-bottom: 10px;
+    }
+    
+    /* Hide action buttons on mobile as swiping is the primary interaction */
+    .action-buttons {
+        display: none;
+    }
+    
+    /* Hide the swipe legend on mobile to save space */
+    .swipe-legend {
+        display: none;
+    }
+    
+    /* Make sure the history link is prominent but compact */
+    .history-link {
+        display: block;
+        text-align: center;
+        margin: 8px auto;
+        padding: 6px 15px;
+        font-size: 0.9rem;
+    }
+    
+    /* Enhance swipe hints for better visibility on mobile */
+    .swipe-actions .action-hint {
+        font-size: 0.9rem;
+        padding: 5px;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        border-radius: 4px;
+    }
+    
+    /* Adjust modal for mobile */
+    .modal-content {
+        width: 90%;
+        margin: 20% auto;
+    }
+}
+
 /* Modal styles */
 .modal {
     display: none;