Fix mobile layout - character images now visible at top

index.html

@@ -596,9 +596,24 @@
 
         /* Responsive */
         @media (max-width: 1024px) {
+            .character-showcase {
+                flex-direction: column !important;
+                min-height: auto;
+                padding-top: 40vh;
+            }
+
             .character-showcase-character {
+                position: absolute;
+                top: 0;
+                left: 50% !important;
+                right: auto !important;
+                transform: translateX(-50%);
                 width: 100%;
-                opacity: 0.5;
+                height: 40vh;
+                object-fit: cover;
+                object-position: top center;
+                opacity: 1;
+                z-index: 1;
             }
 
             .character-overlay {
@@ -606,9 +621,12 @@
             }
 
             .character-showcase-content {
+                position: relative;
+                z-index: 2;
                 width: 100%;
-                background: var(--bg-panel);
+                background: linear-gradient(to top, var(--bg-dark) 20%, var(--bg-panel) 100%);
                 margin: 0;
+                padding: 40px 30px;
             }
         }
 
@@ -619,6 +637,22 @@
             .operator-grid { grid-template-columns: repeat(3, 1fr); }
             .operator-select { grid-template-columns: repeat(4, 1fr); }
             .guide-grid { grid-template-columns: 1fr; }
+
+            .character-showcase {
+                padding-top: 35vh;
+            }
+
+            .character-showcase-character {
+                height: 35vh;
+            }
+
+            .character-showcase-content {
+                padding: 30px 20px;
+            }
+
+            .character-showcase-content h2 {
+                font-size: 28px;
+            }
         }
 
         /* Animations */