fix(online): trump chooser only shows to the hakem, not every player

The "pick the hokm" overlay gated on players[hakem].isHuman — true on EVERY
human client when the hakem is human, so all players saw the chooser at the
start of a round. After the seat-rotation fix the viewer is always local seat 0,
so the correct check is hakem===0 ("I am the hakem"). Same fix for the 1–4
suit keyboard shortcut. Non-hakem players now see a "{name} is choosing trump…"
waiting overlay (new TrumpWaiting component) instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/GameTable.tsx

@@ -88,8 +88,8 @@ export function GameTable({
       if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable)) return;
       const k = e.key.toLowerCase();
 
-      // Hakem choosing trump: 1–4 pick a suit.
+      // Hakem choosing trump: 1–4 pick a suit. Only the hakem (you = local seat 0).
-      if (phase === "choosing-trump" && players[hakem!]?.isHuman) {
+      if (phase === "choosing-trump" && hakem === 0) {
         const idx = "1234".indexOf(e.key);
         if (idx >= 0) { e.preventDefault(); chooseTrump(SUITS[idx]); return; }
       }
@@ -220,9 +220,13 @@ export function GameTable({
       {/* Overlays */}
       <AnimatePresence>
         {phase === "selecting-hakem" && <HakemOverlay key="hakem" />}
-        {phase === "choosing-trump" && players[hakem!]?.isHuman && (
+        {/* Only the hakem (you) picks the trump; everyone else waits. */}
+        {phase === "choosing-trump" && hakem === 0 && (
           <TrumpChooser key="trump" />
         )}
+        {phase === "choosing-trump" && hakem !== 0 && hakem != null && (
+          <TrumpWaiting key="trump-wait" name={players[hakem].name} />
+        )}
         {phase === "round-over" && <RoundOverlay key="round" />}
         {phase === "match-over" && mode === "ai" && (
           <MatchOverlay key="match" onExit={exit} />
@@ -972,6 +976,40 @@ function TrumpChooser() {
   );
 }
 
+/** Shown to everyone EXCEPT the hakem while they pick the trump. */
+function TrumpWaiting({ name }: { name: string }) {
+  const { t } = useI18n();
+  return (
+    <Backdrop>
+      <motion.div
+        initial={{ scale: 0.9, y: 10 }}
+        animate={{ scale: 1, y: 0 }}
+        className="glass rounded-3xl p-7 text-center max-w-xs w-full"
+      >
+        <motion.div
+          animate={{ rotate: [0, -8, 8, 0] }}
+          transition={{ repeat: Infinity, duration: 1.6 }}
+          className="text-5xl mb-2"
+        >
+          👑
+        </motion.div>
+        <h2 className="gold-text text-xl font-black">{t("trump.title")}</h2>
+        <p className="text-cream/70 text-sm mt-2">{t("trump.waiting", { name })}</p>
+        <div className="mt-4 flex justify-center gap-1.5">
+          {[0, 1, 2].map((i) => (
+            <motion.span
+              key={i}
+              className="size-2 rounded-full bg-gold-400"
+              animate={{ opacity: [0.3, 1, 0.3] }}
+              transition={{ repeat: Infinity, duration: 1.1, delay: i * 0.18 }}
+            />
+          ))}
+        </div>
+      </motion.div>
+    </Backdrop>
+  );
+}
+
 const CONFETTI_SPECS = Array.from({ length: 22 }, (_, i) => ({
   id: i,
   left: 4 + ((i * 4.3) % 92),