fix(ui/search): resolve card display important block, alphabetical sorting duplicates, and sync scroll behavior

Author: Mudita-Singh

web-app/css/styles.css

@@ -1849,6 +1849,10 @@ body {
     color: #999fee;
 }
 
+.game-icon-blackjack {
+    color: #8b5cf6;
+}
+
 .game-icon-dice {
     color: #e04f4f;
 }
@@ -4469,6 +4473,8 @@ body {
     .btn-play {
         transform: none !important;
     }
+}
+
     /* Fix card content alignment */
 .project-card {
     text-align: left;
@@ -4513,43 +4519,38 @@ body {
 
 .projects-grid {
     display: grid !important;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 360px)) !important;
+    justify-content: center !important;
     gap: 1.2rem !important;
-    margin-top: 2rem !important;
+    margin: 0 auto 2rem !important;
     align-items: stretch !important;
 }
 
+.projects-grid > .project-card {
+    justify-self: center !important;
+    width: 100% !important;
+    max-width: 360px !important;
+}
+
 .project-card {
     min-height: 240px !important;
-    display: flex !important;
+    display: flex;
     flex-direction: column !important;
-    justify-content: space-between !important;
-    align-items: stretch !important;
+    justify-content: flex-start !important;
+    align-items: flex-start !important;
     padding: 1.75rem 1.5rem 1.5rem !important;
     border-radius: 28px !important;
     background: var(--surface-color) !important;
     border: 1px solid var(--accent-border) !important;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
     transition: transform 0.2s ease !important;
-}
-
-.project-card h3 {
-    margin-bottom: 0.75rem !important;
-    font-size: 1.15rem !important;
-    line-height: 1.35 !important;
-    color: var(--text-color) !important;
-}
-
-.project-card p {
-    margin-bottom: 1rem !important;
-    color: var(--text-secondary) !important;
+    margin: 0 auto !important;
     font-size: 0.95rem !important;
     line-height: 1.6 !important;
-    flex: 1 1 auto !important;
 }
 
 .project-card .btn-play {
-    margin-top: auto !important;
+    margin-top: 1rem !important;
     align-self: flex-start !important;
 }
 
@@ -4561,7 +4562,7 @@ body {
     border-radius: 22px !important;
     background: var(--accent-soft) !important;
     color: var(--accent-color) !important;
-    margin-bottom: 1.2rem !important;
+    margin: 0 auto 1.2rem !important;
     font-size: 2rem !important;
 }