fix layout a bit and add auto-advance timer

src/main.ts

@@ -35,23 +35,16 @@ function render(): void {
     ? renderTypeBadge(q.defenderTypes[0], 'large')
     : `${renderTypeBadge(q.defenderTypes[0], 'large')} / ${renderTypeBadge(q.defenderTypes[1], 'large')}`;
 
-  const optionsHtml = options.map((opt, i) => {
+  const optionsHtml = state.showResult ? '' : options.map((opt, i) => {
     let cls = 'option-btn';
-    if (state.showResult) {
-      if (opt.value === q.correctAnswer) {
-        cls += ' correct';
-      } else if (i === state.selectedIndex && !state.isCorrect) {
-        cls += ' wrong';
-      }
-    } else if (i === state.selectedIndex) {
+    if (i === state.selectedIndex) {
       cls += ' selected';
     }
     
     const shortcut = `${startKey + i}`;
-    const disabled = state.showResult ? 'disabled' : '';
     
     return `
-      <button class="${cls}" data-index="${i}" ${disabled}>
+      <button class="${cls}" data-index="${i}">
         <span class="option-key">${shortcut}</span>
         <span class="option-label">${opt.label}</span>
       </button>
@@ -65,7 +58,7 @@ function render(): void {
         : `<div class="result-title">✗ Wrong</div>
            <div class="explanation">${game.getExplanation()}</div>`
       }
-      <button class="next-btn">Next Question (Enter)</button>
+      ${!state.isCorrect ? '<button class="next-btn">Continue (Enter)</button>' : ''}
     </div>
   ` : '';
 
@@ -100,12 +93,11 @@ function render(): void {
 
       <div class="options">
         ${optionsHtml}
+        ${resultHtml}
       </div>
 
-      ${resultHtml}
-
       <footer class="footer">
-        <span class="hint">Press ${startKey}-${startKey + options.length - 1} to select • Enter to continue</span>
+        <span class="hint">${state.showResult && !state.isCorrect ? 'Press Enter to continue' : `Press ${startKey}-${startKey + options.length - 1} to select`}</span>
       </footer>
     </div>
   `;