From c7c182359477e09a2821aeac8c975f386eff982e Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sun, 15 Jun 2025 14:31:46 +0200
Subject: [PATCH] fix clock hand centering

---
 clock.js  | 6 +++---
 style.css | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/clock.js b/clock.js
index 8ae9e7b..25f21ba 100644
--- a/clock.js
+++ b/clock.js
@@ -134,14 +134,14 @@
         el.removeEventListener('transitionend', handle);
         // Snap back without animation
         el.style.transition = 'none';
-        el.style.transform = `rotate(${angle}deg)`;
+        el.style.transform = `translateX(-50%) rotate(${angle}deg)`;
         void el.offsetWidth;
         el.style.transition = '';
       };
       el.addEventListener('transitionend', handle, { once: true });
-      el.style.transform = `rotate(${target}deg)`;
+      el.style.transform = `translateX(-50%) rotate(${target}deg)`;
     } else {
-      el.style.transform = `rotate(${angle}deg)`;
+      el.style.transform = `translateX(-50%) rotate(${angle}deg)`;
     }
 
     lastAngles[id] = angle;
diff --git a/style.css b/style.css
index 6815a6e..2bed821 100644
--- a/style.css
+++ b/style.css
@@ -474,7 +474,8 @@ body.fullscreen-clock .clock-label {
   position: absolute;
   bottom: 50%;
   left: 50%;
-  transform-origin: bottom;
+  transform-origin: bottom center;
+  transform: translateX(-50%);
   transition: transform 0.5s ease-in-out;
   border-radius: 2px;
   z-index: 1;