diff --git a/app/(app)/(tabs)/_layout.tsx b/app/(app)/(tabs)/_layout.tsx
index 7c9d4c0..3fa821f 100644
--- a/app/(app)/(tabs)/_layout.tsx
+++ b/app/(app)/(tabs)/_layout.tsx
@@ -1,30 +1,85 @@
+/**
+ * (tabs)/_layout.tsx — Bottom Tab Navigator
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
 import { Tabs } from 'expo-router';
+import { Text } from 'react-native';
 
 import { theme } from '@/design/theme';
-import { fontSizes, fontWeights, spacing } from '@/design/tokens';
+import { fontSizes, fontWeights, palette, spacing } from '@/design/tokens';
+
+type TabIconProps = { focused: boolean; label: string; emoji: string };
+
+function TabIcon({ focused, emoji }: TabIconProps) {
+  return (
+    <Text
+      style={{
+        fontSize: 20,
+        opacity: focused ? 1 : 0.45,
+        transform: [{ scale: focused ? 1.05 : 1 }],
+      }}
+    >
+      {emoji}
+    </Text>
+  );
+}
 
 export default function TabsLayout() {
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: theme.colors.text,
-        tabBarInactiveTintColor: theme.colors.textSubtle,
+        tabBarActiveTintColor: palette.ink,
+        tabBarInactiveTintColor: palette.muted,
         tabBarLabelStyle: {
-          fontSize: fontSizes.caption,
+          fontSize: fontSizes.caption - 1,
           fontWeight: fontWeights.semibold,
+          marginTop: -2,
+          marginBottom: 2,
         },
         tabBarStyle: {
           backgroundColor: theme.colors.surfaceStrong,
           borderTopColor: theme.colors.border,
+          borderTopWidth: 1,
           paddingTop: spacing.xs,
+          height: 60,
         },
+        tabBarItemStyle: { paddingVertical: 4 },
       }}
     >
-      <Tabs.Screen name="index" options={{ title: 'Home' }} />
-      <Tabs.Screen name="learn" options={{ title: 'Learn' }} />
-      <Tabs.Screen name="play" options={{ title: 'Play' }} />
-      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: (props) => <TabIcon {...props} label="Home" emoji="🏠" />,
+        }}
+      />
+      <Tabs.Screen
+        name="learn"
+        options={{
+          title: 'Learn',
+          tabBarIcon: (props) => (
+            <TabIcon {...props} label="Learn" emoji="📚" />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="play"
+        options={{
+          title: 'Play',
+          tabBarIcon: (props) => <TabIcon {...props} label="Play" emoji="♟" />,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Profile',
+          tabBarIcon: (props) => (
+            <TabIcon {...props} label="Profile" emoji="👤" />
+          ),
+        }}
+      />
     </Tabs>
   );
 }
diff --git a/app/(app)/(tabs)/index.tsx b/app/(app)/(tabs)/index.tsx
index 18ac520..353c853 100644
--- a/app/(app)/(tabs)/index.tsx
+++ b/app/(app)/(tabs)/index.tsx
@@ -1,22 +1,616 @@
+/**
+ * index.tsx — Home Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
 import { router } from 'expo-router';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { SessionPlaceholderScreen } from '@/components/SessionPlaceholderScreen';
-import { Button } from '@/components/ui/Button';
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
 import { useSession } from '@/providers/SessionProvider';
 
+const QUICK_ACTIONS = [
+  {
+    id: 'learn',
+    emoji: '📚',
+    label: 'Learn',
+    sub: '12 lessons',
+    route: '/learn' as const,
+    accent: palette.brandGreen,
+  },
+  {
+    id: 'puzzles',
+    emoji: '🧩',
+    label: 'Puzzles',
+    sub: 'Daily challenge',
+    route: '/puzzles' as const,
+    accent: palette.accentYellow,
+  },
+  {
+    id: 'play',
+    emoji: '♟',
+    label: 'Play',
+    sub: 'vs Computer',
+    route: '/play' as const,
+    accent: palette.ink,
+  },
+  {
+    id: 'profile',
+    emoji: '🏆',
+    label: 'Profile',
+    sub: 'Your progress',
+    route: '/profile' as const,
+    accent: '#9B59B6',
+  },
+];
+
+const ACTIVITY = [
+  {
+    id: '1',
+    icon: '📚',
+    text: 'Completed Knight lesson',
+    time: '2h ago',
+    color: palette.brandGreen,
+  },
+  {
+    id: '2',
+    icon: '🧩',
+    text: 'Solved puzzle #4820',
+    time: 'Yesterday',
+    color: palette.accentYellow,
+  },
+  {
+    id: '3',
+    icon: '♟',
+    text: 'Won game vs Beginner',
+    time: '2d ago',
+    color: palette.ink,
+  },
+  {
+    id: '4',
+    icon: '🌱',
+    text: 'Joined YSTEM and Chess',
+    time: '1 week ago',
+    color: palette.brandGreenSoft,
+  },
+];
+
 export default function HomeRoute() {
   const { session } = useSession();
-
-  const isMentor =
-    session.status === 'authenticated' && session.user.role === 'mentor';
+  const displayName =
+    session.status === 'authenticated' ? session.user.displayName : 'there';
+  const firstName = displayName.split(' ')[0];
+  const hour = new Date().getHours();
+  const greeting =
+    hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening';
 
   return (
-    <SessionPlaceholderScreen title="Home">
-      {isMentor ? (
-        <Button onPress={() => router.push('/mentor')} variant="secondary">
-          Open mentor area
-        </Button>
-      ) : null}
-    </SessionPlaceholderScreen>
+    <SafeAreaView style={s.safe}>
+      <ScrollView
+        contentContainerStyle={s.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Header ─────────────────────────────── */}
+        <View style={s.header}>
+          <View style={s.headerLeft}>
+            <Text style={s.greetingSub}>{greeting}</Text>
+            <Text style={s.greetingName}>{firstName} 👋</Text>
+          </View>
+          <View style={s.avatar}>
+            <Text style={s.avatarText}>
+              {firstName.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+        </View>
+
+        {/* ── Progress Hero Card ─────────────────── */}
+        <View style={s.hero}>
+          <View style={s.heroTop}>
+            <View>
+              <Text style={s.heroLabel}>YOUR PROGRESS</Text>
+              <Text style={s.heroXP}>250 XP</Text>
+            </View>
+            <View style={s.levelBadge}>
+              <Text style={s.levelText}>Lvl 3</Text>
+            </View>
+          </View>
+
+          {/* XP Progress Bar */}
+          <View style={s.xpTrack}>
+            <View style={s.xpFill} />
+            <Text style={s.xpLabel}>150 XP to next level</Text>
+          </View>
+
+          <View style={s.heroStats}>
+            {[
+              { value: '5', label: 'Streak', icon: '🔥' },
+              { value: '12', label: 'Puzzles', icon: '🧩' },
+              { value: '3', label: 'Wins', icon: '♟' },
+            ].map((stat) => (
+              <View key={stat.label} style={s.heroStat}>
+                <Text style={s.heroStatIcon}>{stat.icon}</Text>
+                <Text style={s.heroStatValue}>{stat.value}</Text>
+                <Text style={s.heroStatLabel}>{stat.label}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        {/* ── Quick Actions ──────────────────────── */}
+        <View style={s.sectionHeader}>
+          <Text style={s.sectionLabel}>Quick Actions</Text>
+        </View>
+        <View style={s.grid}>
+          {QUICK_ACTIONS.map((action) => (
+            <Pressable
+              key={action.id}
+              accessibilityLabel={action.label}
+              onPress={() => router.push(action.route as never)}
+              style={({ pressed }) => [
+                s.actionCard,
+                pressed && s.actionCardPressed,
+              ]}
+            >
+              <View
+                style={[s.actionAccent, { backgroundColor: action.accent }]}
+              />
+              <Text style={s.actionEmoji}>{action.emoji}</Text>
+              <Text style={s.actionLabel}>{action.label}</Text>
+              <Text style={s.actionSub}>{action.sub}</Text>
+            </Pressable>
+          ))}
+        </View>
+
+        {/* ── Continue Learning ──────────────────── */}
+        <View style={s.sectionHeader}>
+          <Text style={s.sectionLabel}>Continue Learning</Text>
+          <Pressable hitSlop={8} onPress={() => router.push('/learn' as never)}>
+            <Text style={s.sectionLink}>See all →</Text>
+          </Pressable>
+        </View>
+        <Pressable
+          onPress={() =>
+            router.push({
+              pathname: '/lesson-detail',
+              params: { piece: 'rook', id: '2' },
+            } as never)
+          }
+          style={({ pressed }) => [
+            s.continueCard,
+            pressed && s.continueCardPressed,
+          ]}
+        >
+          <View style={s.continueLeft}>
+            <View style={s.continueIcon}>
+              <Text style={{ fontSize: 24 }}>♖</Text>
+            </View>
+            <View style={s.continueInfo}>
+              <Text style={s.continueName}>Rook Lesson</Text>
+              <Text style={s.continueSub}>The Power of Open Files</Text>
+              <View style={s.continueProgress}>
+                <View style={s.continueBar}>
+                  <View style={[s.continueBarFill, { width: '60%' }]} />
+                </View>
+                <Text style={s.continueBarLabel}>Step 2 of 4</Text>
+              </View>
+            </View>
+          </View>
+          <Text style={s.continueArrow}>›</Text>
+        </Pressable>
+
+        {/* ── Today's Challenge ──────────────────── */}
+        <View style={s.sectionHeader}>
+          <Text style={s.sectionLabel}>Today’s Challenge</Text>
+        </View>
+        <Pressable
+          onPress={() => router.push('/puzzles' as never)}
+          style={({ pressed }) => [
+            s.challengeCard,
+            pressed && s.challengeCardPressed,
+          ]}
+        >
+          <View style={s.challengeLeft}>
+            <Text style={s.challengeEmoji}>🧩</Text>
+            <View>
+              <Text style={s.challengeTitle}>Daily Puzzle</Text>
+              <Text style={s.challengeSub}>Rating 1287 · Fork theme</Text>
+            </View>
+          </View>
+          <View style={s.challengeBadge}>
+            <Text style={s.challengeBadgeText}>+10 XP</Text>
+          </View>
+        </Pressable>
+
+        {/* ── Recent Activity ────────────────────── */}
+        <View style={s.sectionHeader}>
+          <Text style={s.sectionLabel}>Recent Activity</Text>
+        </View>
+        <View style={s.activityCard}>
+          {ACTIVITY.map((item, i) => (
+            <View
+              key={item.id}
+              style={[
+                s.activityRow,
+                i < ACTIVITY.length - 1 && s.activityRowBorder,
+              ]}
+            >
+              <View style={[s.activityDot, { backgroundColor: item.color }]} />
+              <View style={s.activityIcon}>
+                <Text style={{ fontSize: 16 }}>{item.icon}</Text>
+              </View>
+              <Text style={s.activityText} numberOfLines={1}>
+                {item.text}
+              </Text>
+              <Text style={s.activityTime}>{item.time}</Text>
+            </View>
+          ))}
+        </View>
+
+        {/* ── Donate CTA ─────────────────────────── */}
+        <View style={s.donateCard}>
+          <View style={s.donateLeft}>
+            <Text style={{ fontSize: 24 }}>❤️</Text>
+            <View>
+              <Text style={s.donateTitle}>Support YSTEM</Text>
+              <Text style={s.donateSub}>Help a student learn chess & STEM</Text>
+            </View>
+          </View>
+          <Pressable
+            style={({ pressed }) => [
+              s.donateBtn,
+              pressed && s.donateBtnPressed,
+            ]}
+          >
+            <Text style={s.donateBtnText}>Donate</Text>
+          </Pressable>
+        </View>
+
+        {session.status === 'authenticated' &&
+          session.user.role === 'mentor' && (
+            <Pressable
+              accessibilityLabel="Open mentor area"
+              accessibilityRole="button"
+              onPress={() => router.push('/mentor')}
+              style={({ pressed }) => [
+                s.mentorButton,
+                pressed && s.mentorButtonPressed,
+              ]}
+            >
+              <Text style={s.mentorButtonText}>Open mentor area</Text>
+            </Pressable>
+          )}
+
+        <View style={{ height: spacing.xl }} />
+      </ScrollView>
+    </SafeAreaView>
   );
 }
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.06,
+  shadowRadius: 8,
+  elevation: 2,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+  scroll: {
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.lg,
+    gap: spacing.md,
+  },
+
+  /* Header */
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: spacing.xs,
+  },
+  headerLeft: { gap: 2 },
+  greetingSub: { fontSize: fontSizes.caption, color: palette.muted },
+  greetingName: {
+    fontSize: fontSizes.title,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    letterSpacing: -0.5,
+  },
+  avatar: {
+    width: 44,
+    height: 44,
+    borderRadius: radii.pill,
+    backgroundColor: palette.brandGreen,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+
+  /* Hero Card */
+  hero: {
+    backgroundColor: palette.ink,
+    borderRadius: radii.xl,
+    padding: spacing.lg,
+    gap: spacing.md,
+    ...SHADOW,
+  },
+  heroTop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  heroLabel: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: 'rgba(255,255,255,0.5)',
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  heroXP: {
+    fontSize: fontSizes.display,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+    letterSpacing: -1,
+    marginTop: 2,
+  },
+  levelBadge: {
+    backgroundColor: palette.brandGreen,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  levelText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  xpTrack: { gap: 6 },
+  xpFill: {
+    height: 6,
+    width: '62.5%',
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+    /* Parent track — use overflow hidden on a wrapper */
+  },
+  xpLabel: { fontSize: 10, color: 'rgba(255,255,255,0.5)' },
+  heroStats: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(255,255,255,0.1)',
+    paddingTop: spacing.md,
+  },
+  heroStat: { flex: 1, alignItems: 'center', gap: 2 },
+  heroStatIcon: { fontSize: 16 },
+  heroStatValue: {
+    fontSize: fontSizes.heading,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+  heroStatLabel: { fontSize: 10, color: 'rgba(255,255,255,0.5)' },
+
+  /* Section headers */
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: spacing.xs,
+  },
+  sectionLabel: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  sectionLink: {
+    fontSize: fontSizes.caption,
+    color: palette.brandGreen,
+    fontWeight: fontWeights.semibold,
+  },
+
+  /* Quick Actions Grid */
+  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm },
+  actionCard: {
+    width: '47.5%',
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    padding: spacing.md,
+    gap: spacing.xxs,
+    overflow: 'hidden',
+    position: 'relative',
+    ...SHADOW,
+  },
+  actionCardPressed: { opacity: 0.85, transform: [{ scale: 0.98 }] },
+  actionAccent: { position: 'absolute', top: 0, left: 0, right: 0, height: 3 },
+  actionEmoji: { fontSize: 26, marginTop: spacing.xs },
+  actionLabel: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  actionSub: { fontSize: fontSizes.caption, color: palette.muted },
+
+  /* Continue Card */
+  continueCard: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    padding: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    ...SHADOW,
+  },
+  continueCardPressed: { opacity: 0.85 },
+  continueLeft: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  continueIcon: {
+    width: 52,
+    height: 52,
+    borderRadius: radii.md,
+    backgroundColor: palette.backgroundSoft,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: palette.brandGreenSoft,
+  },
+  continueInfo: { flex: 1, gap: 2 },
+  continueName: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  continueSub: { fontSize: fontSizes.caption, color: palette.muted },
+  continueProgress: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    marginTop: spacing.xs,
+  },
+  continueBar: {
+    flex: 1,
+    height: 4,
+    backgroundColor: palette.border,
+    borderRadius: radii.pill,
+    overflow: 'hidden',
+  },
+  continueBarFill: {
+    height: '100%',
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+  },
+  continueBarLabel: { fontSize: 10, color: palette.muted },
+  continueArrow: {
+    fontSize: fontSizes.title,
+    color: palette.muted,
+    marginLeft: spacing.sm,
+  },
+
+  /* Challenge Card */
+  challengeCard: {
+    backgroundColor: `${palette.accentYellow}22`,
+    borderWidth: 1,
+    borderColor: palette.accentYellow,
+    borderRadius: radii.lg,
+    padding: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  challengeCardPressed: { opacity: 0.85 },
+  challengeLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  challengeEmoji: { fontSize: 28 },
+  challengeTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  challengeSub: { fontSize: fontSizes.caption, color: palette.gray },
+  challengeBadge: {
+    backgroundColor: palette.accentYellow,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  challengeBadgeText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+
+  /* Activity */
+  activityCard: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  activityRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+  },
+  activityRowBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: palette.border,
+  },
+  activityDot: { width: 7, height: 7, borderRadius: radii.pill },
+  activityIcon: { width: 30 },
+  activityText: { flex: 1, fontSize: fontSizes.caption, color: palette.ink },
+  activityTime: { fontSize: 10, color: palette.muted },
+
+  /* Donate */
+  donateCard: {
+    backgroundColor: `${palette.brandGreen}15`,
+    borderWidth: 1,
+    borderColor: `${palette.brandGreen}40`,
+    borderRadius: radii.lg,
+    padding: spacing.md,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  donateLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    flex: 1,
+  },
+  donateTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  donateSub: { fontSize: fontSizes.caption, color: palette.gray },
+  donateBtn: {
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.md,
+  },
+  donateBtnPressed: { backgroundColor: palette.brandGreenPressed },
+  donateBtnText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  mentorButton: {
+    alignItems: 'center',
+    backgroundColor: palette.ink,
+    borderRadius: radii.md,
+    paddingVertical: spacing.md,
+  },
+  mentorButtonPressed: { opacity: 0.8 },
+  mentorButtonText: {
+    color: palette.white,
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+  },
+});
diff --git a/app/(app)/(tabs)/learn.tsx b/app/(app)/(tabs)/learn.tsx
index ab7faa3..4bf6f03 100644
--- a/app/(app)/(tabs)/learn.tsx
+++ b/app/(app)/(tabs)/learn.tsx
@@ -1,5 +1,605 @@
-import { SessionPlaceholderScreen } from '@/components/SessionPlaceholderScreen';
+/**
+ * learn.tsx — Chess Lessons Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { router } from 'expo-router';
+import { useRef, useState } from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
+
+type LessonStatus = 'done' | 'available' | 'locked';
+
+type Piece = {
+  id: string;
+  emoji: string;
+  name: string;
+  mastered: number;
+  total: number;
+};
+
+type Lesson = {
+  id: string;
+  title: string;
+  duration: string;
+  status: LessonStatus;
+  xp: number;
+};
+
+const PIECES: Piece[] = [
+  { id: 'pawn', emoji: '♙', name: 'Pawn', mastered: 3, total: 3 },
+  { id: 'knight', emoji: '♞', name: 'Knight', mastered: 2, total: 4 },
+  { id: 'bishop', emoji: '♝', name: 'Bishop', mastered: 0, total: 3 },
+  { id: 'rook', emoji: '♜', name: 'Rook', mastered: 0, total: 3 },
+  { id: 'queen', emoji: '♛', name: 'Queen', mastered: 0, total: 4 },
+  { id: 'king', emoji: '♚', name: 'King', mastered: 0, total: 2 },
+];
+
+const LESSONS_BY_PIECE: Record<string, Lesson[]> = {
+  pawn: [
+    {
+      id: 'p1',
+      title: "The Pawn's First Move",
+      duration: '3 min',
+      status: 'done',
+      xp: 25,
+    },
+    {
+      id: 'p2',
+      title: 'Pawn Captures',
+      duration: '4 min',
+      status: 'done',
+      xp: 25,
+    },
+    {
+      id: 'p3',
+      title: 'En Passant & Promotion',
+      duration: '5 min',
+      status: 'done',
+      xp: 50,
+    },
+  ],
+  knight: [
+    {
+      id: 'k1',
+      title: 'The L-Shape Move',
+      duration: '4 min',
+      status: 'done',
+      xp: 25,
+    },
+    {
+      id: 'k2',
+      title: 'Knight Forks',
+      duration: '5 min',
+      status: 'done',
+      xp: 30,
+    },
+    {
+      id: 'k3',
+      title: 'Knight Outposts',
+      duration: '6 min',
+      status: 'available',
+      xp: 35,
+    },
+    {
+      id: 'k4',
+      title: 'Knight vs Bishop',
+      duration: '7 min',
+      status: 'locked',
+      xp: 40,
+    },
+  ],
+  bishop: [
+    {
+      id: 'b1',
+      title: 'Diagonal Power',
+      duration: '3 min',
+      status: 'available',
+      xp: 25,
+    },
+    {
+      id: 'b2',
+      title: 'The Bishop Pair',
+      duration: '5 min',
+      status: 'locked',
+      xp: 30,
+    },
+    {
+      id: 'b3',
+      title: 'Good vs Bad Bishop',
+      duration: '6 min',
+      status: 'locked',
+      xp: 35,
+    },
+  ],
+  rook: [
+    {
+      id: 'r1',
+      title: 'Open File Strategy',
+      duration: '4 min',
+      status: 'available',
+      xp: 25,
+    },
+    {
+      id: 'r2',
+      title: 'The Seventh Rank',
+      duration: '5 min',
+      status: 'locked',
+      xp: 30,
+    },
+    {
+      id: 'r3',
+      title: 'Rook Endgames',
+      duration: '8 min',
+      status: 'locked',
+      xp: 50,
+    },
+  ],
+  queen: [
+    {
+      id: 'q1',
+      title: 'The Most Powerful Piece',
+      duration: '4 min',
+      status: 'available',
+      xp: 25,
+    },
+    {
+      id: 'q2',
+      title: 'Queen Attacks',
+      duration: '5 min',
+      status: 'locked',
+      xp: 30,
+    },
+    {
+      id: 'q3',
+      title: 'Queen & Pawn Endgames',
+      duration: '7 min',
+      status: 'locked',
+      xp: 40,
+    },
+    {
+      id: 'q4',
+      title: 'The Queen Sacrifice',
+      duration: '6 min',
+      status: 'locked',
+      xp: 50,
+    },
+  ],
+  king: [
+    {
+      id: 'kg1',
+      title: 'King Safety & Castling',
+      duration: '5 min',
+      status: 'available',
+      xp: 30,
+    },
+    {
+      id: 'kg2',
+      title: 'King in the Endgame',
+      duration: '7 min',
+      status: 'locked',
+      xp: 40,
+    },
+  ],
+};
+
+const STATUS_META: Record<
+  LessonStatus,
+  { icon: string; color: string; bg: string }
+> = {
+  done: { icon: '✓', color: palette.brandGreen, bg: palette.backgroundSoft },
+  available: { icon: '▶', color: palette.ink, bg: palette.surface },
+  locked: { icon: '🔒', color: palette.muted, bg: palette.surface },
+};
 
 export default function LearnRoute() {
-  return <SessionPlaceholderScreen title="Learn" />;
+  const [selectedPiece, setSelectedPiece] = useState('knight');
+  const scrollRef = useRef<ScrollView>(null);
+
+  const lessons = LESSONS_BY_PIECE[selectedPiece] ?? [];
+  const totalMastered = PIECES.filter((p) => p.mastered === p.total).length;
+  const totalPieces = PIECES.length;
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* ── Header ─────────────────────────────── */}
+      <View style={s.header}>
+        <View>
+          <Text style={s.headerSup}>CHESS ACADEMY</Text>
+          <Text style={s.headerTitle}>Your Learning Path</Text>
+        </View>
+        <View style={s.progressPill}>
+          <Text style={s.progressPillText}>
+            {totalMastered}/{totalPieces} mastered
+          </Text>
+        </View>
+      </View>
+
+      {/* ── Progress Bar ───────────────────────── */}
+      <View style={s.progressTrack}>
+        <Animated.View
+          style={[
+            s.progressFill,
+            { width: `${(totalMastered / totalPieces) * 100}%` as any },
+          ]}
+        />
+      </View>
+
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={s.scroll}
+      >
+        {/* ── Piece Selector ─────────────────────── */}
+        <Text style={s.subLabel}>Choose a piece to study</Text>
+        <ScrollView
+          horizontal
+          ref={scrollRef}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={s.pieces}
+        >
+          {PIECES.map((piece) => {
+            const isSelected = selectedPiece === piece.id;
+            const isDone = piece.mastered === piece.total;
+            const progress = piece.total > 0 ? piece.mastered / piece.total : 0;
+
+            return (
+              <Pressable
+                key={piece.id}
+                onPress={() => setSelectedPiece(piece.id)}
+                style={[s.pieceCard, isSelected && s.pieceCardSelected]}
+              >
+                {/* Completion ring indicator */}
+                {isDone && (
+                  <View style={s.pieceCheck}>
+                    <Text style={s.pieceCheckIcon}>✓</Text>
+                  </View>
+                )}
+                <Text style={[s.pieceEmoji, !isSelected && { opacity: 0.7 }]}>
+                  {piece.emoji}
+                </Text>
+                <Text style={[s.pieceName, isSelected && s.pieceNameSelected]}>
+                  {piece.name}
+                </Text>
+                <View style={s.pieceMeta}>
+                  <View style={s.pieceBar}>
+                    <View
+                      style={[
+                        s.pieceBarFill,
+                        {
+                          width: `${progress * 100}%` as any,
+                          backgroundColor: isDone
+                            ? palette.brandGreen
+                            : palette.accentYellow,
+                        },
+                      ]}
+                    />
+                  </View>
+                  <Text
+                    style={[s.pieceCount, isSelected && s.pieceCountSelected]}
+                  >
+                    {piece.mastered}/{piece.total}
+                  </Text>
+                </View>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+
+        {/* ── Lesson List ────────────────────────── */}
+        <View style={s.lessonsHeader}>
+          <Text style={s.subLabel}>
+            {PIECES.find((p) => p.id === selectedPiece)?.name} Lessons
+          </Text>
+          <Text style={s.lessonsCount}>
+            {lessons.filter((l) => l.status === 'done').length}/{lessons.length}{' '}
+            done
+          </Text>
+        </View>
+
+        <View style={s.lessonList}>
+          {lessons.map((lesson, i) => {
+            const meta = STATUS_META[lesson.status];
+            const isAvailable = lesson.status !== 'locked';
+
+            return (
+              <Pressable
+                key={lesson.id}
+                disabled={!isAvailable}
+                onPress={() =>
+                  router.push({
+                    pathname: '/lesson-detail',
+                    params: { id: lesson.id, piece: selectedPiece },
+                  } as never)
+                }
+                style={({ pressed }) => [
+                  s.lessonRow,
+                  i < lessons.length - 1 && s.lessonRowBorder,
+                  !isAvailable && s.lessonRowLocked,
+                  pressed && isAvailable && s.lessonRowPressed,
+                ]}
+              >
+                {/* Step number / status indicator */}
+                <View
+                  style={[
+                    s.lessonStatus,
+                    {
+                      backgroundColor: meta.bg,
+                      borderColor:
+                        lesson.status === 'done'
+                          ? palette.brandGreen
+                          : palette.border,
+                    },
+                  ]}
+                >
+                  <Text style={[s.lessonStatusIcon, { color: meta.color }]}>
+                    {meta.icon}
+                  </Text>
+                </View>
+
+                <View style={s.lessonContent}>
+                  <Text
+                    style={[s.lessonTitle, !isAvailable && s.lessonTitleLocked]}
+                  >
+                    {lesson.title}
+                  </Text>
+                  <View style={s.lessonMeta}>
+                    <Text style={s.lessonDuration}>⏱ {lesson.duration}</Text>
+                    <View style={s.lessonXPBadge}>
+                      <Text style={s.lessonXPText}>+{lesson.xp} XP</Text>
+                    </View>
+                  </View>
+                </View>
+
+                {isAvailable && <Text style={s.lessonArrow}>›</Text>}
+              </Pressable>
+            );
+          })}
+        </View>
+
+        <View style={{ height: spacing.xl }} />
+      </ScrollView>
+
+      {/* ── CTA Footer ─────────────────────────── */}
+      {(() => {
+        const nextLesson = lessons.find((l) => l.status === 'available');
+        if (!nextLesson) return null;
+        return (
+          <View style={s.footer}>
+            <Pressable
+              onPress={() =>
+                router.push({
+                  pathname: '/lesson-detail',
+                  params: { id: nextLesson.id, piece: selectedPiece },
+                } as never)
+              }
+              style={({ pressed }) => [s.ctaBtn, pressed && s.ctaBtnPressed]}
+            >
+              <Text style={s.ctaBtnText}>Continue: {nextLesson.title} →</Text>
+            </Pressable>
+          </View>
+        );
+      })()}
+    </SafeAreaView>
+  );
 }
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.06,
+  shadowRadius: 8,
+  elevation: 2,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+  scroll: { paddingHorizontal: spacing.lg, gap: spacing.md },
+
+  /* Header */
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.lg,
+    paddingBottom: spacing.sm,
+  },
+  headerSup: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  headerTitle: {
+    fontSize: fontSizes.title,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    letterSpacing: -0.5,
+  },
+  progressPill: {
+    backgroundColor: `${palette.brandGreen}20`,
+    borderWidth: 1,
+    borderColor: `${palette.brandGreen}40`,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  progressPillText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+
+  /* Progress bar */
+  progressTrack: {
+    height: 3,
+    backgroundColor: palette.border,
+    marginHorizontal: spacing.lg,
+    marginBottom: spacing.md,
+    borderRadius: radii.pill,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+  },
+
+  subLabel: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+
+  /* Piece cards */
+  pieces: { gap: spacing.sm, paddingBottom: spacing.xs },
+  pieceCard: {
+    width: 88,
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 2,
+    borderColor: palette.border,
+    padding: spacing.sm,
+    alignItems: 'center',
+    gap: 4,
+    position: 'relative',
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  pieceCardSelected: {
+    borderColor: palette.brandGreen,
+    backgroundColor: palette.backgroundSoft,
+  },
+  pieceCheck: {
+    position: 'absolute',
+    top: 5,
+    right: 5,
+    width: 18,
+    height: 18,
+    borderRadius: radii.pill,
+    backgroundColor: palette.brandGreen,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pieceCheckIcon: {
+    fontSize: 9,
+    color: palette.white,
+    fontWeight: fontWeights.bold,
+  },
+  pieceEmoji: { fontSize: 28 },
+  pieceName: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.semibold,
+    color: palette.muted,
+  },
+  pieceNameSelected: { color: palette.ink },
+  pieceMeta: { width: '100%', gap: 2, alignItems: 'center' },
+  pieceBar: {
+    width: '100%',
+    height: 3,
+    backgroundColor: palette.border,
+    borderRadius: radii.pill,
+    overflow: 'hidden',
+  },
+  pieceBarFill: { height: '100%', borderRadius: radii.pill },
+  pieceCount: { fontSize: 9, color: palette.muted },
+  pieceCountSelected: { color: palette.gray },
+
+  /* Lesson list */
+  lessonsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: spacing.xs,
+  },
+  lessonsCount: { fontSize: fontSizes.caption, color: palette.muted },
+  lessonList: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  lessonRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    padding: spacing.md,
+  },
+  lessonRowBorder: { borderBottomWidth: 1, borderBottomColor: palette.border },
+  lessonRowLocked: { opacity: 0.5 },
+  lessonRowPressed: { backgroundColor: palette.backgroundSoft },
+  lessonStatus: {
+    width: 36,
+    height: 36,
+    borderRadius: radii.pill,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  lessonStatusIcon: { fontSize: 13, fontWeight: fontWeights.bold },
+  lessonContent: { flex: 1, gap: 3 },
+  lessonTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+  lessonTitleLocked: { color: palette.muted },
+  lessonMeta: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  lessonDuration: { fontSize: fontSizes.caption, color: palette.muted },
+  lessonXPBadge: {
+    backgroundColor: `${palette.accentYellow}33`,
+    paddingVertical: 1,
+    paddingHorizontal: spacing.xs,
+    borderRadius: radii.pill,
+  },
+  lessonXPText: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  lessonArrow: { fontSize: fontSizes.heading, color: palette.muted },
+
+  /* Footer CTA */
+  footer: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    paddingBottom: spacing.lg,
+    backgroundColor: theme.colors.background,
+    borderTopWidth: 1,
+    borderTopColor: palette.border,
+  },
+  ctaBtn: {
+    backgroundColor: palette.ink,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ctaBtnPressed: { opacity: 0.85 },
+  ctaBtnText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+});
diff --git a/app/(app)/(tabs)/play.tsx b/app/(app)/(tabs)/play.tsx
index 08fc19f..44c9d34 100644
--- a/app/(app)/(tabs)/play.tsx
+++ b/app/(app)/(tabs)/play.tsx
@@ -1,5 +1,480 @@
-import { SessionPlaceholderScreen } from '@/components/SessionPlaceholderScreen';
+/**
+ * play.tsx — Play vs Computer Setup Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { router } from 'expo-router';
+import { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
+
+type PieceColor = 'white' | 'black' | 'random';
+type Difficulty = 'beginner' | 'easy' | 'medium' | 'hard' | 'master';
+
+const COLORS: {
+  id: PieceColor;
+  emoji: string;
+  label: string;
+  sub: string;
+  bg: string;
+  border: string;
+  textColor: string;
+}[] = [
+  {
+    id: 'white',
+    emoji: '♔',
+    label: 'White',
+    sub: 'Moves first',
+    bg: '#FAFAFA',
+    border: '#E0E0E0',
+    textColor: palette.ink,
+  },
+  {
+    id: 'black',
+    emoji: '♚',
+    label: 'Black',
+    sub: 'Moves second',
+    bg: '#2A2A2A',
+    border: '#444444',
+    textColor: palette.white,
+  },
+  {
+    id: 'random',
+    emoji: '⚄',
+    label: 'Random',
+    sub: 'Surprise me!',
+    bg: palette.backgroundSoft,
+    border: palette.brandGreenSoft,
+    textColor: palette.ink,
+  },
+];
+
+const DIFFICULTIES: {
+  id: Difficulty;
+  emoji: string;
+  label: string;
+  desc: string;
+  level: number;
+  color: string;
+  bg: string;
+}[] = [
+  {
+    id: 'beginner',
+    emoji: '🌱',
+    label: 'Beginner',
+    desc: 'Learn the basics',
+    level: 1,
+    color: palette.brandGreen,
+    bg: `${palette.brandGreen}1A`,
+  },
+  {
+    id: 'easy',
+    emoji: '😊',
+    label: 'Easy',
+    desc: 'Gentle challenge',
+    level: 4,
+    color: palette.brandGreenSoft,
+    bg: `${palette.brandGreenSoft}33`,
+  },
+  {
+    id: 'medium',
+    emoji: '🤔',
+    label: 'Medium',
+    desc: 'Real thinking',
+    level: 8,
+    color: palette.accentYellow,
+    bg: `${palette.accentYellow}22`,
+  },
+  {
+    id: 'hard',
+    emoji: '😤',
+    label: 'Hard',
+    desc: 'Strong tactics',
+    level: 14,
+    color: '#FF8C42',
+    bg: 'rgba(255,140,66,0.12)',
+  },
+  {
+    id: 'master',
+    emoji: '👑',
+    label: 'Master',
+    desc: 'Near-perfect play',
+    level: 20,
+    color: palette.error,
+    bg: `${palette.error}1A`,
+  },
+];
 
 export default function PlayRoute() {
-  return <SessionPlaceholderScreen title="Play" />;
+  const [color, setColor] = useState<PieceColor>('white');
+  const [difficulty, setDifficulty] = useState<Difficulty>('beginner');
+
+  const chosen = DIFFICULTIES.find((d) => d.id === difficulty)!;
+  const chosenColor = COLORS.find((c) => c.id === color)!;
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* ── Header ─────────────────────────────── */}
+      <View style={s.header}>
+        <Text style={s.headerSup}>SINGLE PLAYER</Text>
+        <Text style={s.headerTitle}>Play vs Computer</Text>
+      </View>
+
+      <ScrollView
+        contentContainerStyle={s.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Color Picker ──────────────────────── */}
+        <View style={s.section}>
+          <Text style={s.subLabel}>Choose your side</Text>
+          <View style={s.colorRow}>
+            {COLORS.map((c) => (
+              <Pressable
+                key={c.id}
+                accessibilityLabel={`Play as ${c.label}`}
+                accessibilityState={{ selected: color === c.id }}
+                onPress={() => setColor(c.id)}
+                style={[
+                  s.colorCard,
+                  { backgroundColor: c.bg, borderColor: c.border },
+                  color === c.id && s.colorCardSelected,
+                ]}
+              >
+                {color === c.id && (
+                  <View
+                    style={[
+                      s.colorCheck,
+                      {
+                        backgroundColor:
+                          c.id === 'white' ? palette.ink : palette.white,
+                      },
+                    ]}
+                  >
+                    <Text
+                      style={{
+                        fontSize: 9,
+                        fontWeight: fontWeights.bold,
+                        color: c.id === 'white' ? palette.white : palette.ink,
+                      }}
+                    >
+                      ✓
+                    </Text>
+                  </View>
+                )}
+                <Text style={s.colorEmoji}>{c.emoji}</Text>
+                <Text style={[s.colorLabel, { color: c.textColor }]}>
+                  {c.label}
+                </Text>
+                <Text
+                  style={[
+                    s.colorSub,
+                    {
+                      color:
+                        c.id === 'black'
+                          ? 'rgba(255,255,255,0.5)'
+                          : palette.muted,
+                    },
+                  ]}
+                >
+                  {c.sub}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+
+        {/* ── Difficulty ────────────────────────── */}
+        <View style={s.section}>
+          <View style={s.diffTitleRow}>
+            <Text style={s.subLabel}>Difficulty</Text>
+            <View style={[s.diffChosenBadge, { backgroundColor: chosen.bg }]}>
+              <Text style={[s.diffChosenText, { color: chosen.color }]}>
+                {chosen.emoji} {chosen.label}
+              </Text>
+            </View>
+          </View>
+
+          {DIFFICULTIES.map((d) => (
+            <Pressable
+              key={d.id}
+              accessibilityLabel={`Difficulty: ${d.label}`}
+              accessibilityState={{ selected: difficulty === d.id }}
+              onPress={() => setDifficulty(d.id)}
+              style={[s.diffRow, difficulty === d.id && s.diffRowSelected]}
+            >
+              {/* Color accent bar on left */}
+              <View style={[s.diffAccentBar, { backgroundColor: d.color }]} />
+
+              <Text style={s.diffEmoji}>{d.emoji}</Text>
+
+              <View style={s.diffInfo}>
+                <Text
+                  style={[
+                    s.diffLabel,
+                    difficulty === d.id && { color: palette.ink },
+                  ]}
+                >
+                  {d.label}
+                </Text>
+                <Text style={s.diffDesc}>{d.desc}</Text>
+              </View>
+
+              {/* Level dots */}
+              <View style={s.diffDots}>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <View
+                    key={i}
+                    style={[
+                      s.diffDot,
+                      {
+                        backgroundColor:
+                          i < DIFFICULTIES.indexOf(d) + 1
+                            ? d.color
+                            : palette.border,
+                      },
+                    ]}
+                  />
+                ))}
+              </View>
+
+              {difficulty === d.id && (
+                <Text style={[s.diffCheck, { color: d.color }]}>✓</Text>
+              )}
+            </Pressable>
+          ))}
+        </View>
+
+        {/* ── Game Summary ──────────────────────── */}
+        <View style={s.summary}>
+          <Text style={s.summaryTitle}>Game Summary</Text>
+          <View style={s.summaryRows}>
+            {[
+              {
+                label: 'Playing as',
+                value: `${chosenColor.emoji} ${chosenColor.label}`,
+              },
+              { label: 'Opponent', value: `🤖 Computer (${chosen.label})` },
+              {
+                label: 'Engine Lv',
+                value: `${chosen.emoji} Level ${chosen.level}`,
+              },
+            ].map((row, i, arr) => (
+              <View
+                key={row.label}
+                style={[s.summaryRow, i < arr.length - 1 && s.summaryRowBorder]}
+              >
+                <Text style={s.summaryLabel}>{row.label}</Text>
+                <Text style={s.summaryValue}>{row.value}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+
+        <View style={{ height: 80 }} />
+      </ScrollView>
+
+      {/* ── CTA Footer ─────────────────────────── */}
+      <View style={s.footer}>
+        <Pressable
+          accessibilityLabel="Start game"
+          onPress={() =>
+            router.push({
+              pathname: '/play-game',
+              params: { color, difficulty },
+            } as never)
+          }
+          style={({ pressed }) => [s.ctaBtn, pressed && s.ctaBtnPressed]}
+        >
+          <Text style={s.ctaBtnText}>Let’s Play ♟</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
 }
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.06,
+  shadowRadius: 8,
+  elevation: 2,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+  header: {
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.lg,
+    paddingBottom: spacing.xs,
+  },
+  headerSup: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  headerTitle: {
+    fontSize: fontSizes.title,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    letterSpacing: -0.5,
+  },
+  scroll: { paddingHorizontal: spacing.lg, gap: spacing.xl },
+
+  subLabel: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+    marginBottom: spacing.sm,
+  },
+  section: { gap: spacing.xs },
+
+  /* Color picker */
+  colorRow: { flexDirection: 'row', gap: spacing.sm },
+  colorCard: {
+    flex: 1,
+    borderRadius: radii.xl,
+    borderWidth: 2,
+    padding: spacing.md,
+    alignItems: 'center',
+    gap: spacing.xs,
+    position: 'relative',
+    overflow: 'hidden',
+    minHeight: 110,
+    justifyContent: 'center',
+    ...SHADOW,
+  },
+  colorCardSelected: { borderColor: palette.brandGreen },
+  colorCheck: {
+    position: 'absolute',
+    top: spacing.xs,
+    right: spacing.xs,
+    width: 20,
+    height: 20,
+    borderRadius: radii.pill,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  colorEmoji: { fontSize: 36 },
+  colorLabel: { fontSize: fontSizes.label, fontWeight: fontWeights.bold },
+  colorSub: { fontSize: fontSizes.caption },
+
+  /* Difficulty list */
+  diffTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: spacing.xs,
+  },
+  diffChosenBadge: {
+    paddingVertical: 3,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  diffChosenText: { fontSize: fontSizes.caption, fontWeight: fontWeights.bold },
+  diffRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1.5,
+    borderColor: palette.border,
+    padding: spacing.md,
+    overflow: 'hidden',
+    position: 'relative',
+    marginBottom: spacing.sm,
+    ...SHADOW,
+  },
+  diffRowSelected: {
+    borderColor: palette.brandGreen,
+    backgroundColor: palette.backgroundSoft,
+  },
+  diffAccentBar: { position: 'absolute', left: 0, top: 0, bottom: 0, width: 3 },
+  diffEmoji: { fontSize: 22 },
+  diffInfo: { flex: 1, gap: 2 },
+  diffLabel: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.muted,
+  },
+  diffDesc: { fontSize: fontSizes.caption, color: palette.muted },
+  diffDots: { flexDirection: 'row', gap: 3 },
+  diffDot: { width: 6, height: 6, borderRadius: radii.pill },
+  diffCheck: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    marginLeft: spacing.xs,
+  },
+
+  /* Summary */
+  summary: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  summaryTitle: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.md,
+    paddingBottom: spacing.sm,
+  },
+  summaryRows: {},
+  summaryRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+  },
+  summaryRowBorder: { borderBottomWidth: 1, borderBottomColor: palette.border },
+  summaryLabel: { fontSize: fontSizes.caption, color: palette.muted },
+  summaryValue: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+
+  /* Footer */
+  footer: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    paddingBottom: spacing.lg,
+    backgroundColor: theme.colors.background,
+    borderTopWidth: 1,
+    borderTopColor: palette.border,
+  },
+  ctaBtn: {
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ctaBtnPressed: { backgroundColor: palette.brandGreenPressed },
+  ctaBtnText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    letterSpacing: 0.3,
+  },
+});
diff --git a/app/(app)/(tabs)/profile.tsx b/app/(app)/(tabs)/profile.tsx
index 3e313b7..f620b6a 100644
--- a/app/(app)/(tabs)/profile.tsx
+++ b/app/(app)/(tabs)/profile.tsx
@@ -1,15 +1,483 @@
-import { SessionPlaceholderScreen } from '@/components/SessionPlaceholderScreen';
-import { Button } from '@/components/ui/Button';
+/**
+ * profile.tsx — Profile Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
 import { useSession } from '@/providers/SessionProvider';
 
+type Badge = {
+  id: string;
+  emoji: string;
+  label: string;
+  desc: string;
+  earned: boolean;
+};
+type StatItem = { label: string; value: string; icon: string };
+type MenuItem = { label: string; emoji: string; sub: string };
+
+const STATS: StatItem[] = [
+  { label: 'Lessons', value: '5', icon: '📚' },
+  { label: 'Puzzles', value: '12', icon: '🧩' },
+  { label: 'Wins', value: '3', icon: '♟' },
+  { label: 'Streak', value: '5', icon: '🔥' },
+];
+
+const BADGES: Badge[] = [
+  {
+    id: '1',
+    emoji: '🌱',
+    label: 'First Lesson',
+    desc: 'Complete your first lesson',
+    earned: true,
+  },
+  {
+    id: '2',
+    emoji: '🧩',
+    label: 'Puzzle Solver',
+    desc: 'Solve 10 puzzles',
+    earned: true,
+  },
+  {
+    id: '3',
+    emoji: '♟',
+    label: 'First Win',
+    desc: 'Win your first game',
+    earned: true,
+  },
+  {
+    id: '4',
+    emoji: '🔥',
+    label: '5-Day Streak',
+    desc: 'Practice 5 days in a row',
+    earned: true,
+  },
+  {
+    id: '5',
+    emoji: '📚',
+    label: 'Quick Learner',
+    desc: 'Complete 5 lessons in one week',
+    earned: true,
+  },
+  {
+    id: '6',
+    emoji: '🏆',
+    label: 'Champion',
+    desc: 'Win 10 games',
+    earned: false,
+  },
+  {
+    id: '7',
+    emoji: '💎',
+    label: 'Mastermind',
+    desc: 'Solve a 1600+ rated puzzle',
+    earned: false,
+  },
+  {
+    id: '8',
+    emoji: '⚡',
+    label: 'Speed Solver',
+    desc: 'Solve a puzzle in under 30 seconds',
+    earned: false,
+  },
+  {
+    id: '9',
+    emoji: '🎯',
+    label: 'Perfectionist',
+    desc: '10 correct puzzles in a row',
+    earned: false,
+  },
+];
+
+const MENU_SECTIONS: { title: string; items: MenuItem[] }[] = [
+  {
+    title: 'Account',
+    items: [
+      { label: 'Edit Profile', emoji: '✏️', sub: 'Name, avatar, bio' },
+      {
+        label: 'Notification Settings',
+        emoji: '🔔',
+        sub: 'Alerts & reminders',
+      },
+    ],
+  },
+  {
+    title: 'Privacy',
+    items: [
+      {
+        label: 'Privacy & Security',
+        emoji: '🔒',
+        sub: 'Data & account protection',
+      },
+      { label: 'Connected Accounts', emoji: '🔗', sub: 'Google, Apple' },
+    ],
+  },
+  {
+    title: 'Support',
+    items: [
+      { label: 'Help & Support', emoji: '❓', sub: 'FAQs & contact us' },
+      { label: 'About Y STEM', emoji: 'ℹ️', sub: 'Mission & team' },
+    ],
+  },
+];
+
 export default function ProfileRoute() {
-  const { signOut } = useSession();
+  const { session, signOut } = useSession();
+  const displayName =
+    session.status === 'authenticated' ? session.user.displayName : 'Student';
+  const role =
+    session.status === 'authenticated' ? session.user.role : 'student';
+  const initial = displayName.charAt(0).toUpperCase();
+  const earnedCount = BADGES.filter((b) => b.earned).length;
 
   return (
-    <SessionPlaceholderScreen title="Profile">
-      <Button onPress={signOut} variant="secondary">
-        Sign out
-      </Button>
-    </SessionPlaceholderScreen>
+    <SafeAreaView style={s.safe}>
+      <ScrollView
+        contentContainerStyle={s.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Hero ───────────────────────────────── */}
+        <View style={s.hero}>
+          <View style={s.avatarRing}>
+            <View style={s.avatar}>
+              <Text style={s.avatarText}>{initial}</Text>
+            </View>
+          </View>
+          <Text style={s.displayName}>{displayName}</Text>
+          <View style={s.roleBadge}>
+            <Text style={s.roleIcon}>{role === 'mentor' ? '🎓' : '🎒'}</Text>
+            <Text style={s.roleText}>
+              {role === 'mentor' ? 'Mentor' : 'Student'}
+            </Text>
+          </View>
+          <View style={s.xpRow}>
+            <View style={s.xpPill}>
+              <Text style={s.xpText}>250 XP</Text>
+            </View>
+            <Text style={s.xpSep}>·</Text>
+            <Text style={s.xpLevel}>Level 3</Text>
+          </View>
+        </View>
+
+        {/* ── Stats ──────────────────────────────── */}
+        <View style={s.statsCard}>
+          {STATS.map((stat, i) => (
+            <View
+              key={stat.label}
+              style={[s.statItem, i < STATS.length - 1 && s.statItemBorder]}
+            >
+              <Text style={s.statIcon}>{stat.icon}</Text>
+              <Text style={s.statValue}>{stat.value}</Text>
+              <Text style={s.statLabel}>{stat.label}</Text>
+            </View>
+          ))}
+        </View>
+
+        {/* ── Badges ─────────────────────────────── */}
+        <View style={s.section}>
+          <View style={s.sectionHeader}>
+            <Text style={s.sectionTitle}>Badges</Text>
+            <Text style={s.sectionSub}>
+              {earnedCount}/{BADGES.length} earned
+            </Text>
+          </View>
+          <View style={s.badgesGrid}>
+            {BADGES.map((badge) => (
+              <Pressable
+                key={badge.id}
+                accessibilityLabel={`${badge.label}: ${badge.desc}`}
+                style={({ pressed }) => [
+                  s.badgeCard,
+                  !badge.earned && s.badgeCardLocked,
+                  pressed && badge.earned && s.badgeCardPressed,
+                ]}
+              >
+                <Text
+                  style={[s.badgeEmoji, !badge.earned && { opacity: 0.35 }]}
+                >
+                  {badge.emoji}
+                </Text>
+                <Text
+                  style={[
+                    s.badgeLabel,
+                    !badge.earned && { color: palette.muted },
+                  ]}
+                  numberOfLines={2}
+                >
+                  {badge.label}
+                </Text>
+                {!badge.earned && (
+                  <View style={s.badgeLockOverlay}>
+                    <Text style={s.badgeLockIcon}>🔒</Text>
+                  </View>
+                )}
+              </Pressable>
+            ))}
+          </View>
+        </View>
+
+        {/* ── Settings Sections ──────────────────── */}
+        {MENU_SECTIONS.map((section) => (
+          <View key={section.title} style={s.section}>
+            <Text style={s.menuSectionTitle}>{section.title}</Text>
+            <View style={s.menuCard}>
+              {section.items.map((item, i) => (
+                <Pressable
+                  key={item.label}
+                  style={({ pressed }) => [
+                    s.menuRow,
+                    i < section.items.length - 1 && s.menuRowBorder,
+                    pressed && s.menuRowPressed,
+                  ]}
+                >
+                  <View style={s.menuIconWrap}>
+                    <Text style={s.menuEmoji}>{item.emoji}</Text>
+                  </View>
+                  <View style={s.menuContent}>
+                    <Text style={s.menuLabel}>{item.label}</Text>
+                    <Text style={s.menuSub}>{item.sub}</Text>
+                  </View>
+                  <Text style={s.menuArrow}>›</Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        ))}
+
+        {/* ── Sign Out ───────────────────────────── */}
+        <Pressable
+          accessibilityLabel="Sign out"
+          accessibilityRole="button"
+          onPress={signOut}
+          style={({ pressed }) => [
+            s.signOutBtn,
+            pressed && s.signOutBtnPressed,
+          ]}
+        >
+          <Text style={s.signOutText}>Sign out</Text>
+        </Pressable>
+
+        <View style={{ height: spacing.xl }} />
+      </ScrollView>
+    </SafeAreaView>
   );
 }
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.06,
+  shadowRadius: 8,
+  elevation: 2,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+  scroll: {
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.lg,
+    gap: spacing.xl,
+  },
+
+  /* Hero */
+  hero: { alignItems: 'center', gap: spacing.sm, paddingBottom: spacing.md },
+  avatarRing: {
+    width: 92,
+    height: 92,
+    borderRadius: radii.pill,
+    backgroundColor: `${palette.brandGreen}25`,
+    padding: 4,
+  },
+  avatar: {
+    flex: 1,
+    borderRadius: radii.pill,
+    backgroundColor: palette.brandGreen,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    fontSize: fontSizes.title,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+  displayName: {
+    fontSize: fontSizes.heading,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  roleBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xxs,
+    backgroundColor: `${palette.brandGreen}20`,
+    borderWidth: 1,
+    borderColor: `${palette.brandGreen}40`,
+    borderRadius: radii.pill,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+  },
+  roleIcon: { fontSize: 13 },
+  roleText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+  xpRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  xpPill: {
+    backgroundColor: `${palette.accentYellow}33`,
+    paddingVertical: 2,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  xpText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  xpSep: { color: palette.muted },
+  xpLevel: { fontSize: fontSizes.caption, color: palette.muted },
+
+  /* Stats */
+  statsCard: {
+    flexDirection: 'row',
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  statItem: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: spacing.md,
+    gap: 2,
+  },
+  statItemBorder: { borderRightWidth: 1, borderRightColor: palette.border },
+  statIcon: { fontSize: 16, marginBottom: 2 },
+  statValue: {
+    fontSize: fontSizes.heading,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  statLabel: { fontSize: fontSizes.caption - 1, color: palette.muted },
+
+  /* Section */
+  section: { gap: spacing.md },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  sectionTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  sectionSub: { fontSize: fontSizes.caption, color: palette.muted },
+
+  /* Badges */
+  badgesGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.sm },
+  badgeCard: {
+    width: '30%',
+    flexGrow: 1,
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: palette.border,
+    padding: spacing.sm,
+    alignItems: 'center',
+    gap: spacing.xxs,
+    position: 'relative',
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  badgeCardLocked: { opacity: 0.6 },
+  badgeCardPressed: { backgroundColor: palette.backgroundSoft },
+  badgeEmoji: { fontSize: 26, marginBottom: 2 },
+  badgeLabel: {
+    fontSize: fontSizes.caption - 1,
+    fontWeight: fontWeights.semibold,
+    color: palette.gray,
+    textAlign: 'center',
+  },
+  badgeLockOverlay: {
+    position: 'absolute',
+    top: spacing.xxs,
+    right: spacing.xxs,
+  },
+  badgeLockIcon: { fontSize: 10 },
+
+  /* Menu */
+  menuSectionTitle: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  menuCard: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    overflow: 'hidden',
+    ...SHADOW,
+  },
+  menuRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.md,
+  },
+  menuRowBorder: { borderBottomWidth: 1, borderBottomColor: palette.border },
+  menuRowPressed: { backgroundColor: palette.backgroundSoft },
+  menuIconWrap: {
+    width: 36,
+    height: 36,
+    borderRadius: radii.sm,
+    backgroundColor: theme.colors.background,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: palette.border,
+  },
+  menuEmoji: { fontSize: 17 },
+  menuContent: { flex: 1, gap: 1 },
+  menuLabel: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+  menuSub: { fontSize: fontSizes.caption, color: palette.muted },
+  menuArrow: { fontSize: fontSizes.heading, color: palette.muted },
+
+  /* Sign out */
+  signOutBtn: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOW,
+  },
+  signOutBtnPressed: { backgroundColor: palette.errorBackground },
+  signOutText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.error,
+  },
+});
diff --git a/app/(app)/lesson-detail.tsx b/app/(app)/lesson-detail.tsx
new file mode 100644
index 0000000..08b39f1
--- /dev/null
+++ b/app/(app)/lesson-detail.tsx
@@ -0,0 +1,626 @@
+/**
+ * lesson-detail.tsx — Lesson Step-Through Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { router, useLocalSearchParams } from 'expo-router';
+import { useState } from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
+
+type Step = {
+  id: string;
+  title: string;
+  instruction: string;
+  tip?: string;
+  highlight?: string;
+  piece?: string;
+};
+
+const STEPS_BY_PIECE: Record<string, Step[]> = {
+  knight: [
+    {
+      id: '1',
+      title: 'The L-Shape Move',
+      instruction:
+        'The Knight is the only piece that can jump over other pieces. It moves in an "L" shape: two squares in one direction, then one square perpendicular.',
+      tip: 'Knights always land on a different color square than they started on!',
+      highlight: 'g1',
+      piece: '♞',
+    },
+    {
+      id: '2',
+      title: 'Power of the Center',
+      instruction:
+        'From e4, the Knight can jump to f6, g5, g3, f2, d2, c3, c5, or d6 — up to 8 squares from the center!',
+      tip: 'Center Knights are more powerful — they control more squares.',
+      highlight: 'e4',
+      piece: '♞',
+    },
+    {
+      id: '3',
+      title: 'Knights at the Edge',
+      instruction:
+        'At the edge of the board, the Knight loses options. A Knight on a1 can only reach b3 or c2 — just 2 squares!',
+      tip: '"A Knight on the rim is dim."',
+      highlight: 'a1',
+      piece: '♞',
+    },
+    {
+      id: '4',
+      title: 'The Fork',
+      instruction:
+        'Knights excel at creating "forks" — attacking two pieces at once. Because of their L-shape, opponents often miss the threat!',
+      tip: 'Look for Knight forks against the King and Rook — a "royal fork".',
+      piece: '♞',
+    },
+  ],
+  pawn: [
+    {
+      id: '1',
+      title: 'The First Move',
+      instruction:
+        'Pawns normally move one square forward, but on their first move they can advance two squares. They capture diagonally.',
+      tip: 'Moving two squares on the first move can help control the center faster.',
+      highlight: 'e2',
+      piece: '♙',
+    },
+    {
+      id: '2',
+      title: 'Pawn Captures',
+      instruction:
+        'A pawn captures diagonally one square forward. This means a pawn on e4 can capture on d5 or f5.',
+      tip: 'Unlike other pieces, pawns cannot capture straight forward!',
+      highlight: 'e4',
+      piece: '♙',
+    },
+    {
+      id: '3',
+      title: 'En Passant',
+      instruction:
+        "If an opponent's pawn advances two squares and lands beside your pawn, you can capture it as if it had only moved one square. This is called en passant.",
+      tip: "En passant must be made immediately — you can't wait for the next move.",
+      piece: '♙',
+    },
+  ],
+  rook: [
+    {
+      id: '1',
+      title: 'Open File Strategy',
+      instruction:
+        'Rooks are most powerful on open files — columns with no pawns blocking them. Rooks on the 7th rank are especially strong.',
+      tip: 'Connect your rooks by castling and clearing the back rank.',
+      highlight: 'a1',
+      piece: '♜',
+    },
+    {
+      id: '2',
+      title: 'The 7th Rank',
+      instruction:
+        "A rook on the 7th rank attacks the opponent's pawns and restricts their king. Two rooks on the 7th rank can even deliver checkmate!",
+      tip: 'Rooks on the 7th rank are often worth more than a bishop or knight.',
+      highlight: 'a7',
+      piece: '♜',
+    },
+  ],
+};
+
+const DEFAULT_STEPS: Step[] = [
+  {
+    id: '1',
+    title: 'Introduction',
+    instruction:
+      'This lesson will walk you through the key concepts step by step. Follow along on the board above.',
+    tip: 'Practice each concept before moving on for best results.',
+    piece: '♟',
+  },
+];
+
+function ChessBoard({
+  highlight,
+  piece,
+}: {
+  highlight?: string;
+  piece?: string;
+}) {
+  const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+  const ranks = [8, 7, 6, 5, 4, 3, 2, 1];
+
+  return (
+    <View style={b.board}>
+      {/* Rank labels */}
+      <View style={b.labels}>
+        {ranks.map((r) => (
+          <Text key={r} style={b.rankLabel}>
+            {r}
+          </Text>
+        ))}
+      </View>
+      <View style={b.grid}>
+        {ranks.map((rank) => (
+          <View key={rank} style={b.row}>
+            {files.map((file, fi) => {
+              const sq = `${file}${rank}`;
+              const isHl = sq === highlight;
+              return (
+                <View
+                  key={sq}
+                  style={[
+                    b.square,
+                    (fi + rank) % 2 === 0 ? b.light : b.dark,
+                    isHl && b.highlight,
+                  ]}
+                >
+                  {isHl && piece && <Text style={b.piece}>{piece}</Text>}
+                </View>
+              );
+            })}
+          </View>
+        ))}
+        {/* File labels row */}
+        <View style={b.fileRow}>
+          {files.map((f) => (
+            <Text key={f} style={b.fileLabel}>
+              {f}
+            </Text>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default function LessonDetailRoute() {
+  const { piece = 'knight' } = useLocalSearchParams<{
+    piece: string;
+    id: string;
+  }>();
+  const steps = STEPS_BY_PIECE[piece as string] ?? DEFAULT_STEPS;
+  const [step, setStep] = useState(0);
+  const [completed, setCompleted] = useState(false);
+
+  const current = steps[step];
+  const isLast = step === steps.length - 1;
+  const progress = (step + 1) / steps.length;
+
+  const [fadeAnim] = useState(() => new Animated.Value(1));
+
+  const navigate = (nextStep: number) => {
+    Animated.sequence([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+    setStep(nextStep);
+  };
+
+  const handleNext = () => {
+    if (isLast) {
+      setCompleted(true);
+    } else {
+      navigate(step + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (step === 0) {
+      router.back();
+    } else {
+      navigate(step - 1);
+    }
+  };
+
+  const pieceName =
+    (piece as string).charAt(0).toUpperCase() + (piece as string).slice(1);
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* ── Top Bar ────────────────────────────── */}
+      <View style={s.topBar}>
+        <Pressable
+          accessibilityLabel="Go back"
+          hitSlop={8}
+          onPress={() => router.back()}
+          style={({ pressed }) => [s.backBtn, pressed && { opacity: 0.6 }]}
+        >
+          <Text style={s.backArrow}>‹</Text>
+        </Pressable>
+        <View style={s.topCenter}>
+          <Text style={s.topSup}>{pieceName} Lesson</Text>
+          <Text style={s.topTitle} numberOfLines={1}>
+            {current?.title}
+          </Text>
+        </View>
+        <View style={s.stepBadge}>
+          <Text style={s.stepText}>
+            {step + 1}/{steps.length}
+          </Text>
+        </View>
+      </View>
+
+      {/* ── Progress Bar ───────────────────────── */}
+      <View style={s.progressTrack}>
+        <Animated.View
+          style={[s.progressFill, { width: `${progress * 100}%` as any }]}
+        />
+      </View>
+
+      {/* ── Step Dots ──────────────────────────── */}
+      <View style={s.dots}>
+        {steps.map((_, i) => (
+          <View
+            key={i}
+            style={[s.dot, i === step && s.dotActive, i < step && s.dotDone]}
+          />
+        ))}
+      </View>
+
+      <ScrollView
+        contentContainerStyle={s.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Board ──────────────────────────────── */}
+        <View style={s.boardWrap}>
+          <ChessBoard highlight={current?.highlight} piece={current?.piece} />
+        </View>
+
+        {/* ── Content ────────────────────────────── */}
+        <Animated.View style={[s.panel, { opacity: fadeAnim }]}>
+          {!completed ? (
+            <>
+              <View style={s.pieceBadge}>
+                <Text style={s.pieceBadgeEmoji}>{current?.piece ?? '♟'}</Text>
+                <Text style={s.pieceBadgeName}>{pieceName}</Text>
+                <View style={s.pieceBadgePill}>
+                  <Text style={s.pieceBadgePillText}>Step {step + 1}</Text>
+                </View>
+              </View>
+              <Text style={s.instruction}>{current?.instruction}</Text>
+              {current?.tip && (
+                <View style={s.tip}>
+                  <Text style={s.tipHeader}>💡 TIP</Text>
+                  <Text style={s.tipText}>{current.tip}</Text>
+                </View>
+              )}
+            </>
+          ) : (
+            <View style={s.completion}>
+              <Text style={s.completionTrophy}>🏆</Text>
+              <Text style={s.completionTitle}>Lesson Complete!</Text>
+              <Text style={s.completionBody}>
+                You’ve mastered the {pieceName} fundamentals. Keep practicing!
+              </Text>
+              <View style={s.xpBadge}>
+                <Text style={s.xpText}>+50 XP</Text>
+              </View>
+            </View>
+          )}
+        </Animated.View>
+
+        <View style={{ height: spacing.xl }} />
+      </ScrollView>
+
+      {/* ── Footer Controls ────────────────────── */}
+      <View style={s.footer}>
+        {!completed ? (
+          <View style={s.controls}>
+            <Pressable
+              onPress={handleBack}
+              style={({ pressed }) => [
+                s.backButton,
+                pressed && { opacity: 0.7 },
+              ]}
+            >
+              <Text style={s.backButtonText}>
+                {step === 0 ? 'Exit' : '‹  Back'}
+              </Text>
+            </Pressable>
+            <Pressable
+              onPress={handleNext}
+              style={({ pressed }) => [
+                s.nextButton,
+                pressed && { opacity: 0.85 },
+              ]}
+            >
+              <Text style={s.nextButtonText}>
+                {isLast ? 'Finish  ✓' : 'Next  ›'}
+              </Text>
+            </Pressable>
+          </View>
+        ) : (
+          <Pressable
+            onPress={() => router.back()}
+            style={({ pressed }) => [
+              s.doneButton,
+              pressed && { opacity: 0.85 },
+            ]}
+          >
+            <Text style={s.doneButtonText}>Back to Lessons →</Text>
+          </Pressable>
+        )}
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const b = StyleSheet.create({
+  board: { flexDirection: 'row', flex: 1 },
+  labels: {
+    justifyContent: 'space-around',
+    paddingVertical: 1,
+    paddingRight: 4,
+    paddingBottom: 18,
+  },
+  rankLabel: {
+    fontSize: 9,
+    color: palette.muted,
+    fontWeight: fontWeights.bold,
+    textAlign: 'center',
+    height: '12.5%' as any,
+    lineHeight: 0,
+  },
+  grid: { flex: 1 },
+  row: { flex: 1, flexDirection: 'row' },
+  square: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  light: { backgroundColor: '#F0D9B5' },
+  dark: { backgroundColor: '#B58863' },
+  highlight: { backgroundColor: 'rgba(127,204,38,0.55)' },
+  piece: { fontSize: 20 },
+  fileRow: { flexDirection: 'row', height: 16 },
+  fileLabel: {
+    flex: 1,
+    fontSize: 9,
+    color: palette.muted,
+    fontWeight: fontWeights.bold,
+    textAlign: 'center',
+  },
+});
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.07,
+  shadowRadius: 10,
+  elevation: 3,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+
+  /* Top Bar */
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+  },
+  backBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: radii.pill,
+    backgroundColor: theme.colors.surface,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: palette.border,
+  },
+  backArrow: { fontSize: fontSizes.heading, color: palette.ink, marginTop: -2 },
+  topCenter: { flex: 1, alignItems: 'center', gap: 1 },
+  topSup: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  topTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  stepBadge: {
+    backgroundColor: palette.ink,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  stepText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+
+  /* Progress */
+  progressTrack: {
+    height: 4,
+    backgroundColor: palette.border,
+    marginHorizontal: spacing.lg,
+    borderRadius: radii.pill,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+  },
+
+  /* Dots */
+  dots: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.sm,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: radii.pill,
+    backgroundColor: palette.border,
+  },
+  dotActive: { width: 20, backgroundColor: palette.brandGreen },
+  dotDone: { backgroundColor: palette.brandGreenSoft },
+
+  /* Board */
+  scroll: { paddingHorizontal: spacing.lg, gap: spacing.md },
+  boardWrap: {
+    width: '100%',
+    aspectRatio: 1,
+    borderRadius: radii.md,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: palette.border,
+    ...SHADOW,
+  },
+
+  /* Panel */
+  panel: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    padding: spacing.lg,
+    gap: spacing.md,
+    ...SHADOW,
+  },
+  pieceBadge: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  pieceBadgeEmoji: { fontSize: 22 },
+  pieceBadgeName: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  pieceBadgePill: {
+    backgroundColor: `${palette.brandGreen}1A`,
+    paddingVertical: 2,
+    paddingHorizontal: spacing.xs,
+    borderRadius: radii.pill,
+    marginLeft: 'auto',
+  },
+  pieceBadgePillText: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+  instruction: { fontSize: fontSizes.body, color: palette.ink, lineHeight: 26 },
+  tip: {
+    backgroundColor: `${palette.accentYellow}22`,
+    borderRadius: radii.md,
+    borderLeftWidth: 3,
+    borderLeftColor: palette.accentYellow,
+    padding: spacing.md,
+    gap: spacing.xs,
+  },
+  tipHeader: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  tipText: { fontSize: fontSizes.caption, color: palette.ink, lineHeight: 20 },
+
+  /* Completion */
+  completion: {
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.md,
+  },
+  completionTrophy: { fontSize: 64 },
+  completionTitle: {
+    fontSize: fontSizes.heading,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  completionBody: {
+    fontSize: fontSizes.body,
+    color: palette.gray,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  xpBadge: {
+    backgroundColor: palette.accentYellow,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.xl,
+    borderRadius: radii.pill,
+  },
+  xpText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+
+  /* Footer */
+  footer: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    paddingBottom: spacing.lg,
+    backgroundColor: theme.colors.background,
+    borderTopWidth: 1,
+    borderTopColor: palette.border,
+  },
+  controls: { flexDirection: 'row', gap: spacing.sm },
+  backButton: {
+    flex: 1,
+    backgroundColor: theme.colors.surface,
+    borderWidth: 1.5,
+    borderColor: palette.border,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backButtonText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+  nextButton: {
+    flex: 2,
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  nextButtonText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  doneButton: {
+    backgroundColor: palette.ink,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  doneButtonText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+});
diff --git a/app/(app)/play-game.tsx b/app/(app)/play-game.tsx
new file mode 100644
index 0000000..27c15ff
--- /dev/null
+++ b/app/(app)/play-game.tsx
@@ -0,0 +1,789 @@
+/**
+ * play-game.tsx — Active Chess Game Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { router, useLocalSearchParams } from 'expo-router';
+import { useEffect, useState } from 'react';
+import {
+  Animated,
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
+
+type GameResult = 'win' | 'lose' | 'draw' | null;
+
+const MOVES = [
+  { n: 1, w: 'e4', b: 'e5' },
+  { n: 2, w: 'Nf3', b: 'Nc6' },
+  { n: 3, w: 'Bb5', b: 'a6' },
+  { n: 4, w: 'Ba4', b: 'Nf6' },
+  { n: 5, w: 'O-O', b: 'Be7' },
+  { n: 6, w: 'Re1', b: 'b5' },
+  { n: 7, w: 'Bb3' },
+];
+
+const DIFFICULTY_LABEL: Record<string, string> = {
+  beginner: '🌱 Beginner',
+  easy: '😊 Easy',
+  medium: '🤔 Medium',
+  hard: '😤 Hard',
+  master: '👑 Master',
+};
+
+function ChessBoard({ playerColor }: { playerColor: string }) {
+  const files =
+    playerColor === 'white'
+      ? ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
+      : ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
+  const ranks =
+    playerColor === 'white'
+      ? [8, 7, 6, 5, 4, 3, 2, 1]
+      : [1, 2, 3, 4, 5, 6, 7, 8];
+  const coords =
+    playerColor === 'white'
+      ? ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
+      : ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
+
+  return (
+    <View style={b.wrap}>
+      {/* Rank labels */}
+      <View style={b.rankLabels}>
+        {ranks.map((r) => (
+          <Text key={r} style={b.rankLabel}>
+            {r}
+          </Text>
+        ))}
+      </View>
+      <View style={{ flex: 1 }}>
+        {ranks.map((rank) => (
+          <View key={rank} style={b.row}>
+            {files.map((file, fi) => {
+              const isHl =
+                (file === 'e' && rank === 4) || (file === 'e' && rank === 5);
+              return (
+                <View
+                  key={file + rank}
+                  style={[
+                    b.square,
+                    (fi + rank) % 2 === 0 ? b.light : b.dark,
+                    isHl && b.highlighted,
+                  ]}
+                />
+              );
+            })}
+          </View>
+        ))}
+        {/* File labels */}
+        <View style={b.fileRow}>
+          {coords.map((f) => (
+            <Text key={f} style={b.fileLabel}>
+              {f}
+            </Text>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function PlayerRow({
+  label,
+  emoji,
+  isActive,
+  time,
+  captured,
+}: {
+  label: string;
+  emoji: string;
+  isActive: boolean;
+  time: string;
+  captured?: string;
+}) {
+  return (
+    <View style={[p.row, isActive && p.rowActive]}>
+      <View style={[p.avatar, isActive && p.avatarActive]}>
+        <Text style={{ fontSize: 20 }}>{emoji}</Text>
+      </View>
+      <View style={p.info}>
+        <Text style={p.name} numberOfLines={1}>
+          {label}
+        </Text>
+        {captured ? (
+          <Text style={p.captured}>{captured}</Text>
+        ) : (
+          <Text style={p.capturedEmpty}>—</Text>
+        )}
+      </View>
+      {isActive && <View style={p.activeDot} />}
+      <View style={[p.timer, isActive && p.timerActive]}>
+        <Text style={[p.timerText, isActive && p.timerTextActive]}>{time}</Text>
+      </View>
+    </View>
+  );
+}
+
+function GameOverModal({
+  result,
+  onNewGame,
+  onExit,
+}: {
+  result: GameResult;
+  onNewGame: () => void;
+  onExit: () => void;
+}) {
+  const [scale] = useState(() => new Animated.Value(0.85));
+
+  useEffect(() => {
+    if (result === null) {
+      scale.setValue(0.85);
+      return;
+    }
+
+    const animation = Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 14,
+    });
+    animation.start();
+
+    return () => animation.stop();
+  }, [result, scale]);
+
+  const meta = {
+    win: {
+      emoji: '🏆',
+      title: 'You Win!',
+      body: 'Excellent play! You defeated the computer.',
+      xp: '+50 XP',
+    },
+    lose: {
+      emoji: '😓',
+      title: 'You Lose',
+      body: "Don't give up — every loss is a lesson!",
+      xp: '+10 XP',
+    },
+    draw: {
+      emoji: '🤝',
+      title: 'Draw!',
+      body: 'A hard-fought game. Well played by both sides.',
+      xp: '+20 XP',
+    },
+  };
+
+  const m = result ? meta[result] : null;
+
+  return (
+    <Modal animationType="fade" transparent visible={result !== null}>
+      <View style={mo.overlay}>
+        <Animated.View style={[mo.card, { transform: [{ scale }] }]}>
+          {m && (
+            <>
+              <Text style={mo.emoji}>{m.emoji}</Text>
+              <Text style={mo.title}>{m.title}</Text>
+              <Text style={mo.body}>{m.body}</Text>
+              <View style={mo.xpPill}>
+                <Text style={mo.xpText}>{m.xp}</Text>
+              </View>
+              <View style={mo.buttons}>
+                <Pressable
+                  onPress={onNewGame}
+                  style={({ pressed }) => [
+                    mo.btn,
+                    mo.btnPrimary,
+                    pressed && { opacity: 0.85 },
+                  ]}
+                >
+                  <Text style={[mo.btnText, mo.btnTextPrimary]}>
+                    Play Again
+                  </Text>
+                </Pressable>
+                <Pressable
+                  onPress={onExit}
+                  style={({ pressed }) => [
+                    mo.btn,
+                    mo.btnSecondary,
+                    pressed && { opacity: 0.7 },
+                  ]}
+                >
+                  <Text style={mo.btnText}>Exit</Text>
+                </Pressable>
+              </View>
+            </>
+          )}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+export default function PlayGameRoute() {
+  const { color = 'white', difficulty = 'beginner' } = useLocalSearchParams<{
+    color: string;
+    difficulty: string;
+  }>();
+  const [tutorOpen, setTutorOpen] = useState(true);
+  const [gameResult, setGameResult] = useState<GameResult>(null);
+  const isPlayerTurn = true;
+
+  const diffLabel = DIFFICULTY_LABEL[difficulty as string] ?? difficulty;
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* ── Dark Header ────────────────────────── */}
+      <View style={s.header}>
+        <Pressable
+          accessibilityLabel="Exit game"
+          hitSlop={8}
+          onPress={() => router.back()}
+          style={({ pressed }) => [
+            s.headerBackBtn,
+            pressed && { opacity: 0.6 },
+          ]}
+        >
+          <Text style={s.headerBackArrow}>‹</Text>
+        </Pressable>
+        <View style={s.headerCenter}>
+          <Text style={s.headerTitle}>vs Computer</Text>
+          <Text style={s.headerSub}>{diffLabel}</Text>
+        </View>
+        <View style={s.evalChip}>
+          <Text style={s.evalText}>+0.3</Text>
+        </View>
+      </View>
+
+      <ScrollView
+        contentContainerStyle={s.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Opponent Row ───────────────────────── */}
+        <PlayerRow
+          label={`Computer (${(difficulty as string).charAt(0).toUpperCase() + (difficulty as string).slice(1)})`}
+          emoji="🤖"
+          isActive={!isPlayerTurn}
+          time="10:00"
+        />
+
+        {/* ── Board ──────────────────────────────── */}
+        <View style={s.boardWrap}>
+          <ChessBoard playerColor={color as string} />
+        </View>
+
+        {/* ── Player Row ─────────────────────────── */}
+        <PlayerRow
+          label="You"
+          emoji="🧑"
+          isActive={isPlayerTurn}
+          time="9:42"
+          captured="♙ ♙"
+        />
+
+        {/* ── Tutor Panel ────────────────────────── */}
+        <View style={s.tutorCard}>
+          <Pressable
+            onPress={() => setTutorOpen((v) => !v)}
+            style={s.tutorHeader}
+          >
+            <View style={s.tutorLeft}>
+              <View style={s.tutorIconWrap}>
+                <Text style={{ fontSize: 15 }}>🎓</Text>
+              </View>
+              <Text style={s.tutorTitle}>Tutor</Text>
+              <View style={s.tutorEvalBadge}>
+                <Text style={s.tutorEvalText}>+0.3</Text>
+              </View>
+            </View>
+            <Text style={s.tutorChevron}>{tutorOpen ? '⌃' : '⌄'}</Text>
+          </Pressable>
+          {tutorOpen && (
+            <View style={s.tutorBody}>
+              <Text style={s.tutorOpening}>Ruy Lopez — Main Line</Text>
+              <Text style={s.tutorTip}>
+                Consider castling kingside to protect your king before launching
+                an attack. Your d-pawn controls the center.
+              </Text>
+              <View style={s.tutorSuggestion}>
+                <Text style={s.tutorSugLabel}>💡 Best move:</Text>
+                <View style={s.tutorSugMove}>
+                  <Text style={s.tutorSugMoveText}>d4</Text>
+                </View>
+              </View>
+            </View>
+          )}
+        </View>
+
+        {/* ── Move History ───────────────────────── */}
+        <View style={s.movesSection}>
+          <Text style={s.movesLabel}>Move History</Text>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={s.movesList}
+          >
+            {MOVES.map((m) => (
+              <View key={m.n} style={s.moveGroup}>
+                <Text style={s.moveNum}>{m.n}.</Text>
+                <View style={s.moveChip}>
+                  <Text style={s.moveChipText}>{m.w}</Text>
+                </View>
+                {m.b && (
+                  <View style={[s.moveChip, s.moveChipBlack]}>
+                    <Text style={[s.moveChipText, { color: palette.white }]}>
+                      {m.b}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+
+        <View style={{ height: spacing.md }} />
+      </ScrollView>
+
+      {/* ── Controls Footer ────────────────────── */}
+      <View style={s.footer}>
+        {[
+          {
+            icon: '↩',
+            label: 'Undo',
+            onPress: () => {},
+            variant: 'normal' as const,
+          },
+          {
+            icon: '⇅',
+            label: 'Flip',
+            onPress: () => {},
+            variant: 'normal' as const,
+          },
+          {
+            icon: '🤝',
+            label: 'Draw',
+            onPress: () => setGameResult('draw'),
+            variant: 'normal' as const,
+          },
+          {
+            icon: '🏳',
+            label: 'Resign',
+            onPress: () => setGameResult('lose'),
+            variant: 'danger' as const,
+          },
+        ].map((item) => (
+          <Pressable
+            key={item.label}
+            accessibilityLabel={item.label}
+            onPress={item.onPress}
+            style={({ pressed }) => [
+              s.ctrlBtn,
+              item.variant === 'danger' && s.ctrlBtnDanger,
+              pressed && s.ctrlBtnPressed,
+            ]}
+          >
+            <Text style={{ fontSize: 20 }}>{item.icon}</Text>
+            <Text
+              style={[
+                s.ctrlLabel,
+                item.variant === 'danger' && s.ctrlLabelDanger,
+              ]}
+            >
+              {item.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+
+      <GameOverModal
+        result={gameResult}
+        onNewGame={() => {
+          setGameResult(null);
+          router.back();
+        }}
+        onExit={() => {
+          setGameResult(null);
+          router.back();
+        }}
+      />
+    </SafeAreaView>
+  );
+}
+
+/* ── Board styles ────────────────────────── */
+const b = StyleSheet.create({
+  wrap: { width: '100%', aspectRatio: 1, flexDirection: 'row' },
+  rankLabels: {
+    justifyContent: 'space-around',
+    paddingRight: 4,
+    paddingBottom: 18,
+  },
+  rankLabel: {
+    fontSize: 9,
+    color: 'rgba(255,255,255,0.5)',
+    fontWeight: fontWeights.bold,
+    textAlign: 'center',
+  },
+  row: { flex: 1, flexDirection: 'row' },
+  square: { flex: 1 },
+  light: { backgroundColor: '#F0D9B5' },
+  dark: { backgroundColor: '#B58863' },
+  highlighted: { backgroundColor: 'rgba(127,204,38,0.5)' },
+  fileRow: { flexDirection: 'row', height: 18 },
+  fileLabel: {
+    flex: 1,
+    fontSize: 9,
+    color: 'rgba(255,255,255,0.5)',
+    fontWeight: fontWeights.bold,
+    textAlign: 'center',
+    paddingTop: 4,
+  },
+});
+
+/* ── Player row styles ───────────────────── */
+const p = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.md,
+  },
+  rowActive: { backgroundColor: `${palette.brandGreen}18` },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: radii.pill,
+    backgroundColor: theme.colors.surface,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: palette.border,
+  },
+  avatarActive: { borderColor: palette.brandGreen },
+  info: { flex: 1, gap: 1 },
+  name: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  captured: {
+    fontSize: fontSizes.caption,
+    color: palette.muted,
+    letterSpacing: 2,
+  },
+  capturedEmpty: { fontSize: fontSizes.caption, color: palette.border },
+  activeDot: {
+    width: 7,
+    height: 7,
+    borderRadius: radii.pill,
+    backgroundColor: palette.brandGreen,
+  },
+  timer: {
+    backgroundColor: palette.ink,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.sm,
+    minWidth: 64,
+    alignItems: 'center',
+  },
+  timerActive: { backgroundColor: palette.brandGreen },
+  timerText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: 'rgba(255,255,255,0.45)',
+    letterSpacing: 1,
+  },
+  timerTextActive: { color: palette.ink },
+});
+
+/* ── Modal styles ────────────────────────── */
+const mo = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(31,31,31,0.65)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing.lg,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.colors.surfaceStrong,
+    borderRadius: radii.xl,
+    padding: spacing.xl,
+    alignItems: 'center',
+    gap: spacing.md,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.2,
+    shadowRadius: 24,
+    elevation: 10,
+  },
+  emoji: { fontSize: 60 },
+  title: {
+    fontSize: fontSizes.title,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    letterSpacing: -0.5,
+  },
+  body: {
+    fontSize: fontSizes.body,
+    color: palette.gray,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  xpPill: {
+    backgroundColor: `${palette.accentYellow}33`,
+    borderWidth: 1,
+    borderColor: palette.accentYellow,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.lg,
+    borderRadius: radii.pill,
+  },
+  xpText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  buttons: { width: '100%', gap: spacing.sm },
+  btn: {
+    width: '100%',
+    minHeight: 52,
+    borderRadius: radii.pill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+  },
+  btnPrimary: {
+    backgroundColor: palette.brandGreen,
+    borderColor: palette.brandGreen,
+  },
+  btnSecondary: { backgroundColor: 'transparent', borderColor: palette.border },
+  btnText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  btnTextPrimary: { color: palette.ink },
+});
+
+/* ── Screen styles ───────────────────────── */
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+
+  /* Header */
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm,
+    backgroundColor: palette.ink,
+  },
+  headerBackBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: radii.pill,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerBackArrow: {
+    fontSize: fontSizes.heading,
+    color: palette.white,
+    marginTop: -1,
+  },
+  headerCenter: { flex: 1, alignItems: 'center', gap: 1 },
+  headerTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+  headerSub: {
+    fontSize: fontSizes.caption - 1,
+    color: 'rgba(255,255,255,0.5)',
+  },
+  evalChip: {
+    backgroundColor: `${palette.brandGreen}22`,
+    borderWidth: 1,
+    borderColor: `${palette.brandGreen}50`,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+  },
+  evalText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+
+  /* Scroll */
+  scroll: {
+    paddingHorizontal: spacing.md,
+    paddingTop: spacing.sm,
+    gap: spacing.sm,
+  },
+  boardWrap: {
+    borderRadius: radii.sm,
+    overflow: 'hidden',
+    backgroundColor: palette.ink,
+  },
+
+  /* Tutor */
+  tutorCard: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: palette.border,
+    overflow: 'hidden',
+  },
+  tutorHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: spacing.md,
+    backgroundColor: `${palette.accentYellow}18`,
+  },
+  tutorLeft: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  tutorIconWrap: {
+    width: 30,
+    height: 30,
+    borderRadius: radii.sm,
+    backgroundColor: `${palette.accentYellow}30`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tutorTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  tutorEvalBadge: {
+    backgroundColor: `${palette.brandGreen}1A`,
+    paddingVertical: 2,
+    paddingHorizontal: spacing.xs,
+    borderRadius: radii.pill,
+  },
+  tutorEvalText: {
+    fontSize: 10,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+  tutorChevron: { fontSize: fontSizes.label, color: palette.muted },
+  tutorBody: { padding: spacing.md, gap: spacing.sm },
+  tutorOpening: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  tutorTip: { fontSize: fontSizes.caption, color: palette.ink, lineHeight: 20 },
+  tutorSuggestion: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    marginTop: spacing.xxs,
+  },
+  tutorSugLabel: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.semibold,
+    color: palette.muted,
+  },
+  tutorSugMove: {
+    backgroundColor: palette.ink,
+    paddingVertical: 3,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.sm,
+  },
+  tutorSugMoveText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+  },
+
+  /* Move history */
+  movesSection: { gap: spacing.xs },
+  movesLabel: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  movesList: {
+    gap: spacing.xs,
+    paddingVertical: spacing.xs,
+    alignItems: 'center',
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.sm,
+    paddingHorizontal: spacing.sm,
+    borderWidth: 1,
+    borderColor: palette.border,
+  },
+  moveGroup: { flexDirection: 'row', alignItems: 'center', gap: spacing.xxs },
+  moveNum: {
+    fontSize: fontSizes.caption,
+    color: palette.muted,
+    minWidth: 20,
+    textAlign: 'right',
+  },
+  moveChip: {
+    paddingVertical: 3,
+    paddingHorizontal: spacing.xs,
+    backgroundColor: theme.colors.background,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: palette.border,
+  },
+  moveChipBlack: { backgroundColor: palette.ink, borderColor: palette.ink },
+  moveChipText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+
+  /* Footer */
+  footer: {
+    flexDirection: 'row',
+    gap: spacing.xs,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    paddingBottom: spacing.lg,
+    backgroundColor: palette.ink,
+  },
+  ctrlBtn: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xxs,
+    paddingVertical: spacing.sm,
+    backgroundColor: 'rgba(255,255,255,0.07)',
+    borderRadius: radii.md,
+    minHeight: 56,
+  },
+  ctrlBtnDanger: { backgroundColor: 'rgba(214,69,69,0.15)' },
+  ctrlBtnPressed: { opacity: 0.7 },
+  ctrlLabel: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: 'rgba(255,255,255,0.45)',
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+  },
+  ctrlLabelDanger: { color: palette.error },
+});
diff --git a/app/(app)/puzzles.tsx b/app/(app)/puzzles.tsx
new file mode 100644
index 0000000..fc286d9
--- /dev/null
+++ b/app/(app)/puzzles.tsx
@@ -0,0 +1,579 @@
+/**
+ * puzzles.tsx — Daily Puzzles Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { useState } from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
+
+type PuzzleState = 'solving' | 'correct' | 'incorrect';
+
+type Puzzle = {
+  id: number;
+  rating: number;
+  themes: string[];
+  hint: string;
+  description: string;
+  solution: string;
+};
+
+const PUZZLE: Puzzle = {
+  id: 4821,
+  rating: 1287,
+  themes: ['Fork', 'Knight', 'Intermediate'],
+  hint: 'Look for a Knight move that attacks two pieces at once.',
+  description: 'White to move. Find the Knight fork that wins material.',
+  solution: 'Nd5 — forks the Queen on c7 and Rook on e7',
+};
+
+function ChessBoard({ state }: { state: PuzzleState }) {
+  const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+  const ranks = [8, 7, 6, 5, 4, 3, 2, 1];
+  const overlayColor =
+    state === 'correct'
+      ? 'rgba(127,204,38,0.18)'
+      : state === 'incorrect'
+        ? 'rgba(214,69,69,0.18)'
+        : null;
+
+  return (
+    <View style={b.board}>
+      {/* Grid */}
+      {ranks.map((rank) => (
+        <View key={rank} style={b.row}>
+          {files.map((file, fi) => (
+            <View
+              key={file + rank}
+              style={[(fi + rank) % 2 === 0 ? b.light : b.dark]}
+            />
+          ))}
+        </View>
+      ))}
+
+      {/* Result overlay */}
+      {overlayColor && (
+        <View style={[b.overlay, { backgroundColor: overlayColor }]}>
+          <Text style={b.overlayIcon}>{state === 'correct' ? '✓' : '✗'}</Text>
+        </View>
+      )}
+
+      {/* Turn indicator */}
+      <View style={b.turnChip}>
+        <View style={b.turnDot} />
+        <Text style={b.turnText}>White to move</Text>
+      </View>
+    </View>
+  );
+}
+
+export default function PuzzlesRoute() {
+  const [state, setState] = useState<PuzzleState>('solving');
+  const [hintShown, setHintShown] = useState(false);
+  const [streak, setStreak] = useState(5);
+  const [solutionShown, setSolutionShown] = useState(false);
+
+  const [resultScale] = useState(() => new Animated.Value(0));
+
+  const showResult = (newState: 'correct' | 'incorrect') => {
+    setState(newState);
+    Animated.spring(resultScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 12,
+    }).start();
+    if (newState === 'correct') {
+      setStreak((n) => n + 1);
+    } else {
+      setStreak(0);
+    }
+  };
+
+  const handleNew = () => {
+    resultScale.setValue(0);
+    setState('solving');
+    setHintShown(false);
+    setSolutionShown(false);
+  };
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* ── Header ─────────────────────────────── */}
+      <View style={s.header}>
+        <View>
+          <Text style={s.headerSup}>PUZZLE</Text>
+          <Text style={s.headerTitle}>#{PUZZLE.id}</Text>
+        </View>
+        <Text style={s.headingCenter}>Puzzles</Text>
+        <Pressable style={s.streakChip}>
+          <Text style={s.streakFire}>🔥</Text>
+          <Text style={s.streakCount}>{streak}</Text>
+        </Pressable>
+      </View>
+
+      <ScrollView
+        contentContainerStyle={s.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* ── Board ──────────────────────────────── */}
+        <View style={s.boardWrap}>
+          <ChessBoard state={state} />
+        </View>
+
+        {/* ── Result Banner ──────────────────────── */}
+        {state !== 'solving' && (
+          <Animated.View
+            style={[
+              s.resultBanner,
+              state === 'correct' ? s.resultBannerCorrect : s.resultBannerWrong,
+              { transform: [{ scale: resultScale }] },
+            ]}
+          >
+            <Text style={s.resultIcon}>
+              {state === 'correct' ? '🎉' : '😕'}
+            </Text>
+            <View style={s.resultContent}>
+              <Text style={s.resultTitle}>
+                {state === 'correct' ? 'Brilliant!' : 'Not quite'}
+              </Text>
+              <Text style={s.resultSub}>
+                {state === 'correct'
+                  ? `+10 bonus XP · Streak: ${streak} 🔥`
+                  : 'Keep going — every attempt teaches you something.'}
+              </Text>
+            </View>
+          </Animated.View>
+        )}
+
+        {/* ── Solution (after wrong) ─────────────── */}
+        {state === 'incorrect' && !solutionShown && (
+          <Pressable
+            onPress={() => setSolutionShown(true)}
+            style={({ pressed }) => [
+              s.solutionToggle,
+              pressed && { opacity: 0.7 },
+            ]}
+          >
+            <Text style={s.solutionToggleText}>Show Solution</Text>
+          </Pressable>
+        )}
+        {state === 'incorrect' && solutionShown && (
+          <View style={s.solutionCard}>
+            <Text style={s.solutionHeader}>✓ SOLUTION</Text>
+            <Text style={s.solutionText}>{PUZZLE.solution}</Text>
+          </View>
+        )}
+
+        {/* ── Info Panel ─────────────────────────── */}
+        <View style={s.infoCard}>
+          {/* Rating + Description */}
+          <View style={s.infoTop}>
+            <View style={s.ratingBox}>
+              <Text style={s.ratingLabel}>Rating</Text>
+              <Text style={s.ratingValue}>{PUZZLE.rating}</Text>
+            </View>
+            <Text style={s.desc}>{PUZZLE.description}</Text>
+          </View>
+
+          <View style={s.divider} />
+
+          {/* Theme pills */}
+          <View style={s.themes}>
+            {PUZZLE.themes.map((t) => (
+              <View key={t} style={s.themePill}>
+                <Text style={s.themeText}>{t}</Text>
+              </View>
+            ))}
+          </View>
+
+          <View style={s.divider} />
+
+          {/* Hint */}
+          {hintShown ? (
+            <View style={s.hintCard}>
+              <Text style={s.hintHeader}>💡 HINT</Text>
+              <Text style={s.hintText}>{PUZZLE.hint}</Text>
+            </View>
+          ) : (
+            <Pressable
+              onPress={() => setHintShown(true)}
+              style={({ pressed }) => [s.hintBtn, pressed && { opacity: 0.7 }]}
+            >
+              <Text style={s.hintBtnText}>💡 Show Hint (−5 pts)</Text>
+            </Pressable>
+          )}
+        </View>
+
+        {/* ── Dev Simulate Row ───────────────────── */}
+        {state === 'solving' && (
+          <View style={s.devRow}>
+            <View style={s.devDivider}>
+              <View style={s.devLine} />
+              <Text style={s.devLabel}>DEV ONLY</Text>
+              <View style={s.devLine} />
+            </View>
+            <View style={s.devBtns}>
+              <Pressable
+                onPress={() => showResult('correct')}
+                style={({ pressed }) => [
+                  s.devBtn,
+                  s.devBtnCorrect,
+                  pressed && { opacity: 0.7 },
+                ]}
+              >
+                <Text style={s.devBtnText}>✓ Correct</Text>
+              </Pressable>
+              <Pressable
+                onPress={() => showResult('incorrect')}
+                style={({ pressed }) => [
+                  s.devBtn,
+                  s.devBtnWrong,
+                  pressed && { opacity: 0.7 },
+                ]}
+              >
+                <Text style={[s.devBtnText, { color: palette.error }]}>
+                  ✗ Wrong
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        )}
+
+        <View style={{ height: 80 }} />
+      </ScrollView>
+
+      {/* ── Footer CTA ─────────────────────────── */}
+      <View style={s.footer}>
+        <Pressable
+          onPress={handleNew}
+          style={({ pressed }) => [s.ctaBtn, pressed && s.ctaBtnPressed]}
+        >
+          <Text style={s.ctaBtnText}>
+            {state === 'solving' ? 'Skip  ›' : 'Next Puzzle  ›'}
+          </Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const b = StyleSheet.create({
+  board: { width: '100%', aspectRatio: 1, position: 'relative' },
+  row: { flex: 1, flexDirection: 'row' },
+  light: { flex: 1, backgroundColor: '#F0D9B5' },
+  dark: { flex: 1, backgroundColor: '#B58863' },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlayIcon: { fontSize: 72, opacity: 0.8 },
+  turnChip: {
+    position: 'absolute',
+    bottom: spacing.sm,
+    right: spacing.sm,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xxs,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    borderRadius: radii.pill,
+    paddingVertical: 4,
+    paddingHorizontal: spacing.xs,
+  },
+  turnDot: {
+    width: 9,
+    height: 9,
+    borderRadius: radii.pill,
+    backgroundColor: palette.white,
+    borderWidth: 1.5,
+    borderColor: 'rgba(0,0,0,0.3)',
+  },
+  turnText: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+});
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.06,
+  shadowRadius: 8,
+  elevation: 2,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+
+  /* Header */
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+  },
+  headerSup: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  headerTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  headingCenter: {
+    fontSize: fontSizes.heading,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  streakChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xxs,
+    backgroundColor: `${palette.accentYellow}33`,
+    borderWidth: 1,
+    borderColor: palette.accentYellow,
+    borderRadius: radii.pill,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.sm,
+  },
+  streakFire: { fontSize: 15 },
+  streakCount: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+
+  /* Board */
+  scroll: { paddingHorizontal: spacing.lg, gap: spacing.md },
+  boardWrap: {
+    borderRadius: radii.md,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: palette.border,
+    ...SHADOW,
+  },
+
+  /* Result banner */
+  resultBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    borderRadius: radii.lg,
+    padding: spacing.md,
+    borderWidth: 1,
+  },
+  resultBannerCorrect: {
+    backgroundColor: `${palette.brandGreen}1A`,
+    borderColor: palette.brandGreen,
+  },
+  resultBannerWrong: {
+    backgroundColor: palette.errorBackground,
+    borderColor: palette.error,
+  },
+  resultIcon: { fontSize: 28 },
+  resultContent: { flex: 1, gap: 2 },
+  resultTitle: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  resultSub: { fontSize: fontSizes.caption, color: palette.gray },
+
+  solutionToggle: { alignItems: 'center', paddingVertical: spacing.xs },
+  solutionToggleText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.semibold,
+    color: palette.brandGreen,
+  },
+  solutionCard: {
+    backgroundColor: `${palette.brandGreen}15`,
+    borderRadius: radii.md,
+    borderLeftWidth: 3,
+    borderLeftColor: palette.brandGreen,
+    padding: spacing.md,
+    gap: spacing.xs,
+  },
+  solutionHeader: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  solutionText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+
+  /* Info card */
+  infoCard: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: palette.border,
+    padding: spacing.md,
+    gap: spacing.md,
+    ...SHADOW,
+  },
+  infoTop: { flexDirection: 'row', alignItems: 'center', gap: spacing.md },
+  ratingBox: {
+    backgroundColor: theme.colors.background,
+    borderRadius: radii.md,
+    padding: spacing.md,
+    alignItems: 'center',
+    minWidth: 70,
+    gap: 2,
+    borderWidth: 1,
+    borderColor: palette.border,
+  },
+  ratingLabel: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  ratingValue: {
+    fontSize: fontSizes.title,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+  desc: {
+    flex: 1,
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+    lineHeight: 22,
+  },
+  divider: { height: 1, backgroundColor: palette.border },
+  themes: { flexDirection: 'row', flexWrap: 'wrap', gap: spacing.xs },
+  themePill: {
+    backgroundColor: `${palette.brandGreen}1A`,
+    paddingVertical: 3,
+    paddingHorizontal: spacing.sm,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    borderColor: `${palette.brandGreen}40`,
+  },
+  themeText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.bold,
+    color: palette.brandGreen,
+  },
+  hintCard: {
+    backgroundColor: `${palette.accentYellow}22`,
+    borderRadius: radii.md,
+    borderLeftWidth: 3,
+    borderLeftColor: palette.accentYellow,
+    padding: spacing.md,
+    gap: spacing.xs,
+  },
+  hintHeader: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  hintText: { fontSize: fontSizes.caption, color: palette.ink, lineHeight: 20 },
+  hintBtn: {
+    backgroundColor: `${palette.accentYellow}1A`,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: `${palette.accentYellow}80`,
+    paddingVertical: spacing.sm,
+    alignItems: 'center',
+  },
+  hintBtnText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+
+  /* Dev section */
+  devRow: { gap: spacing.sm },
+  devDivider: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  devLine: { flex: 1, height: 1, backgroundColor: palette.border },
+  devLabel: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  devBtns: { flexDirection: 'row', gap: spacing.sm },
+  devBtn: {
+    flex: 1,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    paddingVertical: spacing.sm,
+    alignItems: 'center',
+    borderStyle: 'dashed',
+  },
+  devBtnCorrect: {
+    borderColor: palette.brandGreen,
+    backgroundColor: `${palette.brandGreen}10`,
+  },
+  devBtnWrong: {
+    borderColor: palette.error,
+    backgroundColor: palette.errorBackground,
+  },
+  devBtnText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.semibold,
+    color: palette.ink,
+  },
+
+  /* Footer */
+  footer: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    paddingBottom: spacing.lg,
+    backgroundColor: theme.colors.background,
+    borderTopWidth: 1,
+    borderTopColor: palette.border,
+  },
+  ctaBtn: {
+    backgroundColor: palette.brandGreen,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ctaBtnPressed: { backgroundColor: palette.brandGreenPressed },
+  ctaBtnText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+});
diff --git a/app/(public)/sign-in.tsx b/app/(public)/sign-in.tsx
index faf63be..f3c3dfe 100644
--- a/app/(public)/sign-in.tsx
+++ b/app/(public)/sign-in.tsx
@@ -1,22 +1,362 @@
-import { PlaceholderScreen } from '@/components/PlaceholderScreen';
-import { Button } from '@/components/ui/Button';
+/**
+ * sign-in.tsx — Authentication Screen
+ * UI/UX design by Sandith Hewage (Y STEM and Chess)
+ */
+
+import { useState } from 'react';
+import {
+  Animated,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { theme } from '@/design/theme';
+import {
+  fontSizes,
+  fontWeights,
+  palette,
+  radii,
+  spacing,
+} from '@/design/tokens';
 import { useSession } from '@/providers/SessionProvider';
 
+const chessPiecePattern = require('@/assets/images/chess-piece-pattern.png');
+
 export default function SignInRoute() {
   const { mockSignInAs } = useSession();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [usernameFocused, setUsernameFocused] = useState(false);
+  const [passwordFocused, setPasswordFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [btnScale] = useState(() => new Animated.Value(1));
+  const pressIn = () =>
+    Animated.spring(btnScale, {
+      toValue: 0.97,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  const pressOut = () =>
+    Animated.spring(btnScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
 
   return (
-    <PlaceholderScreen
-      description="Choose a temporary mocked role to test the navigation foundation."
-      title="Sign in"
-    >
-      <Button onPress={() => mockSignInAs('student')} variant="brand">
-        Continue as student
-      </Button>
-
-      <Button onPress={() => mockSignInAs('mentor')} variant="secondary">
-        Continue as mentor
-      </Button>
-    </PlaceholderScreen>
+    <SafeAreaView style={s.safe}>
+      {/* ── Patterned Background ──────────────── */}
+      <Image
+        accessible={false}
+        resizeMode="cover"
+        source={chessPiecePattern}
+        style={s.pattern}
+      />
+      <View pointerEvents="none" style={s.patternFade} />
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={s.kav}
+      >
+        <ScrollView
+          contentContainerStyle={s.scroll}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {/* ── Brand Mark ────────────────────────── */}
+          <View style={s.brand}>
+            <View style={s.brandCircle}>
+              <Text style={s.brandIcon}>♟</Text>
+            </View>
+            <Text style={s.brandTitle}>Y STEM</Text>
+            <Text style={s.brandSub}>and Chess</Text>
+          </View>
+
+          {/* ── Form Card ─────────────────────────── */}
+          <View style={s.card}>
+            <View style={s.cardHeader}>
+              <Text style={s.cardTitle}>Welcome back</Text>
+              <Text style={s.cardSub}>Sign in to continue your journey</Text>
+            </View>
+
+            <View style={s.fields}>
+              <View style={[s.field, usernameFocused && s.fieldFocused]}>
+                <Text style={s.fieldIcon}>👤</Text>
+                <TextInput
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onBlur={() => setUsernameFocused(false)}
+                  onChangeText={setUsername}
+                  onFocus={() => setUsernameFocused(true)}
+                  placeholder="Username"
+                  placeholderTextColor={palette.muted}
+                  returnKeyType="next"
+                  style={s.fieldInput}
+                  value={username}
+                />
+              </View>
+
+              <View style={[s.field, passwordFocused && s.fieldFocused]}>
+                <Text style={s.fieldIcon}>🔒</Text>
+                <TextInput
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onBlur={() => setPasswordFocused(false)}
+                  onChangeText={setPassword}
+                  onFocus={() => setPasswordFocused(true)}
+                  placeholder="Password"
+                  placeholderTextColor={palette.muted}
+                  returnKeyType="done"
+                  secureTextEntry={!showPassword}
+                  style={[s.fieldInput, { flex: 1 }]}
+                  value={password}
+                />
+                <Pressable
+                  hitSlop={10}
+                  onPress={() => setShowPassword((v) => !v)}
+                  style={s.eyeBtn}
+                >
+                  <Text style={s.eyeIcon}>{showPassword ? '🙈' : '👁'}</Text>
+                </Pressable>
+              </View>
+            </View>
+
+            <Pressable hitSlop={8} style={s.forgotRow}>
+              <Text style={s.forgotText}>Forgot password?</Text>
+            </Pressable>
+
+            <Animated.View style={{ transform: [{ scale: btnScale }] }}>
+              <Pressable
+                accessibilityLabel="Sign in"
+                accessibilityRole="button"
+                onPressIn={pressIn}
+                onPressOut={pressOut}
+                style={s.enterBtn}
+              >
+                <Text style={s.enterBtnText}>Sign In →</Text>
+              </Pressable>
+            </Animated.View>
+
+            <View style={s.signupRow}>
+              <Text style={s.signupHint}>New here? </Text>
+              <Pressable hitSlop={8}>
+                <Text style={s.signupLink}>Create account</Text>
+              </Pressable>
+            </View>
+          </View>
+
+          {/* ── Dev Quick-Login ───────────────────── */}
+          <View style={s.dev}>
+            <View style={s.devDivider}>
+              <View style={s.devLine} />
+              <Text style={s.devLabel}>DEV ONLY</Text>
+              <View style={s.devLine} />
+            </View>
+            <View style={s.devRow}>
+              {(['student', 'mentor'] as const).map((role) => (
+                <Pressable
+                  key={role}
+                  accessibilityLabel={`Continue as ${role}`}
+                  accessibilityRole="button"
+                  onPress={() => mockSignInAs(role)}
+                  style={({ pressed }) => [
+                    s.devBtn,
+                    pressed && s.devBtnPressed,
+                  ]}
+                >
+                  <Text style={s.devBtnIcon}>
+                    {role === 'student' ? '🎒' : '🎓'}
+                  </Text>
+                  <Text style={s.devBtnText}>
+                    {role === 'student' ? 'Student' : 'Mentor'}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }
+
+const SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 4 },
+  shadowOpacity: 0.08,
+  shadowRadius: 16,
+  elevation: 4,
+} as const;
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: theme.colors.background },
+  pattern: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    opacity: 0.3,
+  },
+  patternFade: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '60%',
+    backgroundColor: theme.colors.background,
+    opacity: 0.9,
+  },
+  kav: { flex: 1 },
+  scroll: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.xxl,
+    gap: spacing.lg,
+  },
+
+  brand: { alignItems: 'center', gap: spacing.xs },
+  brandCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: radii.pill,
+    backgroundColor: palette.ink,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOW,
+  },
+  brandIcon: { fontSize: 34 },
+  brandTitle: {
+    fontSize: fontSizes.display,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+    letterSpacing: -1,
+  },
+  brandSub: {
+    fontSize: fontSizes.label,
+    color: palette.gray,
+    fontWeight: fontWeights.medium,
+    marginTop: -4,
+  },
+
+  card: {
+    backgroundColor: theme.colors.surfaceStrong,
+    borderRadius: radii.xl,
+    borderWidth: 1,
+    borderColor: palette.border,
+    padding: spacing.lg,
+    gap: spacing.md,
+    ...SHADOW,
+  },
+  cardHeader: { gap: 2 },
+  cardTitle: {
+    fontSize: fontSizes.heading,
+    fontWeight: fontWeights.bold,
+    color: palette.ink,
+  },
+  cardSub: { fontSize: fontSizes.caption, color: palette.muted },
+
+  fields: { gap: spacing.sm },
+  field: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    borderWidth: 1.5,
+    borderColor: palette.border,
+    borderRadius: radii.md,
+    backgroundColor: theme.colors.background,
+    paddingHorizontal: spacing.md,
+    minHeight: 52,
+  },
+  fieldFocused: {
+    borderColor: palette.brandGreen,
+    backgroundColor: palette.backgroundSoft,
+  },
+  fieldIcon: { fontSize: 16 },
+  fieldInput: {
+    flex: 1,
+    fontSize: fontSizes.body,
+    color: palette.ink,
+    paddingVertical: spacing.sm,
+  },
+  eyeBtn: { padding: spacing.xs },
+  eyeIcon: { fontSize: 15 },
+
+  forgotRow: { alignSelf: 'flex-end' },
+  forgotText: {
+    fontSize: fontSizes.caption,
+    color: palette.brandGreen,
+    fontWeight: fontWeights.semibold,
+  },
+
+  enterBtn: {
+    backgroundColor: palette.ink,
+    borderRadius: radii.pill,
+    minHeight: 52,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  enterBtnText: {
+    fontSize: fontSizes.label,
+    fontWeight: fontWeights.bold,
+    color: palette.white,
+    letterSpacing: 0.3,
+  },
+
+  signupRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  signupHint: { fontSize: fontSizes.caption, color: palette.muted },
+  signupLink: {
+    fontSize: fontSizes.caption,
+    color: palette.brandGreen,
+    fontWeight: fontWeights.bold,
+  },
+
+  dev: { gap: spacing.sm },
+  devDivider: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  devLine: { flex: 1, height: 1, backgroundColor: palette.border },
+  devLabel: {
+    fontSize: 9,
+    fontWeight: fontWeights.bold,
+    color: palette.muted,
+    textTransform: 'uppercase',
+    letterSpacing: 1.5,
+  },
+  devRow: { flexDirection: 'row', gap: spacing.sm },
+  devBtn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: palette.border,
+    borderStyle: 'dashed',
+    paddingVertical: spacing.sm,
+  },
+  devBtnPressed: { backgroundColor: palette.backgroundSoft },
+  devBtnIcon: { fontSize: 15 },
+  devBtnText: {
+    fontSize: fontSizes.caption,
+    fontWeight: fontWeights.semibold,
+    color: palette.gray,
+  },
+});
diff --git a/docs/screen-preview.html b/docs/screen-preview.html
new file mode 100644
index 0000000..3b3b519
--- /dev/null
+++ b/docs/screen-preview.html
@@ -0,0 +1,2717 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Y STEM and Chess — Mobile Screen Preview</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --ink: #1a1a1a;
+        --green: #7fcc26;
+        --greenSoft: #bfd99e;
+        --greenBg: #e5f3d2;
+        --yellow: #ead94c;
+        --surface: #ffffff;
+        --bg: #f9faf7;
+        --muted: #8a8a8a;
+        --gray: #5c5c5c;
+        --border: #e4e4e7;
+        --error: #d64545;
+        --errorBg: #f5e9e9;
+      }
+
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: 'Inter', system-ui, sans-serif;
+        background: #0f0f0f;
+        color: #fff;
+        padding: 40px 24px 80px;
+        min-height: 100vh;
+      }
+
+      /* ── Page header ───────────────────────────── */
+      .page-header {
+        text-align: center;
+        margin-bottom: 64px;
+      }
+      .page-header h1 {
+        font-size: 32px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        color: #fff;
+      }
+      .page-header h1 span {
+        color: var(--green);
+      }
+      .page-header p {
+        margin-top: 8px;
+        font-size: 14px;
+        color: #777;
+      }
+      .tag {
+        display: inline-block;
+        margin-top: 12px;
+        background: #1c1c1c;
+        border: 1px solid #333;
+        border-radius: 100px;
+        padding: 4px 14px;
+        font-size: 11px;
+        color: #888;
+        letter-spacing: 0.5px;
+      }
+
+      /* ── Section headers ───────────────────────── */
+      .section-title {
+        font-size: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        color: #555;
+        margin: 64px 0 28px;
+        text-align: center;
+      }
+
+      /* ── Scroll row of phones ──────────────────── */
+      .phones-row {
+        display: flex;
+        gap: 28px;
+        overflow-x: auto;
+        padding-bottom: 16px;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: thin;
+        scrollbar-color: #333 transparent;
+      }
+      .phones-row::-webkit-scrollbar {
+        height: 4px;
+      }
+      .phones-row::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .phones-row::-webkit-scrollbar-thumb {
+        background: #333;
+        border-radius: 4px;
+      }
+
+      /* ── Phone frame ───────────────────────────── */
+      .phone-wrap {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+      }
+      .phone-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        color: #555;
+      }
+      .phone {
+        width: 280px;
+        height: 600px;
+        background: var(--bg);
+        border-radius: 40px;
+        border: 6px solid #2a2a2a;
+        overflow: hidden;
+        position: relative;
+        box-shadow:
+          0 0 0 1px #000,
+          0 30px 60px rgba(0, 0, 0, 0.6),
+          inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+      }
+      .phone::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100px;
+        height: 28px;
+        background: #2a2a2a;
+        border-radius: 0 0 20px 20px;
+        z-index: 10;
+      }
+
+      /* ── Screen content helpers ────────────────── */
+      .screen {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+        font-size: 10px;
+      }
+      .screen-bg {
+        background: var(--bg);
+      }
+      .screen-dark {
+        background: var(--ink);
+      }
+
+      /* ── Sign In ─────────────────────────────── */
+      .signin-pattern {
+        position: absolute;
+        inset: 0;
+        background: repeating-linear-gradient(
+          45deg,
+          rgba(127, 204, 38, 0.04) 0px,
+          rgba(127, 204, 38, 0.04) 1px,
+          transparent 1px,
+          transparent 28px
+        );
+      }
+      .signin-card {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--surface);
+        border-radius: 28px 28px 0 0;
+        padding: 24px 20px 28px;
+        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.08);
+      }
+      .signin-logo {
+        text-align: center;
+        margin-bottom: 20px;
+        margin-top: 8px;
+      }
+      .signin-logo .logo-circle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 52px;
+        height: 52px;
+        border-radius: 50%;
+        background: var(--ink);
+        font-size: 22px;
+        margin-bottom: 10px;
+      }
+      .signin-logo h1 {
+        font-size: 16px;
+        font-weight: 800;
+        color: var(--ink);
+      }
+      .signin-logo p {
+        font-size: 9px;
+        color: var(--muted);
+        margin-top: 2px;
+      }
+      .field {
+        background: var(--bg);
+        border: 1.5px solid var(--border);
+        border-radius: 12px;
+        padding: 10px 12px;
+        margin-bottom: 8px;
+      }
+      .field-label {
+        font-size: 8px;
+        font-weight: 700;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+      }
+      .field-value {
+        font-size: 11px;
+        color: var(--ink);
+        margin-top: 2px;
+      }
+      .btn-primary-block {
+        background: var(--ink);
+        color: #fff;
+        border-radius: 100px;
+        padding: 12px;
+        text-align: center;
+        font-size: 11px;
+        font-weight: 700;
+        margin-top: 12px;
+      }
+      .signin-links {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        margin-top: 12px;
+      }
+      .link {
+        font-size: 9px;
+        color: var(--green);
+        font-weight: 600;
+      }
+
+      /* ── Misc helpers ────────────────────────── */
+      .status-bar {
+        height: 36px;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        padding: 0 16px 6px;
+        font-size: 9px;
+        font-weight: 700;
+        color: var(--ink);
+      }
+      .status-bar.dark {
+        color: #fff;
+      }
+      .safe-top {
+        height: 36px;
+      }
+      .header-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 16px 12px;
+      }
+      .header-sup {
+        font-size: 7px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        color: var(--muted);
+      }
+      .header-title {
+        font-size: 17px;
+        font-weight: 800;
+        color: var(--ink);
+        letter-spacing: -0.3px;
+      }
+      .header-title.sm {
+        font-size: 14px;
+      }
+      .header-title.white {
+        color: #fff;
+      }
+      .section-pad {
+        padding: 0 16px;
+      }
+      .mt4 {
+        margin-top: 4px;
+      }
+      .mt8 {
+        margin-top: 8px;
+      }
+      .mt12 {
+        margin-top: 12px;
+      }
+      .mt16 {
+        margin-top: 16px;
+      }
+      .mb4 {
+        margin-bottom: 4px;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .row-sb {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .col {
+        display: flex;
+        flex-direction: column;
+      }
+      .flex1 {
+        flex: 1;
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        border-radius: 100px;
+        padding: 3px 8px;
+        font-size: 8px;
+        font-weight: 700;
+      }
+      .chip-green {
+        background: rgba(127, 204, 38, 0.15);
+        color: var(--green);
+      }
+      .chip-yellow {
+        background: rgba(234, 217, 76, 0.2);
+        color: #9a7e00;
+        border: 1px solid var(--yellow);
+      }
+      .chip-ink {
+        background: rgba(26, 26, 26, 0.08);
+        color: var(--ink);
+      }
+      .pill-btn {
+        background: var(--green);
+        color: var(--ink);
+        border-radius: 100px;
+        padding: 10px 16px;
+        text-align: center;
+        font-size: 10px;
+        font-weight: 700;
+      }
+      .card {
+        background: var(--surface);
+        border-radius: 16px;
+        border: 1px solid var(--border);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      }
+      .divider {
+        height: 1px;
+        background: var(--border);
+        margin: 8px 0;
+      }
+
+      /* ── Home ─────────────────────────────────── */
+      .hero-card {
+        background: var(--ink);
+        border-radius: 20px;
+        padding: 16px;
+        margin: 0 16px;
+        color: #fff;
+      }
+      .hero-card .greeting {
+        font-size: 8px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .hero-card .name {
+        font-size: 14px;
+        font-weight: 800;
+        margin-top: 2px;
+      }
+      .hero-card .xp-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 10px;
+      }
+      .hero-card .xp-num {
+        font-size: 20px;
+        font-weight: 800;
+      }
+      .xp-bar {
+        height: 3px;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 2px;
+        margin-top: 8px;
+      }
+      .xp-fill {
+        height: 100%;
+        background: var(--green);
+        border-radius: 2px;
+      }
+      .hero-stats {
+        display: flex;
+        gap: 1px;
+        margin-top: 12px;
+      }
+      .hero-stat {
+        flex: 1;
+        text-align: center;
+      }
+      .hero-stat .val {
+        font-size: 14px;
+        font-weight: 800;
+        color: #fff;
+      }
+      .hero-stat .lbl {
+        font-size: 7px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 1px;
+      }
+      .hero-stat + .hero-stat {
+        border-left: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      .grid-2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        padding: 0 16px;
+      }
+      .action-card {
+        background: var(--surface);
+        border-radius: 14px;
+        border: 1px solid var(--border);
+        padding: 12px;
+        position: relative;
+        overflow: hidden;
+      }
+      .action-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 3px;
+      }
+      .action-emoji {
+        font-size: 20px;
+        margin-bottom: 6px;
+        margin-left: 8px;
+      }
+      .action-title {
+        font-size: 10px;
+        font-weight: 700;
+        color: var(--ink);
+        margin-left: 8px;
+      }
+      .action-sub {
+        font-size: 8px;
+        color: var(--muted);
+        margin-left: 8px;
+        margin-top: 1px;
+      }
+
+      /* ── Tab bar ───────────────────────────────── */
+      .tab-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60px;
+        background: var(--surface);
+        border-top: 1px solid var(--border);
+        display: flex;
+      }
+      .tab-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 2px;
+      }
+      .tab-icon {
+        font-size: 18px;
+        opacity: 0.35;
+      }
+      .tab-icon.active {
+        opacity: 1;
+      }
+      .tab-lbl {
+        font-size: 7px;
+        color: var(--muted);
+      }
+      .tab-lbl.active {
+        color: var(--green);
+        font-weight: 700;
+      }
+
+      /* ── Learn ─────────────────────────────────── */
+      .progress-bar {
+        height: 3px;
+        background: var(--border);
+        position: relative;
+      }
+      .progress-fill {
+        height: 100%;
+        background: var(--green);
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      .pieces-row {
+        display: flex;
+        gap: 8px;
+        padding: 0 16px;
+        overflow: hidden;
+      }
+      .piece-card {
+        flex: 0 0 auto;
+        width: 60px;
+        background: var(--surface);
+        border-radius: 12px;
+        border: 1.5px solid var(--border);
+        padding: 8px 4px;
+        text-align: center;
+      }
+      .piece-card.selected {
+        border-color: var(--green);
+        background: rgba(127, 204, 38, 0.05);
+      }
+      .piece-emoji {
+        font-size: 18px;
+        display: block;
+      }
+      .piece-name {
+        font-size: 7px;
+        color: var(--muted);
+        margin-top: 2px;
+        font-weight: 600;
+      }
+      .piece-prog {
+        height: 2px;
+        background: var(--border);
+        border-radius: 1px;
+        margin: 4px 4px 0;
+      }
+      .piece-fill {
+        height: 100%;
+        background: var(--green);
+        border-radius: 1px;
+      }
+      .lesson-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 16px;
+        border-bottom: 1px solid var(--border);
+      }
+      .lesson-dot {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-size: 10px;
+      }
+      .dot-done {
+        background: var(--green);
+        color: var(--ink);
+      }
+      .dot-available {
+        background: var(--ink);
+        color: #fff;
+      }
+      .dot-locked {
+        background: var(--border);
+        color: var(--muted);
+      }
+      .lesson-title {
+        font-size: 9px;
+        font-weight: 600;
+        color: var(--ink);
+      }
+      .lesson-meta {
+        font-size: 8px;
+        color: var(--muted);
+        margin-top: 1px;
+      }
+
+      /* ── Puzzles ───────────────────────────────── */
+      .chess-board {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        aspect-ratio: 1;
+        width: 100%;
+      }
+      .cell-light {
+        background: #f0d9b5;
+      }
+      .cell-dark {
+        background: #b58863;
+      }
+      .result-banner {
+        margin: 8px 16px 0;
+        background: rgba(127, 204, 38, 0.1);
+        border: 1px solid var(--green);
+        border-radius: 12px;
+        padding: 10px;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+      .result-banner.wrong {
+        background: var(--errorBg);
+        border-color: var(--error);
+      }
+      .result-icon-lg {
+        font-size: 20px;
+      }
+      .result-title {
+        font-size: 10px;
+        font-weight: 700;
+        color: var(--ink);
+      }
+      .result-sub {
+        font-size: 8px;
+        color: var(--muted);
+        margin-top: 1px;
+      }
+      .info-card {
+        margin: 8px 16px 0;
+      }
+      .rating-box {
+        background: var(--bg);
+        border-radius: 10px;
+        border: 1px solid var(--border);
+        padding: 8px;
+        text-align: center;
+        width: 52px;
+        flex-shrink: 0;
+      }
+      .rating-lbl {
+        font-size: 7px;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--muted);
+      }
+      .rating-val {
+        font-size: 16px;
+        font-weight: 800;
+        color: var(--green);
+      }
+      .theme-pill {
+        background: rgba(127, 204, 38, 0.1);
+        border: 1px solid rgba(127, 204, 38, 0.25);
+        border-radius: 100px;
+        padding: 2px 8px;
+        font-size: 8px;
+        font-weight: 700;
+        color: var(--green);
+      }
+      .hint-btn {
+        background: rgba(234, 217, 76, 0.15);
+        border: 1px solid rgba(234, 217, 76, 0.5);
+        border-radius: 10px;
+        padding: 8px;
+        text-align: center;
+        font-size: 9px;
+        font-weight: 600;
+        color: var(--ink);
+        margin-top: 8px;
+      }
+
+      /* ── Play Setup ────────────────────────────── */
+      .color-row {
+        display: flex;
+        gap: 8px;
+        padding: 0 16px;
+      }
+      .color-card {
+        flex: 1;
+        border-radius: 16px;
+        border: 2px solid var(--border);
+        padding: 10px 8px;
+        text-align: center;
+      }
+      .color-card.selected {
+        border-color: var(--green);
+      }
+      .color-card .piece-lg {
+        font-size: 24px;
+        display: block;
+        margin-bottom: 4px;
+      }
+      .color-card .lbl {
+        font-size: 9px;
+        font-weight: 700;
+      }
+      .color-card .sub {
+        font-size: 7px;
+        color: var(--muted);
+      }
+      .color-white {
+        background: #fafafa;
+      }
+      .color-black {
+        background: #2a2a2a;
+      }
+      .color-black .lbl,
+      .color-black .sub {
+        color: rgba(255, 255, 255, 0.8);
+      }
+      .color-rnd {
+        background: var(--greenBg);
+      }
+      .diff-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: var(--surface);
+        border-radius: 12px;
+        border: 1.5px solid var(--border);
+        padding: 8px 10px;
+        margin: 0 16px 6px;
+        position: relative;
+        overflow: hidden;
+      }
+      .diff-row.selected {
+        border-color: var(--green);
+        background: rgba(127, 204, 38, 0.04);
+      }
+      .diff-accent {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+      }
+      .diff-info .lbl {
+        font-size: 9px;
+        font-weight: 600;
+        color: var(--ink);
+      }
+      .diff-info .desc {
+        font-size: 8px;
+        color: var(--muted);
+      }
+      .dots {
+        display: flex;
+        gap: 3px;
+        margin-left: auto;
+      }
+      .dot {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+      }
+
+      /* ── Play Game ─────────────────────────────── */
+      .dark-header {
+        background: var(--ink);
+        padding: 8px 16px 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding-top: 36px;
+      }
+      .back-btn {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: #fff;
+      }
+      .player-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+      }
+      .player-avatar {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: var(--green);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 700;
+        color: var(--ink);
+      }
+      .player-name {
+        font-size: 9px;
+        font-weight: 700;
+        color: var(--ink);
+      }
+      .player-cap {
+        font-size: 8px;
+        color: var(--muted);
+      }
+      .timer {
+        margin-left: auto;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 4px 8px;
+        font-size: 10px;
+        font-weight: 700;
+        color: var(--ink);
+      }
+      .timer.active {
+        background: var(--green);
+        border-color: var(--green);
+        color: var(--ink);
+      }
+      .tutor-card {
+        margin: 6px 12px 0;
+      }
+      .tutor-header {
+        background: rgba(234, 217, 76, 0.15);
+        padding: 6px 10px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        border-radius: 12px 12px 0 0;
+      }
+      .tutor-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 6px;
+        background: var(--yellow);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+      }
+      .tutor-title {
+        font-size: 9px;
+        font-weight: 700;
+        color: var(--ink);
+        flex: 1;
+      }
+      .tutor-body {
+        background: var(--surface);
+        border-radius: 0 0 12px 12px;
+        border: 1px solid var(--border);
+        border-top: none;
+        padding: 8px 10px;
+      }
+      .opening-name {
+        font-size: 8px;
+        font-weight: 600;
+        color: var(--muted);
+      }
+      .tutor-tip {
+        font-size: 8px;
+        color: var(--ink);
+        margin-top: 4px;
+        line-height: 1.4;
+      }
+      .move-history {
+        display: flex;
+        gap: 6px;
+        padding: 0 12px;
+        overflow: hidden;
+        margin-top: 8px;
+      }
+      .move-pair {
+        display: flex;
+        gap: 2px;
+      }
+      .move-chip {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 2px 6px;
+        font-size: 8px;
+        font-weight: 600;
+        color: var(--ink);
+      }
+      .dark-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--ink);
+        padding: 8px 12px 20px;
+        display: flex;
+        gap: 6px;
+      }
+      .ctrl-btn {
+        flex: 1;
+        text-align: center;
+        padding: 7px 4px;
+        background: rgba(255, 255, 255, 0.08);
+        border-radius: 10px;
+        font-size: 8px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+      .ctrl-btn.danger {
+        background: rgba(214, 69, 69, 0.15);
+        color: #d64545;
+      }
+
+      /* ── Profile ───────────────────────────────── */
+      .avatar-ring {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: rgba(127, 204, 38, 0.2);
+        padding: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .avatar-inner {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: var(--green);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        font-weight: 800;
+        color: var(--ink);
+      }
+      .stats-bar {
+        display: flex;
+        background: var(--surface);
+        border-radius: 14px;
+        border: 1px solid var(--border);
+        overflow: hidden;
+        margin: 0 16px;
+      }
+      .stat-cell {
+        flex: 1;
+        text-align: center;
+        padding: 10px 4px;
+      }
+      .stat-cell + .stat-cell {
+        border-left: 1px solid var(--border);
+      }
+      .stat-val {
+        font-size: 14px;
+        font-weight: 800;
+        color: var(--ink);
+      }
+      .stat-lbl {
+        font-size: 7px;
+        color: var(--muted);
+        margin-top: 1px;
+      }
+      .badge-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 6px;
+        padding: 0 16px;
+      }
+      .badge-card {
+        background: var(--surface);
+        border-radius: 12px;
+        border: 1px solid var(--border);
+        padding: 8px 4px;
+        text-align: center;
+      }
+      .badge-card.locked {
+        opacity: 0.55;
+      }
+      .badge-emoji {
+        font-size: 18px;
+        display: block;
+      }
+      .badge-lbl {
+        font-size: 7px;
+        font-weight: 600;
+        color: var(--gray);
+        margin-top: 3px;
+      }
+      .menu-card {
+        background: var(--surface);
+        border-radius: 14px;
+        border: 1px solid var(--border);
+        margin: 0 16px;
+        overflow: hidden;
+      }
+      .menu-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--border);
+      }
+      .menu-row:last-child {
+        border-bottom: none;
+      }
+      .menu-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 8px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        flex-shrink: 0;
+      }
+      .menu-lbl {
+        font-size: 9px;
+        font-weight: 600;
+        color: var(--ink);
+      }
+      .menu-sub {
+        font-size: 8px;
+        color: var(--muted);
+      }
+      .arrow {
+        margin-left: auto;
+        font-size: 14px;
+        color: var(--muted);
+      }
+
+      /* ── Lesson Detail ─────────────────────────── */
+      .step-dots {
+        display: flex;
+        gap: 4px;
+        padding: 8px 16px;
+      }
+      .step-dot {
+        height: 4px;
+        border-radius: 2px;
+        background: var(--border);
+      }
+      .step-dot.done {
+        background: var(--green);
+      }
+      .step-dot.active {
+        background: var(--green);
+        width: 16px;
+      }
+      .board-wrap {
+        margin: 8px 16px;
+        border-radius: 12px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+      }
+      .instruction-card {
+        margin: 8px 16px;
+        background: var(--surface);
+        border-radius: 14px;
+        border: 1px solid var(--border);
+        padding: 12px;
+      }
+      .inst-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 8px;
+      }
+      .piece-badge {
+        background: var(--ink);
+        color: #fff;
+        border-radius: 8px;
+        padding: 3px 8px;
+        font-size: 9px;
+        font-weight: 700;
+      }
+      .inst-text {
+        font-size: 9px;
+        color: var(--ink);
+        line-height: 1.5;
+      }
+      .tip-box {
+        background: rgba(234, 217, 76, 0.15);
+        border-left: 2px solid var(--yellow);
+        border-radius: 6px;
+        padding: 6px 8px;
+        margin-top: 8px;
+        font-size: 8px;
+        color: var(--ink);
+      }
+      .lesson-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 10px 16px 20px;
+        background: var(--bg);
+        border-top: 1px solid var(--border);
+        display: flex;
+        gap: 8px;
+      }
+      .btn-secondary {
+        flex: 1;
+        border-radius: 100px;
+        border: 1.5px solid var(--border);
+        padding: 9px;
+        text-align: center;
+        font-size: 9px;
+        font-weight: 600;
+        color: var(--ink);
+        background: var(--surface);
+      }
+      .btn-green-pill {
+        flex: 2;
+        background: var(--green);
+        border-radius: 100px;
+        padding: 9px;
+        text-align: center;
+        font-size: 9px;
+        font-weight: 700;
+        color: var(--ink);
+      }
+
+      /* ── Footer note ───────────────────────────── */
+      .footer-note {
+        text-align: center;
+        margin-top: 80px;
+        font-size: 11px;
+        color: #444;
+      }
+      .footer-note span {
+        color: var(--green);
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ════════════════════════════════════════
+       PAGE HEADER
+  ════════════════════════════════════════ -->
+    <div class="page-header">
+      <h1>Y <span>STEM</span> and Chess</h1>
+      <p>Mobile App — All Screens</p>
+      <span class="tag">design/sandith-ui-screens · React Native + Expo</span>
+    </div>
+
+    <!-- ════════════════════════════════════════
+       D1 — AUTH
+  ════════════════════════════════════════ -->
+    <div class="section-title">D1 — Authentication</div>
+    <div class="phones-row">
+      <!-- Sign In -->
+      <div class="phone-wrap">
+        <div class="phone-label">Sign In</div>
+        <div class="phone">
+          <div class="screen">
+            <div class="signin-pattern"></div>
+            <!-- top space / hero -->
+            <div
+              style="
+                height: 140px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+              "
+            >
+              <div style="font-size: 48px">♟</div>
+            </div>
+            <div class="signin-card">
+              <div class="signin-logo">
+                <div class="logo-circle">♟</div>
+                <h1>Y STEM</h1>
+                <p>and Chess · Sign in to continue</p>
+              </div>
+              <div class="field">
+                <div class="field-label">Username</div>
+                <div class="field-value">student</div>
+              </div>
+              <div class="field">
+                <div class="field-label">Password</div>
+                <div class="field-value">••••••••</div>
+              </div>
+              <div class="btn-primary-block">Enter ♟</div>
+              <div class="signin-links">
+                <span class="link">Forgot Password</span>
+                <span style="color: #ccc">·</span>
+                <span class="link">Sign Up</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /auth -->
+
+    <!-- ════════════════════════════════════════
+       D1 — HOME
+  ════════════════════════════════════════ -->
+    <div class="section-title">D1 — Home</div>
+    <div class="phones-row">
+      <div class="phone-wrap">
+        <div class="phone-label">Home</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+
+            <!-- Header -->
+            <div style="padding: 0 16px 10px">
+              <div
+                style="
+                  font-size: 7px;
+                  color: var(--muted);
+                  text-transform: uppercase;
+                  letter-spacing: 1.5px;
+                "
+              >
+                DASHBOARD
+              </div>
+              <div style="font-size: 15px; font-weight: 800; color: var(--ink)">
+                Good morning, Alex 👋
+              </div>
+            </div>
+
+            <!-- Hero XP card -->
+            <div class="hero-card">
+              <div class="greeting">YOUR PROGRESS</div>
+              <div class="row mt4">
+                <div
+                  class="hero-stat"
+                  style="flex: 0 0 auto; margin-right: 12px; border: none"
+                >
+                  <div class="xp-num">250</div>
+                  <div style="font-size: 7px; color: rgba(255, 255, 255, 0.4)">
+                    XP · Level 3
+                  </div>
+                </div>
+                <div class="flex1">
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: space-between;
+                      font-size: 7px;
+                      color: rgba(255, 255, 255, 0.4);
+                      margin-bottom: 4px;
+                    "
+                  >
+                    <span>Level 3</span><span>Level 4</span>
+                  </div>
+                  <div class="xp-bar">
+                    <div class="xp-fill" style="width: 62%"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="hero-stats mt12">
+                <div class="hero-stat">
+                  <div class="val">5🔥</div>
+                  <div class="lbl">STREAK</div>
+                </div>
+                <div class="hero-stat">
+                  <div class="val">12🧩</div>
+                  <div class="lbl">PUZZLES</div>
+                </div>
+                <div class="hero-stat">
+                  <div class="val">3♟</div>
+                  <div class="lbl">WINS</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Quick actions -->
+            <div class="mt12 grid-2">
+              <div class="action-card">
+                <div class="action-bar" style="background: var(--green)"></div>
+                <div class="action-emoji">📚</div>
+                <div class="action-title">Learn</div>
+                <div class="action-sub">Knight · Step 3</div>
+              </div>
+              <div class="action-card">
+                <div class="action-bar" style="background: var(--yellow)"></div>
+                <div class="action-emoji">🧩</div>
+                <div class="action-title">Puzzles</div>
+                <div class="action-sub">Rating 1287</div>
+              </div>
+            </div>
+
+            <!-- Tab bar -->
+            <div class="tab-bar">
+              <div class="tab-item">
+                <span class="tab-icon active">🏠</span
+                ><span class="tab-lbl active">Home</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">📚</span
+                ><span class="tab-lbl">Learn</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">♟</span><span class="tab-lbl">Play</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">👤</span
+                ><span class="tab-lbl">Profile</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /home -->
+
+    <!-- ════════════════════════════════════════
+       D2 — LESSONS
+  ════════════════════════════════════════ -->
+    <div class="section-title">D2 — Lessons</div>
+    <div class="phones-row">
+      <!-- Learn (selection) -->
+      <div class="phone-wrap">
+        <div class="phone-label">Lessons Selection</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+            <div class="header-row">
+              <div>
+                <div class="header-sup">CHESS ACADEMY</div>
+                <div class="header-title sm">Your Learning Path</div>
+              </div>
+              <div class="chip chip-green">62% mastered</div>
+            </div>
+
+            <div
+              class="progress-bar"
+              style="margin: 0 16px; border-radius: 2px; overflow: hidden"
+            >
+              <div class="progress-fill" style="width: 62%"></div>
+            </div>
+
+            <!-- Piece pills -->
+            <div class="mt12 pieces-row">
+              <div class="piece-card selected">
+                <span class="piece-emoji">♞</span>
+                <span class="piece-name">Knight</span>
+                <div class="piece-prog">
+                  <div class="piece-fill" style="width: 50%"></div>
+                </div>
+              </div>
+              <div class="piece-card">
+                <span class="piece-emoji">♙</span>
+                <span class="piece-name">Pawn</span>
+                <div class="piece-prog">
+                  <div class="piece-fill" style="width: 100%"></div>
+                </div>
+              </div>
+              <div class="piece-card">
+                <span class="piece-emoji">♗</span>
+                <span class="piece-name">Bishop</span>
+                <div class="piece-prog">
+                  <div class="piece-fill" style="width: 0%"></div>
+                </div>
+              </div>
+              <div class="piece-card">
+                <span class="piece-emoji">♖</span>
+                <span class="piece-name">Rook</span>
+                <div class="piece-prog"></div>
+              </div>
+            </div>
+
+            <!-- Lesson list -->
+            <div class="card mt12" style="margin: 8px 16px; overflow: hidden">
+              <div class="lesson-row">
+                <div class="lesson-dot dot-done">✓</div>
+                <div class="flex1">
+                  <div class="lesson-title">What is a Knight?</div>
+                  <div class="lesson-meta">3 min · +20 XP</div>
+                </div>
+              </div>
+              <div class="lesson-row">
+                <div class="lesson-dot dot-done">✓</div>
+                <div class="flex1">
+                  <div class="lesson-title">How Knights Move</div>
+                  <div class="lesson-meta">5 min · +30 XP</div>
+                </div>
+              </div>
+              <div class="lesson-row">
+                <div class="lesson-dot dot-available">▶</div>
+                <div class="flex1">
+                  <div class="lesson-title">Knight Forks</div>
+                  <div class="lesson-meta">7 min · +40 XP</div>
+                </div>
+                <div class="chip chip-green">In progress</div>
+              </div>
+              <div class="lesson-row" style="border: none">
+                <div class="lesson-dot dot-locked">🔒</div>
+                <div class="flex1" style="opacity: 0.5">
+                  <div class="lesson-title">Advanced Knight Tactics</div>
+                  <div class="lesson-meta">8 min · +50 XP</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- CTA -->
+            <div style="padding: 0 16px">
+              <div class="pill-btn">Continue: Knight Forks</div>
+            </div>
+
+            <div class="tab-bar">
+              <div class="tab-item">
+                <span class="tab-icon">🏠</span
+                ><span class="tab-lbl">Home</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon active">📚</span
+                ><span class="tab-lbl active">Learn</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">♟</span><span class="tab-lbl">Play</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">👤</span
+                ><span class="tab-lbl">Profile</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Lesson Detail -->
+      <div class="phone-wrap">
+        <div class="phone-label">Lesson Detail</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+
+            <!-- Top bar -->
+            <div class="row" style="padding: 0 16px 8px; gap: 8px">
+              <div style="font-size: 16px; color: var(--ink)">←</div>
+              <div class="flex1 col" style="align-items: center">
+                <div
+                  style="
+                    font-size: 7px;
+                    text-transform: uppercase;
+                    letter-spacing: 1.5px;
+                    color: var(--muted);
+                  "
+                >
+                  STEP 2 OF 4
+                </div>
+                <div
+                  style="font-size: 11px; font-weight: 700; color: var(--ink)"
+                >
+                  Knight Forks
+                </div>
+              </div>
+              <div class="chip chip-green">+40 XP</div>
+            </div>
+
+            <!-- Step dots -->
+            <div class="step-dots">
+              <div class="step-dot done" style="width: 24px"></div>
+              <div class="step-dot done" style="width: 24px"></div>
+              <div class="step-dot active"></div>
+              <div class="step-dot" style="width: 24px"></div>
+            </div>
+
+            <!-- Board -->
+            <div class="board-wrap">
+              <div class="chess-board">
+                <!-- 64 cells -->
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div
+                  class="cell-dark"
+                  style="
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  ♛
+                </div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div
+                  class="cell-dark"
+                  style="
+                    background: rgba(127, 204, 38, 0.45);
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  ♞
+                </div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div
+                  class="cell-dark"
+                  style="
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  "
+                >
+                  ♜
+                </div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+                <div class="cell-dark"></div>
+                <div class="cell-light"></div>
+              </div>
+            </div>
+
+            <!-- Instruction -->
+            <div class="instruction-card">
+              <div class="inst-row">
+                <div class="piece-badge">♞ Knight</div>
+                <div class="chip chip-ink" style="margin-left: auto">
+                  Step 2
+                </div>
+              </div>
+              <div class="inst-text">
+                The Knight on d5 can fork both the Queen on c7 and the Rook on
+                e7 in a single move — winning material.
+              </div>
+              <div class="tip-box">
+                💡 A fork attacks two pieces at once — your opponent can only
+                save one!
+              </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="lesson-footer">
+              <div class="btn-secondary">← Back</div>
+              <div class="btn-green-pill">Next Step →</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /lessons -->
+
+    <!-- ════════════════════════════════════════
+       D3 — PUZZLES
+  ════════════════════════════════════════ -->
+    <div class="section-title">D3 — Puzzles</div>
+    <div class="phones-row">
+      <!-- Solving -->
+      <div class="phone-wrap">
+        <div class="phone-label">Solving</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+            <div class="header-row">
+              <div>
+                <div class="header-sup">PUZZLE</div>
+                <div class="header-title sm">#4821</div>
+              </div>
+              <div style="font-size: 14px; font-weight: 800; color: var(--ink)">
+                Puzzles
+              </div>
+              <div class="chip chip-yellow">🔥 5</div>
+            </div>
+
+            <!-- Board -->
+            <div style="padding: 0 16px; margin-bottom: 8px">
+              <div
+                style="
+                  border-radius: 10px;
+                  overflow: hidden;
+                  border: 1px solid var(--border);
+                "
+              >
+                <div class="chess-board">
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 13px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♛
+                  </div>
+                  <div class="cell-dark"></div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 13px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♜
+                  </div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 13px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♘
+                  </div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Info card -->
+            <div class="card info-card" style="padding: 10px">
+              <div class="row mb4">
+                <div class="rating-box">
+                  <div class="rating-lbl">Rating</div>
+                  <div class="rating-val">1287</div>
+                </div>
+                <div
+                  class="flex1"
+                  style="
+                    font-size: 9px;
+                    font-weight: 600;
+                    color: var(--ink);
+                    line-height: 1.4;
+                  "
+                >
+                  White to move. Find the Knight fork that wins material.
+                </div>
+              </div>
+              <div class="divider"></div>
+              <div
+                class="row"
+                style="flex-wrap: wrap; gap: 4px; margin-top: 4px"
+              >
+                <div class="theme-pill">Fork</div>
+                <div class="theme-pill">Knight</div>
+                <div class="theme-pill">Intermediate</div>
+              </div>
+              <div class="divider"></div>
+              <div class="hint-btn">💡 Show Hint (−5 pts)</div>
+            </div>
+
+            <!-- Footer -->
+            <div style="padding: 8px 16px 0">
+              <div class="pill-btn">Skip ›</div>
+            </div>
+
+            <div class="tab-bar">
+              <div class="tab-item">
+                <span class="tab-icon">🏠</span
+                ><span class="tab-lbl">Home</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">📚</span
+                ><span class="tab-lbl">Learn</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon active">♟</span
+                ><span class="tab-lbl active">Play</span>
+              </div>
+              <div class="tab-item">
+                <span class="tab-icon">👤</span
+                ><span class="tab-lbl">Profile</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Correct -->
+      <div class="phone-wrap">
+        <div class="phone-label">Correct Result</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+            <div class="header-row">
+              <div>
+                <div class="header-sup">PUZZLE</div>
+                <div class="header-title sm">#4821</div>
+              </div>
+              <div style="font-size: 14px; font-weight: 800">Puzzles</div>
+              <div class="chip chip-yellow">🔥 6</div>
+            </div>
+            <div style="padding: 0 16px; margin-bottom: 8px">
+              <div
+                style="
+                  border-radius: 10px;
+                  overflow: hidden;
+                  border: 1px solid var(--border);
+                  position: relative;
+                "
+              >
+                <div class="chess-board">
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      background: rgba(127, 204, 38, 0.5);
+                      font-size: 13px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♘
+                  </div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                </div>
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    background: rgba(127, 204, 38, 0.12);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 40px;
+                    opacity: 0.7;
+                  "
+                >
+                  ✓
+                </div>
+              </div>
+            </div>
+            <div class="result-banner">
+              <div class="result-icon-lg">🎉</div>
+              <div>
+                <div class="result-title">Brilliant!</div>
+                <div class="result-sub">+10 bonus XP · Streak: 6 🔥</div>
+              </div>
+            </div>
+            <div class="card info-card" style="padding: 10px; margin-top: 8px">
+              <div class="row mb4">
+                <div class="rating-box">
+                  <div class="rating-lbl">Rating</div>
+                  <div class="rating-val">1287</div>
+                </div>
+                <div
+                  class="flex1"
+                  style="
+                    font-size: 9px;
+                    font-weight: 600;
+                    color: var(--ink);
+                    line-height: 1.4;
+                  "
+                >
+                  White to move. Find the Knight fork that wins material.
+                </div>
+              </div>
+              <div class="divider"></div>
+              <div
+                class="row"
+                style="flex-wrap: wrap; gap: 4px; margin-top: 4px"
+              >
+                <div class="theme-pill">Fork</div>
+                <div class="theme-pill">Knight</div>
+                <div class="theme-pill">Intermediate</div>
+              </div>
+            </div>
+            <div style="padding: 8px 16px 0">
+              <div class="pill-btn">Next Puzzle ›</div>
+            </div>
+            <div class="tab-bar">
+              <div class="tab-item"><span class="tab-icon">🏠</span></div>
+              <div class="tab-item"><span class="tab-icon">📚</span></div>
+              <div class="tab-item"><span class="tab-icon active">♟</span></div>
+              <div class="tab-item"><span class="tab-icon">👤</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /puzzles -->
+
+    <!-- ════════════════════════════════════════
+       D4 — PLAY VS COMPUTER
+  ════════════════════════════════════════ -->
+    <div class="section-title">D4 — Play vs Computer</div>
+    <div class="phones-row">
+      <!-- Setup -->
+      <div class="phone-wrap">
+        <div class="phone-label">Game Setup</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+            <div style="padding: 0 16px 10px">
+              <div class="header-sup">SINGLE PLAYER</div>
+              <div class="header-title">Play vs Computer</div>
+            </div>
+
+            <!-- Color picker -->
+            <div
+              style="
+                font-size: 8px;
+                font-weight: 700;
+                text-transform: uppercase;
+                letter-spacing: 1.5px;
+                color: var(--muted);
+                padding: 0 16px;
+                margin-bottom: 8px;
+              "
+            >
+              Choose your side
+            </div>
+            <div class="color-row">
+              <div class="color-card color-white selected">
+                <span class="piece-lg">♔</span>
+                <span class="lbl">White</span>
+                <span class="sub">Moves first</span>
+              </div>
+              <div class="color-card color-black">
+                <span class="piece-lg">♚</span>
+                <span class="lbl">Black</span>
+                <span class="sub" style="color: rgba(255, 255, 255, 0.4)"
+                  >Moves second</span
+                >
+              </div>
+              <div class="color-card color-rnd">
+                <span class="piece-lg">⚄</span>
+                <span class="lbl">Random</span>
+                <span class="sub">Surprise me!</span>
+              </div>
+            </div>
+
+            <!-- Difficulty -->
+            <div
+              style="
+                font-size: 8px;
+                font-weight: 700;
+                text-transform: uppercase;
+                letter-spacing: 1.5px;
+                color: var(--muted);
+                padding: 8px 16px 6px;
+              "
+            >
+              Difficulty
+            </div>
+            <div class="diff-row selected">
+              <div class="diff-accent" style="background: var(--green)"></div>
+              <span style="font-size: 16px">🌱</span>
+              <div class="diff-info">
+                <div class="lbl">Beginner</div>
+                <div class="desc">Learn the basics</div>
+              </div>
+              <div class="dots">
+                <div class="dot" style="background: var(--green)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+              </div>
+              <span
+                style="
+                  font-size: 11px;
+                  font-weight: 700;
+                  color: var(--green);
+                  margin-left: 4px;
+                "
+                >✓</span
+              >
+            </div>
+            <div class="diff-row">
+              <div
+                class="diff-accent"
+                style="background: var(--greenSoft)"
+              ></div>
+              <span style="font-size: 16px">😊</span>
+              <div class="diff-info">
+                <div class="lbl" style="color: var(--muted)">Easy</div>
+                <div class="desc">Gentle challenge</div>
+              </div>
+              <div class="dots">
+                <div class="dot" style="background: var(--greenSoft)"></div>
+                <div class="dot" style="background: var(--greenSoft)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+              </div>
+            </div>
+            <div class="diff-row">
+              <div class="diff-accent" style="background: var(--yellow)"></div>
+              <span style="font-size: 16px">🤔</span>
+              <div class="diff-info">
+                <div class="lbl" style="color: var(--muted)">Medium</div>
+                <div class="desc">Real thinking</div>
+              </div>
+              <div class="dots">
+                <div class="dot" style="background: var(--yellow)"></div>
+                <div class="dot" style="background: var(--yellow)"></div>
+                <div class="dot" style="background: var(--yellow)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+                <div class="dot" style="background: var(--border)"></div>
+              </div>
+            </div>
+
+            <!-- CTA -->
+            <div style="padding: 8px 16px 0">
+              <div class="pill-btn">Let's Play ♟</div>
+            </div>
+
+            <div class="tab-bar">
+              <div class="tab-item"><span class="tab-icon">🏠</span></div>
+              <div class="tab-item"><span class="tab-icon">📚</span></div>
+              <div class="tab-item"><span class="tab-icon active">♟</span></div>
+              <div class="tab-item"><span class="tab-icon">👤</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Active Game -->
+      <div class="phone-wrap">
+        <div class="phone-label">Active Game</div>
+        <div class="phone">
+          <div class="screen" style="background: var(--bg)">
+            <!-- Dark header -->
+            <div class="dark-header">
+              <div class="back-btn">←</div>
+              <div class="flex1 col" style="align-items: center">
+                <div style="font-size: 11px; font-weight: 800; color: #fff">
+                  vs Computer
+                </div>
+                <div style="font-size: 8px; color: rgba(255, 255, 255, 0.4)">
+                  🌱 Beginner · Playing White
+                </div>
+              </div>
+              <div
+                class="chip"
+                style="
+                  background: rgba(127, 204, 38, 0.2);
+                  color: var(--green);
+                  font-size: 8px;
+                "
+              >
+                +0.4
+              </div>
+            </div>
+
+            <!-- Black player -->
+            <div class="player-row">
+              <div
+                class="player-avatar"
+                style="background: #444; color: #fff; font-size: 10px"
+              >
+                🤖
+              </div>
+              <div>
+                <div class="player-name">Computer</div>
+                <div class="player-cap">♟♟ captured</div>
+              </div>
+              <div class="timer">3:42</div>
+            </div>
+
+            <!-- Board -->
+            <div style="padding: 0 12px">
+              <div style="border-radius: 8px; overflow: hidden">
+                <div class="chess-board">
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♜
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♞
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♝
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♛
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♚
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♝
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♞
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♜
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♟
+                  </div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♗
+                  </div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div class="cell-light"></div>
+                  <div class="cell-dark"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div class="cell-dark"></div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♙
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♖
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♘
+                  </div>
+                  <div class="cell-light"></div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♕
+                  </div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♔
+                  </div>
+                  <div class="cell-dark"></div>
+                  <div
+                    class="cell-light"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♘
+                  </div>
+                  <div
+                    class="cell-dark"
+                    style="
+                      font-size: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    "
+                  >
+                    ♖
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- White player -->
+            <div
+              class="player-row"
+              style="border-top: 1px solid var(--border); border-bottom: none"
+            >
+              <div class="player-avatar">A</div>
+              <div>
+                <div class="player-name">You (White)</div>
+                <div class="player-cap">Move 5</div>
+              </div>
+              <div class="timer active">4:15</div>
+            </div>
+
+            <!-- Tutor -->
+            <div class="tutor-card">
+              <div class="tutor-header">
+                <div class="tutor-icon">💡</div>
+                <span class="tutor-title">Tutor Tip</span>
+                <div class="chip chip-green" style="font-size: 8px">+0.4</div>
+              </div>
+              <div class="tutor-body" style="font-size: 8px; color: var(--ink)">
+                <div class="opening-name">Italian Game</div>
+                <div class="tutor-tip">
+                  Good bishop development! Consider castling soon to protect
+                  your king.
+                </div>
+              </div>
+            </div>
+
+            <!-- Controls -->
+            <div class="dark-footer">
+              <div class="ctrl-btn">↩ Undo</div>
+              <div class="ctrl-btn">⇅ Flip</div>
+              <div class="ctrl-btn">½ Draw</div>
+              <div class="ctrl-btn danger">✕ Resign</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /play -->
+
+    <!-- ════════════════════════════════════════
+       PROFILE
+  ════════════════════════════════════════ -->
+    <div class="section-title">Profile</div>
+    <div class="phones-row">
+      <div class="phone-wrap">
+        <div class="phone-label">Profile</div>
+        <div class="phone">
+          <div class="screen screen-bg">
+            <div class="status-bar">9:41<span>●●●</span></div>
+
+            <!-- Hero -->
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 6px;
+                padding: 8px 0 12px;
+              "
+            >
+              <div class="avatar-ring"><div class="avatar-inner">A</div></div>
+              <div style="font-size: 14px; font-weight: 800; color: var(--ink)">
+                Alex Chen
+              </div>
+              <div class="chip chip-green">🎒 Student</div>
+              <div class="row" style="gap: 6px">
+                <div class="chip chip-yellow">250 XP</div>
+                <span style="color: var(--muted); font-size: 10px">·</span>
+                <span style="font-size: 9px; color: var(--muted)">Level 3</span>
+              </div>
+            </div>
+
+            <!-- Stats -->
+            <div class="stats-bar">
+              <div class="stat-cell">
+                <div class="stat-val">5</div>
+                <div class="stat-lbl">📚 Lessons</div>
+              </div>
+              <div class="stat-cell">
+                <div class="stat-val">12</div>
+                <div class="stat-lbl">🧩 Puzzles</div>
+              </div>
+              <div class="stat-cell">
+                <div class="stat-val">3</div>
+                <div class="stat-lbl">♟ Wins</div>
+              </div>
+              <div class="stat-cell">
+                <div class="stat-val">5</div>
+                <div class="stat-lbl">🔥 Streak</div>
+              </div>
+            </div>
+
+            <!-- Badges -->
+            <div
+              style="
+                padding: 8px 16px 0;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <div style="font-size: 9px; font-weight: 700; color: var(--ink)">
+                Badges
+              </div>
+              <div style="font-size: 8px; color: var(--muted)">5/9 earned</div>
+            </div>
+            <div class="badge-grid mt8">
+              <div class="badge-card">
+                <span class="badge-emoji">🌱</span
+                ><span class="badge-lbl">First Lesson</span>
+              </div>
+              <div class="badge-card">
+                <span class="badge-emoji">🧩</span
+                ><span class="badge-lbl">Puzzle Solver</span>
+              </div>
+              <div class="badge-card">
+                <span class="badge-emoji">♟</span
+                ><span class="badge-lbl">First Win</span>
+              </div>
+              <div class="badge-card">
+                <span class="badge-emoji">🔥</span
+                ><span class="badge-lbl">5-Day Streak</span>
+              </div>
+              <div class="badge-card">
+                <span class="badge-emoji">📚</span
+                ><span class="badge-lbl">Quick Learner</span>
+              </div>
+              <div class="badge-card locked">
+                <span class="badge-emoji">🏆</span
+                ><span class="badge-lbl">Champion</span>
+              </div>
+            </div>
+
+            <!-- Settings -->
+            <div class="menu-card mt12" style="margin-bottom: 8px">
+              <div class="menu-row">
+                <div class="menu-icon">✏️</div>
+                <div class="flex1">
+                  <div class="menu-lbl">Edit Profile</div>
+                  <div class="menu-sub">Name, avatar, bio</div>
+                </div>
+                <span class="arrow">›</span>
+              </div>
+              <div class="menu-row">
+                <div class="menu-icon">🔔</div>
+                <div class="flex1">
+                  <div class="menu-lbl">Notifications</div>
+                  <div class="menu-sub">Alerts & reminders</div>
+                </div>
+                <span class="arrow">›</span>
+              </div>
+              <div class="menu-row" style="border: none">
+                <div class="menu-icon">❓</div>
+                <div class="flex1">
+                  <div class="menu-lbl">Help & Support</div>
+                  <div class="menu-sub">FAQs & contact us</div>
+                </div>
+                <span class="arrow">›</span>
+              </div>
+            </div>
+
+            <div
+              style="
+                margin: 0 16px;
+                background: #fff;
+                border-radius: 12px;
+                border: 1px solid var(--border);
+                padding: 10px;
+                text-align: center;
+                font-size: 9px;
+                font-weight: 600;
+                color: var(--error);
+              "
+            >
+              Sign out
+            </div>
+
+            <div class="tab-bar">
+              <div class="tab-item"><span class="tab-icon">🏠</span></div>
+              <div class="tab-item"><span class="tab-icon">📚</span></div>
+              <div class="tab-item"><span class="tab-icon">♟</span></div>
+              <div class="tab-item">
+                <span class="tab-icon active">👤</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- /profile -->
+
+    <div class="footer-note">
+      <span>Y STEM and Chess</span> — Mobile UI/UX by Sandith Hewage<br />
+      <span style="color: #444"
+        >design/sandith-ui-screens · React Native + Expo Router</span
+      >
+    </div>
+  </body>
+</html>
diff --git a/test/navigation.test.tsx b/test/navigation.test.tsx
index 52b197d..6b9bd83 100644
--- a/test/navigation.test.tsx
+++ b/test/navigation.test.tsx
@@ -13,7 +13,7 @@ async function renderAnonymous(initialUrl = '/') {
   });
 
   await waitFor(() => {
-    expect(screen.getByText('Sign in')).toBeOnTheScreen();
+    expect(screen.getByText('Welcome back')).toBeOnTheScreen();
   });
 
   return renderedRouter;
