snake personality...

src/game.css

@@ -36,14 +36,36 @@
    Snake Rendering
    ========================================================= */
 .snake-cell.snake-head {
-  background-color: var(--primary, #82aaff);
+  background-color: var(--accent, #ffc777);
-  border-radius: 30%;
+  border-radius: 6px 6px 2px 2px;
-  box-shadow: 0 0 8px color-mix(in srgb, var(--primary, #82aaff) 70%, transparent);
+  box-shadow: 
+    0 0 8px color-mix(in srgb, var(--accent, #ffc777) 70%, transparent),
+    inset 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 90%, transparent);
+  position: relative;
+}
+
+.snake-cell.snake-head::after {
+  content: "";
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60%;
+  height: 30%;
+  background: radial-gradient(circle, var(--accent-foreground, #1b1d2b) 30%, transparent 60%);
+  opacity: 0.8;
 }
 
 .snake-cell.snake-body {
-  background-color: var(--primary, #82aaff);
+  background-color: var(--accent, #ffc777);
   opacity: 0.7;
-  box-shadow: inset 0 0 3px color-mix(in srgb, var(--primary, #82aaff) 50%, transparent);
+  box-shadow: inset 0 0 3px color-mix(in srgb, var(--accent, #ffc777) 50%, transparent);
+}
+
+.snake-cell.snake-tail {
+  background-color: var(--accent, #ffc777);
+  opacity: 0.5;
+  border-radius: 2px 2px 6px 6px;
+  box-shadow: 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 40%, transparent);
 }
 

src/useGame/useGameStatus.ts

@@ -30,8 +30,8 @@ export function useGameStatus(
     clearSnake();
     setGameStatus("waiting");
     const container = containerRef.current;
-    container?.querySelectorAll(".snake-head, .snake-body").forEach((el) => {
+    container?.querySelectorAll(".snake-head, .snake-body, .snake-tail").forEach((el) => {
-      el.classList.remove("snake-head", "snake-body");
+      el.classList.remove("snake-head", "snake-body", "snake-tail");
     });
   };
 

src/useGame/useSnake.ts

@@ -21,6 +21,9 @@ export function useSnake(
       { r: centerR, c: centerC },
       { r: centerR + 1, c: centerC },
       { r: centerR + 2, c: centerC },
+      { r: centerR + 3, c: centerC },
+      { r: centerR + 4, c: centerC },
+      { r: centerR + 5, c: centerC },
     ];
     
     setSnakeBody(initialBody);
@@ -41,8 +44,8 @@ export function useSnake(
     const container = containerRef.current;
     if (!container) return;
 
-    container.querySelectorAll(".snake-head, .snake-body").forEach((el) => {
+    container.querySelectorAll(".snake-head, .snake-body, .snake-tail").forEach((el) => {
-      el.classList.remove("snake-head", "snake-body");
+      el.classList.remove("snake-head", "snake-body", "snake-tail");
     });
 
     body.forEach((segment, idx) => {
@@ -50,7 +53,13 @@ export function useSnake(
         `.snake-cell[data-r="${segment.r}"][data-c="${segment.c}"]`
       );
       if (cell) {
-        cell.classList.add(idx === 0 ? "snake-head" : "snake-body");
+        if (idx === 0) {
+          cell.classList.add("snake-head");
+        } else if (idx === body.length - 1) {
+          cell.classList.add("snake-tail");
+        } else {
+          cell.classList.add("snake-body");
+        }
       }
     });
   };