feat(hints): visualize completed rows and columns

src/components/GameBoard.vue

@@ -247,10 +247,10 @@ watch(() => store.size, async () => {
       <div class="corner-spacer"></div>
       
       <!-- Column Hints -->
-      <Hints :hints="colHints" orientation="col" :size="gridCols" :activeIndex="activeCol" />
+      <Hints :hints="colHints" orientation="col" :size="gridCols" :activeIndex="activeCol" :completedLines="store.completedCols" />
       
       <!-- Row Hints -->
-      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="gridRows" :activeIndex="activeRow" />
+      <Hints ref="rowHintsRef" :hints="rowHints" orientation="row" :size="gridRows" :activeIndex="activeRow" :completedLines="store.completedRows" />
       
       <!-- Grid -->
       <div 

src/components/Hints.vue

@@ -16,6 +16,10 @@ defineProps({
   activeIndex: {
     type: Number,
     default: null
+  },
+  completedLines: {
+    type: Array,
+    default: () => []
   }
 });
 </script>
@@ -34,6 +38,7 @@ defineProps({
       class="hint-group"
       :class="{
         'is-active': index === activeIndex,
+        'is-completed': completedLines[index],
         'guide-right': orientation === 'col' && (index + 1) % 5 === 0 && index !== size - 1,
         'guide-bottom': orientation === 'row' && (index + 1) % 5 === 0 && index !== size - 1
       }"
@@ -81,6 +86,15 @@ defineProps({
   height: 100%;
 }
 
+.hint-group.is-completed {
+  opacity: 0.5;
+  background-color: var(--hint-bg);
+}
+
+.hint-group.is-completed .hint-num {
+  color: var(--text-muted);
+}
+
 .col .hint-group {
   flex-direction: column;
   padding: 4px 2px;