Fix stat box overflow: compact number formatting and responsive font sizing

static/css/style.css

@@ -529,7 +529,7 @@ input:focus, select:focus, textarea:focus {
 /* ---- Result stats ---- */
 .result-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 0.75rem;
   margin-bottom: 1.25rem;
 }
@@ -543,13 +543,17 @@ input:focus, select:focus, textarea:focus {
 }
 .stat-box:hover { border-color: var(--border-hover); }
 .stat-box .value {
-  font-size: 1.35rem;
+  font-size: clamp(0.85rem, 3.5vw, 1.35rem);
   font-weight: 700;
   background: var(--gradient-h);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-family: var(--font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
 }
 .stat-box .label {
   font-size: 0.7rem;

static/js/app.js

@@ -236,6 +236,12 @@ function readFileAsDataURL(file) {
   });
 }
 
+function formatCompact(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
+  if (n >= 10_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
+  return n.toLocaleString();
+}
+
 function showResult(data) {
   const card = document.getElementById('result-card');
   const statsEl = document.getElementById('result-stats');
@@ -243,8 +249,8 @@ function showResult(data) {
 
   statsEl.innerHTML = `
     <div class="stat-box"><div class="value">${data.statistics.changePercentage.toFixed(2)}%</div><div class="label">Changed</div></div>
-    <div class="stat-box"><div class="value">${data.statistics.changedPixels.toLocaleString()}</div><div class="label">Changed px</div></div>
-    <div class="stat-box"><div class="value">${data.statistics.totalPixels.toLocaleString()}</div><div class="label">Total px</div></div>
+    <div class="stat-box"><div class="value" title="${data.statistics.changedPixels.toLocaleString()}">${formatCompact(data.statistics.changedPixels)}</div><div class="label">Changed px</div></div>
+    <div class="stat-box"><div class="value" title="${data.statistics.totalPixels.toLocaleString()}">${formatCompact(data.statistics.totalPixels)}</div><div class="label">Total px</div></div>
     <div class="stat-box"><div class="value">${(data.regions || []).length}</div><div class="label">Regions</div></div>
   `;