theme(shiroko): 换前景空地的场景，补自行车/步枪，修耳朵与白孔

部署反馈三个问题：
1. 狼耳顶端被削平——上一版用矩形抹光环，矩形右下角切到了左耳尖。
   改成只抹光环的非白连通域（与头发不连通，bbox 291,93-584,232），耳朵完整。
2. 手内侧 / 大腿内侧白没抠干净——那是环状闭合的白色区域，四角 floodfill 进不去。
   新增封闭白孔检测（>=246 且不与边缘连通，面积 >=40）整块掏空，袜子（237）不受影响。
3. 人物像站在课桌上——原场景前景全是课桌，脚下没有地面。
   重出场景：前景是空地，课桌退到右后方；人物脚下是地板 + 接触阴影。

同时补上她的自行车与步枪：独立素材 props/bike.webp，镜像成车头朝右与人同向，
放在人物身后偏左（第一层是人，车在第三层，天然被她遮住），视口变化时两者同步移动。
静态版本 20261020d

docs/theme-shiroko.md

@@ -30,6 +30,7 @@ available = default,sakura,shiroko
 | 底层 | 教室场景插画（压白 38%、轻度虚化） | `--tb-page-image`，16:9 桌面 / 9:16 移动两张 |
 | 中层 | 卡片与顶栏：半透明白 + `backdrop-filter` 磨砂 | `--tb-surface: rgba(255,255,255,.86)` / `--tb-navbar` |
 | 上层 | 人物站在场景左侧地面（400px 高）+ 椭圆接触阴影 | `--tb-deco` 前两个槽位 |
+| 道具 | 她的自行车（车头朝右、与人同向）斜靠一把步枪 | `--tb-deco` 第 3 槽位 |
 | 空气层 | 左窗光柱 / 右侧暖散景 / 脚下地面光斑 / 底部压深 | `--tb-deco` 后四个槽位（全是渐变） |
 | 深色 | 不用场景（白天教室压在深底上会脏），回到深色渐变 + 极淡纹样 | 深色块单独覆盖 |
 
@@ -69,12 +70,13 @@ available = default,sakura,shiroko
 | 文件 | 用途 | 尺寸 | 体积 |
 | --- | --- | --- | --- |
 | `chibi/window.webp` | **当前使用**：侧后方视角、双手背在身后望向箱内，压白 16% | 135×460 | 13KB |
+| `props/bike.webp` | 自行车 + 步枪（镜像后车头朝右），压白 26%，自带接触阴影 | 397×259 | 22KB |
 | `chibi/wave.webp` | 备用：正面挥手 | 324×620 | 27KB |
 | `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
 | `chibi/think.webp` | 托腮 | 283×620 | 26KB |
 | `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB |
-| `scene-desktop.webp` | 教室场景（16:9，压白 38% + 虚化 1.4px） | 1920×1080 | 22KB |
+| `scene-desktop.webp` | 教室场景（16:9，前景是空地，便于人物站立） | 1920×1080 | 19KB |
-| `scene-mobile.webp` | 教室场景（9:16 中裁） | 720×1003 | 6KB |
+| `scene-mobile.webp` | 同一张场景的竖版裁切 | 720×1003 | 10KB |
 | `pattern-dark.svg` | 深色模式平铺纹样（雪花 + 光环） | 240×240 | 0.7KB |
 
 ## 来源与授权
@@ -122,6 +124,24 @@ available = default,sakura,shiroko
    人像不压白就是全页对比度最高的一块，必然"突兀"；
 5. 裁 bbox、缩到高 460，WebP q86（约 14KB）。
 
+### 人物与道具必须用「同一套定位公式」
+
+`background-position` 里的百分比**不是相对视口宽度**，而是相对 `(定位区宽 - 图片宽)`。
+所以人物和自行车即使写同样的 `calc(50% - Npx)`，两者也会因为图宽不同而错位——
+实测把车按人的公式放，车直接跑出屏幕，只剩一片轮圈。
+
+正确做法是按各自宽度反解：设人物宽 `wc`、车宽 `wb`，要让车的右沿贴住人的左沿（留 gap）：
+
+```
+人的 left = (W - wc)/2 + Bc
+车的 left = (W - wb)/2 + Bc - gap - wb + wc/2 - wc/2 ... 直接解 B 更省事
+```
+
+本主题实测：人物 `calc(50% - 524px)`、车 `calc(50% - 612px)`。
+
+另外**道具不要烘焙进背景图**：背景是 `cover`，视口一变裁切量就变，
+而人物是固定 px 定位的，两者必然分家。烘焙只适合「和人无关的背景物件」。
+
 关键经验：**必须是"平涂无描边"**。先试过用手写 SVG 线稿，风格和用户那张立绘（色块、无描边）冲突，
 而且没有真人手感会画得很抽象；用参考图 + image-to-image 出来的四张，角色特征和画风都稳。
 

