minor ui fixes

frontend/src/ui/BuffBar.tsx

@@ -38,6 +38,9 @@ interface BuffButtonProps {
 const LONG_PRESS_MS = 400;
 const TOOLTIP_AUTO_HIDE_MS = 2500;
 
+/** When false, the green refill CTA in the hover tooltip is hidden (purchase still reachable from tap flow if any). */
+const SHOW_BUFF_REFILL_BUTTON_IN_TOOLTIP = false;
+
 const tooltipStyle: CSSProperties = {
   position: 'absolute',
   bottom: '110%',
@@ -239,27 +242,42 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
     onActivate();
   };
 
-  const style: CSSProperties = {
-    ...buttonBase,
+  const dimmedFaceOpacity = isDisabled ? (isOutOfCharges && !isOnCooldown ? 0.3 : 0.55) : 1;
+
+  const hitStyle: CSSProperties = {
+    position: 'relative',
     width: 44,
     height: 50,
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    transform: pressed ? 'scale(0.94)' : 'scale(1)',
+    transition: 'transform 80ms ease',
+  };
+
+  const activatorFaceStyle: CSSProperties = {
+    ...buttonBase,
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
     borderRadius: 10,
     borderColor: isActive ? meta.color : pressed ? '#fff' : 'rgba(255,255,255,0.2)',
-    opacity: isDisabled ? (isOutOfCharges && !isOnCooldown ? 0.3 : 0.55) : 1,
     boxShadow: isActive
       ? `0 0 12px ${meta.color}`
       : pressed
         ? `0 0 10px rgba(255,255,255,0.5), inset 0 0 12px ${meta.color}66`
         : 'none',
-    transform: pressed ? 'scale(0.94)' : 'scale(1)',
-    transition: 'transform 80ms ease, box-shadow 80ms ease, border-color 80ms ease, opacity 150ms ease',
-    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    opacity: dimmedFaceOpacity,
+    transition: 'opacity 150ms ease, box-shadow 80ms ease, border-color 80ms ease',
+    pointerEvents: 'none',
   };
 
   return (
     <button
       type="button"
-      style={style}
+      style={hitStyle}
       onClick={handleClick}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
@@ -269,6 +287,8 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
       aria-disabled={isDisabled}
       aria-label={`${meta.label}: ${meta.desc}`}
     >
+      {/* Dim only the activator (chrome + icon); tooltip is a sibling so it stays full opacity. */}
+      <div style={activatorFaceStyle}>
         {/* Inner wrapper clips cooldown overlay to button bounds */}
         <div
           style={{
@@ -322,6 +342,7 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
             {remaining}
           </span>
         )}
+      </div>
 
       {showTooltip && (
         <div style={tooltipStyle}>
@@ -344,7 +365,7 @@ function BuffButton({ buff, meta, charge, maxCharges, onActivate, onRefill, nowM
               {tr.refillsAt} {formatTimeHHMM(charge.periodEnd)}
             </div>
           )}
-          {isOutOfCharges && onRefill && (
+          {SHOW_BUFF_REFILL_BUTTON_IN_TOOLTIP && isOutOfCharges && onRefill && (
             <button
               type="button"
               onClick={(e) => {