fix leaderboard initials entry readability with improved contrast and light background

.gitattributes

@@ -0,0 +1,40 @@
+# Hugging Face Spaces configuration
+# Prevent leaderboard.json updates from triggering Space rebuilds
+leaderboard.json linguist-generated=true
+
+# Standard HF Spaces attributes
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

HF_LEADERBOARD_SETUP.md

@@ -1,222 +0,0 @@
-# Hugging Face Leaderboard Setup
-
-This document explains how the HF Hub leaderboard integration works and how to set it up.
-
-## Overview
-
-The leaderboard system now supports two modes:
-1. **HF Hub Mode** (persistent, shared across all users)
-2. **localStorage Mode** (fallback, local to browser)
-
-When HF Hub is available, all leaderboard entries are:
-- Saved to a HF Hub dataset repository
-- Automatically synced across all users
-- Version controlled with commit history
-- Persistent across sessions and devices
-
-## Setup Instructions
-
-### 1. Get Hugging Face Token
-
-1. Go to https://huggingface.co/settings/tokens
-2. Create a new token with **write** access
-3. Copy the token value
-
-### 2. Configure Environment Variables
-
-Create a `.env` file in the project root (copy from `.env.example`):
-
-```bash
-# Hugging Face API Token
-HF_TOKEN=hf_your_token_here
-
-# Optional: Custom repository name (defaults to zmuhls/cloze-reader-leaderboard)
-HF_LEADERBOARD_REPO=your_username/your-repo-name
-```
-
-### 3. Install Dependencies
-
-```bash
-pip install -r requirements.txt
-```
-
-This will install `huggingface-hub` along with other dependencies.
-
-### 4. Run the Server
-
-```bash
-# Production mode (with HF backend)
-make dev-python
-# OR
-python app.py
-
-# The server will:
-# 1. Check for HF_TOKEN in environment
-# 2. Create the HF dataset repository if it doesn't exist
-# 3. Initialize with empty leaderboard
-# 4. Handle all read/write operations via API endpoints
-```
-
-### 5. Test the Integration
-
-Visit `http://localhost:7860` and:
-1. Play the game to reach Level 2
-2. Enter your initials
-3. Check browser console for HF sync messages:
-   - `🔧 LEADERBOARD: Using HF Hub backend`
-   - `📤 LEADERBOARD: Saved to HF Hub`
-   - `📥 LEADERBOARD: Synced from HF Hub`
-
-## Architecture
-
-### Backend (Python)
-
-**`hf_leaderboard.py`** - HF Hub integration service
-- Creates/manages HF dataset repository
-- Handles leaderboard read/write/update operations
-- Auto-commits changes to HF Hub
-- Uses `huggingface_hub` Python library
-
-**`app.py`** - FastAPI endpoints
-- `GET /api/leaderboard` - Fetch current leaderboard
-- `POST /api/leaderboard/add` - Add new entry
-- `POST /api/leaderboard/update` - Replace entire leaderboard
-- `DELETE /api/leaderboard/clear` - Clear all entries (admin)
-
-### Frontend (JavaScript)
-
-**`src/hfLeaderboardAPI.js`** - API client
-- Communicates with FastAPI backend
-- Handles network errors gracefully
-- Provides async methods for all operations
-
-**`src/leaderboardService.js`** - Service layer (updated)
-- Checks HF availability on init
-- Syncs from HF Hub on page load
-- Saves to both HF and localStorage
-- Falls back to localStorage if HF unavailable
-
-## Data Format
-
-Leaderboard entries are stored as JSON on HF Hub:
-
-```json
-{
-  "leaderboard": [
-    {
-      "initials": "ABC",
-      "level": 5,
-      "round": 2,
-      "passagesPassed": 18,
-      "date": "2025-01-31T12:00:00.000Z"
-    }
-  ],
-  "last_updated": "2025-01-31T12:00:00.000Z",
-  "version": "1.0"
-}
-```
-
-## How It Works
-
-### On Page Load
-1. Frontend checks if backend is available (`/api/leaderboard`)
-2. If available, sets `useHF = true`
-3. Syncs leaderboard from HF Hub to localStorage
-4. User sees most recent global leaderboard
-
-### When Player Achieves High Score
-1. Entry saved to localStorage immediately (fast UI update)
-2. Entry sent to backend API (`POST /api/leaderboard/add`)
-3. Backend adds entry to HF Hub with auto-commit
-4. All other users will see updated leaderboard on next load
-
-### Fallback Behavior
-If HF backend is unavailable (no token, network error, etc.):
-- System automatically uses localStorage only
-- Leaderboard still works, just not shared
-- Console shows: `⚠️ LEADERBOARD: HF backend unavailable, using localStorage`
-
-## Viewing Your HF Dataset
-
-After first save, visit:
-```
-https://huggingface.co/datasets/YOUR_USERNAME/cloze-reader-leaderboard
-```
-
-You'll see:
-- `leaderboard.json` file
-- Commit history of all updates
-- Public leaderboard accessible to all
-
-## Production Deployment
-
-### Hugging Face Spaces
-If deploying on HF Spaces, the token is automatically available:
-```python
-# HF Spaces provides HF_TOKEN automatically
-# No .env file needed!
-```
-
-### Other Platforms (Vercel, Railway, etc.)
-Add `HF_TOKEN` to your platform's environment variables:
-- Vercel: Project Settings → Environment Variables
-- Railway: Project → Variables
-- Render: Environment → Environment Variables
-
-## Security Notes
-
-- ✅ HF Token stored securely in backend environment
-- ✅ Token never exposed to frontend/browser
-- ✅ All HF operations go through backend API
-- ✅ CORS configured for security
-- ⚠️ Leaderboard dataset should be **public** (read access for all users)
-- ⚠️ Write access controlled via backend (users can't directly modify HF dataset)
-
-## Troubleshooting
-
-### "No HF token available for writing"
-- Check `.env` file has `HF_TOKEN` or `HF_API_KEY`
-- Restart server after adding token
-- Verify token has write permissions
-
-### "Failed to create HF repo"
-- Check token permissions (need write access)
-- Verify repository name format (username/repo-name)
-- Check if repo already exists
-
-### Leaderboard not syncing
-- Check browser console for error messages
-- Verify backend is running (`http://localhost:7860/api/leaderboard`)
-- Check network tab for failed API calls
-- Ensure HF Hub is accessible (not blocked by firewall)
-
-### Backend logs show errors
-```bash
-# Check logs for detailed error messages
-python app.py
-
-# Look for:
-# ✅ "Using existing HF dataset: ..."
-# ✅ "Leaderboard saved to HF Hub: ..."
-# ❌ "Failed to upload to HF Hub: ..."
-```
-
-## Development vs Production
-
-**Local Development** (`make dev` - static server):
-- Uses localStorage only
-- No backend, no HF sync
-- Fast iteration, no setup needed
-
-**Production** (`make dev-python` - FastAPI server):
-- Uses HF Hub backend
-- Requires token and backend running
-- Shared global leaderboard
-
-## API Documentation
-
-Once server is running, visit:
-- FastAPI docs: `http://localhost:7860/docs`
-- Alternative docs: `http://localhost:7860/redoc`
-
-Interactive API testing available through Swagger UI!

app.py

@@ -30,11 +30,18 @@ app.add_middleware(
 )
 
 # Initialize HF Leaderboard Service
-hf_token = os.getenv("HF_TOKEN") or os.getenv("HF_API_KEY")
-hf_leaderboard = HFLeaderboardService(
-    repo_id=os.getenv("HF_LEADERBOARD_REPO", "zmuhls/cloze-reader-leaderboard"),
-    token=hf_token
-)
+# repo_id will auto-detect from SPACE_ID env var (set automatically in HF Spaces)
+# For local testing, you can set SPACE_ID manually or pass repo_id explicitly
+hf_token = os.getenv("HF_TOKEN")
+try:
+    hf_leaderboard = HFLeaderboardService(
+        repo_id=os.getenv("SPACE_ID"),  # Auto-detect Space ID
+        token=hf_token
+    )
+except ValueError as e:
+    logger.warning(f"Could not initialize HF Leaderboard Service: {e}")
+    logger.warning("Leaderboard will use localStorage fallback only")
+    hf_leaderboard = None
 
 # Pydantic models for API
 class LeaderboardEntry(BaseModel):
@@ -87,6 +94,13 @@ async def get_leaderboard():
     """
     Get current leaderboard data from HF Hub
     """
+    if not hf_leaderboard:
+        return {
+            "success": True,
+            "leaderboard": [],
+            "message": "HF leaderboard not available (using localStorage only)"
+        }
+
     try:
         leaderboard = hf_leaderboard.get_leaderboard()
         return {
@@ -104,6 +118,9 @@ async def add_leaderboard_entry(entry: LeaderboardEntry):
     """
     Add new entry to leaderboard
     """
+    if not hf_leaderboard:
+        raise HTTPException(status_code=503, detail="HF leaderboard not available")
+
     try:
         success = hf_leaderboard.add_entry(entry.dict())
         if success:
@@ -125,6 +142,9 @@ async def update_leaderboard(entries: List[LeaderboardEntry]):
     """
     Update entire leaderboard (replace all data)
     """
+    if not hf_leaderboard:
+        raise HTTPException(status_code=503, detail="HF leaderboard not available")
+
     try:
         success = hf_leaderboard.update_leaderboard([e.dict() for e in entries])
         if success:
@@ -146,6 +166,9 @@ async def clear_leaderboard():
     """
     Clear all leaderboard data (admin only)
     """
+    if not hf_leaderboard:
+        raise HTTPException(status_code=503, detail="HF leaderboard not available")
+
     try:
         success = hf_leaderboard.clear_leaderboard()
         if success:

hf_leaderboard.py

@@ -7,7 +7,7 @@ import json
 import os
 from datetime import datetime
 from typing import List, Dict, Optional
-from huggingface_hub import HfApi, hf_hub_download, HfFolder
+from huggingface_hub import HfApi, hf_hub_download, CommitOperationAdd
 import logging
 
 logger = logging.getLogger(__name__)
@@ -16,57 +16,36 @@ logger = logging.getLogger(__name__)
 class HFLeaderboardService:
     """
     Service for managing leaderboard data on Hugging Face Hub
-    Stores leaderboard as a JSON file in a HF dataset
+    Stores leaderboard as a JSON file in the current HF Space repository
     """
 
-    def __init__(self, repo_id: str = "zmuhls/cloze-reader-leaderboard", token: Optional[str] = None):
+    def __init__(self, repo_id: Optional[str] = None, token: Optional[str] = None):
         """
         Initialize HF Leaderboard Service
 
         Args:
             repo_id: HF Hub repository ID (format: username/repo-name)
+                    If not provided, uses SPACE_ID env var (auto-set in HF Spaces)
             token: HF API token (if not provided, uses HF_TOKEN env var)
         """
-        self.repo_id = repo_id
-        self.token = token or os.getenv("HF_TOKEN") or os.getenv("HF_API_KEY")
+        # Use SPACE_ID if available (automatically set in HF Spaces)
+        self.repo_id = repo_id or os.getenv("SPACE_ID")
+        if not self.repo_id:
+            raise ValueError("No repo_id provided and SPACE_ID env var not set. Cannot determine target repository.")
+
+        self.token = token or os.getenv("HF_TOKEN")
         self.api = HfApi()
         self.leaderboard_file = "leaderboard.json"
+        self.repo_type = "space"  # Store in Space repo, not separate dataset
 
         if not self.token:
             logger.warning("No HF token provided. Read-only mode (if repo is public)")
 
-        # Ensure repo exists
-        self._ensure_repo_exists()
-
-    def _ensure_repo_exists(self):
-        """Create the HF dataset repository if it doesn't exist"""
-        if not self.token:
-            return
-
-        try:
-            # Try to get repo info
-            self.api.repo_info(repo_id=self.repo_id, repo_type="dataset", token=self.token)
-            logger.info(f"Using existing HF dataset: {self.repo_id}")
-        except Exception as e:
-            # Repo doesn't exist, create it
-            try:
-                self.api.create_repo(
-                    repo_id=self.repo_id,
-                    repo_type="dataset",
-                    token=self.token,
-                    private=False,
-                    exist_ok=True
-                )
-                logger.info(f"Created HF dataset: {self.repo_id}")
-
-                # Initialize with empty leaderboard
-                self._save_to_hub([])
-            except Exception as create_error:
-                logger.error(f"Failed to create HF repo: {create_error}")
+        logger.info(f"HF Leaderboard Service initialized for Space: {self.repo_id}")
 
     def _save_to_hub(self, data: List[Dict]):
         """
-        Save leaderboard data to HF Hub
+        Save leaderboard data to HF Hub using best practice commit pattern
 
         Args:
             data: List of leaderboard entries
@@ -74,7 +53,7 @@ class HFLeaderboardService:
         if not self.token:
             raise ValueError("No HF token available for writing")
 
-        # Create temporary file
+        # Create temporary file with leaderboard data
         temp_file = f"/tmp/{self.leaderboard_file}"
         with open(temp_file, "w") as f:
             json.dump({
@@ -83,19 +62,26 @@ class HFLeaderboardService:
                 "version": "1.0"
             }, f, indent=2)
 
-        # Upload to HF Hub
+        # Commit to HF Hub using best practice pattern
         try:
-            self.api.upload_file(
-                path_or_fileobj=temp_file,
-                path_in_repo=self.leaderboard_file,
+            operations = [
+                CommitOperationAdd(
+                    path_or_fileobj=temp_file,
+                    path_in_repo=self.leaderboard_file
+                )
+            ]
+
+            self.api.create_commit(
                 repo_id=self.repo_id,
-                repo_type="dataset",
-                token=self.token,
-                commit_message=f"Update leaderboard - {datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S')} UTC"
+                operations=operations,
+                commit_message=f"update leaderboard - {datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S')} utc",
+                repo_type=self.repo_type,
+                token=self.token
             )
+
             logger.info(f"Leaderboard saved to HF Hub: {self.repo_id}")
         except Exception as e:
-            logger.error(f"Failed to upload to HF Hub: {e}")
+            logger.error(f"Failed to commit to HF Hub: {e}")
             raise
         finally:
             # Clean up temp file
@@ -114,7 +100,7 @@ class HFLeaderboardService:
             file_path = hf_hub_download(
                 repo_id=self.repo_id,
                 filename=self.leaderboard_file,
-                repo_type="dataset",
+                repo_type=self.repo_type,
                 token=self.token
             )
 

src/aiService.js

@@ -352,22 +352,46 @@ Passage: "${passage}"`
           }
           
           if (Array.isArray(words)) {
-            // Validate word lengths based on level
+            // Create passage word array with position and capitalization info (matches clozeGameEngine logic)
+            const passageWords = passage.split(/\s+/);
+            const passageWordMap = new Map();
+
+            passageWords.forEach((word, idx) => {
+              const cleanOriginal = word.replace(/[^\w]/g, '');
+              const cleanLower = cleanOriginal.toLowerCase();
+              const isCapitalized = cleanOriginal.length > 0 && cleanOriginal[0] === cleanOriginal[0].toUpperCase();
+
+              // Only track non-capitalized words after position 10 (matches game engine constraints)
+              if (!isCapitalized && idx >= 10) {
+                if (!passageWordMap.has(cleanLower)) {
+                  passageWordMap.set(cleanLower, []);
+                }
+                passageWordMap.get(cleanLower).push(idx);
+              }
+            });
+
+            // Validate word lengths based on level and passage presence
             const validWords = words.filter(word => {
               // First check if the word contains at least one letter
               if (!/[a-zA-Z]/.test(word)) {
                 console.log(`❌ Rejecting non-alphabetic word: "${word}"`);
                 return false;
               }
-              
+
               const cleanWord = word.replace(/[^a-zA-Z]/g, '');
-              
+
               // If cleanWord is empty after removing non-letters, reject
               if (cleanWord.length === 0) {
                 console.log(`❌ Rejecting word with no letters: "${word}"`);
                 return false;
               }
-              
+
+              // Check if word exists as non-capitalized word after position 10 (matches game engine)
+              if (!passageWordMap.has(cleanWord.toLowerCase())) {
+                console.log(`❌ Rejecting word not matchable in passage: "${word}" (capitalized or in first 10 words)`);
+                return false;
+              }
+
               // Check length constraints
               if (level <= 2) {
                 return cleanWord.length >= 4 && cleanWord.length <= 7;
@@ -391,22 +415,47 @@ Passage: "${passage}"`
           const matches = content.match(/"([^"]+)"/g);
           if (matches) {
             const words = matches.map(m => m.replace(/"/g, ''));
-            // Validate word lengths
+
+            // Create passage word array with position and capitalization info (matches clozeGameEngine logic)
+            const passageWords = passage.split(/\s+/);
+            const passageWordMap = new Map();
+
+            passageWords.forEach((word, idx) => {
+              const cleanOriginal = word.replace(/[^\w]/g, '');
+              const cleanLower = cleanOriginal.toLowerCase();
+              const isCapitalized = cleanOriginal.length > 0 && cleanOriginal[0] === cleanOriginal[0].toUpperCase();
+
+              // Only track non-capitalized words after position 10 (matches game engine constraints)
+              if (!isCapitalized && idx >= 10) {
+                if (!passageWordMap.has(cleanLower)) {
+                  passageWordMap.set(cleanLower, []);
+                }
+                passageWordMap.get(cleanLower).push(idx);
+              }
+            });
+
+            // Validate word lengths and passage presence
             const validWords = words.filter(word => {
               // First check if the word contains at least one letter
               if (!/[a-zA-Z]/.test(word)) {
                 console.log(`❌ Rejecting non-alphabetic word: "${word}"`);
                 return false;
               }
-              
+
               const cleanWord = word.replace(/[^a-zA-Z]/g, '');
-              
+
               // If cleanWord is empty after removing non-letters, reject
               if (cleanWord.length === 0) {
                 console.log(`❌ Rejecting word with no letters: "${word}"`);
                 return false;
               }
-              
+
+              // Check if word exists as non-capitalized word after position 10 (matches game engine)
+              if (!passageWordMap.has(cleanWord.toLowerCase())) {
+                console.log(`❌ Rejecting word not matchable in passage: "${word}" (capitalized or in first 10 words)`);
+                return false;
+              }
+
               // Check length constraints
               if (level <= 2) {
                 return cleanWord.length >= 4 && cleanWord.length <= 7;
@@ -602,29 +651,53 @@ Return JSON: {"passage1": {"words": [${blanksPerPassage} words], "context": "one
         parsed.passage1.words = parsed.passage1.words.filter(word => word && word.trim() !== '');
         parsed.passage2.words = parsed.passage2.words.filter(word => word && word.trim() !== '');
         
-        // Validate word lengths based on level
+        // Validate word lengths based on level and passage presence
         const validateWords = (words, passageText) => {
+          // Create passage word array with position and capitalization info (matches clozeGameEngine logic)
+          const passageWords = passageText.split(/\s+/);
+          const passageWordMap = new Map();
+
+          passageWords.forEach((word, idx) => {
+            const cleanOriginal = word.replace(/[^\w]/g, '');
+            const cleanLower = cleanOriginal.toLowerCase();
+            const isCapitalized = cleanOriginal.length > 0 && cleanOriginal[0] === cleanOriginal[0].toUpperCase();
+
+            // Only track non-capitalized words after position 10 (matches game engine constraints)
+            if (!isCapitalized && idx >= 10) {
+              if (!passageWordMap.has(cleanLower)) {
+                passageWordMap.set(cleanLower, []);
+              }
+              passageWordMap.get(cleanLower).push(idx);
+            }
+          });
+
           return words.filter(word => {
             // First check if the word contains at least one letter
             if (!/[a-zA-Z]/.test(word)) {
               console.log(`❌ Rejecting non-alphabetic word: "${word}"`);
               return false;
             }
-            
+
             const cleanWord = word.replace(/[^a-zA-Z]/g, '');
-            
+
             // If cleanWord is empty after removing non-letters, reject
             if (cleanWord.length === 0) {
               console.log(`❌ Rejecting word with no letters: "${word}"`);
               return false;
             }
-            
+
+            // Check if word exists as non-capitalized word after position 10 (matches game engine)
+            if (!passageWordMap.has(cleanWord.toLowerCase())) {
+              console.log(`❌ Rejecting word not matchable in passage: "${word}" (capitalized or in first 10 words)`);
+              return false;
+            }
+
             // Check if word appears in all caps in the passage (like "VOLUME")
             if (passageText.includes(word.toUpperCase()) && word === word.toUpperCase()) {
               console.log(`Skipping all-caps word: ${word}`);
               return false;
             }
-            
+
             // Check length constraints
             if (level <= 2) {
               return cleanWord.length >= 4 && cleanWord.length <= 7;

src/app.js

@@ -339,25 +339,19 @@ class App {
     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}`);
-      }
+
+      // Always show initials entry when achieving a high score
+      // Pre-fills with previous initials if available, allowing changes
+      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}`);
+        }
+      );
     }
   }
 }

src/leaderboardUI.js

@@ -170,7 +170,6 @@ export class LeaderboardUI {
       <div class="initials-modal">
         <div class="initials-header">
           <h2 class="initials-title">New High Score</h2>
-          <button class="leaderboard-close" aria-label="Close without saving">×</button>
           <div class="initials-achievement">
             You reached <span class="highlight">Level ${level}</span>
             <br>
@@ -179,7 +178,7 @@ export class LeaderboardUI {
         </div>
 
         <div class="initials-content">
-          <p class="initials-prompt">Enter your initials:</p>
+          <p class="initials-prompt">Enter or update your initials:</p>
 
           <div class="initials-slots">
             ${this.initials.map((letter, index) => `
@@ -196,7 +195,7 @@ export class LeaderboardUI {
           <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, ESC to cancel</p>
+            <p>Press Enter to submit</p>
           </div>
 
           <button class="initials-submit typewriter-button">

src/styles.css

@@ -866,7 +866,7 @@
   }
 
   .initials-header {
-    background: linear-gradient(180deg, var(--aged-paper-dark) 0%, #d4c9b3 100%);
+    background: linear-gradient(180deg, #f5f1e8 0%, #e8dcc8 100%);
     padding: 24px;
     border-bottom: 3px solid rgba(0, 0, 0, 0.3);
     text-align: center;
@@ -874,41 +874,43 @@
 
   .initials-title {
     font-family: 'Special Elite', 'Courier New', monospace;
-    font-size: 24px;
+    font-size: 26px;
     font-weight: 700;
-    color: var(--typewriter-ink);
+    color: #000000;
     margin: 0 0 12px 0;
     letter-spacing: 1px;
   }
 
   .initials-achievement {
-    font-size: 16px;
-    color: var(--typewriter-ink);
+    font-size: 17px;
+    color: #1a1a1a;
     line-height: 1.6;
+    font-weight: 500;
   }
 
   .initials-achievement .highlight {
-    color: #8b4513;
+    color: #7d3c00;
     font-weight: 700;
     text-decoration: underline;
   }
 
   .rank-text {
-    font-size: 14px;
-    color: #666;
+    font-size: 16px;
+    color: #2c2c2c;
     font-weight: 600;
-    font-style: italic;
+    font-style: normal;
   }
 
   .initials-content {
     padding: 32px 24px;
     text-align: center;
+    background: var(--aged-paper-light);
   }
 
   .initials-prompt {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--typewriter-ink);
+    font-size: 20px;
+    font-weight: 700;
+    color: #000000;
     margin-bottom: 24px;
   }
 
@@ -982,20 +984,23 @@
   /* Initials Instructions */
   .initials-instructions {
     margin-bottom: 24px;
-    color: #666;
-    font-size: 13px;
-    line-height: 1.6;
+    color: #000000;
+    font-size: 15px;
+    line-height: 1.7;
+    font-weight: 600;
   }
 
   .initials-instructions p {
-    margin: 4px 0;
+    margin: 6px 0;
   }
 
   .initials-submit {
     width: 100%;
     max-width: 200px;
     min-height: 48px;
-    font-size: 16px;
+    font-size: 17px;
+    font-weight: 700;
+    color: #000000 !important;
   }
 
   /* Success Message */