网页端新增 Canvas 二维农场地图

为什么：地块和牲畜原本是响应式卡片列表，信息全但没有"农场"的形状感。
改成一张俯视像素风地图作主视觉：农田按 4 列排成方阵（地块多自动改 6 列），
土壤颜色随水分深浅变化、作物随生长进度放大、成熟发金光、缺水画干裂；
牧场围栏里牲畜随机漫步，待收产出挂金色气泡、没喂食标 💢；
已拥有的建筑在底部建筑带列队；五种天气各有天色，雨/暴雨有雨滴动画。
悬停出提示框，点地块即播种/浇水/收获、点牲畜即喂食/收取——全部复用
既有 openCropPick/act() 流程，卡片面板原样保留作精确操作入口。

实现要点：画布用逻辑坐标绘制、按容器宽 × devicePixelRatio 缩放，
高分屏不糊、窄屏等比缩；命中检测在逻辑坐标上自己算。
服务端零改动——state 里的 plots/animals/buildings 现成够用。

修复一个真机才抓得到的初始化 bug：动画循环首帧同步执行，原顺序
"先绑定后布局"让首帧在未初始化的字段上 TypeError，rAF 注册被一起吞掉，
表现为画布全白但点击命中正常（命中不经过画布）。改为先布局再绑定，
并给 mapStep/mapDraw 加空值护栏。

真浏览器端到端验证：登录、canvas 坐标点击浇水（AP/水分/toast 全对）、
悬停提示、动画循环存活（云位移 5.24px/600ms）、截图目检渲染效果，
errors/console 干净。534 项测试全绿，ruff/pyright 无告警。

README.md

@@ -38,7 +38,9 @@ uv run main.py stop                      # ⑤ 优雅停机（会把所有牧场
 ```
 
 浏览器打开 <http://127.0.0.1:8765/> 就是网页版客户端（可多开几个标签页，用不同牧场名，
-能实时看到对方的操作）。
+能实时看到对方的操作）。页面顶部是 **Canvas 二维农场地图**：农田方阵、牧场围栏、
+建筑带画在一张俯视图上，作物随生长进度变大、成熟发光，雨/旱/暴风雨有对应天气效果；
+点地块直接播种/浇水/收获，点牲畜喂食/收取（下方的卡片面板保留，作精确操作用）。
 
 不想装任何第三方库、只想单机玩玩：