feat: add delay before showing dialogs and enhance item card styles for better user feedback

frontend/vue-app/src/components/child/ChildView.vue

@@ -213,12 +213,16 @@ const triggerReward = (reward: RewardStatus) => {
 
   if (reward.redeeming) {
     dialogReward.value = reward
-    showCancelDialog.value = true
+    setTimeout(() => {
+      showCancelDialog.value = true
+    }, 150)
     return
   }
   if (reward.points_needed <= 0) {
     dialogReward.value = reward
-    showRewardDialog.value = true
+    setTimeout(() => {
+      showRewardDialog.value = true
+    }, 150)
   }
 }
 

frontend/vue-app/src/components/child/ParentView.vue

@@ -563,7 +563,9 @@ const triggerTask = (task: Task) => {
     showPendingRewardDialog.value = true
     return
   }
-  showConfirm.value = true
+  setTimeout(() => {
+    showConfirm.value = true
+  }, 150)
 }
 
 async function cancelRewardById(rewardId: string) {
@@ -629,7 +631,9 @@ const triggerReward = (reward: RewardStatus) => {
     return
   }
   selectedReward.value = reward
-  showRewardConfirm.value = true
+  setTimeout(() => {
+    showRewardConfirm.value = true
+  }, 150)
 }
 
 const confirmTriggerReward = async () => {

frontend/vue-app/src/components/shared/ScrollingList.vue

@@ -178,7 +178,11 @@ onBeforeUnmount(() => {
         <div
           v-for="item in items"
           :key="item.id"
-          :class="['item-card', props.getItemClass?.(item)]"
+          :class="[
+            'item-card',
+            props.getItemClass?.(item),
+            { 'item-ready': props.readyItemId === item.id },
+          ]"
           :ref="(el) => (itemRefs[item.id] = el)"
           @click.stop="handleClicked(item)"
         >
@@ -279,11 +283,25 @@ onBeforeUnmount(() => {
   align-items: center;
   cursor: pointer;
   user-select: none; /* Prevent image selection */
+  -webkit-tap-highlight-color: transparent; /* Suppress native mobile tap flash */
 }
 
-.item-card:hover {
+/* Only apply hover lift on true pointer (non-touch) devices */
-  transform: translateY(-4px);
+@media (hover: hover) {
-  box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12));
+  .item-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12));
+  }
+}
+
+/* Brief press feedback on touch devices */
+.item-card:active {
+  transform: scale(0.97);
+  transition: transform 0.08s ease;
+}
+
+.item-card.item-ready {
+  animation: ready-glow 0.25s ease forwards;
 }
 
 .edit-button {