Only apply hover effects on devices with a true pointer

Prior to this change, the "stuck" button was staying stuck (ha!) with
styling as if hovered even after the user was done pressing it.

diff --git a/letterrip/letterrip.css b/letterrip/letterrip.css
index 248f902503fb6afd105dd5b809b9c4ef46cbefc7..09243eabfc9b18bc099915a04b905f8d2f7f0936 100644 (file)
--- a/letterrip/letterrip.css
+++ b/letterrip/letterrip.css
@@ -45,8 +45,15 @@
   color: #333;
 }
 
-.controls button.stuck-btn:hover {
-  background: #e0e0e0;
+/* Only apply hover effects on devices with a true pointer, avoiding
+   sticky :hover on mobile where there's no "unhover" event. */
+@media (hover: hover) {
+  .controls button.stuck-btn:hover {
+    background: #e0e0e0;
+  }
+  .controls button.stuck-active:hover {
+    background: #cf6d13;
+  }
 }
 
 .controls button.stuck-active {