Add pause/resume controls and score popup

index.html

@@ -82,6 +82,25 @@
                 font-size: 13px;
                 color: var(--muted);
             }
+            .pause-btn {
+                background: rgba(34, 211, 238, 0.14);
+                color: #67e8f9;
+                border: 1px solid rgba(34, 211, 238, 0.4);
+                border-radius: 10px;
+                padding: 8px 12px;
+                font-weight: 700;
+                cursor: pointer;
+                transition:
+                    transform 120ms ease,
+                    filter 120ms ease;
+            }
+            .pause-btn:hover {
+                filter: brightness(1.05);
+                transform: translateY(-1px);
+            }
+            .pause-btn:active {
+                transform: translateY(0);
+            }
             header .pill {
                 padding: 6px 10px;
                 border-radius: 8px;
@@ -159,6 +178,25 @@
                 border: 1px solid rgba(255, 255, 255, 0.12);
                 display: inline-block;
             }
+            .pause-overlay {
+                position: absolute;
+                top: 12px;
+                left: 50%;
+                transform: translateX(-50%);
+                background: rgba(255, 255, 255, 0.08);
+                border: 1px solid rgba(148, 163, 184, 0.3);
+                color: #e2e8f0;
+                padding: 8px 14px;
+                border-radius: 12px;
+                font-weight: 800;
+                letter-spacing: 0.5px;
+                opacity: 0;
+                pointer-events: none;
+                transition: opacity 160ms ease;
+            }
+            .pause-overlay.visible {
+                opacity: 1;
+            }
             .game-over {
                 position: absolute;
                 inset: 0;
@@ -256,9 +294,11 @@
                     <span class="pill">Physics</span>
                     <span>Link same-colored balls to clear them.</span>
                 </div>
+                <button class="pause-btn" id="pause-btn">Pause</button>
             </header>
             <div id="scene-wrapper">
                 <div class="legend" id="palette-legend"></div>
+                <div class="pause-overlay" id="pause-overlay">Paused</div>
                 <div class="game-over" id="game-over">
                     <div class="game-over__card">
                         <div class="title">Game Over</div>
@@ -295,7 +335,7 @@
                 than the minimum vanish; chains with enough balls clear all
                 linked balls (score: 10 × length²). If the entry gets blocked
                 and a new ball cannot drop in, the run ends—restart to try
-                again.
+                again. Pause/resume with the Pause button or Escape key.
             </div>
         </div>