From c4053ad8b7d14aa636b4ac9e14c3d332f085fe94 Mon Sep 17 00:00:00 2001
From: Daddy32 <daddy@autistici.org>
Date: Tue, 16 Dec 2025 20:04:49 +0100
Subject: [PATCH] feat: Make pause button width consistent and rearrange HUD

Makes the pause button width consistent across 'Pause' and 'Resume' states to prevent layout shifts. Uses 'rem' units for responsive scaling.

Also rearranges the HUD elements for a more logical grouping.
---
 index.html | 31 +++++++++++++++----------------
 styles.css |  2 ++
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index ef8270c..09b6258 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,6 @@
             <header>
                 <h1>Physilinks</h1>
                 <div class="meta">
-                    <span class="pill">Physics</span>
                     <span>Link same-colored balls to clear them.</span>
                 </div>
                 <button class="pause-btn" id="pause-btn">Pause</button>
@@ -48,10 +47,21 @@
             </div>
             <div class="hud-bar">
                 <div class="card">
-                    <strong>Spawn</strong> <span id="spawn-rate"></span>
+                    <strong>Scene</strong>
+                    <select id="scene-select" class="selector"></select>
+                </div>
+                <div class="card progress-card">
+                    <strong>Goal</strong>
+                    <span id="goal-label">—</span>
+                    <div class="progress">
+                        <div class="progress__bar" id="goal-progress"></div>
+                    </div>
                 </div>
                 <div class="card">
-                    <strong>Min link</strong> <span id="min-link"></span>
+                    <strong>Score</strong> <span id="score">0</span>
+                </div>
+                <div class="card">
+                    <strong>High score</strong> <span id="high-score">0</span>
                 </div>
                 <div class="card">
                     <strong>Active color</strong>
@@ -62,21 +72,10 @@
                     <span id="chain-length">0</span>
                 </div>
                 <div class="card">
-                    <strong>Score</strong> <span id="score">0</span>
+                    <strong>Spawn</strong> <span id="spawn-rate"></span>
                 </div>
                 <div class="card">
-                    <strong>High score</strong> <span id="high-score">0</span>
-                </div>
-                <div class="card progress-card">
-                    <strong>Goal</strong>
-                    <span id="goal-label">—</span>
-                    <div class="progress">
-                        <div class="progress__bar" id="goal-progress"></div>
-                    </div>
-                </div>
-                <div class="card">
-                    <strong>Scene</strong>
-                    <select id="scene-select" class="selector"></select>
+                    <strong>Min link</strong> <span id="min-link"></span>
                 </div>
             </div>
             <div class="instructions">
diff --git a/styles.css b/styles.css
index 34b9a44..c6545bd 100644
--- a/styles.css
+++ b/styles.css
@@ -88,6 +88,8 @@ header .pill {
     padding: 8px 12px;
     font-weight: 700;
     cursor: pointer;
+    width: 6rem;
+    text-align: center;
     transition:
         transform 120ms ease,
         filter 120ms ease;