-
-
-
+
+
🌿 0
@@ -67,8 +64,10 @@
☀️
🤲
-
+
+
+
diff --git a/src/main.js b/src/main.js
index fae53ea..778560b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -306,15 +306,23 @@ function debounce(func, delay) {
function scaleGame() {
// visualViewport.height URL-bar को exclude करता है (mobile Chrome/Safari)
const availH = window.visualViewport?.height ?? window.innerHeight;
- // HUD की natural height include करें — total content height से scale निकालें
+ // HUD अब scale-independent है — canvas को बचा हुआ height मिलता है
const hudEl = document.getElementById('ui-overlay');
const hudH = hudEl ? hudEl.offsetHeight : 0;
- const totalH = 680 + hudH; // canvas (680) + HUD — दोनों #moksha-outer में हैं
- const s = Math.min(window.innerWidth / 600, availH / totalH) * 0.90;
- // transform #gameContainer पर नहीं — #moksha-outer पर (HUD + canvas एक साथ scale)
+ const canvasH = 680;
+ // touch controls की height भी घटाएँ — canvas उनके ऊपर fit हो
+ const touchEl = document.getElementById('touch-controls');
+ const touchH = (touchEl && touchEl.style.display !== 'none')
+ ? touchEl.offsetHeight : 0;
+ const s = Math.min(window.innerWidth / 600, (availH - hudH - touchH) / canvasH) * 0.90;
const outerEl = document.getElementById('moksha-outer');
- if (outerEl) outerEl.style.transform = `scale(${s})`;
- isScaleGameDone = true; // AudioManager readiness coordination
+ if (outerEl) {
+ outerEl.style.transform = `scale(${s})`;
+ outerEl.style.marginBottom = `${canvasH * (s - 1)}px`; // dead space collapse
+ }
+ // पुराना inline transform clear करें — अब #moksha-outer scale करता है
+ if (UI.container) UI.container.style.transform = '';
+ isScaleGameDone = true;
AM?.notifyReadiness?.();
}
scaleGame();
diff --git a/style.css b/style.css
index cfa9d44..8b32283 100644
--- a/style.css
+++ b/style.css
@@ -25,9 +25,10 @@ body {
display: flex;
flex-direction: column;
align-items: center;
- transform-origin: center center;
+ transform-origin: top center;
will-change: transform;
flex-shrink: 0;
+ overflow: hidden; /* scifi-scan-sweep जैसे absolute elements बाहर न जाएँ */
}
/* ====================== GAME CONTAINER ====================== */
@@ -115,17 +116,18 @@ canvas {
/* ====================== HUD / UI OVERLAY ====================== */
#ui-overlay {
- position: relative; /* अब absolute नहीं — normal flow में है */
- width: 600px; /* gameContainer की width से match */
+ position: relative;
+ width: 100%; /* पूरी viewport width — scale-independent */
+ max-width: 100vw;
box-sizing: border-box;
height: auto;
- background: rgba(6, 6, 10, 0.92);
- border: 1px solid rgba(255, 136, 0, 0.3); /* gameContainer border से visual connect */
- border-bottom: none; /* canvas top-border से seamless join */
- padding: 6px 16px 8px 16px;
+ background: rgba(6, 6, 10, 0.95);
+ border-bottom: 1px solid rgba(255, 136, 0, 0.4);
+ padding: 10px 20px 12px 20px; /* बड़ा padding — space है तो use करें */
display: flex;
flex-direction: column;
justify-content: space-evenly;
+ gap: 6px; /* rows के बीच space */
z-index: 7;
}
#ui-footer {
@@ -206,7 +208,7 @@ button.hud-icon-btn:hover {
/* हर stat-row अब केंद्र-संरेखित, flex-wrap के साथ (एक ही परिभाषा — DRY) */
.stat-row {
display: flex;
- gap: 9px;
+ gap: 10px;
align-items: center;
justify-content: center;
width: 100%;
@@ -230,18 +232,18 @@ button.hud-icon-btn:hover {
.stat-line {
font-family: 'Orbitron', sans-serif;
- font-size: 11.5px;
+ font-size: 13px; /* बड़ा font — HUD अब पूरी width पर है */
font-weight: 700;
letter-spacing: 0.5px;
- padding: 5px 9px 4px 11px;
+ padding: 6px 11px 5px 13px; /* थोड़ा बड़ा padding */
line-height: 1;
- border-radius: 3px;
+ border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, border-color 0.15s ease;
will-change: transform;
- box-shadow: inset 2px 0 0 0 currentColor; /* sci-fi tech-readout accent-bar */
+ box-shadow: inset 2px 0 0 0 currentColor;
}
/* ── HUD stat-line per-element colors ──
@@ -690,24 +692,21 @@ button.hud-icon-btn:hover {
/* ====================== TOUCH CONTROLS (mobile only) ====================== */
#touch-controls {
- position: fixed;
- bottom: 0;
+ position: relative; /* normal flow में — canvas के नीचे रहेगा */
display: none; /* JS से touch device detect होने पर flex बनेगा */
- will-change: opacity; /* GPU layer — compositor thread पर रखें */
- left: 0;
+ will-change: opacity;
width: 100%;
padding: 8px 10px;
padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* iPhone notch */
- background: rgba(0, 0, 0, 0.45);
- backdrop-filter: blur(6px);
- -webkit-backdrop-filter: blur(6px);
+ background: transparent;
box-sizing: border-box;
justify-content: space-between;
align-items: flex-end;
- z-index: 10; /* ui-overlay(7) के ऊपर, overlays(15+) के नीचे */
+ z-index: 10;
pointer-events: none; /* container transparent — buttons पर auto */
user-select: none;
-webkit-user-select: none;
+ flex-shrink: 0; /* scale से छोटा न हो */
}
/* ── Clusters ── */