Turn timer + auto-play, disconnect/reconnect, cosmetics, queue & paid plan

- Turn timer (20s) for play/trump; system auto-plays a smart move on timeout
- Disconnect handling (mock): wait-for-return countdown, system covers turns
- Cosmetics: titles, card-back styles, custom profile-image upload, badges;
  pickers in Profile; shop sells card styles; reward modal shows new titles
- Paid plan (pro): free players queue when server busy, pro skips; upgrade flow
- OnlineService extended (upgradePlan, richer profile patch); mock implements
  queue + plans; gamification adds TITLES + CARD_STYLES

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

src/components/PlayingCard.tsx

@@ -11,12 +11,19 @@ const SIZES = {
 
 export type CardSize = keyof typeof SIZES;
 
+interface CardBack {
+  c1: string;
+  c2: string;
+  accent: string;
+}
+
 interface Props {
   card?: Card;
   faceDown?: boolean;
   size?: CardSize;
   className?: string;
   dimmed?: boolean;
+  back?: CardBack;
 }
 
 export function PlayingCard({
@@ -25,18 +32,34 @@ export function PlayingCard({
   size = "md",
   className,
   dimmed,
+  back,
 }: Props) {
   const s = SIZES[size];
 
   if (faceDown || !card) {
+    const styled = back
+      ? {
+          width: s.w,
+          height: s.h,
+          borderRadius: 8,
+          background: `repeating-linear-gradient(45deg, ${back.accent}40 0 6px, transparent 6px 12px), linear-gradient(160deg, ${back.c1}, ${back.c2})`,
+          border: `1px solid ${back.accent}80`,
+          boxShadow: "0 6px 14px rgba(0,0,0,0.4)",
+        }
+      : { width: s.w, height: s.h };
     return (
       <div
-        className={cn("card-back rounded-lg shrink-0", className)}
-        style={{ width: s.w, height: s.h }}
+        className={cn(!back && "card-back", "rounded-lg shrink-0", className)}
+        style={styled}
         aria-hidden
       >
         <div className="h-full w-full rounded-lg flex items-center justify-center">
-          <div className="text-gold-500/70 text-lg font-bold">✦</div>
+          <div
+            className={cn("text-lg font-bold", !back && "text-gold-500/70")}
+            style={back ? { color: `${back.accent}cc` } : undefined}
+          >
+            ✦
+          </div>
         </div>
       </div>
     );