diff --git a/packages/client/src/lib/CaptureTally.svelte b/packages/client/src/lib/CaptureTally.svelte
index abb4033..09bc5f0 100644
--- a/packages/client/src/lib/CaptureTally.svelte
+++ b/packages/client/src/lib/CaptureTally.svelte
@@ -75,7 +75,8 @@
   }
   .pieces { flex: 1; font-size: 20px; line-height: 1; }
   .g-w { color: #fafafa; }
-  .g-b { color: #1a1a1a; }
+  /* Dark pieces need a light outline to read on the dark panel background. */
+  .g-b { color: #1a1a1a; text-shadow: 0 0 2px var(--text), 0 0 2px var(--text); }
   .n {
     font-family: ui-monospace, monospace;
     font-size: 13px;
diff --git a/packages/client/src/lib/Game.svelte b/packages/client/src/lib/Game.svelte
index fd67ca1..0a6bd4e 100644
--- a/packages/client/src/lib/Game.svelte
+++ b/packages/client/src/lib/Game.svelte
@@ -337,5 +337,7 @@
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
   }
   .drag-ghost.piece-w { color: #fafafa; }
-  .drag-ghost.piece-b { color: #1a1a1a; }
+  /* A dark dragged piece needs a light outline (the base dark shadow above
+     does nothing for it) so it reads over dark areas of the page. */
+  .drag-ghost.piece-b { color: #1a1a1a; text-shadow: 0 0 3px var(--text), 0 0 2px var(--text); }
 </style>
diff --git a/packages/client/src/lib/PhantomPalette.svelte b/packages/client/src/lib/PhantomPalette.svelte
index fb48389..9f8db67 100644
--- a/packages/client/src/lib/PhantomPalette.svelte
+++ b/packages/client/src/lib/PhantomPalette.svelte
@@ -46,5 +46,6 @@
   }
   .pp:hover { opacity: 1; }
   .pp-w { color: #fafafa; }
-  .pp-b { color: #1a1a1a; }
+  /* Dark pieces need a light outline to read on the dark panel background. */
+  .pp-b { color: #1a1a1a; text-shadow: 0 0 2px var(--text), 0 0 2px var(--text); }
 </style>