The NPC reply rendered as a fully-white bubble with invisible
white-on-white text. Three bugs in the message-bubble markup,
all from copy-pasting Tailwind v3 patterns into a v4 codebase:
1. text-white-90 is not a valid class name in any Tailwind
version. The opacity goes after a slash: text-white/90.
2. bg-white + bg-opacity-5 is the v3 pattern. v4 dropped
bg-opacity-* and folded opacity into the color via
bg-white/5. Without it the bubble was solid white.
3. Combining 1 and 2: solid white background + invalid text
color → text inherited the parent's white → invisible.
Plus a Svelte-specific gotcha: class:bg-emerald-500/10={cond}
doesn't parse because Svelte's class: directive treats `/` as a
token. Use a class={...} string interpolation instead, which is
how the result banner now picks between the won and surrendered
backgrounds.
Also: rewrote the message bubble loop with an explicit
{#if msg.sender === 'user'}/{:else} branch instead of stacking
class:* directives. Less clever, more legible, and dodges the
class: + slash issue at the source.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
63e1ef8233