Spaces:

milwright
/

cloze-reader

Running

milwright commited on Jun 11

Commit

5dd5427

1 Parent(s): 2a047b0

feat: minimal deployment with essential JavaScript modules and complete CSS

- Core game modules: clozeGameEngine.js, aiService.js, bookDataService.js
- Chat functionality: chatInterface.js, conversationManager.js
- Main app entry point: app.js
- Complete typewriter styling: styles.css with Tailwind integration
- Proper index.html with CDN and module references
- FastAPI server with static file serving

Files changed (8) hide show

app.py +4 -0
index.html +33 -187
src/app.js +48 -0
src/bookDataService.js +471 -0
src/chatInterface.js +334 -0
src/clozeGameEngine.js +540 -0
src/conversationManager.js +237 -0
src/styles.css +356 -0

app.py CHANGED Viewed

@@ -1,8 +1,12 @@
 from fastapi import FastAPI
 from fastapi.responses import FileResponse
 app = FastAPI()
 @app.get("/")
 async def read_root():
     return FileResponse("index.html")

 from fastapi import FastAPI
 from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 app = FastAPI()
+# Mount static files
+app.mount("/src", StaticFiles(directory="src"), name="src")
 @app.get("/")
 async def read_root():
     return FileResponse("index.html")

index.html CHANGED Viewed

