fix level progression and leaderboard accessibility

src/app.js

@@ -50,17 +50,13 @@ class App {
 
     // Leaderboard button
     if (this.elements.leaderboardBtn) {
-      this.elements.leaderboardBtn.addEventListener('click', () => {
+      this.elements.leaderboardBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
         this.leaderboardUI.show();
       });
     }
 
-    // Allow Enter key to submit when focused on an input
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && e.target.classList.contains('cloze-input')) {
-        this.handleSubmit();
-      }
-    });
+    // Note: Enter key handling is done per-input in setupInputListeners()
   }
 
   async startNewGame() {
@@ -170,7 +166,7 @@ class App {
     if (results.passed) {
       // Check if level was just advanced
       if (results.justAdvancedLevel) {
-        message += ` ✓ Level ${results.currentLevel} unlocked!`;
+        message += ` - Level ${results.currentLevel} unlocked!`;
 
         // Check for milestone notification (every 5 levels)
         if (results.currentLevel % 5 === 0) {
@@ -180,11 +176,11 @@ class App {
         // Check for high score
         this.checkForHighScore();
       } else {
-        message += ` ✓ Passed`;
+        message += ` - Passed!`;
       }
       this.elements.result.className = 'mt-4 text-center font-semibold text-green-600';
     } else {
-      message += ` - Try again (need ${results.requiredCorrect}/${results.total})`;
+      message += ` - Failed (need ${results.requiredCorrect} correct)`;
       this.elements.result.className = 'mt-4 text-center font-semibold text-red-600';
     }
 

src/leaderboardUI.js

@@ -30,7 +30,7 @@ export class LeaderboardUI {
     this.modal.innerHTML = `
       <div class="leaderboard-modal">
         <div class="leaderboard-header">
-          <h2 class="leaderboard-title">🏆 HIGH SCORES 🏆</h2>
+          <h2 class="leaderboard-title">High Scores</h2>
           <button class="leaderboard-close" aria-label="Close leaderboard">×</button>
         </div>
 
@@ -42,11 +42,11 @@ export class LeaderboardUI {
           ${playerStats.highestLevel > 1 ? `
             <div class="leaderboard-player-stats">
               <div class="player-best">
-                Your Best: <span class="highlight">Level ${playerStats.highestLevel} (Round ${playerStats.roundAtHighestLevel})</span>
+                Your Best: <span class="highlight">Level ${playerStats.highestLevel}</span>
               </div>
               <div class="player-stats-details">
                 <div>Passages: ${playerStats.totalPassagesPassed}/${playerStats.totalPassagesAttempted} (${playerStats.successRate}%)</div>
-                <div>Longest Streak: ${playerStats.longestStreak} • Perfect Rounds: ${playerStats.perfectRounds}</div>
+                <div>Longest Streak: ${playerStats.longestStreak}</div>
               </div>
             </div>
           ` : ''}
@@ -63,6 +63,13 @@ export class LeaderboardUI {
 
     // Add event listeners
     this.modal.querySelector('.leaderboard-close').addEventListener('click', () => this.hide());
+
+    // Prevent clicks inside modal content from closing
+    this.modal.querySelector('.leaderboard-modal').addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
+    // Close on backdrop click
     this.modal.addEventListener('click', (e) => {
       if (e.target === this.modal) {
         this.hide();
@@ -100,7 +107,7 @@ export class LeaderboardUI {
         <div class="leaderboard-entry ${rankClass} ${playerClass}">
           <span class="entry-rank">#${entry.rank}</span>
           <span class="entry-initials">${entry.initials}</span>
-          <span class="entry-score">Level ${entry.level} <span class="entry-round">(Round ${entry.round})</span></span>
+          <span class="entry-score">Level ${entry.level}</span>
         </div>
       `;
     }).join('');
@@ -162,9 +169,10 @@ export class LeaderboardUI {
     this.initialsModal.innerHTML = `
       <div class="initials-modal">
         <div class="initials-header">
-          <h2 class="initials-title">🎉 NEW HIGH SCORE! 🎉</h2>
+          <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>!
+            You reached <span class="highlight">Level ${level}</span>
             <br>
             <span class="rank-text">${this.getRankText(rank)}</span>
           </div>
@@ -188,11 +196,11 @@ 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</p>
+            <p>Press Enter to confirm, ESC to cancel</p>
           </div>
 
           <button class="initials-submit typewriter-button">
-            SUBMIT
+            Submit
           </button>
         </div>
       </div>
@@ -214,10 +222,10 @@ export class LeaderboardUI {
    */
   getRankText(rank) {
     const ordinal = this.getOrdinal(rank);
-    if (rank === 1) return `🥇 ${ordinal} PLACE - TOP SCORE! 🥇`;
-    if (rank === 2) return `🥈 ${ordinal} PLACE 🥈`;
-    if (rank === 3) return `🥉 ${ordinal} PLACE 🥉`;
-    return `${ordinal} place on the leaderboard!`;
+    if (rank === 1) return `${ordinal} place - Top Score`;
+    if (rank === 2) return `${ordinal} place`;
+    if (rank === 3) return `${ordinal} place`;
+    return `${ordinal} place on the leaderboard`;
   }
 
   /**
@@ -281,6 +289,10 @@ export class LeaderboardUI {
           e.preventDefault();
           this.submitInitials();
           break;
+        case 'Escape':
+          e.preventDefault();
+          this.hideInitialsEntry();
+          break;
       }
     };
     document.addEventListener('keydown', this.initialsKeyHandler);
@@ -380,7 +392,7 @@ export class LeaderboardUI {
     successDiv.innerHTML = `
       <div class="leaderboard-modal success-message">
         <div class="success-content">
-          <h2>✓ SCORE SAVED!</h2>
+          <h2>Score Saved</h2>
           <p>Your initials have been added to the leaderboard</p>
         </div>
       </div>
@@ -409,7 +421,7 @@ export class LeaderboardUI {
     toast.className = 'milestone-toast';
     toast.innerHTML = `
       <div class="toast-content">
-        🎯 Milestone Reached: Level ${level}!
+        Milestone Reached: Level ${level}
       </div>
     `;
 

src/styles.css

@@ -426,39 +426,85 @@
     font-weight: 600;
   }
 
-  /* Responsive adjustments */
+  /* Leaderboard button in footer */
+  .leaderboard-footer-btn {
+    background: none;
+    border: none;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 1.5rem;
+    line-height: 1;
+    transition: transform 0.2s ease, filter 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .leaderboard-footer-btn:hover {
+    transform: translateY(-50%) scale(1.2);
+  }
+
+  .leaderboard-footer-btn:active {
+    transform: translateY(-50%) scale(1.05);
+  }
+
+
+  /* Mobile responsive */
+  @media (max-width: 768px) {
+    .typewriter-subtitle {
+      display: none;
+    }
+  }
+
   @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;
     }
+
+    .leaderboard-footer-btn {
+      font-size: 1.25rem;
+      padding: 6px 12px;
+      right: 12px;
+    }
   }
 
   @media (max-width: 480px) {
     .prose {
       font-size: 0.95rem;
     }
-    
+
     .typewriter-text {
       font-size: 1.5rem;
     }
-    
+
     .cloze-input {
       min-width: 2.5ch;
     }
+
+    header img {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .leaderboard-footer-btn {
+      font-size: 1.1rem;
+      padding: 4px 10px;
+      right: 8px;
+    }
   }
 
   /* Compact question buttons for chat interface */
@@ -504,6 +550,7 @@
   }
 
   .sticky-controls .controls-inner {
+    position: relative;
     max-width: 1024px;
     margin: 0 auto;
     display: flex;
@@ -575,39 +622,6 @@
     }
   }
 
-  /* Leaderboard Button Styling */
-  .typewriter-button-small {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-    padding: 8px 16px;
-    background-color: var(--aged-paper-dark);
-    color: var(--typewriter-ink);
-    border: 2px solid black;
-    border-radius: 6px;
-    font-weight: 600;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    white-space: nowrap;
-    box-shadow:
-      0 3px 0 rgba(0, 0, 0, 0.3),
-      0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .typewriter-button-small:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-    transform: translateY(-1px);
-    box-shadow:
-      0 4px 0 rgba(0, 0, 0, 0.3),
-      0 6px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .typewriter-button-small:active {
-    transform: translateY(2px);
-    box-shadow:
-      0 1px 0 rgba(0, 0, 0, 0.3),
-      0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
   /* Leaderboard Overlay */
   .leaderboard-overlay {
     position: fixed;
@@ -835,36 +849,38 @@
   }
 
   .initials-header {
-    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+    background: linear-gradient(180deg, var(--aged-paper-dark) 0%, #d4c9b3 100%);
     padding: 24px;
-    border-bottom: 3px solid black;
+    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
     text-align: center;
   }
 
   .initials-title {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    font-family: 'Special Elite', 'Courier New', monospace;
     font-size: 24px;
     font-weight: 700;
-    color: white;
+    color: var(--typewriter-ink);
     margin: 0 0 12px 0;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    letter-spacing: 1px;
   }
 
   .initials-achievement {
     font-size: 16px;
-    color: rgba(255, 255, 255, 0.95);
+    color: var(--typewriter-ink);
     line-height: 1.6;
   }
 
   .initials-achievement .highlight {
-    color: #fde68a;
+    color: #8b4513;
     font-weight: 700;
+    text-decoration: underline;
   }
 
   .rank-text {
     font-size: 14px;
-    color: #fde68a;
+    color: #666;
     font-weight: 600;
+    font-style: italic;
   }
 
   .initials-content {
@@ -895,9 +911,9 @@
   }
 
   .initial-slot.active .slot-letter {
-    border-color: #8b5cf6;
-    background: rgba(139, 92, 246, 0.1);
-    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
+    border-color: #2563eb;
+    background: #eff6ff;
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3), 0 4px 0 rgba(0, 0, 0, 0.5);
   }
 
   .slot-letter {
@@ -909,12 +925,12 @@
     font-size: 48px;
     font-weight: 700;
     font-family: 'Courier New', monospace;
-    color: var(--typewriter-ink);
-    background: var(--aged-paper-dark);
-    border: 3px solid black;
+    color: #000000;
+    background: #ffffff;
+    border: 3px solid #000000;
     border-radius: 8px;
     transition: all 0.2s ease;
-    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
   }
 
   .slot-arrows {
@@ -973,14 +989,17 @@
   }
 
   .success-content h2 {
-    font-size: 32px;
-    color: #10b981;
+    font-size: 28px;
+    color: #2d5016;
     margin-bottom: 12px;
+    font-family: 'Special Elite', 'Courier New', monospace;
+    letter-spacing: 1px;
   }
 
   .success-content p {
     font-size: 16px;
     color: #666;
+    font-family: 'Courier New', monospace;
   }
 
   /* Milestone Toast */
@@ -989,16 +1008,18 @@
     top: 20px;
     left: 50%;
     transform: translateX(-50%) translateY(-100px);
-    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-    color: white;
+    background: var(--aged-paper-dark);
+    color: var(--typewriter-ink);
     padding: 16px 24px;
-    border-radius: 12px;
-    border: 3px solid black;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    border: 3px solid rgba(0, 0, 0, 0.4);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 0 rgba(0, 0, 0, 0.2);
     z-index: 3000;
     transition: transform 0.3s ease;
     font-weight: 600;
     font-size: 18px;
+    font-family: 'Special Elite', 'Courier New', monospace;
+    letter-spacing: 0.5px;
   }
 
   .milestone-toast.visible {
@@ -1047,11 +1068,6 @@
     .initials-slots {
       gap: 12px;
     }
-
-    .typewriter-button-small {
-      font-size: 13px;
-      padding: 8px 18px;
-    }
   }
 
   /* Print styles */