[JadenChen10]

做了什么

网站上所有画球场的地方都改成了真实的绿色草地、白色线条，带深浅相间的割草条纹。原来的球场是浅灰绿色，看起来不像球场。

改到的地方：阵容看板、回放和实时看板上的球场、转折点详情页的球场、比赛片段回放、统计页的射门图 / 热力图 / 传球网络 / 平均站位、赛后报告的进攻路线图、实时射门小卡片，以及叠加层预览的背景。

颜色现在只在一个地方定义（样式变量文件），以后要调颜色只改一处。夜间模式下草地暗一些，但还是绿色。写在球场上的球员名字、评分、百分比改成了白字，在草地上看得清。

需要队友做什么

• @Carry3：请帮忙看一下（前端由 C 线审）。
• 这个 PR 和「logo 里的 o 换成足球」那个 PR 互不影响，先合哪个都行。
• 一个已知的取舍：球衣本身是绿色或青色的球队（比如 Vantry Town 的青色），在草地上的线条没有原来那么跳，球员圆点有黑边所以还清楚。要是觉得不够，可以再给线条加一圈白边，另开任务做。

怎么确认它能用

打开任意一场比赛，依次点 阵容、回放、数据，再打开一个转折点和叠加层预览页（/overlay/<比赛编号>?preview=1），球场都应该是绿草地。电脑切到深色模式再看一遍。

	之前	之后
阵容
回放看板
射门图
进攻路线
转折点详情
叠加层预览
阵容（深色）
回放（深色）

转折点详情页的截图用的是前端自带的演示数据（?fixture=1），因为本机后端没有连 AI，生成不了转折点。其他截图来自本机后端跑的 Tessmouth United 4–3 Vantry Town。

类型检查通过，前端 48 组共 412 个测试全部通过。

Closes #442

给写代码的同学

• apps/web/src/styles/tokens.css（和副本 docs/design/tokens.css）：--pv-pitch（草地、深色条）、--pv-pitch-stripe（浅色条）、--pv-pitch-line（白线）、--pv-pitch-edge（球场边框）、--pv-pitch-grass（给 CSS 背景用的条纹渐变）。夜间两处（媒体查询和 data-theme="dark"）一起改。
• 新增 apps/web/src/components/Grass.tsx：底色加 12 条割草条纹，along="x" | "y" 决定条纹方向。用在 Pitch.tsx、viz/pitch.tsx、Lineups.tsx（竖向）、report/Lanes.tsx、live/LiveCentre.tsx。后两处原来是圆角浅色块，现在是直角草地加白色外框。
• styles/base.css：.pitch、.lu-pitch 边框用 --pv-pitch-edge；删掉没用了的 .lu-grass；.lu-line 不透明度 .55 → .9；.lu-nm、.lu-rt、.lu-offmk 改白字加半透明深色描边。
• styles/report.css：.rp-turf / .lc-turf 只画白框，线改白；路线箭头加白边；百分比和标签改白字加描边。
• styles/overlay.css：预览背景从写死的两种绿换成 var(--pv-pitch-grass)。
• 截图放在 d/Dx10-Dx11-screenshots 分支，只为 PR 引用，不要合并那个分支。

🤖 Generated with Claude Code