improve: enhance welcome overlay styling and timing

- Always show overlay regardless of previous views
- Center image with flexbox wrapper
- Add high contrast button styling (dark background, white text)
- Show overlay immediately before loading, not after
- Remove dependency on localStorage for showing overlay

src/app.js

@@ -29,15 +29,13 @@ class App {
 
   async initialize() {
     try {
+      // Show welcome overlay immediately before loading
+      this.welcomeOverlay.show();
+      
       this.showLoading(true);
       await this.game.initialize();
       await this.startNewGame();
       this.showLoading(false);
-      
-      // Show welcome overlay for first-time users
-      setTimeout(() => {
-        this.welcomeOverlay.show();
-      }, 500);
     } catch (error) {
       console.error('Failed to initialize app:', error);
       this.showError('Failed to load the game. Please refresh and try again.');

src/styles.css

@@ -89,6 +89,21 @@
 .welcome-content p {
   margin: 0 0 16px 0;
 }
+
+.welcome-overlay .typewriter-button {
+  background: #1f2937;
+  color: white;
+  border: 2px solid #374151;
+  padding: 12px 24px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.welcome-overlay .typewriter-button:hover {
+  background: #374151;
+  border-color: #4b5563;
+  transform: translateY(-1px);
+}
 .cloze-input.correct {
   background-color: #dcfce7 !important;
   border-color: #16a34a !important;

src/welcomeOverlay.js

@@ -7,7 +7,7 @@ class WelcomeOverlay {
 
   show() {
     console.log('WelcomeOverlay.show() called, hasBeenShown:', this.hasBeenShown);
-    if (this.hasBeenShown) return;
+    // Always show overlay regardless of previous views
     
     this.isVisible = true;
     const overlay = this.createOverlay();
@@ -34,9 +34,11 @@ class WelcomeOverlay {
     `;
 
     modal.innerHTML = `
-      <img src="https://raw.githubusercontent.com/zmuhls/cloze-reader/main/icon.png" 
-           alt="Cloze Reader" 
-           style="width: 64px; height: 64px; margin-bottom: 16px; border-radius: 8px;">
+      <div style="display: flex; justify-content: center; margin-bottom: 16px;">
+        <img src="https://raw.githubusercontent.com/zmuhls/cloze-reader/main/icon.png" 
+             alt="Cloze Reader" 
+             style="width: 64px; height: 64px; border-radius: 8px;">
+      </div>
       <h1 class="welcome-title">
         Cloze Reader
       </h1>