From 883212b5e936b53b3914f5b1c4eea75598c896bc Mon Sep 17 00:00:00 2001
From: Spicy_Marinara <mgrabower97@gmail.com>
Date: Sun, 2 Nov 2025 11:07:46 +0100
Subject: [PATCH] Add comprehensive mobile font-size overrides

- Added clamp() to all vw-based font sizes for mobile compatibility
- Fixed collapse toggle button text size on mobile
- Fixed top position panel titles and stats text sizes
- Fixed panel header, loading indicator, and dice display sizes
- Applied overrides for both @media (max-width: 768px) and (max-width: 1000px)
- Ensures all text is readable on mobile devices without being too small
- Font sizes now scale responsively with minimum readable sizes
---
 style.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)

diff --git a/style.css b/style.css
index 76c127e..77fcec8 100644
--- a/style.css
+++ b/style.css
@@ -6373,5 +6373,133 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     .rpg-main-quest-actions button {
         width: 100%;
     }
+
+    /* ========================================
+       MOBILE FONT SIZE OVERRIDES
+       Fix all vw-based font sizes for mobile readability
+       ======================================== */
+
+    /* Collapse toggle button */
+    .rpg-collapse-toggle {
+        font-size: clamp(16px, 3vw, 20px) !important;
+    }
+
+    /* Top position panel titles */
+    .rpg-panel.rpg-position-top .rpg-stats-title {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-mood {
+        font-size: clamp(10px, 2vw, 13px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stats-title {
+        font-size: clamp(10px, 2vw, 13px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stat-label {
+        font-size: clamp(8px, 1.7vw, 11px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stat-value {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stat-btn {
+        font-size: clamp(10px, 2.2vw, 14px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-info-content,
+    .rpg-panel.rpg-position-top .rpg-thoughts-content {
+        font-size: clamp(10px, 2.2vw, 14px) !important;
+    }
+
+    /* Panel header */
+    .rpg-panel-header h3 {
+        font-size: clamp(14px, 3.4vw, 18px) !important;
+    }
+
+    /* Loading indicator */
+    .rpg-loading {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    /* Dice display */
+    .rpg-dice-display {
+        font-size: clamp(10px, 2vw, 13px) !important;
+    }
+
+    .rpg-dice-display i {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    .rpg-clear-dice-btn {
+        font-size: clamp(14px, 3vw, 18px) !important;
+    }
 }
 
+/* ========================================
+   MOBILE FONT SIZE OVERRIDES (ALL SCREENS)
+   Apply to screens up to 1000px
+   ======================================== */
+@media (max-width: 1000px) {
+    /* Collapse toggle button */
+    .rpg-collapse-toggle {
+        font-size: clamp(16px, 3vw, 20px) !important;
+    }
+
+    /* Top position panel titles */
+    .rpg-panel.rpg-position-top .rpg-stats-title {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-mood {
+        font-size: clamp(10px, 2vw, 13px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stats-title {
+        font-size: clamp(10px, 2vw, 13px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stat-label {
+        font-size: clamp(8px, 1.7vw, 11px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stat-value {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-classic-stat-btn {
+        font-size: clamp(10px, 2.2vw, 14px) !important;
+    }
+
+    .rpg-panel.rpg-position-top .rpg-info-content,
+    .rpg-panel.rpg-position-top .rpg-thoughts-content {
+        font-size: clamp(10px, 2.2vw, 14px) !important;
+    }
+
+    /* Panel header */
+    .rpg-panel-header h3 {
+        font-size: clamp(14px, 3.4vw, 18px) !important;
+    }
+
+    /* Loading indicator */
+    .rpg-loading {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    /* Dice display */
+    .rpg-dice-display {
+        font-size: clamp(10px, 2vw, 13px) !important;
+    }
+
+    .rpg-dice-display i {
+        font-size: clamp(12px, 2.6vw, 16px) !important;
+    }
+
+    .rpg-clear-dice-btn {
+        font-size: clamp(14px, 3vw, 18px) !important;
+    }
+}
+
+