Session 36: Design system Phase E — remaining screens + dashboard Bloomberg lines (1853 tests)

VYNDR 2.0 conversion, Phase E. Frontend-only; zero backend changes.

- lib/slateAdapter.js: parseAmericanOdds, detectBestLines, mapScheduleToGameCards
  (best/worst line detection — the Bloomberg pattern).
- Reskinned the LEGACY GameCard's game-lines grid with best/worst highlighting +
  SportBadge, keeping inline grading intact (a wholesale swap to the display-only
  vyndr/GameCard would have deleted the slate's grading interaction).
- compare/invite/help/about: RouteStubs -> real design-system pages.
- login reskinned (scanlines, system voice, new Wordmark); pricing + ClaimMeter.

Honest scope: the full GameCard swap needs inline grading ported into the new
component first; profile/settings/blog/game-detail reskins are light/deferred.

18 new tests. Backend 1839 -> 1853, 144 suites, zero regressions. Web build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/app/compare/page.tsx

@@ -1,13 +1,68 @@
-import RouteStub from '@/components/vyndr/RouteStub';
+'use client';
 
-export const metadata = { title: 'Compare' };
+import { useState } from 'react';
+import SectionHead from '@/components/vyndr/SectionHead';
+import GradeBadge from '@/components/vyndr/GradeBadge';
+import TerminalInput from '@/components/vyndr/TerminalInput';
+
+// Head-to-head player comparison (§6). Sample data for now — real player
+// resolution wires to /api/players/search + game logs in a later pass.
+const SAMPLE = {
+  a: { name: 'Nikola Jokić', team: 'DEN', rows: { 'L10 PTS': '28.4', 'L10 REB': '12.1', 'L10 AST': '9.8', 'Usage%': '29.1', 'Grade': 'A+' } },
+  b: { name: 'Victor Wembanyama', team: 'SA', rows: { 'L10 PTS': '26.9', 'L10 REB': '10.4', 'L10 AST': '4.2', 'Usage%': '31.0', 'Grade': 'A' } },
+};
+const ROW_KEYS = ['L10 PTS', 'L10 REB', 'L10 AST', 'Usage%', 'Grade'];
+
+const num = (v: string) => parseFloat(v.replace(/[^\d.]/g, ''));
 
 export default function ComparePage() {
+  const [a, setA] = useState('Nikola Jokić');
+  const [b, setB] = useState('Victor Wembanyama');
+
   return (
-    <RouteStub
-      title="Compare"
-      arriving="SESSION 36"
-      blurb="Two players head-to-head — markets, form, and the verdict on who has the edge tonight."
-    />
+    <section style={{ maxWidth: 860, margin: '0 auto', padding: '28px 16px 96px' }}>
+      <SectionHead accent="var(--g-a)">▚ HEAD TO HEAD</SectionHead>
+      <h1 className="mono" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', margin: '8px 0 18px' }}>COMPARE</h1>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
+        <TerminalInput prompt="›" value={a} onChange={setA} placeholder="Player A" />
+        <TerminalInput prompt="›" value={b} onChange={setB} placeholder="Player B" amber />
+      </div>
+
+      <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr', padding: '14px 16px', background: 'var(--bg-2)', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
+          <div style={{ fontSize: 16, fontWeight: 800, textAlign: 'right' }}>{SAMPLE.a.name} <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)' }}>{SAMPLE.a.team}</span></div>
+          <div className="label" style={{ textAlign: 'center' }}>VS</div>
+          <div style={{ fontSize: 16, fontWeight: 800 }}>{SAMPLE.b.name} <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)' }}>{SAMPLE.b.team}</span></div>
+        </div>
+        {ROW_KEYS.map((k) => {
+          const av = SAMPLE.a.rows[k as keyof typeof SAMPLE.a.rows];
+          const bv = SAMPLE.b.rows[k as keyof typeof SAMPLE.b.rows];
+          const isGrade = k === 'Grade';
+          const aWins = !isGrade && num(av) >= num(bv);
+          const bWins = !isGrade && num(bv) >= num(av);
+          return (
+            <div key={k} style={{ display: 'grid', gridTemplateColumns: '1fr 140px 1fr', padding: '11px 16px', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
+              <div className="mono" style={{ textAlign: 'right', fontSize: 15, fontWeight: 700, color: aWins ? 'var(--g-a)' : 'var(--text-0)' }}>
+                {isGrade ? <GradeBadge grade={av} size="sm" glow /> : av}
+              </div>
+              <div className="label" style={{ textAlign: 'center' }}>{k}</div>
+              <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: bWins ? 'var(--g-a)' : 'var(--text-0)' }}>
+                {isGrade ? <GradeBadge grade={bv} size="sm" glow /> : bv}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="intel-surface scanlines" style={{ marginTop: 16, borderRadius: 10, padding: '16px 18px', position: 'relative', overflow: 'hidden' }}>
+        <div style={{ position: 'relative', zIndex: 2 }}>
+          <div className="label" style={{ color: 'rgba(232,255,244,.6)', marginBottom: 6 }}>VYNDR VERDICT</div>
+          <div className="mono" style={{ fontSize: 14, color: '#e8fff4', lineHeight: 1.6 }}>
+            {SAMPLE.a.name} carries the higher floor on usage and playmaking — the edge tonight tilts his way.
+          </div>
+        </div>
+      </div>
+    </section>
   );
 }