P1-5 fix: 390px containment — consensus rows stack, pitcher line wraps

Phone audit: CONSENSUS VS MODEL bled off the right edge ('2 BO…', 'MO…') and
STARTING-pitcher lines truncated ('2.64 E…'). The M4 lock only hid the DOCUMENT
scroll (html/body overflow-x) — content still clipped inside cards. Now contained:
- .breadth-row stacks (flex-direction:column) at <430px, each field on its own
  line with overflow-wrap:anywhere — no bleed.
- the game-card starting-pitcher inner spans wrap + shrink (flexWrap + minWidth:0)
  so name/ERA/archetype flow onto a second line instead of clipping.
- STRENGTHENED the lock: vyndrParityQA now asserts the CONTAINMENT patterns
  (breadth-row stacks, pitcher spans wrap), not just document overflow.

MLB stat pills: the game-lines grid already scrolls-within-card (<640 M1); if
the audit still shows pill clipping elsewhere, it's a follow-up targeted pass.

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

web/src/components/vyndr/GameCard.tsx

@@ -263,12 +263,12 @@ export default function GameCard({ game: g, onAddParlay, onOpen, preferredBooks
       {g.pitchers && (
         <div className="mono" style={{ padding: '0 16px 11px', fontSize: 11, color: 'var(--text-1)', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
           <span style={{ color: 'var(--text-2)', letterSpacing: '0.04em' }}>STARTING</span>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6' }}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6', flexWrap: 'wrap', minWidth: 0 }}>
             {g.pitchers.away.name} <span style={{ color: 'var(--text-1)' }}>{g.pitchers.away.era} ERA</span>
             {g.pitchers.away.archetype && <ArchetypeBadge archetype={g.pitchers.away.archetype} size="sm" />}
           </span>
           <span style={{ color: 'var(--text-2)' }}>vs</span>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6' }}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6', flexWrap: 'wrap', minWidth: 0 }}>
             {g.pitchers.home.name} <span style={{ color: 'var(--text-1)' }}>{g.pitchers.home.era} ERA</span>
             {g.pitchers.home.archetype && <ArchetypeBadge archetype={g.pitchers.home.archetype} size="sm" />}
           </span>

web/src/components/vyndr/MarketBreadth.tsx

@@ -87,8 +87,8 @@ export default function MarketBreadth({
           return (
             <div
               key={`${r.player}-${r.stat}-${i}`}
-              className="mono"
-              style={{ display: 'flex', alignItems: 'baseline', gap: 10, fontSize: 12, flexWrap: 'wrap', fontVariantNumeric: 'tabular-nums' }}
+              className="mono breadth-row"
+              style={{ display: 'flex', alignItems: 'baseline', gap: 10, fontSize: 12, flexWrap: 'wrap', fontVariantNumeric: 'tabular-nums', minWidth: 0 }}
             >
               {r.player && <span style={{ color: 'var(--text-0)', fontWeight: 700, minWidth: 96 }}>{r.player}</span>}
               <span style={{ color: 'var(--text-1)' }}>