feat(web): green/red winner-loser team names + per-line colored battle log (skyquake glyphs)

frontend/src/App.jsx

@@ -161,7 +161,7 @@ function ParticipantNames({ participants }) {
     <div className="flex min-w-0 flex-wrap gap-x-3 gap-y-1">
       {participants.map((participant) => (
         <span
-          className={`truncate text-sm font-semibold ${participant.result === 'win' ? 'text-fury-violet' : 'text-text-soft'}`}
+          className={`truncate text-sm font-semibold ${participant.result === 'win' ? 'text-win' : 'text-loss'}`}
           key={`${participant.result}-${participant.name}`}
         >
           {participant.name}
@@ -2781,6 +2781,14 @@ function TeamProfilePage({ navigate, profile, requestedTeam, teams }) {
 
 const SCOREBOARD_GRID = 'grid-cols-[minmax(220px,1fr)_repeat(6,minmax(52px,72px))]'
 
+// Battle-log lines are prefixed +/-/<space> for winner/loser/neither (matching
+// the Discord diff format), so colour each line by its acting team.
+function battleLineColor(line) {
+  if (line.startsWith('+')) return 'text-win'
+  if (line.startsWith('-')) return 'text-loss'
+  return 'text-text-soft'
+}
+
 function GamePage({ gameId, navigate }) {
   const [gameState, setGameState] = useState({ status: 'loading', data: null, error: null })
   const [logs, setLogs] = useState({ chat_log: [], battle_log: [] })
@@ -2968,16 +2976,18 @@ function GamePage({ gameId, navigate }) {
       {logs.battle_log.length ? (
         <details className="rounded-lg border border-border bg-fury-white shadow-sm">
           <summary className="cursor-pointer px-5 py-4 font-semibold">Battle Log</summary>
-          <pre className="overflow-x-auto whitespace-pre-wrap px-5 py-3 text-xs leading-relaxed text-text-soft">
+          <div className="log-mono overflow-x-auto px-5 py-3 text-xs leading-relaxed">
-            {logs.battle_log.join('\n')}
+            {logs.battle_log.map((line, i) => (
-          </pre>
+              <div className={`whitespace-pre ${battleLineColor(line)}`} key={i}>{line}</div>
+            ))}
+          </div>
         </details>
       ) : null}
 
       {logs.chat_log.length ? (
         <details className="rounded-lg border border-border bg-fury-white shadow-sm">
           <summary className="cursor-pointer px-5 py-4 font-semibold">Chat Log</summary>
-          <pre className="overflow-x-auto whitespace-pre-wrap px-5 py-3 text-xs leading-relaxed text-text-soft">
+          <pre className="log-mono overflow-x-auto whitespace-pre-wrap px-5 py-3 text-xs leading-relaxed text-text-soft">
             {logs.chat_log.join('\n')}
           </pre>
         </details>

frontend/src/styles.css

@@ -133,6 +133,13 @@
     "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
 }
 
+/* Chat/battle logs: monospace for column alignment, with skyquake before the
+   generic keyword so country/event glyphs still resolve per-character. */
+.log-mono {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Consolas, "skyquakesymbols", monospace;
+}
+
 body {
   margin: 0;
   min-width: 320px;