fix: improve UI elements and reduce input field width

- Replace lightbulb emoji with shy fingers (👉👈) for hints section
- Replace book emoji with parchment emoji (📜) for contextualization
- Remove "classic" from literature references, use "literature" alone
- Reduce input field width calculation for better text flow
- Reduce loading transition from 1 second to 0.5 seconds

index.html

@@ -32,7 +32,7 @@
                     <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 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">

src/aiService.js

@@ -355,7 +355,7 @@ Return as JSON: {"passage1": {...}, "passage2": {...}}`
     
     if (!this.apiKey) {
       console.log('No API key, returning fallback contextualization');
-      return `📚 Practice with classic literature from ${author}'s "${title}"`;
+      return `📜 Practice with literature from ${author}'s "${title}"`;
     }
 
     try {

src/app.js

@@ -77,7 +77,7 @@ class App {
     // Show contextualization from AI agent
     this.elements.contextualization.innerHTML = `
       <div class="flex items-start gap-2">
-        <span class="text-blue-600">📚</span>
+        <span class="text-blue-600">📜</span>
         <span>${roundData.contextualization || 'Loading context...'}</span>
       </div>
     `;
@@ -222,10 +222,10 @@ class App {
         roundData = await this.game.nextRound();
       }
       
-      // Ensure loading is shown for at least 1 second
+      // Ensure loading is shown for at least half a second
       const elapsedTime = Date.now() - startTime;
-      if (elapsedTime < 1000) {
-        await new Promise(resolve => setTimeout(resolve, 1000 - elapsedTime));
+      if (elapsedTime < 500) {
+        await new Promise(resolve => setTimeout(resolve, 500 - elapsedTime));
       }
       
       this.displayRound(roundData);

src/clozeGameEngine.js

@@ -530,7 +530,7 @@ class ClozeGame {
         class="cloze-input" 
         data-blank-index="${index}" 
         placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
-        style="width: ${Math.max(70, blank.originalWord.length * 14)}px;">`;
+        style="width: ${Math.max(50, blank.originalWord.length * 10)}px;">`;
       
       html = html.replace(`___BLANK_${index}___`, inputHtml);
     });
@@ -746,7 +746,7 @@ class ClozeGame {
             class="cloze-input" 
             data-blank-index="${index}" 
             placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
-            style="width: ${Math.max(70, blank.originalWord.length * 14)}px;">
+            style="width: ${Math.max(50, blank.originalWord.length * 10)}px;">
           <button id="${chatButtonId}" 
             class="chat-button text-blue-500 hover:text-blue-700 text-sm" 
             data-blank-index="${index}"