Add timer ring synced to dementor progress

app.js

@@ -701,6 +701,7 @@
         const step = 0.02; 
         if (game.timeTurnerCharges > 0) speed = 600; 
 
+        updateDementorVisuals();
         dementor.interval = setInterval(() => {
             if (!game.active) return;
             if (dementor.progress < 1) {
@@ -724,6 +725,8 @@
         overlay.style.setProperty('--circle-blur', `${blur}px`);
         overlay.style.setProperty('--vignette-strength', vignette.toFixed(2));
         overlay.style.background = buildDementorBackground(p, size, darkness, vignette);
+        const ring = document.getElementById('timer-ring');
+        if (ring) ring.style.setProperty('--timer-progress', p.toFixed(3));
         document.documentElement.style.setProperty('--focus-glow', glow.toFixed(2));
     }
     
@@ -736,6 +739,8 @@
         overlay.style.setProperty('--circle-blur', '0px');
         overlay.style.setProperty('--vignette-strength', '0.18');
         overlay.style.background = 'transparent';
+        const ring = document.getElementById('timer-ring');
+        if (ring) ring.style.setProperty('--timer-progress', '0');
         document.documentElement.style.setProperty('--focus-glow', '0');
         saveData();
     }

index.html

@@ -64,6 +64,7 @@
 <div id="snitch-layer"></div>
 
 <div class="card-container skin-default" id="main-card">
+    <div id="timer-ring"></div>
     <div class="header-info">
         <button class="shop-btn" onclick="openShop()" title="Student Trunk">🎒</button>
         <div class="currency-badge">

style.css

@@ -238,6 +238,21 @@
             display: flex; flex-direction: column; transition: background 0.3s, border-color 0.3s;
         }
 
+        #timer-ring {
+            position: absolute;
+            inset: -6px;
+            pointer-events: none;
+            border-radius: 14px;
+            z-index: 90;
+            --timer-progress: 0;
+            --timer-fill: #d4af37;
+            background: conic-gradient(var(--timer-fill) calc(var(--timer-progress) * 1turn), rgba(255,255,255,0.08) 0);
+            mask: radial-gradient(circle at 50% 50%, transparent calc(100% - 8px), #000 calc(100% - 6px));
+            -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(100% - 8px), #000 calc(100% - 6px));
+            opacity: 0.9;
+            box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
+        }
+
         .header-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Cinzel', serif; color: var(--burgundy); font-size: 0.9rem; font-weight: bold; }
         #xp-text {
             display: inline-block;