fix: custom sound playback, unmark, editor click-to-edit, bigger fonts

components/BingoCell.tsx

@@ -8,6 +8,7 @@ type Item = {
   text: string;
   emoji: string;
   soundCategory: string;
+  soundUrl?: string | null;
   gridIndex: number;
 };
 
@@ -19,6 +20,7 @@ type Props = {
   markedBy: string[];
   gridSize: number;
   onMark: (itemId: string) => void;
+  onUnmark?: (itemId: string) => void;
   disabled?: boolean;
   isFreeSpace?: boolean;
 };
@@ -36,7 +38,7 @@ function getSoundEmoji(cat: string) {
   }
 }
 
-export function BingoCell({ item, index, marked, markCount, markedBy, gridSize, onMark, disabled, isFreeSpace }: Props) {
+export function BingoCell({ item, index, marked, markCount, markedBy, gridSize, onMark, onUnmark, disabled, isFreeSpace }: Props) {
   const [shake, setShake] = useState(false);
   const [glow, setGlow] = useState(false);
 
@@ -66,14 +68,17 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
 
   return (
     <button
-      onClick={() => !disabled && !marked && onMark(item.id)}
-      disabled={disabled || marked}
+      onClick={() => {
+        if (disabled) return;
+        if (marked) { onUnmark?.(item.id); return; }
+        onMark(item.id);
+      }}
       className={cn(
         "relative flex flex-col items-center justify-center rounded-lg border transition-all duration-200 overflow-hidden",
         "select-none",
         gridSize > 5 ? "p-1 gap-0" : "p-2 gap-1",
         marked
-          ? "border-cyan-500/60 bg-cyan-900/40 cursor-default"
+          ? "border-cyan-500/60 bg-cyan-900/40 hover:bg-cyan-800/40 cursor-pointer"
           : "border-slate-700/40 bg-slate-800/40 hover:bg-slate-700/40 hover:border-cyan-600/40 hover:shadow-lg hover:shadow-cyan-900/20 cursor-pointer active:scale-95",
         shake && "animate-shake",
         glow && "animate-glow-pulse",
@@ -94,12 +99,15 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
       </span>
       {marked && markCount > 0 && (
         <span className={cn(
-          "absolute top-0.5 right-1 font-bold text-cyan-400",
+          "absolute top-0.5 right-1 font-bold text-amber-400",
           gridSize > 5 ? "text-[9px]" : "text-xs"
         )}>
           {markCount}
         </span>
       )}
+      {marked && (
+        <span className="absolute top-0.5 left-1 text-[8px] text-cyan-500/60">✕</span>
+      )}
       {!marked && !isFree && (
         <span className="text-[9px] text-slate-600 mt-0.5">{getSoundEmoji(item.soundCategory)}</span>
       )}