style(game): fading transcript + two-voice hierarchy (B + V1)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

styles.css

@@ -1673,26 +1673,54 @@ footer { display: none !important; }
 
 #game-dialogue .chatbot {
     width: 100% !important;
-    max-height: 130px !important;
+    max-height: 160px !important;
     background: transparent !important;
     border: none !important;
     border-image: none !important;
     box-shadow: none !important;
     backdrop-filter: none !important;
     padding: 0 !important;
-    overflow-y: auto;
+    overflow: hidden;            /* old lines fade out, no scrollbar */
 }
+/* transparent rows, centered text — kill Gradio's bubble chrome */
 #game-dialogue .message-row,
 #game-dialogue .message,
-#game-dialogue .bubble { background: transparent !important; border: none !important;
-                         box-shadow: none !important; text-align: center !important; }
+#game-dialogue .bubble {
+    background: transparent !important; border: none !important;
+    box-shadow: none !important; text-align: center !important;
+    padding: 2px 0 !important; margin: 0 !important;
+}
+/* fade-by-recency: newest crisp, older dimmer, 4th-back and beyond hidden.
+   (Gradio wraps each message in a .message-row — verify this selector against
+   the running app; if rows are .message instead, swap the selector.) */
+#game-dialogue .message-row { opacity: 0.38; transition: opacity 0.4s ease; }
+#game-dialogue .message-row:nth-last-child(2) { opacity: 0.6; }
+#game-dialogue .message-row:nth-last-child(1) { opacity: 1; }
+#game-dialogue .message-row:nth-last-child(n+4) { display: none; }
+
+/* the child — italic, bright, unlabeled (it owns the scene) */
 #game-dialogue .bot, #game-dialogue .bot .prose, #game-dialogue .bot p {
-    font-style: italic !important; font-size: 1.2rem !important; line-height: 1.6 !important;
+    font-style: italic !important; font-size: 1.2rem !important; line-height: 1.55 !important;
     color: #ece6f4 !important; text-align: center !important;
-    text-shadow: 0 2px 16px #000 !important; }
+    text-shadow: 0 2px 16px #000 !important;
+}
+/* you — upright, muted, with a small typewriter tag */
 #game-dialogue .user, #game-dialogue .user .prose, #game-dialogue .user p {
     font-style: normal !important; font-size: 1.0rem !important;
-    color: #b9b2cc !important; text-align: center !important; background: transparent !important; }
+    color: #aaa2be !important; text-align: center !important; background: transparent !important;
+}
+#game-dialogue .user .prose::before {
+    content: 'you ';
+    font-family: 'Special Elite', monospace;
+    font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
+    color: #6f6590; margin-right: 7px;
+}
+/* a recall line (it claims your memory) — JS tags the last .bot row .recall-line */
+#game-dialogue .bot.recall-line, #game-dialogue .bot.recall-line .prose,
+#game-dialogue .bot.recall-line p {
+    color: var(--mem-accent) !important;
+    text-shadow: 0 0 20px var(--mem-glow) !important;
+}
 
 #game-inputrow {
     display: flex; gap: 6px; align-items: center;