@@ -24,7 +24,7 @@ describe('session-aware navigation', () => {
     const renderedRouter = await renderAnonymous('/mentor');
 
     expect(renderedRouter.getPathname()).toBe('/sign-in');
-    expect(screen.getByText('Sign in')).toBeOnTheScreen();
+    expect(screen.getByText('Welcome back')).toBeOnTheScreen();
   });
 
   it('allows a student into the app but denies the mentor route', async () => {
@@ -38,9 +38,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/');
-      expect(
-        screen.getByText('Signed in as Mock Student (student).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Quick Actions')).toBeOnTheScreen();
     });
 
     expect(
@@ -55,9 +53,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/');
-      expect(
-        screen.getByText('Signed in as Mock Student (student).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Quick Actions')).toBeOnTheScreen();
     });
   });
 
@@ -72,9 +68,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/');
-      expect(
-        screen.getByText('Signed in as Mock Mentor (mentor).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Quick Actions')).toBeOnTheScreen();
     });
 
     fireEvent.press(
@@ -102,9 +96,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/');
-      expect(
-        screen.getByText('Signed in as Mock Student (student).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Quick Actions')).toBeOnTheScreen();
     });
 
     act(() => {
@@ -113,9 +105,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/');
-      expect(
-        screen.getByText('Signed in as Mock Student (student).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Quick Actions')).toBeOnTheScreen();
     });
   });
 
@@ -130,9 +120,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/');
-      expect(
-        screen.getByText('Signed in as Mock Student (student).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Quick Actions')).toBeOnTheScreen();
     });
 
     act(() => {
@@ -141,9 +129,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/profile');
-      expect(
-        screen.getByText('Signed in as Mock Student (student).'),
-      ).toBeOnTheScreen();
+      expect(screen.getByText('Mock Student')).toBeOnTheScreen();
     });
 
     fireEvent.press(
@@ -154,7 +140,7 @@ describe('session-aware navigation', () => {
 
     await waitFor(() => {
       expect(renderedRouter.getPathname()).toBe('/sign-in');
-      expect(screen.getByText('Sign in')).toBeOnTheScreen();
+      expect(screen.getByText('Welcome back')).toBeOnTheScreen();
     });
 
     if (router.canGoBack()) {
@@ -164,7 +150,7 @@ describe('session-aware navigation', () => {
 
       await waitFor(() => {
         expect(renderedRouter.getPathname()).toBe('/sign-in');
-        expect(screen.getByText('Sign in')).toBeOnTheScreen();
+        expect(screen.getByText('Welcome back')).toBeOnTheScreen();
       });
     }
   });