fix: skribbl pre-pick label + gartic min 3 players + tests

app/components/SkribblGame.tsx

@@ -196,10 +196,14 @@ export default function SkribblGame() {
           </div>
           <div className="flex-1 text-center">
             <div className="text-xs font-bold uppercase tracking-wider" style={{color:"rgba(45,45,45,0.55)"}}>
-              {isDrawer ? "Your secret word" : `${drawerName} is drawing`}
+              {sk?.phase === "choosing"
+                ? (isDrawer ? "Pick a word!" : `${drawerName} is choosing a word…`)
+                : (isDrawer ? "Your secret word" : `${drawerName} is drawing`)}
             </div>
             <div className="text-xl font-bold tracking-[6px] mt-1" data-testid="word-mask">
-              {isDrawer && sk?.phase === "drawing" ? (sk as any)?.word || wordMask : wordMask || "_____"}
+              {sk?.phase === "drawing"
+                ? (isDrawer ? ((sk as any)?.word || wordMask) : (wordMask || "_____"))
+                : ""}
             </div>
           </div>
           <div className="pill" style={{background:"var(--lavender)", color:"white"}}>

app/room/[code]/page.tsx

@@ -24,6 +24,8 @@ export default function LobbyPage() {
 
   const isHost = room && myId && room.hostId === myId;
   const shareUrl = typeof window !== "undefined" ? `${window.location.origin}/join?code=${code}` : "";
+  const playerCount = room?.players.filter(p => p.connected).length || 0;
+  const garticNeedsMore = room?.mode === "gartic" && playerCount < 3;
 
   const start = () => {
     setErr("");
@@ -105,8 +107,13 @@ export default function LobbyPage() {
               </>}
             </div>
 
+            {garticNeedsMore && (
+              <div data-testid="gartic-min-players" className="mt-4 p-3 rounded-2xl border-[3px] border-dashed border-dark text-center text-sm font-semibold" style={{background:"var(--cream)", color:"rgba(45,45,45,0.75)"}}>
+                Gartic Phone is way more fun with friends! Grab at least <strong>3 players</strong> to start. ({playerCount}/3)
+              </div>
+            )}
             {isHost ? (
-              <button onClick={start} data-testid="start-game" className="btn btn-primary w-full mt-4" style={{padding:"16px",fontSize:18}}>
+              <button onClick={start} disabled={!!garticNeedsMore} data-testid="start-game" className="btn btn-primary w-full mt-4" style={{padding:"16px",fontSize:18, opacity: garticNeedsMore ? 0.5 : 1, cursor: garticNeedsMore ? "not-allowed" : undefined}}>
                 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polygon points="6 4 20 12 6 20 6 4"/></svg>
                 Start Game
               </button>