Style reading quiz feedback by result

public/reader.js

@@ -22,7 +22,12 @@
         h('h1', {}, 'Reading is closed right now'),
         h('p', {}, `The reading hours are set by this server's deployment (${access.timezone}). The library and your progress remain available.`),
         h('p', {}, `Answer five questions drawn from manga you have already read to unlock ${access.unlockMinutes} minutes of reading. There is no answer timer or retry limit.`));
-      const message = h('p', { class: 'reading-gate-message', role: 'status' });
+      const message = h('p', { class: 'reading-gate-message', role: 'status', hidden: true });
+      const setMessage = (text, tone = 'info') => {
+        message.textContent = text;
+        message.dataset.tone = tone;
+        message.hidden = !text;
+      };
       const question = h('div', { class: 'reading-gate-question' });
       const start = h('button', { class: 'btn', type: 'button' }, 'Start five-question challenge');
       const back = h('a', { class: 'btn', href: mangaUrl(P.get('m')) }, 'Back to manga');
@@ -39,22 +44,22 @@
           event.preventDefault();
           try {
             const result = await api('api/reading-quiz/answer', { m: P.get('m'), challenge, answer: input.value });
-            if (!result.correct) { message.textContent = 'Not quite. Try another spelling or answer—there is no attempt limit.'; input.select(); return; }
-            if (result.complete) { message.textContent = 'Unlocked. Opening your chapter…'; location.reload(); return; }
-            message.textContent = 'Correct.';
+            if (!result.correct) { setMessage('Not quite. Try another spelling or answer—there is no attempt limit.', 'retry'); input.select(); return; }
+            if (result.complete) { setMessage('Unlocked. Opening your chapter…', 'success'); location.reload(); return; }
+            setMessage('Correct.', 'success');
             showQuestion(result);
           } catch (error) {
-            message.textContent = error.message;
+            setMessage(error.message, 'error');
             if (/challenge expired/i.test(error.message)) { challenge = null; question.textContent = ''; start.hidden = false; }
           }
         });
         question.append(form); input.focus();
       };
       start.addEventListener('click', async () => {
-        try { showQuestion(await api('api/reading-quiz/start', { m: P.get('m') })); start.hidden = true; message.textContent = ''; }
-        catch (error) { message.textContent = error.message; }
+        try { showQuestion(await api('api/reading-quiz/start', { m: P.get('m') })); start.hidden = true; setMessage(''); }
+        catch (error) { setMessage(error.message, 'error'); }
       });
-      if (!access.quizAvailable) { start.hidden = true; message.textContent = 'Fewer than five questions match your completed chapters. Please return during reading hours.'; }
+      if (!access.quizAvailable) { start.hidden = true; setMessage('Fewer than five questions match your completed chapters. Please return during reading hours.', 'info'); }
       window.addEventListener('pagehide', () => {
         if (challenge) navigator.sendBeacon('api/reading-quiz/abandon', new Blob([JSON.stringify({ challenge })], { type: 'application/json' }));
       });