@@ -3,209 +3,55 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cloze Reader</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
-    <style>
-        body { font-family: 'Special Elite', monospace; background: #faf7f0; }
-        .paper-sheet { background: #fefcf7; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
-        .cloze-input { border: none; border-bottom: 2px solid #000; background: transparent; text-align: center; font-family: inherit; }
-        .typewriter-button { background: #f5f1e8; border: 2px solid #000; font-family: inherit; padding: 8px 16px; cursor: pointer; }
-        .correct { background-color: rgba(16, 185, 129, 0.1); border-color: #10b981; }
-        .incorrect { background-color: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
-    </style>
 </head>
-<body class="min-h-screen p-4">
-    <div class="max-w-4xl mx-auto">
         <header class="text-center mb-8">
             <div class="flex items-center justify-center gap-3 mb-2">
-                <span class="text-4xl">📚</span>
-                <h1 class="text-4xl font-bold">Cloze Reader</h1>
             </div>
-            <p class="text-gray-600">Fill in the blanks to practice reading comprehension</p>
         </header>
-        <main id="game-container">
             <div id="loading" class="text-center py-8">
-                <p class="text-lg">Loading passages...</p>
             </div>
             <div id="game-area" class="paper-sheet rounded-lg p-6 hidden">
-                <div id="book-info" class="text-sm italic text-gray-600 mb-4"></div>
-                <div id="round-info" class="text-sm bg-amber-100 px-3 py-1 rounded-full inline-block mb-4"></div>
-                <div id="contextualization" class="bg-amber-50 border-l-4 border-amber-500 p-3 mb-4 text-sm"></div>
-                <div id="passage-content" class="text-lg leading-relaxed mb-6"></div>
-                <div id="hints-section" class="bg-yellow-50 border-l-4 border-yellow-500 p-3 mb-4 hidden">
-                    <div class="font-semibold mb-2 text-sm">💡 Hints:</div>
-                    <div id="hints-list" class="text-sm space-y-1"></div>
                 </div>
-                <div class="flex gap-4 justify-center flex-wrap">
-                    <button id="submit-btn" class="typewriter-button">Submit</button>
-                    <button id="next-btn" class="typewriter-button hidden">Next Passage</button>
-                    <button id="hint-btn" class="typewriter-button">Show Hints</button>
-                </div>
-                <div id="result" class="mt-4 text-center font-semibold"></div>
             </div>
         </main>
     </div>
-    <script>
-        // Simple cloze reader implementation
-        class SimpleClozeReader {
-            constructor() {
-                this.currentLevel = 1;
-                this.currentRound = 1;
-                this.blanks = [];
-                this.hints = [];
-                this.books = [
-                    {
-                        title: "Pride and Prejudice",
-                        author: "Jane Austen",
-                        text: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters."
-                    },
-                    {
-                        title: "The Adventures of Tom Sawyer",
-                        author: "Mark Twain",
-                        text: "Tom! No answer. Tom! No answer. What's gone with that boy, I wonder? You TOM! No answer. The old lady pulled her spectacles down and looked over them about the room; then she put them up and looked out under them. She seldom or never looked through them for so small a thing as a boy."
-                    }
-                ];
-                this.init();
-            }
-            init() {
-                this.setupEventListeners();
-                this.startNewRound();
-            }
-            setupEventListeners() {
-                document.getElementById('submit-btn').onclick = () => this.submitAnswers();
-                document.getElementById('next-btn').onclick = () => this.nextRound();
-                document.getElementById('hint-btn').onclick = () => this.toggleHints();
-            }
-            startNewRound() {
-                const book = this.books[Math.floor(Math.random() * this.books.length)];
-                const blanksCount = this.currentLevel <= 2 ? 1 : this.currentLevel <= 4 ? 2 : 3;
-                // Simple word selection
-                const words = book.text.split(' ');
-                const selectedIndices = [];
-                const contentWords = ['truth', 'man', 'fortune', 'wife', 'feelings', 'neighbourhood', 'families', 'daughters', 'answer', 'boy', 'lady', 'spectacles', 'room'];
-                for (let i = 0; i < blanksCount && i < contentWords.length; i++) {
-                    const wordIndex = words.findIndex(w => w.toLowerCase().includes(contentWords[i]));
-                    if (wordIndex !== -1) selectedIndices.push(wordIndex);
-                }
-                // Create blanks
-                this.blanks = selectedIndices.map((index, i) => ({
-                    index: i,
-                    originalWord: words[index].replace(/[^\w]/g, ''),
-                    wordIndex: index
-                }));
-                // Create hints
-                this.hints = this.blanks.map((blank, i) => {
-                    const word = blank.originalWord;
-                    if (this.currentLevel <= 2) {
-                        return `${word.length} letters, starts with "${word[0]}", ends with "${word[word.length-1]}"`;
-                    } else {
-                        return `${word.length} letters, starts with "${word[0]}"`;
-                    }
-                });
-                // Create display text
-                let displayText = book.text;
-                this.blanks.forEach((blank, i) => {
-                    const word = words[blank.wordIndex];
-                    const input = `<input type="text" class="cloze-input w-20 mx-1" data-index="${i}" placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}">`;
-                    displayText = displayText.replace(word, input);
-                });
-                // Update UI
-                document.getElementById('book-info').innerHTML = `<strong>${book.title}</strong> by ${book.author}`;
-                document.getElementById('round-info').textContent = `Level ${this.currentLevel} • ${blanksCount} blank${blanksCount > 1 ? 's' : ''}`;
-                document.getElementById('contextualization').innerHTML = `📚 Practice with classic literature from ${book.author}'s "${book.title}"`;
-                document.getElementById('passage-content').innerHTML = displayText;
-                document.getElementById('hints-list').innerHTML = this.hints.map((hint, i) => `<div>${i+1}. ${hint}</div>`).join('');
-                // Show game area
-                document.getElementById('loading').classList.add('hidden');
-                document.getElementById('game-area').classList.remove('hidden');
-                document.getElementById('hints-section').classList.add('hidden');
-                document.getElementById('result').textContent = '';
-                document.getElementById('submit-btn').classList.remove('hidden');
-                document.getElementById('next-btn').classList.add('hidden');
-            }
-            submitAnswers() {
-                const inputs = document.querySelectorAll('.cloze-input');
-                let correct = 0;
-                inputs.forEach((input, i) => {
-                    const userAnswer = input.value.trim().toLowerCase();
-                    const correctAnswer = this.blanks[i].originalWord.toLowerCase();
-                    if (userAnswer === correctAnswer) {
-                        input.classList.add('correct');
-                        correct++;
-                    } else {
-                        input.classList.add('incorrect');
-                        // Show correct answer
-                        const span = document.createElement('span');
-                        span.className = 'text-green-600 font-semibold ml-2 text-sm';
-                        span.textContent = `✓ ${this.blanks[i].originalWord}`;
-                        input.parentNode.appendChild(span);
-                    }
-                    input.disabled = true;
-                });
-                const percentage = Math.round((correct / this.blanks.length) * 100);
-                const passed = correct >= (this.blanks.length === 1 ? 1 : this.blanks.length - 1);
-                let message = `Score: ${correct}/${this.blanks.length} (${percentage}%)`;
-                if (passed) {
-                    message += ` - Excellent! Advancing to Level ${this.currentLevel + 1}! 🎉`;
-                    document.getElementById('result').className = 'mt-4 text-center font-semibold text-green-600';
-                    this.currentLevel++;
-                } else {
-                    message += ` - Keep practicing! 💪`;
-                    document.getElementById('result').className = 'mt-4 text-center font-semibold text-red-600';
-                }
-                document.getElementById('result').textContent = message;
-                document.getElementById('submit-btn').classList.add('hidden');
-                document.getElementById('next-btn').classList.remove('hidden');
-                this.currentRound++;
-            }
-            nextRound() {
-                document.querySelectorAll('.cloze-input').forEach(input => {
-                    input.classList.remove('correct', 'incorrect');
-                    input.disabled = false;
-                    input.value = '';
-                });
-                document.querySelectorAll('.text-green-600').forEach(el => el.remove());
-                this.startNewRound();
-            }
-            toggleHints() {
-                const hintsSection = document.getElementById('hints-section');
-                const btn = document.getElementById('hint-btn');
-                if (hintsSection.classList.contains('hidden')) {
-                    hintsSection.classList.remove('hidden');
-                    btn.textContent = 'Hide Hints';
-                } else {
-                    hintsSection.classList.add('hidden');
-                    btn.textContent = 'Show Hints';
-                }
-            }
-        }
-        // Initialize when page loads
-        document.addEventListener('DOMContentLoaded', () => {
-            new SimpleClozeReader();
-        });
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cloze Reader - Minimal</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
+    <link href="./src/styles.css" rel="stylesheet">
 </head>
+<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>
+            <p class="typewriter-subtitle">Fill in the blanks to practice reading comprehension</p>
         </header>
+        <main id="game-container" class="space-y-6">
             <div id="loading" class="text-center py-8">
+                <p class="text-lg loading-text">Loading passages...</p>
             </div>
             <div id="game-area" class="paper-sheet rounded-lg p-6 hidden">
+                <div class="paper-content">
+                    <div class="flex justify-between items-center mb-4">
+                        <div id="book-info" class="biblio-info"></div>
+                        <div id="round-info" class="round-badge px-3 py-1 rounded-full text-sm"></div>
+                    </div>
+                    <div id="contextualization" class="context-box mb-4 p-3 rounded-lg"></div>
+                    <div id="passage-content" class="prose max-w-none mb-6"></div>
+                    <div id="hints-section" class="hints-box mb-4 p-3 rounded-lg">
+                        <div class="text-sm font-semibold mb-2">💡 Hints:</div>
+                        <div id="hints-list" class="text-sm space-y-1"></div>
+                    </div>
+                    <div id="controls" class="flex gap-4 justify-center flex-wrap">
+                        <button type="button" id="submit-btn" class="typewriter-button">
+                            Submit
+                        </button>
+                        <button type="button" id="next-btn" class="typewriter-button hidden">
+                            Next Passage
+                        </button>
+                        <button type="button" id="hint-btn" class="typewriter-button">
+                            Show Hints
+                        </button>
+                    </div>
+                    <div id="result" class="mt-4 text-center result-text"></div>
                 </div>
             </div>
         </main>
     </div>
+    <script src="./src/app.js" type="module"></script>
 </body>
 </html>

src/app.js ADDED Viewed

	@@ -0,0 +1,48 @@

+// Main application entry point
+import { ClozeGameEngine } from './clozeGameEngine.js';
+import { BookDataService } from './bookDataService.js';
+import { AIService } from './aiService.js';
+import { ChatInterface } from './chatInterface.js';
+import { ConversationManager } from './conversationManager.js';
+class ClozeReaderApp {
+    constructor() {
+        this.bookDataService = new BookDataService();
+        this.aiService = new AIService();
+        this.gameEngine = new ClozeGameEngine(this.bookDataService, this.aiService);
+        this.chatInterface = new ChatInterface(this.aiService);
+        this.conversationManager = new ConversationManager(this.aiService);
+        this.init();
+    }
+    async init() {
+        try {
+            // Initialize services
+            await this.bookDataService.initialize();
+            // Start the game
+            await this.gameEngine.initialize();
+            // Initialize chat interface
+            this.chatInterface.initialize();
+            console.log('Cloze Reader application initialized successfully');
+        } catch (error) {
+            console.error('Failed to initialize application:', error);
+            this.showError('Failed to load the application. Please refresh the page.');
+        }
+    }
+    showError(message) {
+        const loadingElement = document.getElementById('loading');
+        if (loadingElement) {
+            loadingElement.innerHTML = `<p class="text-red-600">${message}</p>`;
+        }
+    }
+}
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new ClozeReaderApp();
+});

src/bookDataService.js ADDED Viewed

	@@ -0,0 +1,471 @@

+// Hugging Face Project Gutenberg Dataset Service
+class HuggingFaceDatasetService {
+  constructor() {
+    // Use Hugging Face Datasets API for streaming
+    this.datasetName = 'manu/project_gutenberg';
+    this.apiBase = 'https://datasets-server.huggingface.co';
+    this.books = [];
+    this.isLoaded = false;
+    this.streamingEnabled = false;
+    this.cache = new Map();
+    this.preloadedBooks = [];
+  }
+  // Local fallback books for when HF streaming is unavailable
+  getSampleBooks() {
+    return [
+      {
+        id: 1,
+        title: "Pride and Prejudice",
+        author: "Jane Austen",
+        text: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters. \"My dear Mr. Bennet,\" said his lady to him one day, \"have you heard that Netherfield Park is let at last?\" Mr. Bennet replied that he had not. \"But it is,\" returned she; \"for Mrs. Long has just been here, and she told me all about it.\" Mr. Bennet made no answer. \"Do you not want to know who has taken it?\" cried his wife impatiently. \"You want to tell me, and I have no objection to hearing it.\" This was invitation enough."
+      },
+      {
+        id: 2,
+        title: "The Adventures of Tom Sawyer",
+        author: "Mark Twain",
+        text: "\"Tom!\" No answer. \"Tom!\" No answer. \"What's gone with that boy, I wonder? You TOM!\" No answer. The old lady pulled her spectacles down and looked over them about the room; then she put them up and looked out under them. She seldom or never looked through them for so small a thing as a boy; they were her state pair, the pride of her heart, and were built for \"style,\" not service--she could have seen through a pair of stove-lids just as well. She looked perplexed for a moment, and then said, not fiercely, but still loud enough for the furniture to hear: \"Well, I lay if I get hold of you I'll--\""
+      },
+      {
+        id: 3,
+        title: "Great Expectations",
+        author: "Charles Dickens",
+        text: "My father's family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip. I give Pirrip as my father's family name, on the authority of his tombstone and my sister,--Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones."
+      },
+      {
+        id: 4,
+        title: "Alice's Adventures in Wonderland",
+        author: "Lewis Carroll",
+        text: "Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?' So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her."
+      },
+      {
+        id: 5,
+        title: "The Picture of Dorian Gray",
+        author: "Oscar Wilde",
+        text: "The studio was filled with the rich odour of roses, and when the strong summer wind stirred, amidst the trees of the garden, there came through the open door the heavy scent of the lilac, or the more delicate perfume of the pink-flowering thorn. From the corner of the divan of Persian saddle-bags on which he was lying, smoking, as was his custom, innumerable cigarettes, Lord Henry Wotton could just catch the gleam of the honey-sweet and honey-coloured blossoms of a laburnum, whose tremulous branches seemed hardly able to bear the burden of a beauty so flamelike as theirs."
+      },
+      {
+        id: 6,
+        title: "Moby Dick",
+        author: "Herman Melville",
+        text: "Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as possible."
+      },
+      {
+        id: 7,
+        title: "Jane Eyre",
+        author: "Charlotte Bronte",
+        text: "There was no possibility of taking a walk that day. We had been wandering, indeed, in the leafless shrubbery an hour in the morning; but since dinner (Mrs. Reed, when there was no company, dined early) the cold winter wind had brought with it clouds so sombre, and a rain so penetrating, that further out-door exercise was now out of the question. I was glad of it: I never liked long walks, especially on chilly afternoons: dreadful to me was the coming home in the raw twilight, with nipped fingers and toes, and a heart saddened by the chidings of Bessie, the nurse, and humbled by the consciousness of my physical inferiority to Eliza, John, and Georgiana Reed."
+      },
+      {
+        id: 8,
+        title: "The Count of Monte Cristo",
+        author: "Alexandre Dumas",
+        text: "On the first Monday of February, 1815, the watchtower at Marseilles signaled the arrival of the three-master Pharaon from Smyrna, Trieste, and Naples. As was customary, the pilot immediately left the port and steered toward the château d'If to conduct the ship through the narrow passage that leads to the harbor. However, a young sailor of about nineteen or twenty years, standing on the ship's bow, had signaled the pilot even before he had time to ask the traditional questions that are exchanged between the pilot and the captain. The young man had already assumed command, being the ship's owner and captain."
+      },
+      {
+        id: 9,
+        title: "Wuthering Heights",
+        author: "Emily Bronte",
+        text: "I have just returned from a visit to my landlord—the solitary neighbour that I shall be troubled with. This is certainly a beautiful country! In all England, I do not believe that I could have fixed on a situation so completely removed from the stir of society. A perfect misanthropist's Heaven: and Mr. Heathcliff and I are such a suitable pair to divide the desolation between us. A capital fellow! He little imagined how my heart warmed towards him when I beheld his black eyes withdraw so suspiciously under their brows, as I rode up, and when his fingers sheltered themselves, with a jealous resolution, still further in his waistcoat, as I announced my name."
+      },
+      {
+        id: 10,
+        title: "Frankenstein",
+        author: "Mary Shelley",
+        text: "It was on a dreary night of November that I beheld the accomplishment of my toils. With an anxiety that almost amounted to agony, I collected the instruments of life around me, that I might infuse a spark of being into the lifeless thing that lay at my feet. It was already one in the morning; the rain pattered dismally against the panes, and my candle was nearly burnt out, when, by the glimmer of the half-extinguished light, I saw the dull yellow eye of the creature open; it breathed hard, and a convulsive motion agitated its limbs. How can I describe my emotions at this catastrophe, or how delineate the wretch whom with such infinite pains and care I had endeavoured to form?"
+      }
+    ];
+  }
+  async loadDataset() {
+    try {
+      // Try to connect to HF Datasets API
+      await this.initializeStreaming();
+      if (this.streamingEnabled) {
+        // Preload some books for immediate access
+        await this.preloadBooks(100);
+        console.log(`✅ HF Streaming enabled: ${this.preloadedBooks.length} books preloaded`);
+      } else {
+        // Fall back to local samples
+        this.books = this.getSampleBooks();
+        console.log(`⚠️ Using local samples: ${this.books.length} books available`);
+      }
+      this.isLoaded = true;
+      return this.books;
+    } catch (error) {
+      console.error('Error loading dataset:', error);
+      // Ensure we always have local fallback
+      this.books = this.getSampleBooks();
+      this.isLoaded = true;
+      return this.books;
+    }
+  }
+  async initializeStreaming() {
+    try {
+      // Test HF Datasets API availability
+      const testUrl = `${this.apiBase}/splits?dataset=${this.datasetName}`;
+      const response = await fetch(testUrl);
+      if (response.ok) {
+        const data = await response.json();
+        // Check if English split is available
+        const hasEnglish = data.splits?.some(split =>
+          split.split === 'en' && split.config === 'default'
+        );
+        this.streamingEnabled = hasEnglish || data.splits?.length > 0;
+        console.log(`🔗 HF Datasets API: ${this.streamingEnabled ? 'Available' : 'Unavailable'}`);
+      }
+    } catch (error) {
+      console.warn('HF Datasets API test failed:', error);
+      this.streamingEnabled = false;
+    }
+  }
+  async preloadBooks(count = 100) {
+    if (!this.streamingEnabled) return;
+    try {
+      // Fetch a batch of books from HF Datasets (correct API format)
+      const url = `${this.apiBase}/rows?dataset=${this.datasetName}&config=default&split=en&offset=0&length=${count}`;
+      const response = await fetch(url);
+      if (response.ok) {
+        const data = await response.json();
+        // Process and filter books
+        this.preloadedBooks = data.rows
+          .map(row => this.processHFBook(row.row))
+          .filter(book => this.isValidForCloze(book));
+        console.log(`📚 Preloaded ${this.preloadedBooks.length} suitable books`);
+      }
+    } catch (error) {
+      console.warn('Failed to preload books:', error);
+    }
+  }
+  processHFBook(rowData) {
+    // Extract and clean book data from HF format
+    const originalText = rowData.text || '';
+    const cleanedText = this.cleanProjectGutenbergText(originalText);
+    // Try multiple metadata extraction approaches
+    const extractedMetadata = this.extractMetadata(originalText);
+    // Use HF dataset fields if available, otherwise use extracted metadata
+    const title = rowData.title || extractedMetadata.title || 'Classic Literature';
+    const author = rowData.author || extractedMetadata.author || 'Unknown Author';
+    return {
+      id: rowData.id || Math.random().toString(36),
+      title: title,
+      author: author,
+      text: cleanedText,
+      language: rowData.language || 'en',
+      source: 'project_gutenberg'
+    };
+  }
+  cleanProjectGutenbergText(text) {
+    if (!text) return '';
+    let cleaned = text;
+    // Remove Project Gutenberg start markers and everything before
+    const startPatterns = [
+      /\*\*\* START OF .*? \*\*\*/i,
+      /\*\*\*START OF .*?\*\*\*/i,
+      /START OF THE PROJECT GUTENBERG/i,
+      /GUTENBERG.*?EBOOK/i
+    ];
+    for (const pattern of startPatterns) {
+      const match = cleaned.match(pattern);
+      if (match) {
+        const startIndex = match.index + match[0].length;
+        // Skip to next line
+        const nextLine = cleaned.indexOf('\n', startIndex);
+        if (nextLine !== -1) {
+          cleaned = cleaned.substring(nextLine + 1);
+        }
+        break;
+      }
+    }
+    // Remove Project Gutenberg end markers and everything after
+    const endPatterns = [
+      /\*\*\* END OF .*? \*\*\*/i,
+      /\*\*\*END OF .*?\*\*\*/i,
+      /END OF THE PROJECT GUTENBERG/i,
+      /End of the Project Gutenberg/i
+    ];
+    for (const pattern of endPatterns) {
+      const match = cleaned.match(pattern);
+      if (match) {
+        cleaned = cleaned.substring(0, match.index);
+        break;
+      }
+    }
+    // Remove common Project Gutenberg artifacts
+    cleaned = cleaned
+      .replace(/\r\n/g, '\n')                           // Normalize line endings
+      .replace(/produced from images generously.*?\n/gi, '') // Remove scanning notes
+      .replace(/\n\s*\n\s*\n+/g, '\n\n')               // Remove excessive line breaks
+      .replace(/^\s*CHAPTER.*$/gm, '')                  // Remove chapter headers
+      .replace(/^\s*Chapter.*$/gm, '')                  // Remove chapter headers
+      .replace(/^\s*\d+\s*$/gm, '')                     // Remove page numbers
+      .replace(/^\s*\[.*?\]\s*$/gm, '')                 // Remove bracketed notes
+      .replace(/^\s*_.*_\s*$/gm, '')                    // Remove italic notes
+      .replace(/[_*]/g, '')                             // Remove underscores and asterisks
+      .trim();
+    // Find the actual start of narrative content
+    const lines = cleaned.split('\n');
+    let contentStart = 0;
+    for (let i = 0; i < Math.min(50, lines.length); i++) {
+      const line = lines[i].trim();
+      // Skip empty lines, title pages, and metadata
+      if (!line ||
+          line.includes('Title:') ||
+          line.includes('Author:') ||
+          line.includes('Release Date:') ||
+          line.includes('Language:') ||
+          line.includes('Character set') ||
+          line.includes('www.gutenberg') ||
+          line.includes('Project Gutenberg') ||
+          line.length < 20) {
+        contentStart = i + 1;
+        continue;
+      }
+      // Found actual content
+      break;
+    }
+    if (contentStart > 0 && contentStart < lines.length) {
+      cleaned = lines.slice(contentStart).join('\n').trim();
+    }
+    return cleaned;
+  }
+  extractMetadata(text) {
+    const metadata = { title: 'Classic Literature', author: 'Unknown Author' };
+    if (!text) return metadata;
+    // Look for the standard Project Gutenberg header format
+    const firstLine = text.split('\n')[0].trim();
+    // Parse the standard format: "The Project Gutenberg EBook of [TITLE], by [AUTHOR]"
+    const pgMatch = firstLine.match(/^.*?The Project Gutenberg EBook of (.+?),\s*by\s+(.+?)$/i);
+    if (pgMatch) {
+      const title = pgMatch[1].trim();
+      const author = pgMatch[2].trim();
+      if (title && this.isValidTitle(title)) {
+        metadata.title = this.cleanMetadataField(title);
+      }
+      if (author && this.isValidAuthor(author)) {
+        metadata.author = this.cleanMetadataField(author);
+      }
+      return metadata;
+    }
+    // Fallback: Look for explicit Title: and Author: fields in first 50 lines
+    const lines = text.split('\n').slice(0, 50);
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line.startsWith('Title:')) {
+        const title = line.replace('Title:', '').trim();
+        if (title && title.length > 1) {
+          metadata.title = this.cleanMetadataField(title);
+        }
+      } else if (line.startsWith('Author:')) {
+        const author = line.replace('Author:', '').trim();
+        if (author && author.length > 1) {
+          metadata.author = this.cleanMetadataField(author);
+        }
+      }
+    }
+    return metadata;
+  }
+  cleanMetadataField(field) {
+    return field
+      .replace(/\[.*?\]/g, '') // Remove bracketed info
+      .replace(/\s+/g, ' ')     // Normalize whitespace
+      .trim();
+  }
+  isValidTitle(title) {
+    if (!title || title.length < 3 || title.length > 100) return false;
+    // Avoid fragments that are clearly not titles
+    if (title.includes('Project Gutenberg') ||
+        title.includes('www.') ||
+        title.includes('produced from') ||
+        title.includes('images generously')) return false;
+    return true;
+  }
+  isValidAuthor(author) {
+    if (!author || author.length < 3 || author.length > 50) return false;
+    // Basic validation - should look like a name
+    if (author.includes('Project Gutenberg') ||
+        author.includes('www.') ||
+        author.includes('produced from')) return false;
+    return true;
+  }
+  isValidForCloze(book) {
+    if (!book.text) return false;
+    const textLength = book.text.length;
+    // Filter criteria for cloze exercises
+    if (textLength < 5000) return false;        // Too short
+    if (textLength > 500000) return false;      // Too long for performance
+    // Check for excessive formatting (likely reference material)
+    const lineBreakRatio = (book.text.match(/\n\n/g) || []).length / textLength;
+    if (lineBreakRatio > 0.01) return false;    // Too fragmented
+    // Ensure it has actual narrative content
+    const sentenceCount = (book.text.match(/[.!?]+/g) || []).length;
+    if (sentenceCount < 20) return false;       // Too few sentences
+    return true;
+  }
+  async getRandomBook() {
+    if (!this.isLoaded) {
+      throw new Error('Dataset not loaded');
+    }
+    // Prioritize preloaded books for fast access (90% chance)
+    if (this.streamingEnabled && this.preloadedBooks.length > 0 && Math.random() > 0.1) {
+      const randomIndex = Math.floor(Math.random() * this.preloadedBooks.length);
+      return this.preloadedBooks[randomIndex];
+    }
+    // Use local samples for remaining 10% + fallback
+    const fallbackBooks = this.books.length > 0 ? this.books : this.getSampleBooks();
+    const randomIndex = Math.floor(Math.random() * fallbackBooks.length);
+    return fallbackBooks[randomIndex];
+  }
+  async getStreamingBook() {
+    // Use preloaded books for immediate access
+    if (this.preloadedBooks.length > 0) {
+      const randomIndex = Math.floor(Math.random() * this.preloadedBooks.length);
+      return this.preloadedBooks[randomIndex];
+    }
+    // If no preloaded books, try to fetch directly
+    try {
+      const offset = Math.floor(Math.random() * 1000); // Random offset
+      const url = `${this.apiBase}/rows?dataset=${this.datasetName}&config=default&split=en&offset=${offset}&length=1`;
+      const response = await fetch(url);
+      if (response.ok) {
+        const data = await response.json();
+        if (data.rows && data.rows.length > 0) {
+          const book = this.processHFBook(data.rows[0].row);
+          if (this.isValidForCloze(book)) {
+            return book;
+          }
+        }
+      }
+    } catch (error) {
+      console.warn('Direct streaming failed:', error);
+    }
+    return null;
+  }
+  async getBooksByDifficulty(level) {
+    const difficultyRanges = {
+      1: { min: 5000, max: 30000 },    // Short stories/novellas
+      2: { min: 25000, max: 80000 },   // Medium novels
+      3: { min: 60000, max: 200000 }   // Long novels
+    };
+    const range = difficultyRanges[Math.min(level, 3)];
+    if (this.streamingEnabled && this.preloadedBooks.length > 0) {
+      // Filter preloaded books by difficulty
+      const suitable = this.preloadedBooks.filter(book =>
+        book.text.length >= range.min && book.text.length <= range.max
+      );
+      if (suitable.length > 0) {
+        const randomIndex = Math.floor(Math.random() * suitable.length);
+        return suitable[randomIndex];
+      }
+    }
+    // Fallback to local filtering
+    const fallbackBooks = this.books.length > 0 ? this.books : this.getSampleBooks();
+    const filtered = fallbackBooks.filter(book =>
+      book.text.length >= range.min && book.text.length <= range.max
+    );
+    if (filtered.length > 0) {
+      const randomIndex = Math.floor(Math.random() * filtered.length);
+      return filtered[randomIndex];
+    }
+    // If no books match difficulty, return any available book
+    return await this.getRandomBook();
+  }
+  getBookById(id) {
+    // Search in both preloaded and local books
+    const allBooks = [...this.preloadedBooks, ...this.books];
+    return allBooks.find(book => book.id === id);
+  }
+  searchBooks(query) {
+    if (!query) return [...this.preloadedBooks, ...this.books];
+    const lowerQuery = query.toLowerCase();
+    const allBooks = [...this.preloadedBooks, ...this.books];
+    return allBooks.filter(book =>
+      book.title.toLowerCase().includes(lowerQuery) ||
+      book.author.toLowerCase().includes(lowerQuery)
+    );
+  }
+  // Health check for streaming status
+  getStatus() {
+    return {
+      streamingEnabled: this.streamingEnabled,
+      preloadedBooks: this.preloadedBooks.length,
+      localBooks: this.books.length,
+      totalAvailable: this.preloadedBooks.length + this.books.length,
+      source: this.streamingEnabled ? 'HuggingFace Datasets' : 'Local Samples'
+    };
+  }
+  // Refresh preloaded books cache
+  async refreshCache() {
+    if (this.streamingEnabled) {
+      await this.preloadBooks(100);
+      console.log(`🔄 Cache refreshed: ${this.preloadedBooks.length} books`);
+    }
+  }
+}
+export default new HuggingFaceDatasetService();

src/chatInterface.js ADDED Viewed

	@@ -0,0 +1,334 @@

+// Chat UI components for contextual hints
+class ChatUI {
+  constructor(gameLogic) {
+    this.game = gameLogic;
+    this.activeChatBlank = null;
+    this.chatModal = null;
+    this.isOpen = false;
+    this.messageHistory = new Map(); // blankId -> array of messages for persistent history
+    this.setupChatModal();
+  }
+  // Create and setup chat modal
+  setupChatModal() {
+    // Create modal HTML
+    const modalHTML = `
+      <div id="chat-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
+        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[80vh] flex flex-col">
+          <!-- Header -->
+          <div class="flex items-center justify-between p-4 border-b">
+            <h3 id="chat-title" class="text-lg font-semibold text-gray-900">
+              Chat about Word #1
+            </h3>
+            <button id="chat-close" class="text-gray-400 hover:text-gray-600">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            </button>
+          </div>
+          <!-- Chat messages area -->
+          <div id="chat-messages" class="flex-1 overflow-y-auto p-4 min-h-[200px] max-h-[400px]">
+            <div class="text-center text-gray-500 text-sm">
+              Ask me anything about this word! I can help with meaning, context, grammar, or give you hints.
+            </div>
+          </div>
+          <!-- Suggested questions -->
+          <div id="suggested-questions" class="px-4 py-2 border-t border-gray-100">
+            <div id="suggestion-buttons" class="flex flex-wrap gap-1">
+              <!-- Suggestion buttons will be inserted here -->
+            </div>
+          </div>
+          <!-- Question buttons area -->
+          <div class="p-4 border-t">
+            <div class="text-sm text-gray-600 mb-3">Choose a question:</div>
+            <div id="question-buttons" class="grid grid-cols-2 gap-2">
+              <!-- Question buttons will be inserted here -->
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    // Insert modal into page
+    document.body.insertAdjacentHTML('beforeend', modalHTML);
+    this.chatModal = document.getElementById('chat-modal');
+    this.setupEventListeners();
+  }
+  // Setup event listeners for chat modal
+  setupEventListeners() {
+    const closeBtn = document.getElementById('chat-close');
+    // Close modal
+    closeBtn.addEventListener('click', () => this.closeChat());
+    this.chatModal.addEventListener('click', (e) => {
+      if (e.target === this.chatModal) this.closeChat();
+    });
+    // ESC key to close
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.isOpen) this.closeChat();
+    });
+  }
+  // Open chat for specific blank
+  async openChat(blankIndex) {
+    this.activeChatBlank = blankIndex;
+    this.isOpen = true;
+    // Update title
+    const title = document.getElementById('chat-title');
+    title.textContent = `Help with Word #${blankIndex + 1}`;
+    // Restore previous messages or show intro
+    this.restoreMessages(blankIndex);
+    // Load question buttons
+    this.loadQuestionButtons();
+    // Show modal
+    this.chatModal.classList.remove('hidden');
+  }
+  // Close chat modal
+  closeChat() {
+    this.isOpen = false;
+    this.chatModal.classList.add('hidden');
+    this.activeChatBlank = null;
+  }
+  // Clear messages and show intro
+  clearMessages() {
+    const messagesContainer = document.getElementById('chat-messages');
+    messagesContainer.innerHTML = `
+      <div class="text-center text-gray-500 text-sm">
+        Choose a question below to get help with this word.
+      </div>
+    `;
+  }
+  // Restore messages for a specific blank or show intro
+  restoreMessages(blankIndex) {
+    const messagesContainer = document.getElementById('chat-messages');
+    const blankId = `blank_${blankIndex}`;
+    const history = this.messageHistory.get(blankId);
+    if (history && history.length > 0) {
+      // Restore previous messages
+      messagesContainer.innerHTML = '';
+      history.forEach(msg => {
+        this.displayMessage(msg.sender, msg.content, msg.isUser);
+      });
+    } else {
+      // Show intro for new conversation
+      this.clearMessages();
+    }
+  }
+  // Display a message without storing it (used for restoration)
+  displayMessage(sender, content, isUser) {
+    const messagesContainer = document.getElementById('chat-messages');
+    const alignment = isUser ? 'flex justify-end' : 'flex justify-start';
+    const messageClass = isUser
+      ? 'bg-blue-500 text-white'
+      : 'bg-gray-100 text-gray-900';
+    const displaySender = isUser ? 'You' : sender;
+    const messageHTML = `
+      <div class="mb-3 ${alignment}">
+        <div class="${messageClass} rounded-lg px-3 py-2 max-w-[80%]">
+          <div class="text-xs font-medium mb-1">${displaySender}</div>
+          <div class="text-sm">${this.escapeHtml(content)}</div>
+        </div>
+      </div>
+    `;
+    messagesContainer.insertAdjacentHTML('beforeend', messageHTML);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+  // Clear all chat history (called when round ends)
+  clearChatHistory() {
+    this.messageHistory.clear();
+  }
+  // Load question buttons with disabled state for used questions
+  loadQuestionButtons() {
+    const buttonsContainer = document.getElementById('question-buttons');
+    const questions = this.game.getSuggestedQuestionsForBlank(this.activeChatBlank);
+    let html = '';
+    questions.forEach(question => {
+      const isDisabled = question.used;
+      const buttonClass = isDisabled
+        ? 'question-btn px-3 py-2 bg-gray-200 text-gray-500 rounded cursor-not-allowed text-sm font-medium'
+        : 'question-btn px-3 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 text-sm font-medium';
+      html += `
+        <button class="${buttonClass}"
+                data-type="${question.type}"
+                ${isDisabled ? 'disabled' : ''}>
+          ${question.text}${isDisabled ? ' ✓' : ''}
+        </button>
+      `;
+    });
+    buttonsContainer.innerHTML = html;
+    // Add click listeners to individual question buttons (not the container)
+    buttonsContainer.querySelectorAll('.question-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        if (!btn.disabled) {
+          e.preventDefault();
+          e.stopPropagation();
+          const questionType = btn.dataset.type;
+          this.askQuestion(questionType);
+        }
+      });
+    });
+  }
+  // Ask a specific question
+  async askQuestion(questionType) {
+    if (this.activeChatBlank === null) return;
+    // Get current user input for the blank
+    const currentInput = this.getCurrentBlankInput();
+    // Get the actual question text from the button that was clicked
+    const questions = this.game.getSuggestedQuestionsForBlank(this.activeChatBlank);
+    const selectedQuestion = questions.find(q => q.type === questionType);
+    const questionText = selectedQuestion ? selectedQuestion.text : this.getQuestionText(questionType);
+    // Show question and loading
+    this.addMessageToChat('You', questionText, true);
+    this.showTypingIndicator();
+    try {
+      // Send to chat service with question type
+      const response = await this.game.askQuestionAboutBlank(
+        this.activeChatBlank,
+        questionType,
+        currentInput
+      );
+      this.hideTypingIndicator();
+      if (response.success) {
+        // Make sure we're displaying the response string, not the object
+        const responseText = typeof response.response === 'string'
+          ? response.response
+          : response.response.response || 'Sorry, I had trouble with that question.';
+        this.addMessageToChat('Cluemaster', responseText, false);
+        // Refresh question buttons to show the used question as disabled
+        this.loadQuestionButtons();
+      } else {
+        this.addMessageToChat('Cluemaster', response.message || 'Sorry, I had trouble with that question.', false);
+      }
+    } catch (error) {
+      this.hideTypingIndicator();
+      console.error('Chat error:', error);
+      this.addMessageToChat('Cluemaster', 'Sorry, I encountered an error. Please try again.', false);
+    }
+  }
+  // Get question text for display
+  getQuestionText(questionType) {
+    const questions = {
+      'grammar': 'What type of word is this?',
+      'meaning': 'What does this word mean?',
+      'context': 'Why does this word fit here?',
+      'clue': 'Give me a clue'
+    };
+    return questions[questionType] || questions['clue'];
+  }
+  // Get current input for the active blank
+  getCurrentBlankInput() {
+    const input = document.querySelector(`input[data-blank-index="${this.activeChatBlank}"]`);
+    return input ? input.value.trim() : '';
+  }
+  // Add message to chat display and store in history
+  addMessageToChat(sender, content, isUser) {
+    // Store message in history for current blank
+    if (this.activeChatBlank !== null) {
+      const blankId = `blank_${this.activeChatBlank}`;
+      if (!this.messageHistory.has(blankId)) {
+        this.messageHistory.set(blankId, []);
+      }
+      // Change "Tutor" to "Cluemaster" for display and storage
+      const displaySender = sender === 'Tutor' ? 'Cluemaster' : sender;
+      this.messageHistory.get(blankId).push({
+        sender: displaySender,
+        content: content,
+        isUser: isUser,
+        timestamp: Date.now()
+      });
+    }
+    // Display the message
+    this.displayMessage(sender === 'Tutor' ? 'Cluemaster' : sender, content, isUser);
+  }
+  // Show typing indicator
+  showTypingIndicator() {
+    const messagesContainer = document.getElementById('chat-messages');
+    const typingHTML = `
+      <div id="typing-indicator" class="mb-3 mr-auto max-w-[80%]">
+        <div class="bg-gray-100 text-gray-900 rounded-lg px-3 py-2">
+          <div class="text-xs font-medium mb-1">Cluemaster</div>
+          <div class="text-sm">
+            <span class="typing-dots">
+              <span>.</span><span>.</span><span>.</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    `;
+    messagesContainer.insertAdjacentHTML('beforeend', typingHTML);
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+  }
+  // Hide typing indicator
+  hideTypingIndicator() {
+    const indicator = document.getElementById('typing-indicator');
+    if (indicator) indicator.remove();
+  }
+  // Escape HTML to prevent XSS
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+  // Setup chat buttons for blanks
+  setupChatButtons() {
+    // Remove existing listeners
+    document.querySelectorAll('.chat-button').forEach(btn => {
+      btn.replaceWith(btn.cloneNode(true));
+    });
+    // Add new listeners
+    document.querySelectorAll('.chat-button').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const blankIndex = parseInt(btn.dataset.blankIndex);
+        this.openChat(blankIndex);
+      });
+    });
+  }
+}
+export default ChatUI;

