Style reading quiz feedback by result

public/app.css

@@ -395,7 +395,11 @@ body.reader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: h
 .reading-gate-question { margin: 20px 0; }
 .reading-gate-question input { display: block; box-sizing: border-box; width: 100%; margin: 14px 0; padding: 10px; }
 .reading-gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }
-.reading-gate-message { color: var(--accent); min-height: 1.5em; }
+.reading-gate-message { margin: 18px 0 0; padding: 11px 13px; border: 1px solid #46505b;
+  border-radius: 9px; background: #222a33; color: #d8e6f4; }
+.reading-gate-message[data-tone="success"] { border-color: #39765a; background: #193528; color: #b8f2d0; }
+.reading-gate-message[data-tone="retry"] { border-color: #9b7233; background: #382b1a; color: #ffdaa0; }
+.reading-gate-message[data-tone="error"] { border-color: #944c55; background: #3c2025; color: #ffc0c6; }
 @media (max-width: 660px) { .reading-gate { margin: 28px 12px 100px; padding: 18px; } }
 .pg { position: absolute; overflow: hidden; background: #19191c; }
 .pg img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }