fix: align How It Works card padding with leaderboard card

Use CardHeader + CardTitle instead of an h3 inside CardContent,
so both cards get the same pt-0 treatment on CardContent.

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

packages/frontend/src/routes/play/leaderboard/+page.svelte

@@ -158,11 +158,13 @@
 
   <!-- Info Card -->
   <Card class="mt-6 bg-card/50 border-border/50">
-    <CardContent class="p-6">
-      <h3 class="font-semibold mb-2 flex items-center gap-2">
-        <span class="icon-[ri--information-line] w-4 h-4 text-primary"></span>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <span class="icon-[ri--information-line] w-5 h-5 text-primary"></span>
         {$_("gamification.how_it_works")}
-      </h3>
+      </CardTitle>
+    </CardHeader>
+    <CardContent>
       <p class="text-sm text-muted-foreground mb-4">
         {$_("gamification.how_it_works_description")}
       </p>