simplify game mechanics and consolidate to single AI model

- Remove two-passage-per-round system; one passage per round with immediate level advancement on pass
- Consolidate from dual-model to single Gemma-3-27b model for all operations (word selection, hints, contextualization)
- Remove round number from progress display; show only "Level X • Y blank(s)"
- Integrate leaderboard system with milestone notifications
- Update welcome overlay with concise gameplay description
- Rewrite README with conceptual framework exploring convergence of educational assessment and masked language modeling
- Refine contextualization prompts for clearer, more direct AI responses

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

README.md

@@ -11,33 +11,69 @@ thumbnail: >-
 
 # Cloze Reader
 
-An interactive cloze reading practice application with AI-powered assistance. Practice reading comprehension by filling in blanks in randomly excerpted historical and literary passages.
+## When Assessment Becomes Training Data, and Training Data Becomes Assessment
 
-## Features
+In 1953, Wilson Taylor proposed the "cloze procedure" as a measurement tool for reading comprehension and text difficulty. The method was elegantly simple: delete every nth word from a passage, ask readers to fill in the blanks, and score their accuracy. Taylor argued that successful completion demonstrated not mere vocabulary knowledge but genuine contextual understanding—the ability to infer meaning from surrounding linguistic patterns. By the 1960s, cloze testing had become standard in educational assessment, literacy research, and language teaching. Its appeal lay in its objectivity: unlike essay grading, cloze scores could be automated, quantified, compared across populations.
 
-- **Progressive Level System**: Start with 1 blank, advance to 2-3 blanks as you improve
-- **Smart Hints**: Get word length, first letter, and contextual clues
-- **AI Chat Help**: Click 💬 for intelligent hints about any blank
-- **Historical and Literary Passages**: Randomly excerpted texts from Project Gutenberg's collection
-- **Level-Appropriate Challenges**: Hints adapt based on your current level
+Sixty-five years later, Google researchers published "BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding." BERT's innovation was masked language modeling: randomly mask 15% of tokens in a text, train the model to predict the missing words. The researchers didn't cite Taylor. They didn't frame this as a pedagogical technique. Yet they had independently reinvented the cloze procedure as a machine learning objective. BERT learned language by solving millions of fill-in-the-blank exercises, training on the same task that had measured human comprehension since the Eisenhower administration.
 
-## How to Use
+This convergence wasn't coincidental. Both cloze testing and masked language modeling operate on the same premise: understanding language means predicting from context. If you can accurately fill in blanks, you've demonstrated comprehension—whether you're a student in 1960s Kansas or a transformer model in 2018. The methodology traveled from educational psychology to computational linguistics because it captured something fundamental about how meaning works: language is redundant, predictable, inferable from surrounding structure.
 
-1. Read the passage and literary context
-2. Fill in the blank(s) with appropriate words
-3. Use hints or chat help if needed
-4. Submit to see your results and advance levels
-5. Continue practicing with new passages
+Both approaches also share the same constraints. Educational researchers identified "clozability"—the phenomenon that some words are easier to predict than others due to context salience, limited synonyms, or statistical frequency. Machine learning researchers independently discovered the same issue: certain tokens are trivially predictable from context, while others require deeper reasoning. Zhang & Hashimoto (2021) showed that masked language models learn statistical and syntactic dependencies—exactly what cloze tests aim to measure in humans. The parallel is not superficial.
 
-## Level System
+But now the loop has closed in an unexpected way. BERT and its descendants—including Google's Gemma models—were trained on masked prediction tasks extracted from web text, books, Wikipedia. These models learned to predict missing words from billions of cloze-like exercises. Now, with Cloze Reader, those same models generate cloze tests for humans. The AI that learned language by filling in blanks now decides which blanks you should fill in. The training methodology has become the assessment tool, and the assessment tool has become training data.
 
-- **Levels 1-2**: 1 blank, hints show first and last letter
-- **Levels 3-4**: 2 blanks, hints show first letter only  
-- **Level 5+**: 3 blanks, first letter hints
+## What This Game Explores
+
+Cloze Reader uses open-weight Gemma-3 models to transform Project Gutenberg literature into dynamically generated cloze exercises. The 12B parameter model scans passages and selects vocabulary to remove. The 27B model generates contextual hints and provides conversational guidance. Every passage is fresh, every blank algorithmically chosen, every hint synthesized in real time.
+
+This isn't just automated test generation. It's an investigation into what happens when the twin histories of educational assessment and machine learning collapse into each other. Consider:
+
+**Standardization vs. Serendipity:** Educational cloze tests sought standardization—predictable difficulty, comparable scores, systematic progression. Machine learning cloze tasks sought diversity—randomized masking, varied contexts, statistical coverage. Using Gemma models on Project Gutenberg's 70,000-book corpus introduces radical serendipity: you might encounter Victorian Gothic prose, 1920s adventure serials, obscure 19th-century essays, forgotten feminist manifestos. The algorithm selects passages and words through statistical patterns trained on internet-scale text, not curriculum design. What does assessment mean when no human predetermined what counts as "appropriate difficulty"?
+
+**Inference vs. Memorization:** Traditional cloze tests measured whether students could infer from context rather than recall from memory. Educational researchers have long critiqued cloze procedures for measuring primarily local, sentence-level inference (surface coherence) rather than global text structure or pragmatic reasoning. Machine learning critics make parallel arguments: masked language models exploit spurious statistical regularities rather than genuine semantic understanding. When a model trained on surface patterns generates tests, and humans solve those tests using similar heuristics, where is comprehension actually happening? The distinction between understanding and statistical correlation becomes harder to maintain on both sides.
+
+**Automation and Authority:** Educational assessment historically required human expertise—teachers selecting texts, choosing appropriate blanks, evaluating answers. Automated testing promised efficiency but was criticized for reducing learning to quantifiable metrics. Now the automation is complete: an algorithmic system with no pedagogical training, no curriculum knowledge, no understanding of individual learners generates and evaluates exercises. It runs on open-weight models anyone can download, modify, or interrogate. What happens to authority over what constitutes "correct" reading comprehension when assessment moves from institutional gatekeeping to open algorithmic systems?
+
+**The Feedback Loop:** Most critically, this is a recursive system. Gemma models were trained partly on digitized books—including many from Project Gutenberg. The texts they learned from become the texts they generate exercises from. The model learned language patterns from Victorian literature, then uses those patterns to test human understanding of Victorian literature. Meanwhile, interactions with this game could theoretically become training data for future models. Assessment data becomes training data becomes assessment tools becomes training data. At what point does the distinction between learning and evaluation dissolve entirely?
+
+**The Exact-Word Problem:** Educational cloze testing has long debated whether to accept only exact matches or score semantic/grammatical equivalents (synonyms, morphological variants). This game enforces exact-word matching with some suffix normalization, mirroring how masked language models are trained on exact token prediction. Both approaches may penalize valid alternatives. When you type "sad" but the answer was "melancholy," have you failed to comprehend the passage—or simply chosen a different word from the same semantic field? This scoring problem exists identically in human assessment and algorithmic evaluation.
+
+## The Research Context
+
+Recent scholarship explicitly bridges cloze assessment and masked language modeling:
+
+- **Matsumori et al. (2023)** built CLOZER, a system using masked language models to generate open cloze questions for L2 English learners, demonstrating practical pedagogical applications
+- **Ondov et al. (2024, NAACL)** argue: "The cloze training objective of Masked Language Models makes them a natural choice for generating plausible distractors for human cloze questions"
+- **Zhang & Hashimoto (2021)** analyzed the inductive biases of masked tokens, showing that models learn statistical and syntactic dependencies through the same mechanisms cloze tests measure in humans
+
+This project sits at the intersection of these research trajectories—using the tools that now generate assessments to explore what happens when the boundary between human learning and machine training dissolves.
+
+## A Game, Not a Conclusion
+
+Cloze Reader doesn't resolve these tensions. It stages them. Through vintage aesthetics and classic texts, it creates a space where the convergence of educational assessment and machine learning becomes palpable. You're playing a literacy game designed by an algorithm that learned literacy by playing the same game billions of times. Every passage is a historical text processed by a model trained on historical texts. Every hint comes from a system that doesn't "understand" in any human sense but can nonetheless guide you toward understanding.
+
+The experience raises more questions than it answers. Is this pedagogy or pattern replication? Assessment or performance? Human learning or collaborative prediction with a statistical engine? These aren't rhetorical questions—they're open empirical questions about what education looks like when the tools we use to measure learning are built from the same processes we're trying to measure.
+
+## How It Works
+
+**Dual-Model Architecture:** The system uses two Gemma-3 models with distinct roles. The 12B parameter model analyzes passages and selects words to mask based on patterns learned during its training. The 27B model generates contextual hints and powers the chat interface. This separation mirrors the distinction between assessment design and pedagogical guidance—though both are algorithmic.
+
+**Progressive Levels:** The game implements a level system (1-5 with 1 blank, 6-10 with 2 blanks, 11+ with 3 blanks) that scaffolds difficulty through word length constraints, historical period selection, and hint disclosure. Early levels use 1900s texts and show first+last letters; advanced levels draw from any era and provide only first letters. Each round presents two passages from different books, requiring consistent performance across rounds before advancing.
+
+**Serendipitous Selection:** Passages stream directly from Hugging Face's Project Gutenberg dataset. The model selects words based on its training rather than curricular logic—sometimes choosing obvious vocabulary, sometimes obscure terms, sometimes generating exercises that are trivially easy or frustratingly hard. This unpredictability is a feature: it reveals how algorithmic assessment differs from human-designed pedagogy.
+
+**Chat as Scaffold:** Click the 💬 icon beside any blank to engage the 27B model in conversation. It attempts to guide you through Socratic questioning, semantic clues, and contextual hints—replicating what a tutor might do, constrained by what a language model trained on text prediction can actually accomplish.
+
+The system filters out dictionaries, technical documentation, and poetry—ensuring narrative prose where blanks are theoretically inferable from context, even if the model's choices sometimes suggest otherwise.
 
 ## Technology
 
