add text input option to initials modal for easier entry

- adds text input field alongside existing arcade controls
- both input methods stay synchronized
- improves mobile usability and accessibility
- maintains vintage aesthetic with arcade-style fallback

src/leaderboardUI.js

@@ -182,6 +182,18 @@ export class LeaderboardUI {
         <div class="initials-content">
           <p class="initials-prompt">Enter or update your initials:</p>
 
+          <!-- Text Input Method -->
+          <div class="text-input-section">
+            <input type="text" id="initials-text-input" class="initials-text-input" maxlength="3" value="${this.initials.join('')}" placeholder="ABC">
+            <p class="input-help">Type your 3-letter initials directly</p>
+          </div>
+
+          <!-- Divider -->
+          <div class="input-divider">
+            <span>or use arcade controls</span>
+          </div>
+
+          <!-- Arcade Style Method -->
           <div class="initials-slots">
             ${this.initials.map((letter, index) => `
               <div class="initial-slot ${index === 0 ? 'active' : ''}" data-slot="${index}">
@@ -218,6 +230,12 @@ export class LeaderboardUI {
     // from immediately triggering the modal's submit handler
     setTimeout(() => {
       this.setupInitialsEventListeners();
+      // Focus the text input for easier typing
+      const textInput = this.initialsModal.querySelector('#initials-text-input');
+      if (textInput) {
+        textInput.focus();
+        textInput.select(); // Select all text for easy overwriting
+      }
       // Enable submission after a longer delay to ensure user has time to interact
       setTimeout(() => {
         this.canSubmitInitials = true;
@@ -250,6 +268,16 @@ export class LeaderboardUI {
    * Setup event listeners for initials entry
    */
   setupInitialsEventListeners() {
+    // Text input field
+    const textInput = this.initialsModal.querySelector('#initials-text-input');
+    textInput.addEventListener('input', (e) => {
+      const value = e.target.value.toUpperCase().slice(0, 3);
+      e.target.value = value;
+      
+      // Update arcade slots to match text input
+      this.updateInitialsFromText(value);
+    });
+
     // Arrow buttons
     this.initialsModal.querySelectorAll('.arrow-up, .arrow-down').forEach(button => {
       button.addEventListener('click', (e) => {
@@ -276,6 +304,22 @@ export class LeaderboardUI {
 
     // Keyboard controls
     this.initialsKeyHandler = (e) => {
+      // If focus is on text input, handle differently
+      if (e.target.id === 'initials-text-input') {
+        switch(e.key) {
+          case 'Enter':
+            e.preventDefault();
+            this.submitInitials();
+            break;
+          case 'Escape':
+            e.preventDefault();
+            this.hideInitialsEntry();
+            break;
+        }
+        return;
+      }
+
+      // Arcade controls when not focused on text input
       switch(e.key) {
         case 'ArrowUp':
           e.preventDefault();
@@ -325,6 +369,7 @@ export class LeaderboardUI {
 
     this.initials[slot] = String.fromCharCode(newChar);
     this.updateInitialsDisplay();
+    this.updateTextFromInitials();
   }
 
   /**
@@ -337,6 +382,26 @@ export class LeaderboardUI {
     });
   }
 
+  /**
+   * Update arcade slots from text input
+   */
+  updateInitialsFromText(text) {
+    // Pad with 'A' if less than 3 characters
+    const paddedText = text.padEnd(3, 'A');
+    this.initials = paddedText.split('');
+    this.updateInitialsDisplay();
+  }
+
+  /**
+   * Update text input from arcade slots
+   */
+  updateTextFromInitials() {
+    const textInput = this.initialsModal.querySelector('#initials-text-input');
+    if (textInput) {
+      textInput.value = this.initials.join('');
+    }
+  }
+
   /**
    * Update the visual display of initials
    */

src/styles.css

@@ -446,6 +446,9 @@
     box-shadow:
       0 3px 0 rgba(0, 0, 0, 0.3),
       0 4px 8px rgba(0, 0, 0, 0.1);
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+    user-select: none;
   }
 
   .leaderboard-footer-btn:hover {
@@ -982,6 +985,67 @@
   }
 
   /* Initials Instructions */
+  /* Text Input Section */
+  .text-input-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .initials-text-input {
+    width: 120px;
+    height: 64px;
+    font-size: 32px;
+    font-weight: 700;
+    font-family: 'Courier New', monospace;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 8px;
+    background: #ffffff;
+    border: 3px solid #000000;
+    border-radius: 8px;
+    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
+    transition: all 0.2s ease;
+    margin-bottom: 8px;
+  }
+
+  .initials-text-input:focus {
+    outline: none;
+    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);
+  }
+
+  .input-help {
+    font-size: 12px;
+    color: #666;
+    margin: 0;
+    font-weight: 400;
+  }
+
+  /* Divider */
+  .input-divider {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .input-divider::before,
+  .input-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #ddd;
+  }
+
+  .input-divider span {
+    padding: 0 16px;
+  }
+
   .initials-instructions {
     margin-bottom: 24px;
     color: #000000;
@@ -1090,6 +1154,21 @@
     .initials-slots {
       gap: 12px;
     }
+
+    .initials-text-input {
+      width: 100px;
+      height: 56px;
+      font-size: 28px;
+      letter-spacing: 6px;
+    }
+
+    .input-divider {
+      font-size: 12px;
+    }
+
+    .input-help {
+      font-size: 11px;
+    }
   }
 
   /* Print styles */