diff --git a/index.html b/index.html
index f2aea3a..122bee5 100644
--- a/index.html
+++ b/index.html
@@ -336,10 +336,12 @@
 
         .tape-wound {
             position: absolute;
-            /* Center using top/left 50% with transform */
+            /* Center using top/left 50% with negative margins (Safari-safe) */
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
+            /* Use negative margins for centering instead of transform */
+            margin-left: calc(var(--tape-size, 72px) / -2);
+            margin-top: calc(var(--tape-size, 72px) / -2);
             border-radius: 50%;
             /* Darker tape color */
             background: linear-gradient(135deg, #1a1815 0%, #0f0d0a 50%, #050403 100%);
@@ -350,6 +352,9 @@
             /* Size controlled by JavaScript via CSS custom property */
             width: var(--tape-size, 72px);
             height: var(--tape-size, 72px);
+            /* Safari animation optimizations */
+            transform-origin: center center;
+            will-change: transform;
             /* Prevent text selection during drag */
             -webkit-user-select: none;
             -moz-user-select: none;
@@ -363,8 +368,8 @@
         }
 
         @keyframes spinTape {
-            from { transform: translate(-50%, -50%) rotate(0deg); }
-            to { transform: translate(-50%, -50%) rotate(360deg); }
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
         }
 
         .reel-inner {
@@ -384,11 +389,16 @@
             );
             box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
             z-index: 2;
-            /* Center the spool within the reel container */
+            /* Center the spool within the reel container (Safari-safe) */
             position: absolute;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
+            /* Use negative margins for centering instead of transform */
+            margin-left: -30px; /* half of 60px width */
+            margin-top: -30px;  /* half of 60px height */
+            /* Safari animation optimizations */
+            transform-origin: center center;
+            will-change: transform;
         }
 
         .reel-inner.spinning {
@@ -396,8 +406,8 @@
         }
 
         @keyframes spinSpool {
-            from { transform: translate(-50%, -50%) rotate(0deg); }
-            to { transform: translate(-50%, -50%) rotate(360deg); }
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
         }
 
         .reel-inner.spinning {