-Built with vanilla JavaScript, powered by AI for intelligent word selection and contextual assistance. Supports both OpenRouter API and local LLM integration.
+**Vanilla JavaScript, No Build Step:** The application runs entirely in the browser using ES6 modules—no webpack, no bundler, no compilation. This architectural choice mirrors the project's conceptual interests: keeping the machinery visible and modifiable rather than obscured behind layers of tooling. A minimal FastAPI backend serves static files and injects API keys; everything else happens client-side.
+
+**Open-Weight Models:** Uses Google's Gemma-3 models (12B and 27B parameters) via OpenRouter, or alternatively connects to local LLM servers (LM Studio, etc.) on port 1234. The choice of open-weight models is deliberate: these systems can be downloaded, inspected, run locally, modified. When assessment becomes algorithmic, transparency about the algorithm matters. You can examine exactly which model is generating your exercises, run the same models yourself, experiment with alternatives.
+
+**Streaming from Public Archives:** Book data streams directly from Hugging Face's mirror of Project Gutenberg's corpus—public domain texts, open dataset infrastructure, no proprietary content libraries. The entire pipeline from literature to exercises relies on openly accessible resources, making the system reproducible and auditable.
 
 ## Running Locally with Docker
 

index.html

@@ -12,11 +12,21 @@
 <body class="min-h-screen">
     <div id="app" class="container mx-auto px-4 py-8 max-w-4xl">
         <header class="text-center mb-8">
-            <div class="flex items-center justify-center gap-3 mb-2">
-                <img src="./icon.png" alt="Cloze Reader" class="w-12 h-12">
-                <h1 class="text-4xl font-bold typewriter-text">Cloze Reader</h1>
+            <div class="flex items-start justify-between mb-4 gap-4">
+                <div class="flex-1 min-w-0"></div>
+                <div class="flex flex-col items-center gap-3">
+                    <div class="flex items-center gap-3">
+                        <img src="./icon.png" alt="Cloze Reader" class="w-12 h-12">
+                        <h1 class="text-4xl font-bold typewriter-text">Cloze Reader</h1>
+                    </div>
+                    <p class="typewriter-subtitle">Fill in the blanks to practice reading comprehension</p>
+                </div>
+                <div class="flex-1 min-w-0 flex justify-end items-end">
+                    <button id="leaderboard-btn" class="typewriter-button-small" title="View leaderboard">
+                        Leaderboard
+                    </button>
+                </div>
             </div>
-            <p class="typewriter-subtitle">Fill in the blanks to practice reading comprehension</p>
         </header>
         
         <main id="game-container" class="space-y-6">

src/aiService.js

