From e0580d85a9f61587d0a881394d1498ab7661e8dc Mon Sep 17 00:00:00 2001
From: itsaygea <crazyaygea@gmail.com>
Date: Sat, 24 Jan 2026 07:36:56 -0700
Subject: [PATCH] Fix mobile layout - character images now visible at top

---
 index.html | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 20579d4..c690b32 100644
--- a/index.html
+++ b/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 */