feat(quiz): couples quiz with shareable watermarked results card

Replaces the notify-me quiz stub with a full loop: quiz sessions per
couple, answer-and-guess flow, dual-direction scoring, and a score-only
share card (no question or answer content) captured via ViewShot with
Sauci branding.

API: migration 0019 (quiz_questions, quiz_sessions, quiz_answers, 12
seeded questions), new quiz domain with session start / current /
answers / result routes, couple isolation, route + integration +
scoring unit tests.

Mobile: src/features/quiz feature (intro, per-question self+guess flow,
waiting-for-partner nudge, results with breakdown), quizStore with
sign-out clearing, QuizShareModal following SharePreviewModal, discovery
QuizTile, analytics events, and tests.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/mobile/src/components/discovery/QuizTile.tsx

@@ -0,0 +1,98 @@
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { router } from 'expo-router';
+import * as Haptics from 'expo-haptics';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import { colors, spacing, radius, typography, shadows, featureColors } from '../../theme';
+import { useAuthStore } from '../../store';
+
+const HORIZONTAL_PADDING = spacing.lg;
+const TILE_HEIGHT = 100;
+const ACCENT = featureColors.quiz.accent;
+
+interface QuizTileProps {
+  delay?: number;
+}
+
+export function QuizTile({ delay = 0 }: QuizTileProps) {
+  const { user } = useAuthStore();
+  const paired = Boolean(user?.couple_id);
+
+  if (!paired) return null;
+
+  const handlePress = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    router.push('/(app)/quiz' as never);
+  };
+
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(delay).duration(500).springify()}
+      style={styles.container}
+    >
+      <TouchableOpacity onPress={handlePress} activeOpacity={0.85} style={styles.tileWrapper}>
+        <View style={[styles.tile, shadows.md]}>
+          <View style={styles.iconContainer}>
+            <Ionicons name="help-circle" size={24} color="rgba(255, 255, 255, 0.9)" />
+          </View>
+
+          <View style={styles.content}>
+            <Text style={styles.title}>Quiz</Text>
+            <Text style={styles.subtitle}>How well do you know each other?</Text>
+          </View>
+
+          <Ionicons name="chevron-forward" size={20} color="rgba(255, 255, 255, 0.6)" />
+
+          <View style={styles.overlay} />
+        </View>
+      </TouchableOpacity>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: spacing.lg,
+  },
+  tileWrapper: {
+    paddingHorizontal: HORIZONTAL_PADDING,
+  },
+  tile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: ACCENT,
+    borderRadius: radius.lg,
+    padding: spacing.md,
+    height: TILE_HEIGHT,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: spacing.md,
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    ...typography.headline,
+    color: colors.text,
+    fontWeight: '700',
+  },
+  subtitle: {
+    ...typography.caption1,
+    color: 'rgba(255, 255, 255, 0.8)',
+    marginTop: 2,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    borderRadius: radius.lg,
+    pointerEvents: 'none',
+  },
+});