ui(game): compact trump/speed badges on mobile so the scoreboard fits

On narrow phones the top HUD crowded the scoreboard against the trump/speed
badges + action buttons. The badges now show icon/symbol-only on mobile (labels
hidden < sm) with tighter padding, freeing horizontal space so the scoreboard
renders cleanly. Buttons stay shrink-0; scoreboard keeps shrink min-w-0.

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

src/components/GameTable.tsx

@@ -289,11 +289,11 @@ function SpeedBadge() {
     <motion.div
       initial={{ scale: 0, rotate: -15 }}
       animate={{ scale: 1, rotate: 0 }}
-      className="glass rounded-2xl px-2.5 py-2 flex items-center gap-1 text-gold-300"
+      className="glass rounded-2xl px-2 py-1.5 sm:px-2.5 sm:py-2 flex items-center gap-1 text-gold-300 shrink-0"
       title={t("speed.label")}
     >
       <Zap className="size-4 fill-gold-400 text-gold-400" />
-      <span className="text-[10px] font-black uppercase tracking-wide">{t("speed.label")}</span>
+      <span className="hidden sm:inline text-[10px] font-black uppercase tracking-wide">{t("speed.label")}</span>
     </motion.div>
   );
 }
@@ -307,14 +307,14 @@ function TrumpBadge({ trump }: { trump: Suit }) {
     <motion.div
       initial={{ scale: 0, rotate: -20 }}
       animate={{ scale: 1, rotate: 0 }}
-      className="glass rounded-2xl px-3 py-2 flex items-center gap-2"
+      className="glass rounded-2xl px-2 py-1.5 sm:px-3 sm:py-2 flex items-center gap-1.5 sm:gap-2 shrink-0"
     >
-      <span className="text-[10px] text-gold-400 font-semibold">
+      <span className="hidden sm:inline text-[10px] text-gold-400 font-semibold">
         {t("trump.label")}
       </span>
       <span
         className={cn(
-          "text-2xl leading-none",
+          "text-xl sm:text-2xl leading-none",
           red ? "text-rose-400" : "text-cream"
         )}
       >