Reading mode — full-screen immersive story reader

[realproject7]

Problem

Currently, story content is displayed alongside trading widgets, comments, and other UI elements. Readers who want to focus on the story have no way to get a distraction-free reading experience — similar to Safari's Reader Mode on iOS.

Requirements

1. Reading Mode toggle

• Add a "Reading Mode" button on the story page (both genesis and chapter pages)
• When activated, the UI transitions to a full-screen, immersive reading view
• Button placement: near the story content area, clearly visible but not intrusive

2. Reading Mode UI

When active, reading mode should display:

• Full-screen content area — story text fills the viewport
• Clean, distraction-free layout — hide sidebar, trading widgets, comments, action bars, header nav
• Beautiful typography — keep the Lora serif / ruled-paper aesthetic but optimize for comfortable long reading
• Comfortable reading width — max-width around 680-720px, centered
• Subtle background — cream/paper-like, easy on the eyes

3. Navigation within Reading Mode

Bottom navigation bar (fixed, minimal):

[← Prev]    [Table of Contents]    [Next →]

• ← Prev: Go to previous chapter (disabled/hidden on genesis)
• Table of Contents: Show a slide-out or overlay panel listing all chapters — clicking one navigates to it (stays in reading mode)
• Next →: Go to next chapter (disabled/hidden on last chapter)
• Chapter title and progress indicator (e.g., "Chapter 3 of 12") shown subtly

4. Exit Reading Mode

• X button or Esc key to exit back to normal story page
• Smooth transition (not jarring)
• Preserve scroll position when toggling

5. Responsive behavior

• On mobile, reading mode should feel natural — full width with comfortable margins
• Navigation bar should be thumb-friendly at the bottom
• Consider swipe gestures for prev/next (nice-to-have, not required)

6. Technical approach

• Use a full-screen overlay or route-level layout switch (not a new route)
• Store reading mode preference in localStorage so returning readers auto-enter reading mode (optional, discuss with reviewers)
• The ToC overlay should use existing plots data — no additional API calls
• Must work with current content rendering (whitespace-pre-wrap, ruled-paper styling)

Reference

Inspired by Safari Reader Mode on iOS:

• Clean white/cream background
• Centered content column
• Minimal chrome
• Simple prev/next navigation

Files to modify

• src/app/story/[storylineId]/page.tsx — add toggle, reading mode overlay for genesis
• src/app/story/[storylineId]/[plotIndex]/page.tsx — add toggle, reading mode overlay for chapters
• Possibly create src/components/ReadingMode.tsx shared component
• src/app/globals.css — reading mode typography styles if needed

Branch

task/569-reading-mode

Acceptance criteria

• "Reading Mode" button visible on story pages
• Full-screen overlay with story content only
• [Prev] [Table of Contents] [Next] navigation at bottom
• ToC shows all chapters, clicking navigates within reading mode
• Esc or X button exits reading mode
• Works on mobile (responsive, thumb-friendly nav)
• No additional API calls — uses existing plot data
• Smooth transitions in/out of reading mode