From c291440a97bb09a7e2e2c775c3f5ffc6a913375a Mon Sep 17 00:00:00 2001
From: itsaygea <crazyaygea@gmail.com>
Date: Sat, 24 Jan 2026 07:50:22 -0700
Subject: [PATCH] Fix operator cards on mobile for long names

- Smaller font size (11px)
- Word wrap for long names
- Reduced padding
- Smaller image height on cards
---
 css/style.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/css/style.css b/css/style.css
index 6bce0cf..daa1ec9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -706,6 +706,24 @@
             .operator-select { grid-template-columns: repeat(4, 1fr); }
             .guide-grid { grid-template-columns: 1fr; }
 
+            /* Fix operator cards on mobile for long names */
+            .operator-card h4 {
+                font-size: 11px;
+                letter-spacing: 0;
+                word-wrap: break-word;
+                overflow-wrap: break-word;
+                hyphens: auto;
+                line-height: 1.3;
+            }
+
+            .operator-card-img {
+                height: 140px;
+            }
+
+            .operator-card-content {
+                padding: 12px 8px;
+            }
+
             .character-showcase {
                 padding-top: 35vh;
             }