Rearrange calculator results layout (#99)

- add reusable formatter to display deploy time with approximate prefix
- show sub-minute deploy times in seconds and longer durations in minutes:seconds
- update tooltip text to reflect the new formatting
- rearrange the calculator results so final damage is highlighted first, with time, rank, and influence in a responsive row using compact styling

------
[Codex Task](https://chatgpt.com/codex/tasks/task_e_6946f6a1224883258e8317a22966d12c)

Author: rodrigogiraoserrao

erepublik-air-damage-calculator.html

@@ -46,7 +46,7 @@
         .result-display {
             display: flex;
             flex-direction: column;
-            gap: 0.5rem;
+            gap: 0.75rem;
         }
 
         .result-value {
@@ -55,6 +55,23 @@
             letter-spacing: 0.01em;
         }
 
+        .result-metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: clamp(0.75rem, 2vw, 1.25rem);
+            align-items: start;
+        }
+
+        .result-value--compact {
+            font-size: clamp(1.4rem, 3vw, 1.85rem);
+        }
+
+        .result-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+
         .result-with-tooltip {
             display: inline-flex;
             align-items: center;
@@ -197,24 +214,32 @@ <h1>eRepublik Air Damage Calculator</h1>
                     <p class="helper-text">final damage</p>
                 </div>
                 <p class="helper-text" id="breakdown"></p>
-                <div class="result-with-tooltip" id="influence-wrapper">
-                    <div class="result-value tooltip-target" id="influence" tabindex="0">0</div>
-                    <span class="tooltip-icon" aria-hidden="true">?</span>
-                    <p class="helper-text">influence</p>
-                </div>
-                <p class="helper-text" id="influence-breakdown"></p>
-                <div class="result-with-tooltip" id="time-wrapper">
-                    <div class="result-value tooltip-target" id="time-estimate" tabindex="0">≈0s</div>
-                    <span class="tooltip-icon" aria-hidden="true">?</span>
-                    <p class="helper-text">time to deploy</p>
-                </div>
-                <p class="helper-text" id="time-breakdown"></p>
-                <div class="result-with-tooltip" id="rank-wrapper">
-                    <div class="result-value tooltip-target" id="rank-value" tabindex="0">0</div>
-                    <span class="tooltip-icon" aria-hidden="true">?</span>
-                    <p class="helper-text">rank points</p>
+                <div class="result-metrics-grid">
+                    <div class="result-group">
+                        <div class="result-with-tooltip result-with-tooltip--compact" id="time-wrapper">
+                            <div class="result-value result-value--compact tooltip-target" id="time-estimate" tabindex="0">≈0s</div>
+                            <span class="tooltip-icon" aria-hidden="true">?</span>
+                            <p class="helper-text">time to deploy</p>
+                        </div>
+                        <p class="helper-text" id="time-breakdown"></p>
+                    </div>
+                    <div class="result-group">
+                        <div class="result-with-tooltip result-with-tooltip--compact" id="rank-wrapper">
+                            <div class="result-value result-value--compact tooltip-target" id="rank-value" tabindex="0">0</div>
+                            <span class="tooltip-icon" aria-hidden="true">?</span>
+                            <p class="helper-text">rank points</p>
+                        </div>
+                        <p class="helper-text" id="rank-breakdown"></p>
+                    </div>
+                    <div class="result-group">
+                        <div class="result-with-tooltip result-with-tooltip--compact" id="influence-wrapper">
+                            <div class="result-value result-value--compact tooltip-target" id="influence" tabindex="0">0</div>
+                            <span class="tooltip-icon" aria-hidden="true">?</span>
+                            <p class="helper-text">influence</p>
+                        </div>
+                        <p class="helper-text" id="influence-breakdown"></p>
+                    </div>
                 </div>
-                <p class="helper-text" id="rank-breakdown"></p>
             </div>
         </section>
 
@@ -593,6 +618,17 @@ <h1>eRepublik Air Damage Calculator</h1>
                 return Number.isFinite(value) ? value.toLocaleString(undefined, { maximumFractionDigits: 2 }) : '0';
             };
 
+            const formatDeployTime = (seconds) => {
+                const wholeSeconds = Math.max(0, Math.ceil(seconds));
+                if (wholeSeconds < 60) {
+                    return `≈${formatNumber(wholeSeconds)}s`;
+                }
+
+                const minutes = Math.floor(wholeSeconds / 60);
+                const remainingSeconds = String(wholeSeconds % 60).padStart(2, '0');
+                return `≈${formatNumber(minutes)}m:${remainingSeconds}s`;
+            };
+
             const clampNumber = (value, min, max) => {
                 if (Number.isNaN(value)) return min;
                 if (typeof max === 'number') {
@@ -708,12 +744,12 @@ <h1>eRepublik Air Damage Calculator</h1>
 
                 const timeSeconds = hits / actualHitsPerSecond;
                 const timeSecondsRounded = Math.ceil(timeSeconds);
-                timeEstimate.textContent = `≈${formatNumber(timeSecondsRounded)}s`;
+                timeEstimate.textContent = formatDeployTime(timeSecondsRounded);
                 const timeFormula = [
                     'Time = ceil(hits ÷ (hits per second × accelerator))',
                     `= ceil(${formatNumber(hits)} ÷ (${formatNumber(baseHitsPerSecond)} × ${formatNumber(damageAcceleratorMultiplier)}))`,
                     `= ceil(${formatNumber(timeSeconds)} seconds)`,
-                    `= ${formatNumber(timeSecondsRounded)} seconds`
+                    `= ${formatDeployTime(timeSecondsRounded)}`
                 ].join('\n');
 
                 const rankFromDamage = result * 0.1;