Made changes to CSS and merged together.

web/vue-app/src/components/task/ChildTaskList.vue

@@ -160,7 +160,7 @@ onBeforeUnmount(() => {
             class="task-points"
             :class="{ 'good-points': task.is_good, 'bad-points': !task.is_good }"
           >
-            {{ task.is_good ? task.points : -task.points }} pts
+            {{ task.is_good ? task.points : -task.points }} Points
           </div>
         </div>
       </div>
@@ -233,10 +233,6 @@ onBeforeUnmount(() => {
   padding: 0.5rem 0;
 }
 
-/* Fallback for browsers that don't support flex gap */
-.task-card + .task-card {
-  margin-left: 0.75rem;
-}
 .task-card {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 8px;
@@ -301,8 +297,13 @@ onBeforeUnmount(() => {
 }
 
 .task-points {
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 1rem;
+  font-weight: 900;
+  text-shadow:
+    -1px -1px 0 #1a3d1f,
+    1px -1px 0 #1a3d1f,
+    -1px 1px 0 #1a3d1f,
+    1px 1px 0 #1a3d1f;
 }
 
 .task-points.good-points {