...

Components/Inputs/CooldownButtonComponent.razor

@@ -9,9 +9,7 @@
     </button>
     @if (_isCooldown)
     {
-        <div class="cooldown-overlay"
-             style="mask-image: conic-gradient(transparent 0deg, transparent @(_elapsedAngle)deg, #000 @(_elapsedAngle)deg, #000 360deg);
-                    -webkit-mask-image: conic-gradient(transparent 0deg, transparent @(_elapsedAngle)deg, #000 @(_elapsedAngle)deg, #000 360deg);">
+        <div class="cooldown-overlay" style="--angle: @(_elapsedAngle)deg">
             <span class="cooldown-label">@_remainingSeconds</span>
         </div>
     }
@@ -50,7 +48,6 @@
         transform: scale(0.97);
     }
     .cooldown-btn:disabled {
-        opacity: 0;
         cursor: default;
     }
     .cooldown-btn-text {
@@ -60,19 +57,29 @@
         position: absolute;
         inset: 0;
         border-radius: 12px;
-        background: rgba(22, 22, 24, 0.82);
         display: flex;
         align-items: center;
         justify-content: center;
         pointer-events: none;
         user-select: none;
     }
+    .cooldown-overlay::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: rgba(22, 22, 24, 0.45);
+        mask-image: conic-gradient(transparent 0deg, transparent var(--angle), #000 var(--angle), #000 360deg);
+        -webkit-mask-image: conic-gradient(transparent 0deg, transparent var(--angle), #000 var(--angle), #000 360deg);
+    }
     .cooldown-label {
         font-size: 1.6rem;
         font-weight: 900;
         color: #999;
         text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
         pointer-events: none;
+        position: relative;
+        z-index: 1;
     }
 </style>