Session 26: Cross-sport tab counts, scan copy fix, game card visual polish, empty section auto-hide (1579 tests)

web/src/components/GameCard.tsx

@@ -216,7 +216,7 @@ export default function GameCard(props: GameCardProps) {
     >
       <header
         style={{
-          padding: '14px 16px',
+          padding: '16px 20px',
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'flex-start',
@@ -227,19 +227,20 @@ export default function GameCard(props: GameCardProps) {
         <div style={{ minWidth: 0, flex: 1 }}>
           {/* Session 19 — team-abbreviation header: bold abbreviations
               with the full names underneath in the meta line, plus a
-              sport-color badge to the right. ESPN/DK pattern. */}
+              sport-color badge to the right. ESPN/DK pattern.
+              Session 26 — larger/bolder abbreviations for hierarchy. */}
           <div
             style={{
               display: 'flex',
               alignItems: 'center',
-              gap: 10,
-              fontSize: 16,
-              fontWeight: 700,
+              gap: 11,
+              fontSize: 18,
+              fontWeight: 800,
               color: 'var(--text-0, #F0F0F5)',
-              letterSpacing: '-0.01em',
+              letterSpacing: '-0.02em',
             }}
           >
-            <span aria-hidden style={{ fontSize: 14 }}>{SPORT_EMOJI[sport]}</span>
+            <span aria-hidden style={{ fontSize: 15 }}>{SPORT_EMOJI[sport]}</span>
             <span className="mono" style={{ letterSpacing: '0.04em' }}>
               {teamAbbr(awayTeam, sport)}
             </span>
@@ -333,16 +334,16 @@ export default function GameCard(props: GameCardProps) {
       {bookRows.length > 0 && (
         <div
           style={{
-            padding: '10px 16px',
+            padding: '12px 20px 14px',
             borderTop: '1px solid var(--border, #1A1A24)',
             display: 'grid',
-            gap: 6,
+            gap: 8,
             background: 'rgba(255,255,255,0.015)',
           }}
         >
           <div
             className="mono"
-            style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-tertiary, #6B6B7B)', textTransform: 'uppercase' }}
+            style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--text-tertiary, #6B6B7B)', textTransform: 'uppercase' }}
           >
             Game Lines
           </div>
@@ -350,12 +351,19 @@ export default function GameCard(props: GameCardProps) {
             <div
               key={book}
               className="mono"
-              style={{ display: 'flex', gap: 12, fontSize: 11, color: 'var(--text-secondary, #8A8A9A)', flexWrap: 'wrap' }}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '72px 1fr 1fr 1fr',
+                gap: 8,
+                fontSize: 11.5,
+                alignItems: 'baseline',
+                color: 'var(--text-secondary, #8A8A9A)',
+              }}
             >
-              <span style={{ minWidth: 64, color: 'var(--text-0, #F0F0F5)', fontWeight: 700, textTransform: 'capitalize' }}>{book}</span>
-              {line.awayML && <span>{teamAbbr(awayTeam, sport)} {line.awayML}</span>}
-              {line.homeML && <span>{teamAbbr(homeTeam, sport)} {line.homeML}</span>}
-              {line.total && <span>O/U {line.total}</span>}
+              <span style={{ color: 'var(--text-0, #F0F0F5)', fontWeight: 700, textTransform: 'capitalize' }}>{book}</span>
+              <span>{line.awayML ? `${teamAbbr(awayTeam, sport)} ${line.awayML}` : '—'}</span>
+              <span>{line.homeML ? `${teamAbbr(homeTeam, sport)} ${line.homeML}` : '—'}</span>
+              <span style={{ textAlign: 'right' }}>{line.total ? `O/U ${line.total}` : '—'}</span>
             </div>
           ))}
         </div>
@@ -364,10 +372,13 @@ export default function GameCard(props: GameCardProps) {
       {propList.length === 0 ? (
         <p
           style={{
-            padding: '20px 16px',
+            padding: '14px 20px',
             color: 'var(--text-tertiary, #6B6B7B)',
-            fontSize: 13,
-            textAlign: 'center',
+            fontSize: 12,
+            // Subtle, informational — not an error. Left-aligned so it
+            // reads as a quiet status line, not a centered empty wall.
+            textAlign: 'left',
+            opacity: 0.8,
           }}
         >
           Props for this game aren&apos;t published yet.
@@ -427,24 +438,25 @@ export default function GameCard(props: GameCardProps) {
       {streakRows.length > 0 && (
         <div
           style={{
-            padding: '10px 16px',
+            padding: '12px 20px 14px',
             borderTop: '1px solid var(--border, #1A1A24)',
             display: 'grid',
-            gap: 6,
+            gap: 9,
+            background: 'linear-gradient(180deg, rgba(233,75,60,0.04) 0%, transparent 100%)',
           }}
         >
           <div
             className="mono"
-            style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-tertiary, #6B6B7B)', textTransform: 'uppercase' }}
+            style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--accent, #E94B3C)', textTransform: 'uppercase' }}
           >
             🔥 Streaks
           </div>
           {streakRows.map((s) => (
             <div
               key={`${s.player}-${s.description}`}
-              style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 12, alignItems: 'baseline' }}
+              style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 12.5, alignItems: 'baseline' }}
             >
-              <span style={{ color: 'var(--text-0, #F0F0F5)', fontWeight: 600 }}>
+              <span style={{ color: 'var(--text-0, #F0F0F5)', fontWeight: 700 }}>
                 {s.player}
                 {s.team ? <span style={{ color: 'var(--text-tertiary, #6B6B7B)', fontWeight: 400 }}> · {s.team}</span> : null}
               </span>