internal/conf/static.go

@@ -10,7 +10,7 @@ var (
 	BuildCommit = "dev"
 
 	// StaticVersion 静态资源缓存版本号：base.css 与主题 css 共用，改样式只改这一处。
-	StaticVersion = "20261020b"
+	StaticVersion = "20261020d"
 )
 
 // 文本审核通道取值（[security] text_censor_source）。定义在 conf 侧，

static/css/themes/shiroko.css

@@ -30,26 +30,29 @@ html[data-theme-style="shiroko"] {
     --tb-shadow-hover: 0 1px 2px rgba(38, 56, 82, 0.07), 0 24px 56px -24px rgba(38, 56, 82, 0.38);
 
     /* 整页场景：一张教室插画，cover 铺满；不再叠纹样（纹样压在实景上会变成噪点） */
-    --tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261019r");
+    --tb-page-image: url("/static/images/themes/shiroko/scene-desktop.webp?v=20261020d");
     --tb-page-pattern: none;
 
     /* 人物：侧后方视角、双手背在身后望向箱内（不是正面盯着访客），
        站在场景左侧地面，离底边 36px，配一层椭圆接触阴影，避免悬空。
        图已压白 12%，与压白 38% 的场景同一"雾度"，避免变成高对比贴纸。
 
-       其余 4 个槽位是"空气"（全部是渐变，不占体积、不会成为贴纸）：
+       槽位 3 是她的自行车（车头朝右，与人同向，斜靠着一把步枪，自带接触阴影）。
-       3 左窗光柱 / 4 右侧一朵暖散景 / 5 人物脚下的地面光斑 / 6 底部轻压深。
+       它必须和人物用**同一套定位公式**，否则视口一变两件东西就分家了——
-       光斑把人物"钉"在地上，压深让页面下沿不飘。 */
+       所以不能烘焙进背景图里。
-    --tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261020b"),
+
+       其余 3 个槽位是"空气"（纯渐变）：4 左窗光柱 / 5 地面光斑 / 6 底部轻压深。 */
+    --tb-deco: url("/static/images/themes/shiroko/chibi/window.webp?v=20261020d"),
         radial-gradient(ellipse at center, rgba(63, 96, 138, 0.18) 0%, rgba(63, 96, 138, 0) 72%),
+        url("/static/images/themes/shiroko/props/bike.webp?v=20261020d"),
         linear-gradient(112deg, rgba(255, 250, 236, 0.50) 0%, rgba(255, 250, 236, 0.22) 20%, rgba(255, 250, 236, 0) 44%),
-        radial-gradient(circle 120px at 88% 30%, rgba(255, 252, 240, 0.42), rgba(255, 252, 240, 0) 75%),
         radial-gradient(ellipse 560px 170px at 28% 94%, rgba(255, 248, 228, 0.80) 0%, rgba(255, 248, 228, 0) 72%),
         linear-gradient(0deg, rgba(110, 128, 156, 0.10) 0%, rgba(110, 128, 156, 0) 24%);
-    --tb-deco-size: auto 400px, 96px 13px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+    --tb-deco-size: auto 400px, 96px 13px, auto 259px, 100% 100%, 100% 100%, 100% 100%;
     --tb-deco-position: left max(10px, calc(50% - 524px)) bottom 36px,
         left max(22px, calc(50% - 512px)) bottom 29px,
-        left top, left top, left top, left top;
+        left calc(50% - 612px) bottom 20px,
+        left top, left top, left top;
 }
 
 html[data-theme="dark"][data-theme-style="shiroko"] {
@@ -72,7 +75,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
 
     /* 深色不用浅色场景（白天教室压在深底上会很脏），回到纯色渐变 + 极淡纹样 */
     --tb-page-image: linear-gradient(180deg, #161d26 0%, #141a22 60%, #11161d 100%);
-    --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261019r");
+    --tb-page-pattern: url("/static/images/themes/shiroko/pattern-dark.svg?v=20261020d");
     --tb-page-pattern-size: 340px 340px;
     --tb-deco: none, none, none, none, none, none;
     --tb-deco-size: auto, auto, auto, auto, auto, auto;
@@ -82,7 +85,7 @@ html[data-theme="dark"][data-theme-style="shiroko"] {
 /* 窄屏：卡片占满宽度，两侧没有视觉空间 —— 换成竖版场景，人物退场 */
 @media (max-width: 900px) {
     html[data-theme-style="shiroko"] {
-        --tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261019r");
+        --tb-page-image: url("/static/images/themes/shiroko/scene-mobile.webp?v=20261020d");
         --tb-surface: rgba(255, 255, 255, 0.92);
         --tb-deco: none, none, none, none, none, none;
         --tb-deco-size: auto, auto, auto, auto, auto, auto;