diff --git a/client/app.js b/client/app.js
index a42cc49..3f3ad1f 100644
--- a/client/app.js
+++ b/client/app.js
@@ -3138,6 +3138,24 @@ class GolfGame {
`+${moreCount} more`;
}
this.activeRulesBar.classList.remove('hidden');
+
+ // Update mobile rules indicator
+ const mobileRulesBtn = document.getElementById('mobile-rules-btn');
+ const mobileRulesIcon = document.getElementById('mobile-rules-icon');
+ const mobileRulesContent = document.getElementById('mobile-rules-content');
+ if (mobileRulesBtn && mobileRulesIcon && mobileRulesContent) {
+ const isHouseRules = rules.length > 0;
+ mobileRulesIcon.textContent = isHouseRules ? '!' : 'S';
+ mobileRulesBtn.classList.toggle('house-rules', isHouseRules);
+
+ if (!isHouseRules) {
+ mobileRulesContent.innerHTML = '
Hole 1/9
+
diff --git a/client/style.css b/client/style.css
index 71199ef..cfdaddb 100644
--- a/client/style.css
+++ b/client/style.css
@@ -5464,6 +5464,59 @@ body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn.active {
box-shadow: 0 2px 12px rgba(244, 164, 96, 0.4);
}
+/* --- Mobile: Rules indicator button --- */
+body.mobile-portrait #mobile-bottom-bar .mobile-rules-btn {
+ padding: 4px 9px;
+ font-size: 0.77rem;
+ font-weight: 700;
+ min-width: unset;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ color: rgba(255, 255, 255, 0.7);
+}
+
+body.mobile-portrait #mobile-bottom-bar .mobile-rules-btn.house-rules {
+ background: rgba(244, 164, 96, 0.25);
+ border-color: rgba(244, 164, 96, 0.4);
+ color: #f4a460;
+}
+
+/* --- Mobile: Rules drawer content --- */
+#rules-drawer {
+ display: none;
+}
+
+body.mobile-portrait #rules-drawer {
+ display: block;
+}
+
+body.mobile-portrait .rules-drawer-panel .mobile-rules-content-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-top: 8px;
+}
+
+body.mobile-portrait .rules-drawer-panel .rule-tag {
+ background: rgba(244, 164, 96, 0.3);
+ color: #f4a460;
+ padding: 4px 10px;
+ border-radius: 4px;
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+body.mobile-portrait .rules-drawer-panel .rule-tag.standard {
+ background: rgba(255, 255, 255, 0.15);
+ color: rgba(255, 255, 255, 0.7);
+}
+
+body.mobile-portrait .rules-drawer-panel .rule-tag.unranked {
+ background: rgba(220, 80, 80, 0.3);
+ color: #f08080;
+ border: 1px solid rgba(220, 80, 80, 0.4);
+}
+
/* --- Mobile: Non-game screens --- */
body.mobile-portrait #lobby-screen {
padding: 55px 12px 15px;