📱 Touch Controls — Equal Spacing Fix | समान-अंतर लेआउट

Project: मोक्ष (MOKSHA) — Vedic Karma Browser Game

Build: v0.0.9+

Type: UI / Layout Fix

Date: 2026-08-17

---

समस्या क्या थी? (What was broken?)

Mobile पर touch control buttons का spacing unequal था।

तीनों clusters — Left (◀▶), Center (🐚🪔📜⏸), Right (ॐ🙏🙌) — अलग-अलग hardcoded widths की वजह से एक-दूसरे से बेमेल दिख रहे थे।

Buttons भी visually बड़े थे जिससे पूरा layout cramped लग रहा था।

Root cause — style.css में:

Cluster	पुरानी width	समस्या
.touch-cluster-left	width: 136px	hardcoded — shrink नहीं होती
.touch-cluster-center	max-width: 120px	बाकी से छोटी रहती थी
.touch-cluster-right	width: 102px	सबसे छोटी — right-aligned
#touch-controls	justify-content: space-between	edge पर push — center gap बड़ा

---

क्या बदला? (What changed?)

style.css

सभी clusters को flex: 1 से equal width दी।

Hardcoded width / max-width हटाए।

justify-content: space-evenly से तीनों clusters में uniform gap।

Button sizes clamp() से proportionally घटाई।

---

Before / After

Cluster widths

/* ── BEFORE ── */
.touch-cluster-left  { width: 136px; justify-content: flex-start; }
.touch-cluster-center { max-width: 120px; }
.touch-cluster-right  { width: 102px;  align-items: flex-end; }

/* ── AFTER ── */
.touch-cluster-left  { flex: 1; justify-content: center; }
.touch-cluster-center { flex: 1; /* max-width हटाया */ }
.touch-cluster-right  { flex: 1; align-items: center; }

Container justify

/* ── BEFORE ── */
#touch-controls {
    justify-content: space-between;
    padding: 12px 10px;
}

/* ── AFTER ── */
#touch-controls {
    justify-content: space-evenly;
    padding: 10px 6px;
}

Button sizes (clamp values घटाए)

/* ── BEFORE ── */
.touch-btn-xl      { width: clamp(68px, 18vw, 96px);  font-size: clamp(24px, 5vw,   32px); }
.touch-btn-md      { width: clamp(52px, 13vw, 72px);  font-size: clamp(22px, 4.5vw, 28px); }
.touch-btn-sm      { width: clamp(46px, 12vw, 64px);  font-size: clamp(18px, 4vw,   24px); }
.touch-btn-primary { width: clamp(82px, 22vw, 110px); font-size: clamp(30px, 6.5vw, 40px); }

/* ── AFTER ── */
.touch-btn-xl      { width: clamp(54px, 14vw, 72px);  font-size: clamp(20px, 4vw,   26px); }
.touch-btn-md      { width: clamp(44px, 11vw, 58px);  font-size: clamp(18px, 3.5vw, 22px); }
.touch-btn-sm      { width: clamp(38px, 10vw, 50px);  font-size: clamp(15px, 3.2vw, 19px); }
.touch-btn-primary { width: clamp(66px, 17vw, 84px);  font-size: clamp(26px, 5.5vw, 34px); }

---

Files Changed | बदली गई फ़ाइलें

File	Change
style.css	Cluster widths → flex: 1; button sizes कम; space-evenly

---

Result | परिणाम

• ✅ तीनों clusters अब बराबर width लेते हैं
• ✅ Buttons proportionally छोटे — cramped नहीं
• ✅ space-evenly से uniform gap — edges पर भी
• ✅ HTML / JS — कोई बदलाव नहीं
• ✅ Desktop / non-touch devices — unaffected

---

Human-designed, AI-assisted. सभी शास्त्रीय और रचनात्मक निर्णय Weired Codes द्वारा।

---

🎮 itch.io  | 
💻 GitHub  | 
🐘 Mastodon  | 
𝕏 X