diff --git a/frontend/src/routes/word/+page.svelte b/frontend/src/routes/word/+page.svelte
index 5cdfdb2..5e9dabc 100644
--- a/frontend/src/routes/word/+page.svelte
+++ b/frontend/src/routes/word/+page.svelte
@@ -125,13 +125,18 @@
   }
   .pron-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
   .pron { font-family: 'Newsreader', Georgia, serif; font-size: 23px; color: #8a8478; }
+  /* Always filled blue — a little warmth of colour on a laid-back page. Hover is gated to
+     true pointer devices so it can't "stick" lit after a tap on a phone, and the tap
+     highlight box is suppressed (that grey/blue flash mobile draws on tap). */
   .listen {
     display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit;
-    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: #3E6E97;
-    background: transparent; border: 1px solid #3E6E97; border-radius: 999px; padding: 7px 15px;
-    transition: background 0.15s ease, color 0.15s ease;
+    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: #fdf7ec;
+    background: #3E6E97; border: 1px solid #3E6E97; border-radius: 999px; padding: 7px 15px;
+    transition: background 0.15s ease;
+    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
   }
-  .listen:hover { background: #3E6E97; color: #fdf7ec; }
+  @media (hover: hover) { .listen:hover { background: #34608a; border-color: #34608a; } }
+  .listen:active { background: #2c557d; border-color: #2c557d; }
 
   .definition {
     position: relative; font-family: 'Newsreader', Georgia, serif; font-weight: 400;