feat(multi): add configurable time limit per round with countdown display

app/components/GameScreen.tsx

@@ -17,6 +17,7 @@ type GameScreenProps = {
   clicks: number;
   elapsed: string;
   countdown: number | null;
+  timeLeft: number | null;
   onNavigate: (title: string) => void;
   onGoBack: () => void;
   canGoBack: boolean;
@@ -37,6 +38,7 @@ export function GameScreen({
   clicks,
   elapsed,
   countdown,
+  timeLeft,
   onNavigate,
   onGoBack,
   canGoBack,
@@ -261,10 +263,15 @@ export function GameScreen({
           <Breadcrumbs history={history} endRef={breadcrumbEndRef} />
         </div>
         <div className="flex items-center gap-2 sm:gap-3 shrink-0">
-          <div className="flex items-center gap-2 sm:gap-3 text-[10px] sm:text-xs font-bold text-[#888] tabular-nums">
-            <span>{elapsed}</span>
-            <span>{clicks} clics</span>
-            <span className="hidden sm:inline">{myPlayer?.score ?? 0} pts</span>
+          <div className="flex items-center gap-2 sm:gap-3 text-[10px] sm:text-xs font-bold tabular-nums">
+            {timeLeft !== null && (
+              <span className={`font-black ${timeLeft <= 10 ? "text-red-400 animate-pulse" : timeLeft <= 30 ? "text-orange-400" : "text-[#888]"}`}>
+                {timeLeft}s
+              </span>
+            )}
+            <span className="text-[#888]">{elapsed}</span>
+            <span className="text-[#888]">{clicks} clics</span>
+            <span className="hidden sm:inline text-[#888]">{myPlayer?.score ?? 0} pts</span>
           </div>
           {!myFinished && canGoBack && (
             <button

app/components/LobbyScreen.tsx

@@ -19,6 +19,7 @@ type LobbyScreenProps = {
   gameMode: Room["gameMode"];
   setGameMode: (v: Room["gameMode"]) => void;
   onSetSearchAllowed: (v: boolean) => void;
+  onSetTimeLimit: (v: number) => void;
 };
 
 export function LobbyScreen({
@@ -37,6 +38,7 @@ export function LobbyScreen({
   gameMode,
   setGameMode,
   onSetSearchAllowed,
+  onSetTimeLimit,
 }: LobbyScreenProps) {
   const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false;
   const [copied, setCopied] = useState(false);
@@ -188,6 +190,21 @@ export function LobbyScreen({
               </select>
             </div>
           </div>
+          <div className="flex flex-col gap-1.5">
+            <span className="text-xs text-[#888]">Temps par manche</span>
+            <select
+              value={room.timeLimit}
+              onChange={(e) => onSetTimeLimit(Number(e.target.value))}
+              className="w-full min-h-11 px-2 bg-[#0f0f0f] border border-[#2e2e2e] rounded-xl text-sm text-[#f0f0f0] outline-none focus:border-[#7c3aed] cursor-pointer transition-colors"
+            >
+              <option value={0}>Illimité</option>
+              {[60, 120, 180, 300, 600].map((s) => (
+                <option key={s} value={s}>
+                  {s < 60 ? `${s}s` : `${s / 60} min`}
+                </option>
+              ))}
+            </select>
+          </div>
           <button
             onClick={() => onSetSearchAllowed(!room.searchAllowed)}
             className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${room.searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}

app/components/ScreenRouter.tsx

@@ -159,6 +159,7 @@ export function ScreenRouter({
         gameMode={gameMode}
         setGameMode={setGameMode}
         onSetSearchAllowed={(v) => multi.setSearchAllowed(v)}
+        onSetTimeLimit={(v) => multi.setTimeLimit(v)}
       />
     );
 
@@ -175,6 +176,7 @@ export function ScreenRouter({
         clicks={multi.clicks}
         elapsed={fmt(multi.elapsed)}
         countdown={multi.countdown}
+        timeLeft={multi.timeLeft}
         onNavigate={multi.navigate}
         onGoBack={multi.goBack}
         canGoBack={multi.canGoBack}