@@ -5,9 +5,9 @@ class OpenRouterService {
     this.apiUrl = this.isLocalMode ? 'http://localhost:1234/v1/chat/completions' : 'https://openrouter.ai/api/v1/chat/completions';
     this.apiKey = this.getApiKey();
     
-    // Dual model configuration: Gemma-3-27b for hints/query-answering, Gemma-3-12b for everything else
+    // Single model configuration: Gemma-3-27b for all operations
     this.hintModel = this.isLocalMode ? 'gemma-3-12b' : 'google/gemma-3-27b-it';
-    this.primaryModel = this.isLocalMode ? 'gemma-3-12b' : 'google/gemma-3-12b-it';
+    this.primaryModel = this.isLocalMode ? 'gemma-3-12b' : 'google/gemma-3-27b-it';
     this.model = this.primaryModel; // Default model for backward compatibility
     
     console.log('AI Service initialized:', {
@@ -700,20 +700,20 @@ Return JSON: {"passage1": {"words": [${blanksPerPassage} words], "context": "one
     }
   }
 
-  async generateContextualization(title, author) {
+  async generateContextualization(title, author, passage) {
     console.log('generateContextualization called for:', title, 'by', author);
-    
+
     // Check for API key at runtime
     const currentKey = this.getApiKey();
     if (currentKey && !this.apiKey) {
       this.apiKey = currentKey;
     }
-    
+
     console.log('API key available for contextualization:', !!this.apiKey);
-    
+
     if (!this.apiKey) {
       console.log('No API key, returning fallback contextualization');
-      return `📜 Practice with literature from ${author}'s "${title}"`;
+      return `A passage from ${author}'s "${title}"`;
     }
 
     try {
@@ -727,16 +727,16 @@ Return JSON: {"passage1": {"words": [${blanksPerPassage} words], "context": "one
             'X-Title': 'Cloze Reader'
           },
           body: JSON.stringify({
-            model: this.primaryModel,  // Use Gemma-3-12b for contextualization
+            model: this.primaryModel,  // Use Gemma-3-27b for contextualization
             messages: [{
               role: 'system',
-              content: 'You are a literary expert. Provide ONE interesting fact about this book or its author. Focus on: publication year, genre, historical context, author biography, literary significance, or themes. Do NOT quote or paraphrase passages from the book. Keep it under 20 words.'
+              content: 'Provide a single contextual insight about the passage: historical context, literary technique, thematic observation, or relevant fact. Be specific and direct. Maximum 25 words. Do not use dashes or em-dashes. Output ONLY the insight itself with no preamble, acknowledgments, or meta-commentary.'
             }, {
               role: 'user',
-              content: `Book: "${title}" by ${author}. Give me a brief fact about this work or author, not a quote from the text.`
+              content: `From "${title}" by ${author}:\n\n${passage}`
             }],
             max_tokens: 150,
-            temperature: 0.5,
+            temperature: 0.7,
             response_format: { type: "text" }
           })
         });
@@ -783,11 +783,11 @@ Return JSON: {"passage1": {"words": [${blanksPerPassage} words], "context": "one
         }
         
         content = content.trim();
-        
+
         // Clean up AI response artifacts
         content = content
           .replace(/^\s*["']|["']\s*$/g, '')  // Remove leading/trailing quotes
-          .replace(/^\s*[:;]+\s*/, '')        // Remove leading colons and semicolons
+          .replace(/^\s*[:;.!?]+\s*/, '')     // Remove leading punctuation
           .replace(/\*+/g, '')                // Remove asterisks (markdown bold/italic)
           .replace(/_+/g, '')                 // Remove underscores (markdown)
           .replace(/#+\s*/g, '')              // Remove hash symbols (markdown headers)
@@ -799,7 +799,7 @@ Return JSON: {"passage1": {"words": [${blanksPerPassage} words], "context": "one
       });
     } catch (error) {
       console.error('Error getting contextualization:', error);
-      return `📜 Practice with literature from ${author}'s "${title}"`;
+      return `A passage from ${author}'s "${title}"`;
     }
   }
 

src/app.js

@@ -2,12 +2,14 @@
 import ClozeGame from './clozeGameEngine.js';
 import ChatUI from './chatInterface.js';
 import WelcomeOverlay from './welcomeOverlay.js';
+import { LeaderboardUI } from './leaderboardUI.js';
 
 class App {
   constructor() {
     this.game = new ClozeGame();
     this.chatUI = new ChatUI(this.game);
     this.welcomeOverlay = new WelcomeOverlay();
+    this.leaderboardUI = new LeaderboardUI(this.game.leaderboardService);
     this.elements = {
       loading: document.getElementById('loading'),
       gameArea: document.getElementById('game-area'),
@@ -21,9 +23,10 @@ class App {
       submitBtn: document.getElementById('submit-btn'),
       nextBtn: document.getElementById('next-btn'),
       hintBtn: document.getElementById('hint-btn'),
-      result: document.getElementById('result')
+      result: document.getElementById('result'),
+      leaderboardBtn: document.getElementById('leaderboard-btn')
     };
-    
+
     this.currentResults = null;
     this.setupEventListeners();
   }
@@ -44,7 +47,14 @@ class App {
     this.elements.submitBtn.addEventListener('click', () => this.handleSubmit());
     this.elements.nextBtn.addEventListener('click', () => this.handleNext());
     this.elements.hintBtn.addEventListener('click', () => this.toggleHints());
-    
+
+    // Leaderboard button
+    if (this.elements.leaderboardBtn) {
+      this.elements.leaderboardBtn.addEventListener('click', () => {
+        this.leaderboardUI.show();
+      });
+    }
+
     // Allow Enter key to submit when focused on an input
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Enter' && e.target.classList.contains('cloze-input')) {
@@ -72,9 +82,8 @@ class App {
 
     // Show level information
     const blanksCount = roundData.blanks.length;
-    const passageNumber = this.game.currentPassageIndex + 1;
-    const levelInfo = `Level ${this.game.currentLevel} • Passage ${passageNumber}/2 • ${blanksCount} blank${blanksCount > 1 ? 's' : ''}`;
-    
+    const levelInfo = `Level ${this.game.currentLevel} • ${blanksCount} blank${blanksCount > 1 ? 's' : ''}`;
+
     this.elements.roundInfo.innerHTML = levelInfo;
 
     // Show contextualization from AI agent
@@ -157,13 +166,19 @@ class App {
 
   displayResults(results) {
     let message = `Score: ${results.correct}/${results.total}`;
-    
+
     if (results.passed) {
       // Check if level was just advanced
       if (results.justAdvancedLevel) {
         message += ` ✓ Level ${results.currentLevel} unlocked!`;
-      } else if (results.passagesPassedAtCurrentLevel === 1) {
-        message += ` ✓ Passed (1 more passage needed for next level)`;
+
+        // Check for milestone notification (every 5 levels)
+        if (results.currentLevel % 5 === 0) {
+          this.leaderboardUI.showMilestoneNotification(results.currentLevel);
+        }
+
+        // Check for high score
+        this.checkForHighScore();
       } else {
         message += ` ✓ Passed`;
       }
@@ -172,12 +187,12 @@ class App {
       message += ` - Try again (need ${results.requiredCorrect}/${results.total})`;
       this.elements.result.className = 'mt-4 text-center font-semibold text-red-600';
     }
-    
+
     this.elements.result.textContent = message;
-    
+
     // Always reveal answers at the end of each round
     this.revealAnswersInPlace(results.results);
-    
+
     // Show next button and hide submit button
     this.elements.submitBtn.style.display = 'none';
     this.elements.nextBtn.classList.remove('hidden');
@@ -205,35 +220,28 @@ class App {
     try {
       // Show loading immediately with specific message
       this.showLoading(true, 'Loading passages...');
-      
-      // Clear chat history when starting new passage/round
+
+      // Clear chat history when starting new round
       this.chatUI.clearChatHistory();
-      
+
       // Always show loading for at least 1 second for smooth UX
       const startTime = Date.now();
-      
-      // Check if we should load next passage or next round
-      let roundData;
-      if (this.game.currentPassageIndex === 0) {
-        // Load second passage in current round
-        roundData = await this.game.nextPassage();
-      } else {
-        // Load next round (two new passages)
-        roundData = await this.game.nextRound();
-      }
-      
+
+      // Load next round
+      const roundData = await this.game.nextRound();
+
       // Ensure loading is shown for at least half a second
       const elapsedTime = Date.now() - startTime;
       if (elapsedTime < 500) {
         await new Promise(resolve => setTimeout(resolve, 500 - elapsedTime));
       }
-      
+
       this.displayRound(roundData);
       this.resetUI();
       this.showLoading(false);
     } catch (error) {
-      console.error('Error loading next passage:', error);
-      this.showError('Could not load next passage. Please try again.');
+      console.error('Error loading next round:', error);
+      this.showError('Could not load next round. Please try again.');
     }
   }
 
@@ -329,6 +337,33 @@ class App {
     this.elements.loading.classList.remove('hidden');
     this.elements.gameArea.classList.add('hidden');
   }
+
+  checkForHighScore() {
+    // Check if current score qualifies for leaderboard
+    if (this.game.checkForHighScore()) {
+      const rank = this.game.getHighScoreRank();
+      const stats = this.game.leaderboardService.getStats();
+      const profile = this.game.leaderboardService.getPlayerProfile();
+
+      // If player hasn't entered initials yet, show initials entry
+      if (!profile.hasEnteredInitials) {
+        this.leaderboardUI.showInitialsEntry(
+          stats.highestLevel,
+          stats.roundAtHighestLevel,
+          rank,
+          (initials) => {
+            // Save to leaderboard
+            const finalRank = this.game.addToLeaderboard(initials);
+            console.log(`Added to leaderboard at rank ${finalRank}`);
+          }
+        );
+      } else {
+        // Update existing entry
+        const finalRank = this.game.addToLeaderboard(profile.initials);
+        console.log(`Updated leaderboard entry at rank ${finalRank}`);
+      }
+    }
+  }
 }
 
 // Initialize the app when DOM is loaded

src/clozeGameEngine.js

@@ -2,6 +2,7 @@
 import bookDataService from './bookDataService.js';
 import { AIService } from './aiService.js';
 import ChatService from './conversationManager.js';
+import { LeaderboardService } from './leaderboardService.js';
 
 const aiService = new AIService();
 
@@ -19,16 +20,10 @@ class ClozeGame {
     this.hints = [];
     this.chatService = new ChatService(aiService);
     this.lastResults = null; // Store results for answer revelation
-    this.roundResults = []; // Store results for both passages in current round
-    
-    // Two-passage system properties
-    this.currentBooks = []; // Array of two books per round
-    this.passages = []; // Array of two passages per round
-    this.currentPassageIndex = 0; // 0 for first passage, 1 for second
-    
-    // Level progression tracking
-    this.passagesPassedAtCurrentLevel = 0; // Track successful passages at current level (not rounds)
-    console.log('🎮 GAME ENGINE INITIALIZED - Starting at Level 1, Passages passed: 0');
+    this.leaderboardService = new LeaderboardService();
+    this.passagesPassedAtCurrentLevel = 0; // Track progress toward level advancement
+
+    console.log('🎮 GAME ENGINE INITIALIZED - Starting at Level 1, Round 1');
   }
 
   // --- User-visible framing helpers ---
@@ -42,16 +37,13 @@ class ClozeGame {
     return {
       round: this.currentRound,
       level: this.currentLevel,
-      passageNumber: this.currentPassageIndex + 1,
-      totalPassages: 2,
-      blanksPerPassage: this.getBlanksPerPassage(),
-      passagesPassedAtCurrentLevel: this.passagesPassedAtCurrentLevel
+      blanksPerPassage: this.getBlanksPerPassage()
     };
   }
 
   formatProgressText(snapshot = this.getProgressSnapshot()) {
     const blanksLabel = `${snapshot.blanksPerPassage} blank${snapshot.blanksPerPassage > 1 ? 's' : ''}`;
-    return `Level ${snapshot.level} • Passage ${snapshot.passageNumber}/${snapshot.totalPassages} • ${blanksLabel}`;
+    return `Level ${snapshot.level} • ${blanksLabel}`;
   }
 
   formatAdvancementText({ passed, correctCount, requiredCorrect, justAdvancedLevel }) {
@@ -59,11 +51,7 @@ class ClozeGame {
       if (justAdvancedLevel) {
         return `✓ Passed • Level up! Welcome to Level ${this.currentLevel}`;
       }
-      const needed = Math.max(0, 2 - this.passagesPassedAtCurrentLevel);
-      if (needed === 0) {
-        return `✓ Passed`;
-      }
-      return `✓ Passed • ${needed} more passage${needed > 1 ? 's' : ''} to reach Level ${this.currentLevel + 1}`;
+      return `✓ Passed • Advancing to next level!`;
     }
     return `Try again • Need ${requiredCorrect}/${this.blanks.length} correct (you got ${correctCount})`;
   }
@@ -80,54 +68,27 @@ class ClozeGame {
 
   async startNewRound() {
     try {
-      console.log(`🎲 STARTING NEW ROUND - Round: ${this.currentRound}, Level: ${this.currentLevel}, Progress: ${this.passagesPassedAtCurrentLevel}/2`);
-      // Get two books for this round based on current level criteria
-      const book1 = await bookDataService.getBookByLevelCriteria(this.currentLevel);
-      const book2 = await bookDataService.getBookByLevelCriteria(this.currentLevel);
-      
-      // Extract passages from both books
-      const passage1 = this.extractCoherentPassage(book1.text);
-      const passage2 = this.extractCoherentPassage(book2.text);
-      
-      // Store both books and passages
-      this.currentBooks = [book1, book2];
-      this.passages = [passage1.trim(), passage2.trim()];
-      this.currentPassageIndex = 0;
-      
-      // Calculate blanks per passage based on level
-      // Levels 1-5: 1 blank, 6-10: 2 blanks, 11+: 3 blanks
-      const blanksPerPassage = this.getBlanksPerPassage();
-      
-      // Process both passages in a single API call
+      console.log(`🎲 STARTING NEW ROUND - Round: ${this.currentRound}, Level: ${this.currentLevel}`);
+      // Get one book for this round based on current level criteria
+      const book = await bookDataService.getBookByLevelCriteria(this.currentLevel);
+
+      // Extract passage from book
+      const passage = this.extractCoherentPassage(book.text);
+
+      // Store book and passage
+      this.currentBook = book;
+      this.originalText = passage.trim();
+
+      // Create cloze text using AI
       try {
-        const batchResult = await aiService.processBothPassages(
-          passage1, book1, passage2, book2, blanksPerPassage, this.currentLevel
-        );
-        
-        // Store the preprocessed data for both passages
-        this.preprocessedData = batchResult;
-        
-        // Debug: Log what the AI returned
-        console.log(`Level ${this.currentLevel}: Requested ${blanksPerPassage} blanks per passage`);
-        console.log(`Passage 1 received ${batchResult.passage1.words.length} words:`, batchResult.passage1.words);
-        console.log(`Passage 2 received ${batchResult.passage2.words.length} words:`, batchResult.passage2.words);
-        
-        // Set up first passage using preprocessed data
-        this.currentBook = book1;
-        this.originalText = this.passages[0];
-        await this.createClozeTextFromPreprocessed(0);
-        await this.generateContextualization();
-        
-      } catch (error) {
-        console.warn('Batch processing failed, falling back to sequential:', error);
-        // Fallback to sequential processing
-        this.currentBook = book1;
-        this.originalText = this.passages[0];
         await this.createClozeText();
         await new Promise(resolve => setTimeout(resolve, 1000));
         await this.generateContextualization();
+      } catch (error) {
+        console.warn('AI processing failed:', error);
+        throw error;
       }
-      
+
       const snapshot = this.getProgressSnapshot();
       return {
         title: this.currentBook.title,
@@ -136,8 +97,6 @@ class ClozeGame {
         blanks: this.blanks,
         contextualization: this.contextualization,
         hints: this.hints,
-        passageNumber: 1,
-        totalPassages: 2,
         progressText: this.formatProgressText(snapshot)
       };
     } catch (error) {
@@ -351,159 +310,6 @@ class ClozeGame {
     return passage.trim();
   }
 
-  async createClozeTextFromPreprocessed(passageIndex) {
-    // Use preprocessed word selection from batch API call
-    const preprocessed = passageIndex === 0 ? this.preprocessedData.passage1 : this.preprocessedData.passage2;
-    let selectedWords = preprocessed.words;
-    
-    // Calculate expected number of blanks based on level
-    let expectedBlanks;
-    if (this.currentLevel <= 5) {
-      expectedBlanks = 1;
-    } else if (this.currentLevel <= 10) {
-      expectedBlanks = 2;
-    } else {
-      expectedBlanks = 3;
-    }
-    
-    // Only use fallback if AI provided no words at all
-    if (selectedWords.length === 0) {
-      console.warn(`AI provided no words, using manual fallback selection`);
-      const words = this.originalText.split(/\s+/);
-      const fallbackWords = this.selectWordsManually(words, expectedBlanks);
-      selectedWords = fallbackWords;
-      console.log(`Fallback words:`, selectedWords);
-    }
-    
-    // Limit selected words to expected number
-    if (selectedWords.length > expectedBlanks) {
-      console.log(`AI returned ${selectedWords.length} words but expected ${expectedBlanks}, limiting to ${expectedBlanks}`);
-      selectedWords = selectedWords.slice(0, expectedBlanks);
-    }
-    
-    // Split passage into words
-    const words = this.originalText.split(/(\s+)/);
-    const wordsOnly = words.filter(w => w.trim() !== '');
-    
-    // Find indices of selected words using flexible matching
-    const selectedIndices = [];
-    selectedWords.forEach((word, wordIdx) => {
-      console.log(`Searching for word ${wordIdx + 1}/${selectedWords.length}: "${word}"`);
-      
-      // First try exact match (cleaned)
-      let index = wordsOnly.findIndex((w, idx) => {
-        const cleanW = w.replace(/[^\w]/g, '').toLowerCase();
-        const cleanWord = word.replace(/[^\w]/g, '').toLowerCase();
-        return cleanW === cleanWord && !selectedIndices.includes(idx);
-      });
-      
-      if (index !== -1) {
-        console.log(`✓ Found exact match: "${wordsOnly[index]}" at position ${index}`);
-      } else {
-        // Fallback to includes match if exact fails
-        index = wordsOnly.findIndex((w, idx) => 
-          w.toLowerCase().includes(word.toLowerCase()) && !selectedIndices.includes(idx)
-        );
-        
-        if (index !== -1) {
-          console.log(`✓ Found includes match: "${wordsOnly[index]}" at position ${index}`);
-        } else {
-          // Enhanced fallback: try base word matching (remove common suffixes)
-          const baseWord = word.replace(/[^\w]/g, '').toLowerCase().replace(/(ed|ing|s|es|er|est)$/, '');
-          if (baseWord.length > 2) {
-            index = wordsOnly.findIndex((w, idx) => {
-              const cleanW = w.replace(/[^\w]/g, '').toLowerCase();
-              const baseW = cleanW.replace(/(ed|ing|s|es|er|est)$/, '');
-              return baseW === baseWord && !selectedIndices.includes(idx);
-            });
-            
-            if (index !== -1) {
-              console.log(`✓ Found base word match: "${wordsOnly[index]}" at position ${index}`);
-            }
-          }
-        }
-      }
-      
-      if (index !== -1) {
-        selectedIndices.push(index);
-      } else {
-        console.warn(`✗ Could not find word "${word}" in passage`);
-      }
-    });
-    
-    // Ensure we have at least the expected number of blanks
-    if (selectedIndices.length < expectedBlanks) {
-      console.warn(`Only found ${selectedIndices.length} words, need ${expectedBlanks}. Using fallback selection.`);
-      const fallbackWords = this.selectWordsManually(wordsOnly, expectedBlanks - selectedIndices.length);
-      
-      // Add fallback word indices
-      fallbackWords.forEach(fallbackWord => {
-        const cleanFallback = fallbackWord.toLowerCase().replace(/[^\w]/g, '');
-        const index = wordsOnly.findIndex((w, idx) => {
-          const cleanW = w.replace(/[^\w]/g, '').toLowerCase();
-          return cleanW === cleanFallback && !selectedIndices.includes(idx);
-        });
-        if (index !== -1) {
-          selectedIndices.push(index);
-        }
-      });
-    }
-    
-    // Create blanks
-    this.blanks = [];
-    this.hints = [];
-    const clozeWords = [...wordsOnly];
-    
-    console.log(`Creating ${selectedIndices.length} blanks from ${selectedWords.length} selected words`);
-    
-    selectedIndices.forEach((wordIndex, blankIndex) => {
-      const originalWord = wordsOnly[wordIndex];
-      const cleanWord = originalWord.replace(/[^\w]/g, '');
-      
-      this.blanks.push({
-        index: blankIndex,
-        originalWord: cleanWord,
-        wordIndex: wordIndex
-      });
-      
-      // Initialize chat context for this word
-      const wordContext = {
-        originalWord: cleanWord,
-        sentence: this.originalText,
-        passage: this.originalText,
-        bookTitle: this.currentBook.title,
-        author: this.currentBook.author,
-        year: this.currentBook.year,
-        wordPosition: wordIndex,
-        difficulty: this.calculateWordDifficulty(cleanWord, wordIndex, wordsOnly)
-      };
-      
-      this.chatService.initializeWordContext(`blank_${blankIndex}`, wordContext);
-      
-      // Generate structural hint
-      const hint = this.currentLevel <= 2
-        ? `${cleanWord.length} letters, starts with "${cleanWord[0]}", ends with "${cleanWord[cleanWord.length - 1]}"`
-        : `${cleanWord.length} letters, starts with "${cleanWord[0]}"`;
-      this.hints.push({ index: blankIndex, hint });
-      
-      // Replace with placeholder
-      clozeWords[wordIndex] = `___BLANK_${blankIndex}___`;
-    });
-    
-    // Reconstruct text with original spacing
-    let reconstructed = '';
-    let wordIndex = 0;
-    words.forEach(part => {
-      if (part.trim() === '') {
-        reconstructed += part;
-      } else {
-        reconstructed += clozeWords[wordIndex++];
-      }
-    });
-    
-    this.clozeText = reconstructed;
-    this.userAnswers = new Array(this.blanks.length).fill('');
-  }
 
   async createClozeText() {
     const words = this.originalText.split(' ');
@@ -761,7 +567,8 @@ class ClozeGame {
     try {
       this.contextualization = await aiService.generateContextualization(
         this.currentBook.title,
-        this.currentBook.author
+        this.currentBook.author,
+        this.originalText
       );
       return this.contextualization;
     } catch (error) {
@@ -809,34 +616,30 @@ class ClozeGame {
 
     const scorePercentage = Math.round((correctCount / this.blanks.length) * 100);
     this.score = scorePercentage;
-    
+
     // Calculate pass requirements based on number of blanks
     const totalBlanks = this.blanks.length;
     const requiredCorrect = this.calculateRequiredCorrect(totalBlanks);
     const passed = correctCount >= requiredCorrect;
-    
-    // Track successful passages for level advancement
+
+    // Track if we're advancing level
+    const justAdvancedLevel = passed;
+
+    // Advance level on pass
     if (passed) {
-      this.passagesPassedAtCurrentLevel++;
-      console.log(`✅ PASSAGE PASSED - Level: ${this.currentLevel}, Passages passed at current level: ${this.passagesPassedAtCurrentLevel}/2`);
-      
-      // Advance level after 2 successful passages (not rounds)
-      if (this.passagesPassedAtCurrentLevel >= 2) {
-        const previousLevel = this.currentLevel;
-        this.currentLevel++;
-        this.passagesPassedAtCurrentLevel = 0; // Reset counter for new level
-        console.log(`🎉 LEVEL ADVANCEMENT: ${previousLevel} → ${this.currentLevel} (counter reset to 0)`);
-      } else {
-        console.log(`📊 Progress: Need ${2 - this.passagesPassedAtCurrentLevel} more passage(s) to advance from level ${this.currentLevel}`);
-      }
+      const previousLevel = this.currentLevel;
+      this.currentLevel++;
+      console.log(`✅ ROUND PASSED - Level advancement: ${previousLevel} → ${this.currentLevel}`);
     } else {
-      console.log(`❌ PASSAGE FAILED - Level: ${this.currentLevel}, Passages passed remains: ${this.passagesPassedAtCurrentLevel}/2`);
+      console.log(`❌ ROUND FAILED - Staying at Level: ${this.currentLevel}`);
     }
 
-    // Track if we just advanced levels
-    const justAdvancedLevel = passed && this.passagesPassedAtCurrentLevel === 0 && this.currentLevel > 1;
-
     const snapshot = this.getProgressSnapshot();
+
+    // Update passage tracking
+    const stats = this.leaderboardService.getStats();
+    const totalPassagesPassed = passed ? (stats.totalPassagesPassed + 1) : stats.totalPassagesPassed;
+
     const resultsData = {
       correct: correctCount,
       total: this.blanks.length,
@@ -847,21 +650,18 @@ class ClozeGame {
       shouldRevealAnswers: !passed,
       requiredCorrect: requiredCorrect,
       currentLevel: this.currentLevel,
-      passagesPassedAtCurrentLevel: this.passagesPassedAtCurrentLevel,
       justAdvancedLevel: justAdvancedLevel,
       round: snapshot.round,
-      passageNumber: snapshot.passageNumber,
-      totalPassages: snapshot.totalPassages,
+      passagesPassed: totalPassagesPassed,
       progressText: this.formatProgressText(snapshot),
-      feedbackText: this.formatAdvancementText({ passed, correctCount, requiredCorrect, justAdvancedLevel }),
-      nextActionText: snapshot.passageNumber === snapshot.totalPassages ? 'Next round' : 'Next passage'
+      feedbackText: this.formatAdvancementText({ passed, correctCount, requiredCorrect, justAdvancedLevel })
     };
 
+    // Update leaderboard stats
+    this.leaderboardService.updateStats(resultsData);
+
     // Store results for potential answer revelation
     this.lastResults = resultsData;
-    
-    // Store results for round-level tracking
-    this.roundResults[this.currentPassageIndex] = resultsData;
 
     return resultsData;
   }
@@ -887,68 +687,19 @@ class ClozeGame {
     }));
   }
 
-  async nextPassage() {
-    try {
-      // Move to the second passage in the current round
-      if (this.currentPassageIndex === 0 && this.passages && this.passages.length > 1) {
-        this.currentPassageIndex = 1;
-        console.log(`📖 MOVING TO PASSAGE 2/2 in Round ${this.currentRound} - Level: ${this.currentLevel}, Progress: ${this.passagesPassedAtCurrentLevel}/2`);
-        this.currentBook = this.currentBooks[1];
-        this.originalText = this.passages[1];
-        
-        // Clear chat conversations for new passage
-        this.chatService.clearConversations();
-        
-        // Clear last results (but keep roundResults for level advancement)
-        this.lastResults = null;
-        
-        // Use preprocessed data if available
-        if (this.preprocessedData && this.preprocessedData.passage2) {
-          await this.createClozeTextFromPreprocessed(1);
-          await this.generateContextualization();
-        } else {
-          // Fallback to sequential processing
-          await this.createClozeText();
-          await new Promise(resolve => setTimeout(resolve, 1000));
-          await this.generateContextualization();
-        }
-        
-        const snapshot = this.getProgressSnapshot();
-        return {
-          title: this.currentBook.title,
-          author: this.currentBook.author,
-          text: this.clozeText,
-          blanks: this.blanks,
-          contextualization: this.contextualization,
-          hints: this.hints,
-          passageNumber: 2,
-          totalPassages: 2,
-          progressText: this.formatProgressText(snapshot)
-        };
-      } else {
-        // If we're already on the second passage, move to next round
-        return this.nextRound();
-      }
-    } catch (error) {
-      console.error('Error loading next passage:', error);
-      throw error;
-    }
-  }
-
   nextRound() {
     // Always increment round counter
     this.currentRound++;
-    console.log(`🔄 NEW ROUND ${this.currentRound} - Level: ${this.currentLevel}, Passages passed at current level: ${this.passagesPassedAtCurrentLevel}/2`);
-    
-    // Level advancement is now handled in submitAnswers() based on individual passages
-    
+    console.log(`🔄 NEW ROUND ${this.currentRound} - Level: ${this.currentLevel}`);
+
+    // Level advancement is now handled in submitAnswers() based on pass/fail
+
     // Clear chat conversations for new round
     this.chatService.clearConversations();
-    
+
     // Clear results since we're moving to new round
     this.lastResults = null;
-    this.roundResults = [];
-    
+
     return this.startNewRound();
   }
 
@@ -1017,30 +768,63 @@ class ClozeGame {
   // Enhanced render method to include chat buttons
   renderClozeTextWithChat() {
     let html = this.clozeText;
-    
+
     this.blanks.forEach((blank, index) => {
       const chatButtonId = `chat-btn-${index}`;
       const inputHtml = `
         <span class="inline-flex items-center">
-          <input type="text" 
-            class="cloze-input" 
-            data-blank-index="${index}" 
+          <input type="text"
+            class="cloze-input"
+            data-blank-index="${index}"
             placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
             style="width: ${Math.max(50, blank.originalWord.length * 10)}px;">
-          <button id="${chatButtonId}" 
-            class="chat-button text-blue-500 hover:text-blue-700" 
+          <button id="${chatButtonId}"
+            class="chat-button text-blue-500 hover:text-blue-700"
             data-blank-index="${index}"
             title="Ask question about this word"
             style="font-size: 1.5rem; line-height: 1;">
             💬
           </button>
         </span>`;
-      
+
       html = html.replace(`___BLANK_${index}___`, inputHtml);
     });
 
     return html;
   }
+
+  // Leaderboard integration methods
+  checkForHighScore() {
+    const stats = this.leaderboardService.getStats();
+    return this.leaderboardService.qualifiesForLeaderboard(
+      stats.highestLevel,
+      stats.roundAtHighestLevel,
+      stats.totalPassagesPassed
+    );
+  }
+
+  getHighScoreRank() {
+    const stats = this.leaderboardService.getStats();
+    return this.leaderboardService.getRankForScore(
+      stats.highestLevel,
+      stats.roundAtHighestLevel,
+      stats.totalPassagesPassed
+    );
+  }
+
+  addToLeaderboard(initials) {
+    const stats = this.leaderboardService.getStats();
+    return this.leaderboardService.addEntry(
+      initials,
+      stats.highestLevel,
+      stats.roundAtHighestLevel,
+      stats.totalPassagesPassed
+    );
+  }
+
+  getLeaderboardStats() {
+    return this.leaderboardService.getPlayerStats();
+  }
 }
 
 export default ClozeGame;

src/leaderboardService.js

@@ -0,0 +1,362 @@
+/**
+ * Leaderboard Service
+ * Manages high scores, player stats, and localStorage persistence
+ * Following arcade conventions with 3-letter initials and top 10 tracking
+ */
+
+export class LeaderboardService {
+  constructor() {
+    this.storageKeys = {
+      leaderboard: 'cloze-reader-leaderboard',
+      player: 'cloze-reader-player',
+      stats: 'cloze-reader-stats'
+    };
+
+    this.maxEntries = 10;
+    this.initializeStorage();
+  }
+
+  /**
+   * Initialize localStorage with default values if needed
+   */
+  initializeStorage() {
+    if (!this.getLeaderboard()) {
+      this.saveLeaderboard([]);
+    }
+
+    if (!this.getPlayerProfile()) {
+      this.savePlayerProfile({
+        initials: null,
+        hasEnteredInitials: false,
+        gamesPlayed: 0,
+        lastPlayed: null
+      });
+    }
+
+    if (!this.getStats()) {
+      this.saveStats(this.createEmptyStats());
+    }
+  }
+
+  /**
+   * Create empty stats object
+   */
+  createEmptyStats() {
+    return {
+      highestLevel: 1,
+      roundAtHighestLevel: 1,
+      totalPassagesPassed: 0,
+      totalPassagesAttempted: 0,
+      longestStreak: 0,
+      currentStreak: 0,
+      perfectRounds: 0,
+      totalCorrectWords: 0,
+      uniqueWordsCorrect: new Set(),
+      gamesPlayed: 0,
+      lastPlayed: null
+    };
+  }
+
+  /**
+   * Get leaderboard from localStorage
+   */
+  getLeaderboard() {
+    try {
+      const data = localStorage.getItem(this.storageKeys.leaderboard);
+      return data ? JSON.parse(data) : null;
+    } catch (e) {
+      console.error('Error reading leaderboard:', e);
+      return [];
+    }
+  }
+
+  /**
+   * Save leaderboard to localStorage
+   */
+  saveLeaderboard(entries) {
+    try {
+      localStorage.setItem(this.storageKeys.leaderboard, JSON.stringify(entries));
+    } catch (e) {
+      console.error('Error saving leaderboard:', e);
+    }
+  }
+
+  /**
+   * Get player profile from localStorage
+   */
+  getPlayerProfile() {
+    try {
+      const data = localStorage.getItem(this.storageKeys.player);
+      return data ? JSON.parse(data) : null;
+    } catch (e) {
+      console.error('Error reading player profile:', e);
+      return null;
+    }
+  }
+
+  /**
+   * Save player profile to localStorage
+   */
+  savePlayerProfile(profile) {
+    try {
+      localStorage.setItem(this.storageKeys.player, JSON.stringify(profile));
+    } catch (e) {
+      console.error('Error saving player profile:', e);
+    }
+  }
+
+  /**
+   * Get stats from localStorage
+   */
+  getStats() {
+    try {
+      const data = localStorage.getItem(this.storageKeys.stats);
+      if (!data) return null;
+
+      const stats = JSON.parse(data);
+      // Convert uniqueWordsCorrect back to Set
+      if (stats.uniqueWordsCorrect && Array.isArray(stats.uniqueWordsCorrect)) {
+        stats.uniqueWordsCorrect = new Set(stats.uniqueWordsCorrect);
+      } else {
+        stats.uniqueWordsCorrect = new Set();
+      }
+      return stats;
+    } catch (e) {
+      console.error('Error reading stats:', e);
+      return null;
+    }
+  }
+
+  /**
+   * Save stats to localStorage
+   */
+  saveStats(stats) {
+    try {
+      // Convert Set to Array for JSON serialization
+      const statsToSave = {
+        ...stats,
+        uniqueWordsCorrect: Array.from(stats.uniqueWordsCorrect || [])
+      };
+      localStorage.setItem(this.storageKeys.stats, JSON.stringify(statsToSave));
+    } catch (e) {
+      console.error('Error saving stats:', e);
+    }
+  }
+
+  /**
+   * Validate and sanitize initials (3 letters, A-Z only)
+   */
+  validateInitials(initials) {
+    if (!initials || typeof initials !== 'string') {
+      return false;
+    }
+
+    const sanitized = initials.toUpperCase().replace(/[^A-Z]/g, '');
+    return sanitized.length === 3 ? sanitized : false;
+  }
+
+  /**
+   * Sort leaderboard entries
+   * Primary: Level (desc), Secondary: Round (desc), Tertiary: Passages passed (desc)
+   */
+  sortLeaderboard(entries) {
+    return entries.sort((a, b) => {
+      // Primary: Level (higher is better)
+      if (b.level !== a.level) {
+        return b.level - a.level;
+      }
+
+      // Secondary: Round at that level (higher is better)
+      if (b.round !== a.round) {
+        return b.round - a.round;
+      }
+
+      // Tertiary: Total passages passed (higher is better)
+      if (b.passagesPassed !== a.passagesPassed) {
+        return b.passagesPassed - a.passagesPassed;
+      }
+
+      // Quaternary: Date (newer is better)
+      return new Date(b.date) - new Date(a.date);
+    });
+  }
+
+  /**
+   * Check if a score qualifies for the leaderboard
+   */
+  qualifiesForLeaderboard(level, round, passagesPassed) {
+    const leaderboard = this.getLeaderboard();
+
+    // If leaderboard isn't full, always qualifies
+    if (leaderboard.length < this.maxEntries) {
+      return true;
+    }
+
+    // Check if better than lowest entry
+    const lowestEntry = leaderboard[leaderboard.length - 1];
+
+    if (level > lowestEntry.level) return true;
+    if (level === lowestEntry.level && round > lowestEntry.round) return true;
+    if (level === lowestEntry.level && round === lowestEntry.round && passagesPassed > lowestEntry.passagesPassed) return true;
+
+    return false;
+  }
+
+  /**
+   * Get the rank position for a score (1-10, or null if doesn't qualify)
+   */
+  getRankForScore(level, round, passagesPassed) {
+    if (!this.qualifiesForLeaderboard(level, round, passagesPassed)) {
+      return null;
+    }
+
+    const leaderboard = this.getLeaderboard();
+    const tempEntry = { level, round, passagesPassed, date: new Date().toISOString() };
+    const tempLeaderboard = [...leaderboard, tempEntry];
+    const sorted = this.sortLeaderboard(tempLeaderboard);
+
+    return sorted.findIndex(entry => entry === tempEntry) + 1;
+  }
+
+  /**
+   * Add a new entry to the leaderboard
+   */
+  addEntry(initials, level, round, passagesPassed) {
+    const validInitials = this.validateInitials(initials);
+    if (!validInitials) {
+      console.error('Invalid initials:', initials);
+      return false;
+    }
+
+    const leaderboard = this.getLeaderboard();
+    const newEntry = {
+      initials: validInitials,
+      level,
+      round,
+      passagesPassed,
+      date: new Date().toISOString()
+    };
+
+    leaderboard.push(newEntry);
+    const sorted = this.sortLeaderboard(leaderboard);
+
+    // Keep only top 10
+    const trimmed = sorted.slice(0, this.maxEntries);
+    this.saveLeaderboard(trimmed);
+
+    return sorted.findIndex(entry => entry === newEntry) + 1; // Return rank
+  }
+
+  /**
+   * Update session stats after a passage attempt
+   */
+  updateStats(data) {
+    const stats = this.getStats() || this.createEmptyStats();
+
+    stats.totalPassagesAttempted++;
+
+    if (data.passed) {
+      stats.totalPassagesPassed++;
+      stats.currentStreak++;
+      stats.longestStreak = Math.max(stats.longestStreak, stats.currentStreak);
+    } else {
+      stats.currentStreak = 0;
+    }
+
+    // Track highest level reached
+    if (data.currentLevel > stats.highestLevel) {
+      stats.highestLevel = data.currentLevel;
+      stats.roundAtHighestLevel = data.round;
+    } else if (data.currentLevel === stats.highestLevel) {
+      stats.roundAtHighestLevel = Math.max(stats.roundAtHighestLevel, data.round);
+    }
+
+    // Track correct words
+    if (data.results) {
+      data.results.forEach(result => {
+        if (result.isCorrect) {
+          stats.totalCorrectWords++;
+          const word = result.correctAnswer.toLowerCase();
+          stats.uniqueWordsCorrect.add(word);
+        }
+      });
+    }
+
+    // Track perfect rounds (if both passages in round were 100%)
+    if (data.percentage === 100 && data.passagesPassed % 2 === 0) {
+      stats.perfectRounds++;
+    }
+
+    stats.lastPlayed = new Date().toISOString();
+
+    this.saveStats(stats);
+    return stats;
+  }
+
+  /**
+   * Get formatted leaderboard for display
+   */
+  getFormattedLeaderboard() {
+    const leaderboard = this.getLeaderboard();
+    const player = this.getPlayerProfile();
+    const stats = this.getStats();
+
+    return {
+      entries: leaderboard.map((entry, index) => ({
+        rank: index + 1,
+        initials: entry.initials,
+        level: entry.level,
+        round: entry.round,
+        passagesPassed: entry.passagesPassed,
+        date: entry.date,
+        isPlayer: player && player.initials === entry.initials
+      })),
+      playerBest: stats ? {
+        level: stats.highestLevel,
+        round: stats.roundAtHighestLevel,
+        passagesPassed: stats.totalPassagesPassed
+      } : null,
+      playerInitials: player ? player.initials : null
+    };
+  }
+
+  /**
+   * Reset all leaderboard data (for testing or user request)
+   */
+  resetAll() {
+    this.saveLeaderboard([]);
+    this.savePlayerProfile({
+      initials: null,
+      hasEnteredInitials: false,
+      gamesPlayed: 0,
+      lastPlayed: null
+    });
+    this.saveStats(this.createEmptyStats());
+  }
+
+  /**
+   * Get player stats summary
+   */
+  getPlayerStats() {
+    const stats = this.getStats() || this.createEmptyStats();
+    const profile = this.getPlayerProfile();
+
+    return {
+      initials: profile?.initials || '---',
+      highestLevel: stats.highestLevel,
+      roundAtHighestLevel: stats.roundAtHighestLevel,
+      totalPassagesPassed: stats.totalPassagesPassed,
+      totalPassagesAttempted: stats.totalPassagesAttempted,
+      successRate: stats.totalPassagesAttempted > 0
+        ? Math.round((stats.totalPassagesPassed / stats.totalPassagesAttempted) * 100)
+        : 0,
+      longestStreak: stats.longestStreak,
+      currentStreak: stats.currentStreak,
+      perfectRounds: stats.perfectRounds,
+      totalCorrectWords: stats.totalCorrectWords,
+      uniqueWords: stats.uniqueWordsCorrect.size,
+      gamesPlayed: stats.gamesPlayed,
+      lastPlayed: stats.lastPlayed
+    };
+  }
+}

src/leaderboardUI.js

@@ -0,0 +1,433 @@
+/**
+ * Leaderboard UI
+ * Modal display and initials entry interface
+ * Following arcade conventions with vintage aesthetic
+ */
+
+export class LeaderboardUI {
+  constructor(leaderboardService) {
+    this.service = leaderboardService;
+    this.modal = null;
+    this.initialsModal = null;
+    this.currentSlot = 0;
+    this.initials = ['A', 'A', 'A'];
+    this.onInitialsSubmit = null;
+  }
+
+  /**
+   * Show the leaderboard modal
+   */
+  show() {
+    // Remove existing modal if any
+    this.hide();
+
+    const data = this.service.getFormattedLeaderboard();
+    const playerStats = this.service.getPlayerStats();
+
+    // Create modal HTML
+    this.modal = document.createElement('div');
+    this.modal.className = 'leaderboard-overlay';
+    this.modal.innerHTML = `
+      <div class="leaderboard-modal">
+        <div class="leaderboard-header">
+          <h2 class="leaderboard-title">🏆 HIGH SCORES 🏆</h2>
+          <button class="leaderboard-close" aria-label="Close leaderboard">×</button>
+        </div>
+
+        <div class="leaderboard-content">
+          <div class="leaderboard-list">
+            ${this.generateLeaderboardHTML(data.entries, data.playerInitials)}
+          </div>
+
+          ${playerStats.highestLevel > 1 ? `
+            <div class="leaderboard-player-stats">
+              <div class="player-best">
+                Your Best: <span class="highlight">Level ${playerStats.highestLevel} (Round ${playerStats.roundAtHighestLevel})</span>
+              </div>
+              <div class="player-stats-details">
+                <div>Passages: ${playerStats.totalPassagesPassed}/${playerStats.totalPassagesAttempted} (${playerStats.successRate}%)</div>
+                <div>Longest Streak: ${playerStats.longestStreak} • Perfect Rounds: ${playerStats.perfectRounds}</div>
+              </div>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(this.modal);
+
+    // Animate in
+    requestAnimationFrame(() => {
+      this.modal.classList.add('visible');
+    });
+
+    // Add event listeners
+    this.modal.querySelector('.leaderboard-close').addEventListener('click', () => this.hide());
+    this.modal.addEventListener('click', (e) => {
+      if (e.target === this.modal) {
+        this.hide();
+      }
+    });
+
+    // ESC key to close
+    this.escHandler = (e) => {
+      if (e.key === 'Escape') {
+        this.hide();
+      }
+    };
+    document.addEventListener('keydown', this.escHandler);
+  }
+
+  /**
+   * Generate HTML for leaderboard entries
+   */
+  generateLeaderboardHTML(entries, playerInitials) {
+    if (entries.length === 0) {
+      return `
+        <div class="leaderboard-empty">
+          <p>No high scores yet!</p>
+          <p class="text-sm">Be the first to reach Level 2!</p>
+        </div>
+      `;
+    }
+
+    return entries.map(entry => {
+      const rankClass = this.getRankClass(entry.rank);
+      const isPlayer = entry.initials === playerInitials;
+      const playerClass = isPlayer ? 'player-entry' : '';
+
+      return `
+        <div class="leaderboard-entry ${rankClass} ${playerClass}">
+          <span class="entry-rank">#${entry.rank}</span>
+          <span class="entry-initials">${entry.initials}</span>
+          <span class="entry-score">Level ${entry.level} <span class="entry-round">(Round ${entry.round})</span></span>
+        </div>
+      `;
+    }).join('');
+  }
+
+  /**
+   * Get CSS class for rank-based styling
+   */
+  getRankClass(rank) {
+    if (rank === 1) return 'rank-gold';
+    if (rank === 2 || rank === 3) return 'rank-silver';
+    return 'rank-standard';
+  }
+
+  /**
+   * Hide the leaderboard modal
+   */
+  hide() {
+    if (this.modal) {
+      this.modal.classList.remove('visible');
+      setTimeout(() => {
+        if (this.modal && this.modal.parentNode) {
+          this.modal.parentNode.removeChild(this.modal);
+        }
+        this.modal = null;
+      }, 300);
+    }
+
+    if (this.escHandler) {
+      document.removeEventListener('keydown', this.escHandler);
+      this.escHandler = null;
+    }
+  }
+
+  /**
+   * Show initials entry screen for new high score
+   */
+  showInitialsEntry(level, round, rank, onSubmit) {
+    // Store callback
+    this.onInitialsSubmit = onSubmit;
+
+    // Reset initials state
+    this.currentSlot = 0;
+
+    // Get existing player initials if available
+    const profile = this.service.getPlayerProfile();
+    if (profile && profile.initials) {
+      this.initials = profile.initials.split('');
+    } else {
+      this.initials = ['A', 'A', 'A'];
+    }
+
+    // Remove existing modal
+    this.hideInitialsEntry();
+
+    // Create modal HTML
+    this.initialsModal = document.createElement('div');
+    this.initialsModal.className = 'leaderboard-overlay initials-overlay';
+    this.initialsModal.innerHTML = `
+      <div class="initials-modal">
+        <div class="initials-header">
+          <h2 class="initials-title">🎉 NEW HIGH SCORE! 🎉</h2>
+          <div class="initials-achievement">
+            You reached <span class="highlight">Level ${level}</span>!
+            <br>
+            <span class="rank-text">${this.getRankText(rank)}</span>
+          </div>
+        </div>
+
+        <div class="initials-content">
+          <p class="initials-prompt">Enter your initials:</p>
+
+          <div class="initials-slots">
+            ${this.initials.map((letter, index) => `
+              <div class="initial-slot ${index === 0 ? 'active' : ''}" data-slot="${index}">
+                <div class="slot-letter">${letter}</div>
+                <div class="slot-arrows">
+                  <button class="arrow-up" data-slot="${index}" data-direction="up" aria-label="Increase letter">▲</button>
+                  <button class="arrow-down" data-slot="${index}" data-direction="down" aria-label="Decrease letter">▼</button>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+
+          <div class="initials-instructions">
+            <p>Use arrow keys ↑↓ to change letters</p>
+            <p>Press Tab or ←→ to move between slots</p>
+            <p>Press Enter to confirm</p>
+          </div>
+
+          <button class="initials-submit typewriter-button">
+            SUBMIT
+          </button>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(this.initialsModal);
+
+    // Animate in
+    requestAnimationFrame(() => {
+      this.initialsModal.classList.add('visible');
+    });
+
+    // Add event listeners
+    this.setupInitialsEventListeners();
+  }
+
+  /**
+   * Get rank description text
+   */
+  getRankText(rank) {
+    const ordinal = this.getOrdinal(rank);
+    if (rank === 1) return `🥇 ${ordinal} PLACE - TOP SCORE! 🥇`;
+    if (rank === 2) return `🥈 ${ordinal} PLACE 🥈`;
+    if (rank === 3) return `🥉 ${ordinal} PLACE 🥉`;
+    return `${ordinal} place on the leaderboard!`;
+  }
+
+  /**
+   * Get ordinal suffix for rank (1st, 2nd, 3rd, etc.)
+   */
+  getOrdinal(n) {
+    const s = ['th', 'st', 'nd', 'rd'];
+    const v = n % 100;
+    return n + (s[(v - 20) % 10] || s[v] || s[0]);
+  }
+
+  /**
+   * Setup event listeners for initials entry
+   */
+  setupInitialsEventListeners() {
+    // Arrow buttons
+    this.initialsModal.querySelectorAll('.arrow-up, .arrow-down').forEach(button => {
+      button.addEventListener('click', (e) => {
+        const slot = parseInt(e.target.dataset.slot);
+        const direction = e.target.dataset.direction;
+        this.changeInitialLetter(slot, direction === 'up' ? 1 : -1);
+      });
+    });
+
+    // Slot clicking to select
+    this.initialsModal.querySelectorAll('.initial-slot').forEach(slot => {
+      slot.addEventListener('click', (e) => {
+        if (!e.target.closest('.arrow-up') && !e.target.closest('.arrow-down')) {
+          const slotIndex = parseInt(slot.dataset.slot);
+          this.selectSlot(slotIndex);
+        }
+      });
+    });
+
+    // Submit button
+    this.initialsModal.querySelector('.initials-submit').addEventListener('click', () => {
+      this.submitInitials();
+    });
+
+    // Keyboard controls
+    this.initialsKeyHandler = (e) => {
+      switch(e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          this.changeInitialLetter(this.currentSlot, 1);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          this.changeInitialLetter(this.currentSlot, -1);
+          break;
+        case 'ArrowLeft':
+          e.preventDefault();
+          this.selectSlot(Math.max(0, this.currentSlot - 1));
+          break;
+        case 'ArrowRight':
+        case 'Tab':
+          e.preventDefault();
+          this.selectSlot(Math.min(2, this.currentSlot + 1));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          this.submitInitials();
+          break;
+      }
+    };
+    document.addEventListener('keydown', this.initialsKeyHandler);
+
+    // Prevent modal close on backdrop click for initials entry
+    this.initialsModal.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+  }
+
+  /**
+   * Change letter in current slot
+   */
+  changeInitialLetter(slot, delta) {
+    const currentChar = this.initials[slot].charCodeAt(0);
+    let newChar = currentChar + delta;
+
+    // Wrap around A-Z
+    if (newChar > 90) newChar = 65; // After Z, go to A
+    if (newChar < 65) newChar = 90; // Before A, go to Z
+
+    this.initials[slot] = String.fromCharCode(newChar);
+    this.updateInitialsDisplay();
+  }
+
+  /**
+   * Select a specific slot
+   */
+  selectSlot(slot) {
+    this.currentSlot = slot;
+    this.initialsModal.querySelectorAll('.initial-slot').forEach((el, index) => {
+      el.classList.toggle('active', index === slot);
+    });
+  }
+
+  /**
+   * Update the visual display of initials
+   */
+  updateInitialsDisplay() {
+    this.initialsModal.querySelectorAll('.initial-slot').forEach((slot, index) => {
+      slot.querySelector('.slot-letter').textContent = this.initials[index];
+    });
+  }
+
+  /**
+   * Submit initials and save to leaderboard
+   */
+  submitInitials() {
+    const initialsString = this.initials.join('');
+
+    // Save to player profile
+    const profile = this.service.getPlayerProfile();
+    profile.initials = initialsString;
+    profile.hasEnteredInitials = true;
+    this.service.savePlayerProfile(profile);
+
+    // Call the callback
+    if (this.onInitialsSubmit) {
+      this.onInitialsSubmit(initialsString);
+    }
+
+    // Hide modal
+    this.hideInitialsEntry();
+
+    // Show success message briefly, then show leaderboard
+    this.showSuccessMessage(() => {
+      this.show();
+    });
+  }
+
+  /**
+   * Hide initials entry modal
+   */
+  hideInitialsEntry() {
+    if (this.initialsModal) {
+      this.initialsModal.classList.remove('visible');
+      setTimeout(() => {
+        if (this.initialsModal && this.initialsModal.parentNode) {
+          this.initialsModal.parentNode.removeChild(this.initialsModal);
+        }
+        this.initialsModal = null;
+      }, 300);
+    }
+
+    if (this.initialsKeyHandler) {
+      document.removeEventListener('keydown', this.initialsKeyHandler);
+      this.initialsKeyHandler = null;
+    }
+  }
+
+  /**
+   * Show success message after submitting initials
+   */
+  showSuccessMessage(onComplete) {
+    const successDiv = document.createElement('div');
+    successDiv.className = 'leaderboard-overlay visible';
+    successDiv.innerHTML = `
+      <div class="leaderboard-modal success-message">
+        <div class="success-content">
+          <h2>✓ SCORE SAVED!</h2>
+          <p>Your initials have been added to the leaderboard</p>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(successDiv);
+
+    setTimeout(() => {
+      successDiv.classList.remove('visible');
+      setTimeout(() => {
+        if (successDiv.parentNode) {
+          successDiv.parentNode.removeChild(successDiv);
+        }
+        if (onComplete) {
+          onComplete();
+        }
+      }, 300);
+    }, 1500);
+  }
+
+  /**
+   * Show notification toast for milestone achievement
+   */
+  showMilestoneNotification(level) {
+    const toast = document.createElement('div');
+    toast.className = 'milestone-toast';
+    toast.innerHTML = `
+      <div class="toast-content">
+        🎯 Milestone Reached: Level ${level}!
+      </div>
+    `;
+
+    document.body.appendChild(toast);
+
+    // Animate in
+    requestAnimationFrame(() => {
+      toast.classList.add('visible');
+    });
+
+    // Auto-hide after 3 seconds
+    setTimeout(() => {
+      toast.classList.remove('visible');
+      setTimeout(() => {
+        if (toast.parentNode) {
+          toast.parentNode.removeChild(toast);
+        }
+      }, 300);
+    }, 3000);
+  }
+}

src/styles.css

@@ -575,28 +575,512 @@
     }
   }
 
+  /* Leaderboard Button Styling */
+  .typewriter-button-small {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    padding: 8px 16px;
+    background-color: var(--aged-paper-dark);
+    color: var(--typewriter-ink);
+    border: 2px solid black;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+    box-shadow:
+      0 3px 0 rgba(0, 0, 0, 0.3),
+      0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .typewriter-button-small:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    transform: translateY(-1px);
+    box-shadow:
+      0 4px 0 rgba(0, 0, 0, 0.3),
+      0 6px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .typewriter-button-small:active {
+    transform: translateY(2px);
+    box-shadow:
+      0 1px 0 rgba(0, 0, 0, 0.3),
+      0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Leaderboard Overlay */
+  .leaderboard-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(3px);
+  }
+
+  .leaderboard-overlay.visible {
+    opacity: 1;
+  }
+
+  /* Leaderboard Modal */
+  .leaderboard-modal {
+    background: var(--aged-paper-light);
+    border: 3px solid rgba(0, 0, 0, 0.4);
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    max-width: 600px;
+    width: 90%;
+    max-height: 85vh;
+    overflow: hidden;
+    animation: slideIn 0.3s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(-30px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* Leaderboard Header */
+  .leaderboard-header {
+    background: linear-gradient(180deg, var(--aged-paper-dark) 0%, #d4c9b3 100%);
+    padding: 20px 24px;
+    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .leaderboard-title {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--typewriter-ink);
+    margin: 0;
+    letter-spacing: 1px;
+  }
+
+  .leaderboard-close {
+    background: transparent;
+    color: var(--typewriter-ink);
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+    font-size: 24px;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .leaderboard-close:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .leaderboard-close:active {
+    background: rgba(0, 0, 0, 0.15);
+  }
+
+  /* Leaderboard Content */
+  .leaderboard-content {
+    padding: 24px;
+    max-height: calc(85vh - 100px);
+    overflow-y: auto;
+    background: var(--aged-paper-light);
+  }
+
+  /* Leaderboard List */
+  .leaderboard-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+  }
+
+  .leaderboard-entry {
+    display: grid;
+    grid-template-columns: 50px 80px 1fr;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    background: var(--aged-paper-dark);
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    transition: all 0.2s ease;
+  }
+
+  /* Rank Colors */
+  .leaderboard-entry.rank-gold {
+    background: linear-gradient(135deg, #fff7e6 0%, #ffeaa7 100%);
+    border-color: #d4af37;
+    border-width: 3px;
+    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
+  }
+
+  .leaderboard-entry.rank-silver {
+    background: linear-gradient(135deg, #fff9f2 0%, #f5deb3 100%);
+    border-color: #c9a869;
+    border-width: 2px;
+  }
+
+  .leaderboard-entry.rank-standard {
+    background: var(--aged-paper-dark);
+  }
+
+  .leaderboard-entry.player-entry {
+    background: linear-gradient(135deg, #f0e6ff 0%, #e0d1f5 100%);
+    border-color: #8b7aa8;
+    border-width: 3px;
+  }
+
+  .leaderboard-entry:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .entry-rank {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--typewriter-ink);
+    text-align: center;
+  }
+
+  .entry-initials {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--typewriter-ink);
+    letter-spacing: 2px;
+    text-align: center;
+    font-family: 'Courier New', monospace;
+  }
+
+  .entry-score {
+    font-size: 16px;
+    font-weight: 600;
+    color: #666;
+  }
+
+  .entry-round {
+    font-size: 14px;
+    color: #999;
+    font-weight: 400;
+  }
+
+  /* Empty State */
+  .leaderboard-empty {
+    text-align: center;
+    padding: 40px 20px;
+    color: #666;
+  }
+
+  .leaderboard-empty p {
+    margin: 8px 0;
+    font-size: 16px;
+  }
+
+  /* Player Stats */
+  .leaderboard-player-stats {
+    margin-top: 24px;
+    padding: 18px;
+    background: rgba(139, 115, 170, 0.08);
+    border: 2px solid rgba(139, 115, 170, 0.25);
+    border-radius: 6px;
+  }
+
+  .player-best {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--typewriter-ink);
+    margin-bottom: 8px;
+  }
+
+  .player-best .highlight {
+    color: #6b4a8e;
+    font-weight: 700;
+  }
+
+  .player-stats-details {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  /* Initials Entry Modal */
+  .initials-overlay {
+    background: rgba(0, 0, 0, 0.9);
+  }
+
+  .initials-modal {
+    max-width: 500px;
+  }
+
+  .initials-header {
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    padding: 24px;
+    border-bottom: 3px solid black;
+    text-align: center;
+  }
+
+  .initials-title {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 24px;
+    font-weight: 700;
+    color: white;
+    margin: 0 0 12px 0;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .initials-achievement {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.95);
+    line-height: 1.6;
+  }
+
+  .initials-achievement .highlight {
+    color: #fde68a;
+    font-weight: 700;
+  }
+
+  .rank-text {
+    font-size: 14px;
+    color: #fde68a;
+    font-weight: 600;
+  }
+
+  .initials-content {
+    padding: 32px 24px;
+    text-align: center;
+  }
+
+  .initials-prompt {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--typewriter-ink);
+    margin-bottom: 24px;
+  }
+
+  /* Initials Slots */
+  .initials-slots {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .initial-slot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .initial-slot.active .slot-letter {
+    border-color: #8b5cf6;
+    background: rgba(139, 92, 246, 0.1);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
+  }
+
+  .slot-letter {
+    width: 64px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    font-weight: 700;
+    font-family: 'Courier New', monospace;
+    color: var(--typewriter-ink);
+    background: var(--aged-paper-dark);
+    border: 3px solid black;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .slot-arrows {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .arrow-up, .arrow-down {
+    width: 40px;
+    height: 32px;
+    background: var(--aged-paper-dark);
+    border: 2px solid black;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .arrow-up:hover, .arrow-down:hover {
+    background: rgba(0, 0, 0, 0.05);
+    transform: scale(1.1);
+  }
+
+  .arrow-up:active, .arrow-down:active {
+    transform: scale(0.95);
+  }
+
+  /* Initials Instructions */
+  .initials-instructions {
+    margin-bottom: 24px;
+    color: #666;
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  .initials-instructions p {
+    margin: 4px 0;
+  }
+
+  .initials-submit {
+    width: 100%;
+    max-width: 200px;
+    min-height: 48px;
+    font-size: 16px;
+  }
+
+  /* Success Message */
+  .success-message {
+    max-width: 400px;
+    padding: 32px;
+    text-align: center;
+  }
+
+  .success-content h2 {
+    font-size: 32px;
+    color: #10b981;
+    margin-bottom: 12px;
+  }
+
+  .success-content p {
+    font-size: 16px;
+    color: #666;
+  }
+
+  /* Milestone Toast */
+  .milestone-toast {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100px);
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 12px;
+    border: 3px solid black;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    z-index: 3000;
+    transition: transform 0.3s ease;
+    font-weight: 600;
+    font-size: 18px;
+  }
+
+  .milestone-toast.visible {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* Mobile Responsive */
+  @media (max-width: 640px) {
+    .leaderboard-modal {
+      width: 95%;
+      max-height: 90vh;
+    }
+
+    .leaderboard-title {
+      font-size: 20px;
+    }
+
+    .leaderboard-entry {
+      grid-template-columns: 40px 70px 1fr;
+      gap: 8px;
+      padding: 12px;
+    }
+
+    .entry-rank {
+      font-size: 16px;
+    }
+
+    .entry-initials {
+      font-size: 16px;
+    }
+
+    .entry-score {
+      font-size: 14px;
+    }
+
+    .initials-modal {
+      width: 95%;
+    }
+
+    .slot-letter {
+      width: 56px;
+      height: 70px;
+      font-size: 40px;
+    }
+
+    .initials-slots {
+      gap: 12px;
+    }
+
+    .typewriter-button-small {
+      font-size: 13px;
+      padding: 8px 18px;
+    }
+  }
+
   /* Print styles */
   @media print {
     body {
       background: white;
       color: black;
     }
-    
+
     .paper-sheet::before {
       display: none;
     }
-    
+
     .typewriter-button {
       display: none;
     }
-    
+
     .sticky-controls {
       display: none;
     }
-    
+
     #game-container {
       padding-bottom: 0;
     }
+
+    .leaderboard-overlay,
+    .milestone-toast {
+      display: none;
+    }
   }
 }
 

src/welcomeOverlay.js

@@ -43,15 +43,15 @@ class WelcomeOverlay {
       
       <div class="welcome-content">
         <p>
-          <strong>How to play:</strong> Fill in the blanks in each passage. Complete 2 passages per round. Pass 2 rounds to advance to the next level.
+          <strong>How to play:</strong> Fill in the blanks to advance through levels with increasing difficulty and vocabulary complexity.
         </p>
-        
+
         <p>
-          <strong>Data source:</strong> Randomly excerpted historical and literary texts from Project Gutenberg's public domain collection, processed via Hugging Face Datasets.
+          <strong>Data source:</strong> Excerpted historical and literary texts from Project Gutenberg's public domain collection, processed via Hugging Face Datasets.
         </p>
-        
+
         <p style="margin-bottom: 0;">
-          <strong>AI assistance:</strong> Powered by Google's Gemma models via OpenRouter - Gemma-3-27b for hints and Gemma-3-12b for word selection and processing.
+          <strong>AI assistance:</strong> Powered by Google's Gemma-3-27b model via OpenRouter for word selection, hints, and contextualization.
         </p>
       </div>