src/clozeGameEngine.js ADDED Viewed

	@@ -0,0 +1,540 @@

+// Core game logic for minimal cloze reader
+import bookDataService from './bookDataService.js';
+import aiService from './aiService.js';
+import ChatService from './conversationManager.js';
+class ClozeGame {
+  constructor() {
+    this.currentBook = null;
+    this.originalText = '';
+    this.clozeText = '';
+    this.blanks = [];
+    this.userAnswers = [];
+    this.score = 0;
+    this.currentRound = 1;
+    this.currentLevel = 1; // Track difficulty level separately from round
+    this.contextualization = '';
+    this.hints = [];
+    this.chatService = new ChatService(aiService);
+    this.lastResults = null; // Store results for answer revelation
+  }
+  async initialize() {
+    try {
+      await bookDataService.loadDataset();
+      console.log('Game initialized successfully');
+    } catch (error) {
+      console.error('Failed to initialize game:', error);
+      throw error;
+    }
+  }
+  async startNewRound() {
+    try {
+      // Get a random book (now async with HF streaming)
+      this.currentBook = await bookDataService.getRandomBook();
+      // Extract a coherent passage avoiding fragmented text
+      const fullText = this.currentBook.text;
+      let passage = this.extractCoherentPassage(fullText);
+      this.originalText = passage.trim();
+      // Run AI calls in parallel for faster loading
+      const [clozeResult, contextualizationResult] = await Promise.all([
+        this.createClozeText(),
+        this.generateContextualization()
+      ]);
+      return {
+        title: this.currentBook.title,
+        author: this.currentBook.author,
+        text: this.clozeText,
+        blanks: this.blanks,
+        contextualization: this.contextualization,
+        hints: this.hints
+      };
+    } catch (error) {
+      console.error('Error starting new round:', error);
+      throw error;
+    }
+  }
+  extractCoherentPassage(text) {
+    // Simple elegant solution: start from middle third of book where actual content is
+    const textLength = text.length;
+    const startFromMiddle = Math.floor(textLength * 0.3); // Skip first 30%
+    const endAtThreeQuarters = Math.floor(textLength * 0.8); // Stop before last 20%
+    // Random position in the middle section
+    const availableLength = endAtThreeQuarters - startFromMiddle;
+    const randomOffset = Math.floor(Math.random() * Math.max(0, availableLength - 800));
+    const startIndex = startFromMiddle + randomOffset;
+    // Extract passage
+    let passage = text.substring(startIndex, startIndex + 800);
+    // Clean up start - find first complete sentence
+    const firstSentenceEnd = passage.search(/[.!?]\s+[A-Z]/);
+    if (firstSentenceEnd > 0 && firstSentenceEnd < 200) {
+      passage = passage.substring(firstSentenceEnd + 2);
+    }
+    // Clean up end - end at complete sentence
+    const lastSentenceEnd = passage.lastIndexOf('.');
+    if (lastSentenceEnd > 300) {
+      passage = passage.substring(0, lastSentenceEnd + 1);
+    }
+    return passage.trim();
+  }
+  async createClozeText() {
+    const words = this.originalText.split(' ');
+    // Progressive difficulty: levels 1-2 = 1 blank, levels 3-4 = 2 blanks, level 5+ = 3 blanks
+    let numberOfBlanks;
+    if (this.currentLevel <= 2) {
+      numberOfBlanks = 1;
+    } else if (this.currentLevel <= 4) {
+      numberOfBlanks = 2;
+    } else {
+      numberOfBlanks = 3;
+    }
+    // Update chat service with current level
+    this.chatService.setLevel(this.currentLevel);
+    // Always use AI for word selection with fallback
+    let significantWords;
+    try {
+      significantWords = await aiService.selectSignificantWords(
+        this.originalText,
+        numberOfBlanks
+      );
+      console.log('AI selected words:', significantWords);
+    } catch (error) {
+      console.warn('AI word selection failed, using manual fallback:', error);
+      significantWords = this.selectWordsManually(words, numberOfBlanks);
+      console.log('Manual selected words:', significantWords);
+    }
+    // Ensure we have valid words
+    if (!significantWords || significantWords.length === 0) {
+      console.warn('No words selected, using emergency fallback');
+      significantWords = this.selectWordsManually(words, numberOfBlanks);
+    }
+    // Find word indices for selected significant words, distributed throughout passage
+    const selectedIndices = [];
+    const wordsLower = words.map(w => w.toLowerCase().replace(/[^\w]/g, ''));
+    // Create sections of the passage to ensure distribution
+    const passageSections = this.dividePassageIntoSections(words.length, numberOfBlanks);
+    significantWords.forEach((significantWord, index) => {
+      // Clean the significant word for matching
+      const cleanSignificant = significantWord.toLowerCase().replace(/[^\w]/g, '');
+      // Look for the word within the appropriate section for better distribution
+      const sectionStart = passageSections[index] ? passageSections[index].start : 0;
+      const sectionEnd = passageSections[index] ? passageSections[index].end : words.length;
+      let wordIndex = -1;
+      // First try to find the word in the designated section
+      for (let i = sectionStart; i < sectionEnd; i++) {
+        if (wordsLower[i] === cleanSignificant && !selectedIndices.includes(i)) {
+          wordIndex = i;
+          break;
+        }
+      }
+      // If not found in section, look globally
+      if (wordIndex === -1) {
+        wordIndex = wordsLower.findIndex((word, idx) =>
+          word === cleanSignificant && !selectedIndices.includes(idx)
+        );
+      }
+      if (wordIndex !== -1) {
+        selectedIndices.push(wordIndex);
+      } else {
+        console.warn(`Could not find word "${significantWord}" in passage`);
+      }
+    });
+    // Log the matching results
+    console.log(`Found ${selectedIndices.length} of ${significantWords.length} words in passage`);
+    // If no words were matched, fall back to manual selection
+    if (selectedIndices.length === 0) {
+      console.warn('No AI words matched in passage, using manual selection');
+      const manualWords = this.selectWordsManually(words, numberOfBlanks);
+      // Try to match manual words
+      manualWords.forEach((manualWord, index) => {
+        const cleanManual = manualWord.toLowerCase().replace(/[^\w]/g, '');
+        const wordIndex = wordsLower.findIndex((word, idx) =>
+          word === cleanManual && !selectedIndices.includes(idx)
+        );
+        if (wordIndex !== -1) {
+          selectedIndices.push(wordIndex);
+        }
+      });
+      console.log(`After manual fallback: ${selectedIndices.length} words found`);
+    }
+    // Sort indices for easier processing
+    selectedIndices.sort((a, b) => a - b);
+    // Final safety check - if still no words found, pick random content words
+    if (selectedIndices.length === 0) {
+      console.error('Critical: No words could be selected, using emergency fallback');
+      const contentWords = words.map((word, idx) => ({ word: word.toLowerCase().replace(/[^\w]/g, ''), idx }))
+        .filter(item => item.word.length > 3 && !['the', 'and', 'but', 'for', 'are', 'was'].includes(item.word))
+        .slice(0, numberOfBlanks);
+      selectedIndices.push(...contentWords.map(item => item.idx));
+      console.log(`Emergency fallback selected ${selectedIndices.length} words`);
+    }
+    // Create blanks array and cloze text
+    this.blanks = [];
+    this.hints = [];
+    const clozeWords = [...words];
+    for (let i = 0; i < selectedIndices.length; i++) {
+      const index = selectedIndices[i];
+      const originalWord = words[index];
+      const cleanWord = originalWord.replace(/[^\w]/g, '');
+      const blankData = {
+        index: i,
+        originalWord: cleanWord,
+        wordIndex: index
+      };
+      this.blanks.push(blankData);
+      // Initialize chat context for this word
+      const wordContext = {
+        originalWord: cleanWord,
+        sentence: this.originalText,
+        passage: this.originalText,
+        bookTitle: this.currentBook.title,
+        author: this.currentBook.author,
+        wordPosition: index,
+        difficulty: this.calculateWordDifficulty(cleanWord, index, words)
+      };
+      this.chatService.initializeWordContext(`blank_${i}`, wordContext);
+      // Generate structural hint based on level
+      let structuralHint;
+      if (this.currentLevel <= 2) {
+        // Levels 1-2: show length, first letter, and last letter
+        structuralHint = `${cleanWord.length} letters, starts with "${cleanWord[0]}", ends with "${cleanWord[cleanWord.length - 1]}"`;
+      } else {
+        // Level 3+: show length and first letter only
+        structuralHint = `${cleanWord.length} letters, starts with "${cleanWord[0]}"`;
+      }
+      this.hints.push({ index: i, hint: structuralHint });
+      // Replace word with input field placeholder
+      clozeWords[index] = `___BLANK_${i}___`;
+    }
+    this.clozeText = clozeWords.join(' ');
+    this.userAnswers = new Array(this.blanks.length).fill('');
+    // Debug: Log the created cloze text
+    console.log('Created cloze text:', this.clozeText);
+    console.log('Number of blanks:', this.blanks.length);
+    return true; // Return success indicator
+  }
+  dividePassageIntoSections(totalWords, numberOfBlanks) {
+    const sections = [];
+    const sectionSize = Math.floor(totalWords / numberOfBlanks);
+    for (let i = 0; i < numberOfBlanks; i++) {
+      const start = i * sectionSize;
+      const end = i === numberOfBlanks - 1 ? totalWords : (i + 1) * sectionSize;
+      sections.push({ start, end });
+    }
+    return sections;
+  }
+  selectWordsManually(words, numberOfBlanks) {
+    // Fallback manual word selection - avoid function words completely
+    const functionWords = new Set([
+      // Articles
+      'the', 'a', 'an',
+      // Prepositions
+      'in', 'on', 'at', 'to', 'for', 'of', 'with', 'by', 'from', 'up', 'about', 'into', 'over', 'after',
+      // Conjunctions
+      'and', 'or', 'but', 'so', 'yet', 'nor', 'because', 'since', 'although', 'if', 'when', 'while',
+      // Pronouns
+      'i', 'you', 'he', 'she', 'it', 'we', 'they', 'me', 'him', 'her', 'us', 'them', 'my', 'your', 'his', 'her', 'its', 'our', 'their',
+      'this', 'that', 'these', 'those', 'who', 'what', 'which', 'whom', 'whose',
+      // Auxiliary verbs
+      'is', 'are', 'was', 'were', 'be', 'been', 'being', 'have', 'has', 'had', 'do', 'does', 'did',
+      'will', 'would', 'could', 'should', 'may', 'might', 'must', 'can', 'shall'
+    ]);
+    // Get content words with their indices for better distribution
+    const contentWordIndices = [];
+    words.forEach((word, index) => {
+      const cleanWord = word.toLowerCase().replace(/[^\w]/g, '');
+      if (cleanWord.length > 3 && !functionWords.has(cleanWord)) {
+        contentWordIndices.push({ word: cleanWord, index });
+      }
+    });
+    // Distribute selection across sections
+    const passageSections = this.dividePassageIntoSections(words.length, numberOfBlanks);
+    const selectedWords = [];
+    for (let i = 0; i < numberOfBlanks && i < passageSections.length; i++) {
+      const section = passageSections[i];
+      const sectionWords = contentWordIndices.filter(item =>
+        item.index >= section.start && item.index < section.end
+      );
+      if (sectionWords.length > 0) {
+        const randomIndex = Math.floor(Math.random() * sectionWords.length);
+        selectedWords.push(sectionWords[randomIndex].word);
+      }
+    }
+    // Fill remaining slots if needed
+    while (selectedWords.length < numberOfBlanks && contentWordIndices.length > 0) {
+      const availableWords = contentWordIndices
+        .map(item => item.word)
+        .filter(word => !selectedWords.includes(word));
+      if (availableWords.length > 0) {
+        const randomIndex = Math.floor(Math.random() * availableWords.length);
+        selectedWords.push(availableWords[randomIndex]);
+      } else {
+        break;
+      }
+    }
+    return selectedWords;
+  }
+  async generateContextualization() {
+    // Always use AI for contextualization
+    try {
+      this.contextualization = await aiService.generateContextualization(
+        this.currentBook.title,
+        this.currentBook.author
+      );
+      return this.contextualization;
+    } catch (error) {
+      console.warn('AI contextualization failed, using fallback:', error);
+      this.contextualization = `"${this.currentBook.title}" by ${this.currentBook.author} - A classic work of literature.`;
+      return this.contextualization;
+    }
+  }
+  renderClozeText() {
+    let html = this.clozeText;
+    this.blanks.forEach((blank, index) => {
+      const inputHtml = `<input type="text"
+        class="cloze-input"
+        data-blank-index="${index}"
+        placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
+        style="width: ${Math.max(80, blank.originalWord.length * 12)}px;">`;
+      html = html.replace(`___BLANK_${index}___`, inputHtml);
+    });
+    return html;
+  }
+  submitAnswers(answers) {
+    this.userAnswers = answers;
+    let correctCount = 0;
+    const results = [];
+    this.blanks.forEach((blank, index) => {
+      const userAnswer = answers[index].trim().toLowerCase();
+      const correctAnswer = blank.originalWord.toLowerCase();
+      const isCorrect = userAnswer === correctAnswer;
+      if (isCorrect) correctCount++;
+      results.push({
+        blankIndex: index,
+        userAnswer: answers[index],
+        correctAnswer: blank.originalWord,
+        isCorrect
+      });
+    });
+    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;
+    const resultsData = {
+      correct: correctCount,
+      total: this.blanks.length,
+      percentage: scorePercentage,
+      passed: passed,
+      results,
+      canAdvanceLevel: passed,
+      shouldRevealAnswers: !passed,
+      requiredCorrect: requiredCorrect,
+      currentLevel: this.currentLevel
+    };
+    // Store results for potential answer revelation
+    this.lastResults = resultsData;
+    return resultsData;
+  }
+  // Calculate required correct answers based on total blanks
+  calculateRequiredCorrect(totalBlanks) {
+    if (totalBlanks === 1) {
+      // Level 1: Must get the single word correct
+      return 1;
+    } else if (totalBlanks % 2 === 1) {
+      // Odd number of blanks (3, 5, etc.): require all but one
+      return totalBlanks - 1;
+    } else {
+      // Even number of blanks: require all correct
+      return totalBlanks;
+    }
+  }
+  showAnswers() {
+    return this.blanks.map(blank => ({
+      index: blank.index,
+      word: blank.originalWord
+    }));
+  }
+  nextRound() {
+    // Check if user passed the previous round
+    const passed = this.lastResults && this.lastResults.passed;
+    // Always increment round counter
+    this.currentRound++;
+    // Only advance level if user passed
+    if (passed) {
+      this.currentLevel++;
+    }
+    // If failed, stay at same level
+    // Clear chat conversations for new round
+    this.chatService.clearConversations();
+    // Clear last results since we're moving to new round
+    this.lastResults = null;
+    return this.startNewRound();
+  }
+  // Get answers for current round (for revelation when switching passages)
+  getCurrentAnswers() {
+    if (!this.lastResults) return null;
+    return {
+      hasResults: true,
+      passed: this.lastResults.passed,
+      shouldRevealAnswers: this.lastResults.shouldRevealAnswers,
+      currentLevel: this.lastResults.currentLevel,
+      requiredCorrect: this.lastResults.requiredCorrect,
+      answers: this.blanks.map(blank => ({
+        index: blank.index,
+        correctAnswer: blank.originalWord,
+        userAnswer: this.lastResults.results[blank.index]?.userAnswer || '',
+        isCorrect: this.lastResults.results[blank.index]?.isCorrect || false
+      }))
+    };
+  }
+  // Calculate difficulty of a word based on various factors
+  calculateWordDifficulty(word, position, allWords) {
+    let difficulty = 1;
+    // Length factor
+    if (word.length > 8) difficulty += 2;
+    else if (word.length > 5) difficulty += 1;
+    // Position factor (middle words might be harder)
+    const relativePosition = position / allWords.length;
+    if (relativePosition > 0.3 && relativePosition < 0.7) difficulty += 1;
+    // Complexity factors
+    if (word.includes('ing') || word.includes('ed')) difficulty += 0.5;
+    if (word.includes('tion') || word.includes('sion')) difficulty += 1;
+    // Current level factor
+    difficulty += (this.currentLevel - 1) * 0.5;
+    return Math.min(5, Math.max(1, Math.round(difficulty)));
+  }
+  // Simple, clean hint with just essential info based on level
+  generateContextualFallbackHint(word, wordIndex, allWords) {
+    if (this.currentLevel <= 2) {
+      return `${word.length} letters, starts with "${word[0]}", ends with "${word[word.length - 1]}"`;
+    } else {
+      return `${word.length} letters, starts with "${word[0]}"`;
+    }
+  }
+  // Chat functionality methods
+  async askQuestionAboutBlank(blankIndex, questionType, currentInput = '') {
+    const blankId = `blank_${blankIndex}`;
+    return await this.chatService.askQuestion(blankId, questionType, currentInput);
+  }
+  getSuggestedQuestionsForBlank(blankIndex) {
+    const blankId = `blank_${blankIndex}`;
+    return this.chatService.getSuggestedQuestions(blankId);
+  }
+  // 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 gap-1">
+          <input type="text"
+            class="cloze-input"
+            data-blank-index="${index}"
+            placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
+            style="width: ${Math.max(80, blank.originalWord.length * 12)}px;">
+          <button id="${chatButtonId}"
+            class="chat-button text-blue-500 hover:text-blue-700 text-sm"
+            data-blank-index="${index}"
+            title="Ask question about this word">
+            💬
+          </button>
+        </span>`;
+      html = html.replace(`___BLANK_${index}___`, inputHtml);
+    });
+    return html;
+  }
+}
+export default ClozeGame;

src/conversationManager.js ADDED Viewed

	@@ -0,0 +1,237 @@

+// Chat service for contextual, personalized hints
+class ChatService {
+  constructor(aiService) {
+    this.aiService = aiService;
+    this.conversations = new Map(); // blankId -> conversation history
+    this.wordContexts = new Map(); // blankId -> detailed context
+    this.blankQuestions = new Map(); // blankId -> Set of used question types (per-blank tracking)
+    this.currentLevel = 1; // Track current difficulty level
+    // Distinct, non-overlapping question set
+    this.questions = [
+      { text: "What is its part of speech?", type: "part_of_speech" },
+      { text: "What role does it play in the sentence?", type: "sentence_role" },
+      { text: "Is it abstract or a person, place, or thing?", type: "word_category" },
+      { text: "What is a synonym for this word?", type: "synonym" }
+    ];
+  }
+  // Initialize chat context for a specific blank
+  initializeWordContext(blankId, wordData) {
+    const context = {
+      blankId,
+      targetWord: wordData.originalWord,
+      sentence: wordData.sentence,
+      fullPassage: wordData.passage,
+      bookTitle: wordData.bookTitle,
+      author: wordData.author,
+      wordPosition: wordData.wordPosition,
+      difficulty: wordData.difficulty,
+      previousAttempts: [],
+      userQuestions: [],
+      hintLevel: 0 // Progressive hint difficulty
+    };
+    this.wordContexts.set(blankId, context);
+    this.conversations.set(blankId, []);
+    return context;
+  }
+  // Per-blank question tracking with level awareness
+  async askQuestion(blankId, questionType, userInput = '') {
+    const context = this.wordContexts.get(blankId);
+    if (!context) {
+      return {
+        error: true,
+        message: "Context not found for this word."
+      };
+    }
+    // Mark question as used for this specific blank
+    if (!this.blankQuestions.has(blankId)) {
+      this.blankQuestions.set(blankId, new Set());
+    }
+    this.blankQuestions.get(blankId).add(questionType);
+    try {
+      const response = await this.generateSpecificResponse(context, questionType, userInput);
+      return {
+        success: true,
+        response: response,
+        questionType: questionType
+      };
+    } catch (error) {
+      console.error('Chat error:', error);
+      return this.getSimpleFallback(context, questionType);
+    }
+  }
+  // Generate specific response based on question type
+  async generateSpecificResponse(context, questionType, userInput) {
+    const word = context.targetWord;
+    const sentence = context.sentence;
+    const bookTitle = context.bookTitle;
+    const author = context.author;
+    try {
+      // Use the enhanced contextual hint generation
+      const aiResponse = await this.aiService.generateContextualHint(
+        questionType,
+        word,
+        sentence,
+        bookTitle,
+        author
+      );
+      if (aiResponse && typeof aiResponse === 'string' && aiResponse.length > 10) {
+        return aiResponse;
+      }
+    } catch (error) {
+      console.warn('AI response failed:', error);
+    }
+    // Fallback - return enhanced fallback response
+    return this.aiService.getEnhancedFallback(questionType, word, sentence, bookTitle);
+  }
+  // Build focused prompt for specific question types with level awareness
+  buildFocusedPrompt(context, questionType, userInput) {
+    const { sentence, bookTitle, author, targetWord } = context;
+    const level = this.currentLevel;
+    // Level 1 questions - Basic identification
+    if (level === 1) {
+      const prompts = {
+        'basic_grammar': `What type of word (person/place/thing or action word) fits in the blank in: "${sentence}"? Keep it simple.`,
+        'letter_hint': `The missing word is "${targetWord}". Tell me it starts with "${targetWord[0]}" without revealing the full word.`,
+        'length_hint': `The missing word has ${targetWord.length} letters. Mention this fact helpfully.`,
+        'category_hint': `Is the missing word in "${sentence}" a person, place, thing, or action? Give a simple answer.`,
+        'basic_clue': `Give a very simple hint about the missing word in: "${sentence}". Make it easy to understand.`
+      };
+      return prompts[questionType] || prompts['basic_clue'];
+    }
+    // Level 2 questions - Contextual understanding
+    if (level === 2) {
+      const prompts = {
+        'grammar_analysis': `In "${bookTitle}", what part of speech (noun, verb, adjective, etc.) is needed in: "${sentence}"? Explain simply.`,
+        'contextual_meaning': `What does the missing word mean in this context from "${bookTitle}": "${sentence}"? Explain without revealing it.`,
+        'synonym_clue': `Give a synonym or similar word to the one missing in: "${sentence}". Don't reveal the exact word.`,
+        'narrative_connection': `How does the missing word connect to the story in "${bookTitle}"? Context: "${sentence}"`,
+        'emotional_context': `What feeling or mood does the missing word express in: "${sentence}"?`
+      };
+      return prompts[questionType] || prompts['contextual_meaning'];
+    }
+    // Level 3+ questions - Literary analysis
+    const prompts = {
+      'deep_grammar': `Analyze the grammatical function of the missing word in this passage from "${bookTitle}" by ${author}: "${sentence}"`,
+      'literary_analysis': `What literary significance does the missing word have in "${bookTitle}"? Context: "${sentence}"`,
+      'authorial_intent': `What would ${author} intend with the word choice here in "${bookTitle}": "${sentence}"?`,
+      'comparative_analysis': `How does this word usage compare to similar passages in "${bookTitle}"? Context: "${sentence}"`,
+      'style_analysis': `Explain the stylistic choice of the missing word in ${author}'s writing: "${sentence}"`
+    };
+    return prompts[questionType] || prompts['literary_analysis'];
+  }
+  // Simple fallback responses
+  getSimpleFallback(context, questionType) {
+    // Use the enhanced fallback from HuggingFace service
+    return this.aiService.getEnhancedFallback(
+      questionType,
+      context.targetWord,
+      context.sentence,
+      context.bookTitle
+    );
+  }
+  // Helper method to get words before the target word
+  getWordsBefore(sentence, targetWord, count = 3) {
+    const words = sentence.split(/\s+/);
+    const targetIndex = words.findIndex(word =>
+      word.toLowerCase().replace(/[^\w]/g, '') === targetWord.toLowerCase()
+    );
+    if (targetIndex === -1) return "";
+    const startIndex = Math.max(0, targetIndex - count);
+    return words.slice(startIndex, targetIndex).join(' ');
+  }
+  // Helper method to get words after the target word
+  getWordsAfter(sentence, targetWord, count = 3) {
+    const words = sentence.split(/\s+/);
+    const targetIndex = words.findIndex(word =>
+      word.toLowerCase().replace(/[^\w]/g, '') === targetWord.toLowerCase()
+    );
+    if (targetIndex === -1) return "";
+    const endIndex = Math.min(words.length, targetIndex + count + 1);
+    return words.slice(targetIndex + 1, endIndex).join(' ');
+  }
+  // Process AI response to ensure quality and safety
+  processAIResponse(rawResponse, targetWord) {
+    let processed = rawResponse.trim();
+    // Remove any accidental word reveals
+    const variations = this.generateWordVariations(targetWord);
+    variations.forEach(variation => {
+      const regex = new RegExp(`\\b${variation}\\b`, 'gi');
+      processed = processed.replace(regex, '[the word]');
+    });
+    return processed;
+  }
+  // Generate word variations to avoid accidental reveals
+  generateWordVariations(word) {
+    const variations = [word.toLowerCase()];
+    // Add common variations
+    if (word.endsWith('ing')) {
+      variations.push(word.slice(0, -3));
+    }
+    if (word.endsWith('ed')) {
+      variations.push(word.slice(0, -2));
+    }
+    if (word.endsWith('s')) {
+      variations.push(word.slice(0, -1));
+    }
+    return variations;
+  }
+  // Clear conversations and reset tracking
+  clearConversations() {
+    this.conversations.clear();
+    this.wordContexts.clear();
+    this.blankQuestions.clear();
+  }
+  // Set current level for question selection
+  setLevel(level) {
+    this.currentLevel = level;
+  }
+  // Get suggested questions for a specific blank
+  getSuggestedQuestions(blankId) {
+    const usedQuestions = this.blankQuestions.get(blankId) || new Set();
+    return this.questions.map(q => ({
+      ...q,
+      used: usedQuestions.has(q.type)
+    }));
+  }
+  // Reset for new game (clears everything including across-game state)
+  resetForNewGame() {
+    this.clearConversations();
+    this.currentLevel = 1;
+  }
+}
+export default ChatService;

