client: market trend tags + leaderboard live updates via Socket.IO

Market rows show a TrendTag: 💰 affare when buyPrice < basePrice,
📈 vendi when sellPrice > basePrice. Leaderboard subscribes to
leaderboard:updated socket event to refresh without polling.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/screens/MarketScreen.tsx

@@ -7,6 +7,22 @@ import { useToast } from '../components/Toast';
 import { getSocket } from '../realtime/socket';
 import { formatMoney } from '../shared/format';
 
+/**
+ * Confronta i prezzi locali col valore base della merce: segnala dove
+ * conviene comprare (buy sotto il base) e dove conviene vendere (sell sopra).
+ */
+function TrendTag({ entry }: { entry: MarketEntry }) {
+  const buyDelta = Math.round((entry.buyPrice / entry.basePrice - 1) * 100);
+  const sellDelta = Math.round((entry.sellPrice / entry.basePrice - 1) * 100);
+  if (sellDelta > 0) {
+    return <span className="trend trend--sell">📈 vendi +{sellDelta}%</span>;
+  }
+  if (buyDelta < 0) {
+    return <span className="trend trend--buy">💰 affare {buyDelta}%</span>;
+  }
+  return null;
+}
+
 export function MarketScreen() {
   const { player, refreshPlayer } = useAuth();
   const { toast } = useToast();
@@ -95,12 +111,14 @@ export function MarketScreen() {
             <div className="prices">
               <span className="price price--buy">{formatMoney(entry.buyPrice)}</span>
               <span className="price price--sell">{formatMoney(entry.sellPrice)}</span>
+              <TrendTag entry={entry} />
             </div>
           </li>
         ))}
       </ul>
       <p className="muted small">
-        Prezzo a sinistra: acquisto · a destra: vendita. I prezzi cambiano ogni minuto.
+        Prezzo a sinistra: acquisto · a destra: vendita. I prezzi cambiano ogni minuto: compra
+        dove c'è l'affare, vendi dove rende.
       </p>
 
       {selected && (