fix(game): full revert of styles.css to pre-dialogue-fixes state to isolate freeze

styles.css

@@ -1700,8 +1700,16 @@ footer { display: none !important; }
     display: flex; flex-direction: column; align-items: stretch; gap: 4px;
     pointer-events: none;
 }
-/* (no scrim behind the dialogue: it read as a dark rectangle over the scene.
-   The .bot text-shadow already carries legibility over the fog.) */
+/* soft bottom scrim: dialogue text never sits naked on bright fog */
+#game-dialogue::before {
+    content: '';
+    position: absolute;
+    /* extend 40px above the box, full width, 24px below to cover any baseline gap */
+    top: -40px; left: -8%; right: -8%; bottom: -24px;
+    z-index: -1;
+    background: linear-gradient(to bottom, transparent 0%, rgba(5,4,10,.55) 60%, rgba(5,4,10,.72) 100%);
+    pointer-events: none;
+}
 
 /* input bar: a thin line at the very bottom of the viewport, below the frame */
 #game-inputbar {
@@ -1729,42 +1737,41 @@ footer { display: none !important; }
    purple vertical bar to the right of the subtitle) */
 #game-dialogue, #game-dialogue * { scrollbar-width: none !important; }
 #game-dialogue ::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
-/* transparent rows — kill Gradio's bubble chrome, but don't force text-align
-   here; bot/user get opposite sides so the center stays clear for the child. */
+/* 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;
+    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. */
+/* 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 — left side of the frame, clear of its face and the user's lines */
+/* 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.55 !important;
-    color: #ece6f4 !important; text-align: left !important;
+    color: #ece6f4 !important; text-align: center !important;
     text-shadow: 0 2px 16px #000 !important;
 }
-#game-dialogue .message-row.bot,
-#game-dialogue .message-row.bot .message,
-#game-dialogue .message-row.bot .bubble {
-    justify-content: flex-start !important; align-items: flex-start !important;
-    text-align: left !important;
-}
-#game-dialogue .bot .prose, #game-dialogue .bot p {
-    padding-left: 7% !important;
-    max-width: 44% !important;
-}
-
-/* you — minimum styling, let Gradio handle layout while we isolate the freeze */
+/* you — upright, muted, right-aligned and clamped inside the frame */
 #game-dialogue .user, #game-dialogue .user .prose, #game-dialogue .user p {
     font-style: normal !important; font-size: 1.0rem !important;
-    color: #aaa2be !important; background: transparent !important;
+    color: #aaa2be !important; text-align: right !important; background: transparent !important;
+}
+/* clamp the user bubble to the right of the frame — max-width stops it
+   bleeding past the 16:9 edge; margin-left:auto pushes it right */
+#game-dialogue .user {
+    display: block !important;
+    max-width: none !important;          /* full band width; text-align:right hugs it right.
+                                            a narrow max-width collapsed it to a 1-char column */
+    margin: 0 !important;
+    padding-right: 4% !important;        /* breathing room from the frame edge */
 }
 #game-dialogue .user .prose::before {
     content: 'you ';