src/styles.css ADDED Viewed

	@@ -0,0 +1,356 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Chat functionality styles */
+.typing-dots span {
+  animation: typing 1.5s infinite;
+}
+.typing-dots span:nth-child(2) {
+  animation-delay: 0.5s;
+}
+.typing-dots span:nth-child(3) {
+  animation-delay: 1s;
+}
+@keyframes typing {
+  0%, 60%, 100% { opacity: 0.3; }
+  30% { opacity: 1; }
+}
+.chat-button {
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+.chat-button:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+  transform: scale(1.1);
+}
+.suggestion-btn {
+  transition: all 0.2s ease;
+}
+.suggestion-btn:hover {
+  transform: translateY(-1px);
+}
+/* Answer revelation styles */
+.revealed-answer {
+  background-color: #fef3c7 !important;
+  font-weight: bold !important;
+  color: #92400e !important;
+  border: 2px solid #f59e0b !important;
+}
+/* Correct and incorrect answer styles */
+.cloze-input.correct {
+  background-color: #dcfce7 !important;
+  border-color: #16a34a !important;
+  color: #15803d !important;
+  font-weight: bold !important;
+}
+.cloze-input.incorrect {
+  background-color: #fef2f2 !important;
+  border-color: #dc2626 !important;
+  color: #dc2626 !important;
+  font-weight: bold !important;
+}
+.cloze-input:disabled {
+  opacity: 0.8;
+  cursor: not-allowed;
+}
+/* Custom typewriter color scheme */
+:root {
+  --aged-paper: #faf7f0;
+  --aged-paper-dark: #f5f1e8;
+  --aged-paper-light: #fefcf7;
+  --typewriter-ink: #2c2c2c;
+  --typewriter-ribbon: #8b5cf6;
+  --paper-shadow: rgba(0, 0, 0, 0.08);
+}
+@layer base {
+  body {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    background-color: var(--aged-paper);
+    color: var(--typewriter-ink);
+    letter-spacing: 0.05em;
+    background-image:
+      radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.02) 0%, transparent 50%),
+      radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
+  }
+}
+@layer components {
+  .typewriter-text {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    color: var(--typewriter-ink);
+    letter-spacing: 0.1em;
+    word-spacing: 0.1em;
+    line-height: 1.8;
+  }
+  .typewriter-subtitle {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    color: #666;
+    letter-spacing: 0.05em;
+    font-size: 0.95rem;
+  }
+  .paper-sheet {
+    background-color: var(--aged-paper-light);
+    border: 1px solid rgba(139, 92, 246, 0.1);
+    box-shadow:
+      0 2px 8px var(--paper-shadow),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    position: relative;
+  }
+  .paper-sheet::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent,
+      transparent 23px,
+      rgba(139, 92, 246, 0.03) 23px,
+      rgba(139, 92, 246, 0.03) 24px
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+  .paper-content {
+    position: relative;
+    z-index: 2;
+  }
+  .cloze-input {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid black;
+    color: var(--typewriter-ink);
+    text-align: center;
+    outline: none;
+    padding: 2px 4px;
+    margin: 0 2px;
+    min-width: 3ch;
+    width: auto;
+    letter-spacing: 0.05em;
+    font-size: inherit;
+    line-height: inherit;
+    transition: all 0.2s ease;
+  }
+  .cloze-input:focus {
+    border-bottom-color: black;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  .cloze-input.correct {
+    border-bottom-color: #10b981;
+    background-color: rgba(16, 185, 129, 0.1);
+  }
+  .cloze-input.incorrect {
+    border-bottom-color: #ef4444;
+    background-color: rgba(239, 68, 68, 0.1);
+  }
+  .cloze-input::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+    font-style: italic;
+  }
+  .typewriter-button {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    min-width: 120px;
+    min-height: 42px;
+    padding: 8px 16px;
+    background-color: var(--aged-paper-dark);
+    color: var(--typewriter-ink);
+    border: 2px solid black;
+    border-radius: 4px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    box-shadow:
+      0 4px 0 rgba(0, 0, 0, 0.3),
+      0 6px 12px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+  }
+  .typewriter-button:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.05);
+    transform: translateY(-1px);
+    box-shadow:
+      0 5px 0 rgba(0, 0, 0, 0.3),
+      0 8px 16px rgba(0, 0, 0, 0.15);
+  }
+  .typewriter-button:active:not(:disabled) {
+    transform: translateY(2px);
+    box-shadow:
+      0 2px 0 rgba(0, 0, 0, 0.3),
+      0 3px 6px rgba(0, 0, 0, 0.1);
+  }
+  .typewriter-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: translateY(2px);
+    box-shadow:
+      0 2px 0 rgba(0, 0, 0, 0.2),
+      0 3px 6px rgba(0, 0, 0, 0.05);
+  }
+  .typewriter-button:focus {
+    outline: none;
+    box-shadow:
+      0 4px 0 rgba(0, 0, 0, 0.3),
+      0 6px 12px rgba(0, 0, 0, 0.1),
+      0 0 0 3px rgba(0, 0, 0, 0.2);
+  }
+  .prose {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    letter-spacing: 0.05em;
+    word-spacing: 0.1em;
+    color: var(--typewriter-ink);
+    overflow-wrap: break-word;
+  }
+  .prose p {
+    margin-bottom: 1.5rem;
+    text-align: justify;
+  }
+  .biblio-info {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-size: 0.85rem;
+    color: #666;
+    letter-spacing: 0.03em;
+    font-style: italic;
+  }
+  .context-box {
+    background-color: rgba(245, 158, 11, 0.08);
+    border-left: 4px solid #f59e0b;
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-size: 0.9rem;
+    letter-spacing: 0.03em;
+    line-height: 1.6;
+  }
+  .hints-box {
+    background-color: rgba(245, 158, 11, 0.08);
+    border-left: 4px solid #f59e0b;
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-size: 0.9rem;
+    letter-spacing: 0.03em;
+    line-height: 1.6;
+  }
+  .round-badge {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: #666;
+    border: 1px solid rgba(245, 158, 11, 0.2);
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+  }
+  .loading-text {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    color: #666;
+    letter-spacing: 0.05em;
+  }
+  .result-text {
+    font-family: 'Special Elite', 'Courier New', monospace;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+  }
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    .prose {
+      font-size: 1rem;
+    }
+    .typewriter-text {
+      font-size: 1.75rem;
+    }
+    .typewriter-subtitle {
+      font-size: 0.85rem;
+    }
+    .typewriter-button {
+      min-width: 100px;
+      min-height: 38px;
+      font-size: 0.9rem;
+    }
+  }
+  @media (max-width: 480px) {
+    .prose {
+      font-size: 0.95rem;
+    }
+    .typewriter-text {
+      font-size: 1.5rem;
+    }
+    .cloze-input {
+      min-width: 2.5ch;
+    }
+  }
+  /* Print styles */
+  @media print {
+    body {
+      background: white;
+      color: black;
+    }
+    .paper-sheet::before {
+      display: none;
+    }
+    .typewriter-button {
+      display: none;
+    }
+  }
+}
+/* Custom utility classes */
+@layer utilities {
+  .ink-ribbon-lines {
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent,
+      transparent 23px,
+      rgba(139, 92, 246, 0.03) 23px,
+      rgba(139, 92, 246, 0.03) 24px
+    );
+  }
+}