Переработан дизайн, добавлена фича SoundLibrary

components/BingoCell.tsx

@@ -56,8 +56,8 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
     return (
       <div className={cn(
         "flex items-center justify-center rounded-lg border border-dashed border-slate-700/30 bg-slate-900/20",
-        "text-slate-600 text-sm",
-        gridSize > 5 ? "p-1" : "p-2"
+        "text-slate-600",
+        gridSize > 5 ? "text-[10px] p-1" : "text-sm p-2"
       )}>
         ✖
       </div>
@@ -76,7 +76,8 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
       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",
+        "aspect-square",
+        gridSize > 5 ? "p-1 gap-0" : "p-2 gap-0.5",
         marked
           ? "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",
@@ -87,12 +88,12 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
       )}
       title={markedBy.length > 0 ? `Marked by: ${markedBy.join(", ")}` : item.text}
     >
-      <span className={cn(gridSize > 5 ? "text-lg" : "text-2xl", "leading-none")}>
+      <span className={cn("leading-none", gridSize > 5 ? "text-2xl" : "text-3xl")}>
         {item.emoji || "💀"}
       </span>
       <span className={cn(
         "text-center font-medium leading-tight text-slate-200",
-        gridSize > 5 ? "text-[10px]" : "text-xs",
+        gridSize > 5 ? "text-xs" : "text-sm",
         "line-clamp-2"
       )}>
         {item.text}
@@ -106,13 +107,13 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
         </span>
       )}
       {marked && (
-        <span className="absolute top-0.5 left-1 text-[8px] text-cyan-500/60">✕</span>
+        <span className="absolute top-0.5 left-1 text-[9px] text-cyan-500/60">✕</span>
       )}
       {!marked && !isFree && (
-        <span className="text-[9px] text-slate-600 mt-0.5">{getSoundEmoji(item.soundCategory)}</span>
+        <span className="text-[10px] text-slate-600">{getSoundEmoji(item.soundCategory)}</span>
       )}
       {isFree && !marked && (
-        <span className={cn("text-[9px] text-amber-500/60 mt-0.5", gridSize > 5 ? "hidden" : "")}>
+        <span className="text-[10px] text-amber-500/60">
           🎯 mark me
         </span>
       )}