修窄屏装饰层压不住作用域块（手机上一直显示桌面版樱花）

@media 不提升特异性：作用域块 html[data-theme-style][data-page-scope="box"] 是 (0,2,1)，
媒体查询里写的 html[data-theme-style] 只有 (0,1,1)，于是「窄屏装饰层全置 none」这行
从来没生效 —— 手机上照样铺开桌面的花枝与花朵。深色作用域块是 (0,3,1)，更压不住。

- 媒体查询里补三条同特异性的通配规则（作用域 0,2,1 / 深色基础 0,2,1 / 深色+作用域 0,3,1），
  媒体块在文件更后，同特异性即胜出。
- 新增 TestNarrowMediaOverridesScopedDeco：外层每处非 none 的 --tb-deco，都要求窄屏里有
  同属性名、属性数不少于它的声明。变异验证过（删掉深层那条立即 FAIL）。
  它同时报出 shiroko 的 900px 块只覆盖浅色 —— 但深色块本就是 none，不算缺陷，故跳过。
- 窄屏改由加强版底纹承担樱花（透明度 ×1.9、格子 180px）：桌面那套 0.18~0.34 的透明度
  在 390px 上实测接近纯粉。顶栏与卡片之间那条 35px 带子试过放小花，question/admin 页卡片
  从 y=110 起会切掉一半，最终不放装饰层。

.workbuddy/memory/2026-10-22.md

@@ -35,3 +35,17 @@
   位图版 2.7KB + 5 张图 48.9KB ≈ 51.6KB。所以"换位图省 CSS 体积"是错的 ——
   位图唯一的理由是素材要给非 CSS 场景复用。文档与 INSTALL.txt 都已改。
 - `image_bucket_cdn_host` 沿用 app.ini 同名键（只写主机名），`export_assets.py` 据此拼公开地址。
+
+**6) 窄屏覆盖被作用域块压死（真 bug，已修）**
+- 现象：`@media (max-width:640px)` 里把 `--tb-deco` 全写 none，手机上却照样是桌面装饰层。
+- 根因：媒体查询**不提升特异性**。作用域块 `html[data-theme-style][data-page-scope="box"]`
+  是 (0,2,1)，媒体里写的 `html[data-theme-style]` 只有 (0,1,1) → 压不住；深色作用域块 (0,3,1) 更难。
+- 修法：媒体查询里按「作用域通配 `[data-page-scope]`（0,2,1）」+「深色基础（0,2,1）」+
+  「深色+作用域（0,3,1）」各写一条，靠文件更晚取胜。shiroko 的 900px 块只对浅色有效，
+  但它的深色块本来就是 none，所以不算坏。
+- 守门：新增 `internal/theme/narrow_test.go::TestNarrowMediaOverridesScopedDeco`
+  ——外层每处非 none 的 `--tb-deco`，媒体查询里必须有「同属性名、属性数不少于它」的选择器；
+  变异验证过（删掉深色基础那条立刻 FAIL）。
+- 手机端最终决定**不放装饰层**：试过顶栏与卡片之间那条 35px 带子，box 页 OK、question/admin
+  页卡片从 y=110 起就切半个 → 变成黏在卡片边的粉色碎块。改用加强版底纹（透明度 ×1.9、格子 180px）。
+- 埋点：`gofmt -l internal/theme` 会报 `slots_test.go`（它是 CRLF），新增文件是 LF，别顺手格式化它。

dev/theme-tools/gen_new_sakura.py

@@ -92,7 +92,10 @@ def branch(wood, light, deep, heart, flip=False):
 # 密度是刻意的：最早一版放了 2 朵花 + 2 片瓣并且 260px 平铺，页面上读出来是
 # 「整齐的包装纸」——因为每个元素都在固定格点上重复。现在只留 1 朵 + 2 片，
 # 尺寸放大到 300px 且各自错位，平铺时才看不出周期。
-def pattern(light):
+def pattern(light, strong=False):
+    """平铺底纹。strong 给窄屏用：那里装饰层全关，底纹是屏幕上唯一的樱花，
+    照桌面那套 0.18~0.34 的透明度在 390px 上基本看不出来（实测截图接近纯粉底）。"""
+    k = 1.9 if strong else 1.0
     one = (
         '<g fill="%s">' % light
         + "".join(f'<ellipse cx="50" cy="27" rx="14" ry="21" transform="rotate({a} 50 50)"/>'
@@ -101,13 +104,14 @@ def pattern(light):
     )
     petal_path = ('<path d="M20 1c9 0 15 8 15 18 0 5-2 9-4 12l-4-5-7 9-7-9-4 5'
                   'c-2-3-4-7-4-12C5 9 11 1 20 1z" fill="%s"/>')
+    o = lambda v: min(0.92, round(v * k, 2))
     return (
         '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">'
-        f'<g transform="translate(96 84) scale(0.34) translate(-50 -50)" opacity="0.34">{one}</g>'
-        f'<g transform="translate(236 208) rotate(28) scale(0.26)" opacity="0.24">'
+        f'<g transform="translate(96 84) scale(0.34) translate(-50 -50)" opacity="{o(0.34)}">{one}</g>'
+        f'<g transform="translate(236 208) rotate(28) scale(0.26)" opacity="{o(0.24)}">'
         + (petal_path % light) +
         "</g>"
-        f'<g transform="translate(188 52) rotate(-34) scale(0.2)" opacity="0.18">'
+        f'<g transform="translate(188 52) rotate(-34) scale(0.2)" opacity="{o(0.18)}">'
         + (petal_path % light) +
         "</g>"
         "</svg>"
@@ -140,6 +144,7 @@ def uris(p, asset_base=""):
             "branch_l": 'url("%s/branch-left.webp")' % b,
             "branch_r": 'url("%s/branch-right.webp")' % b,
             "pattern": 'url("%s/pattern.webp")' % b,
+            "pattern_narrow": 'url("%s/pattern.webp")' % b,
         }
     return {
         "blossom_l": uri(blossom(p["light"], p["deep"], p["heart"])),
@@ -147,6 +152,7 @@ def uris(p, asset_base=""):
         "branch_l": uri(branch(p["wood"], p["light"], p["deep"], p["heart"], flip=True)),
         "branch_r": uri(branch(p["wood"], p["light"], p["deep"], p["heart"], flip=False)),
         "pattern": uri(pattern(p["pattern"])),
+        "pattern_narrow": uri(pattern(p["pattern"], strong=True)),
     }
 
 
@@ -213,8 +219,12 @@ SCOPES = {
         ("var(--sk-petal)", "28px", "right 18% top 27%"),
         ("var(--sk-blossom)", "auto 52px", "right 6% bottom 8%"),
     ],
-    # 窄屏：卡片占满宽度，留白只剩顶栏上下那两条 —— 装饰层放什么都没有立足之地，
-    # 樱花改由底纹承担（@media 里把 pattern 缩小到 200px，密度上来才看得出来）
+    # 窄屏：卡片占满宽度，左右只剩 ~16px 边距，花枝放哪儿都糊在字上。
+    # 实测底纹铺在 16px 边距里根本落不到花 —— 花朵在格子里的位置固定在 x≈58，
+    # 所以只在「顶栏与卡片之间」那条 30px 的横带里放几朵小的，其余交给加强底纹。
+    # 试过在「顶栏与卡片之间」那条 ~35px 的带子里放小樱花：box 页卡片从 y=122 起还行，
+    # question/admin 页卡片从 y=110 起就把它切掉半个，结果是贴在卡片边上的粉色碎块。
+    # 手机上没有可靠的留白，干脆不放装饰层 —— 观感交给配色与底纹（加强版 pattern）。
     "narrow": [],
 }
 
@@ -320,13 +330,30 @@ html[data-theme="dark"][data-theme-style="new-sakura"] {{
             f'html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="{key}"]',
             SCOPES[key]) + "\n"
 
+    # 作用域块的选择器是 html[data-theme-style][data-page-scope="box"]（特异性 0,2,1），
+    # 比 html[data-theme-style] （0,1,1）高 —— 光写一条压不住，窄屏照样是桌面版装饰。
+    # 所以用同等特异性的通配属性选择器再写一遍，靠「在文件里更晚」取胜；
+    # 深色作用域块是 0,3,1，还得再补一条。
+    narrow_rules = ""
+    for sel in (
+        'html[data-theme-style="new-sakura"][data-page-scope]',
+        'html[data-theme="dark"][data-theme-style="new-sakura"]',
+        'html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope]',
+    ):
+        narrow_rules += "    %s {\n%s    }\n" % (
+            sel, deco_block_inline(SCOPES["narrow"], indent="        "))
+
     narrow = (
         "\n@media (max-width: 640px) {\n"
         '    html[data-theme-style="new-sakura"] {\n'
         + deco_block_inline(SCOPES["narrow"], indent="        ")
-        + "        /* 手机上唯一的留白是顶栏上下两条，装饰层没有立足之地 —— 缩小底纹让樱花密起来 */\n"
-        "        --tb-page-pattern-size: 200px 200px;\n"
-        "    }\n}\n"
+        + "        /* 手机上装饰层整个收掉（卡片占满宽度），樱花只能由底纹承担：\n"
+        "           换成加强版 + 缩小格子，否则 390px 上看就是一片纯粉 */\n"
+        "        --tb-page-pattern: %s;\n" % u["pattern_narrow"]
+        + "        --tb-page-pattern-size: 180px 180px;\n"
+        "    }\n"
+        + narrow_rules
+        + "}\n"
     )
 
     return HEADER + body + dark_block + narrow + FOOTER

docs/theme-new-sakura.md

@@ -11,7 +11,7 @@
 - 换花色只改 `dev/theme-tools/gen_new_sakura.py` 里的一个色值，重跑即得；
 - 没有额外 HTTP 请求 —— SVG 就在 CSS 里。
 
-代价是 CSS 有 51KB（服务端有 gzip，实际传输约 3.9KB）。主题 CSS 走 `StaticVersion` 缓存，一次性开销。
+代价是 CSS 有 54KB（服务端有 gzip，实际传输约 4KB）。主题 CSS 走 `StaticVersion` 缓存，一次性开销。
 
 ## 结构
 
@@ -46,8 +46,20 @@ python dev/theme-tools/gen_new_sakura.py
 
 ### 窄屏（≤640px）
 
-装饰层全部置 `none`：卡片占满宽度后，留白只剩顶栏上下两条，枝条会直接糊在文字上。
-樱花改由底纹承担 —— `@media` 里把 `--tb-page-pattern-size` 从 300px 收到 200px，密度上来才看得见。
+装饰层全部置 `none`：卡片占满宽度，左右只剩 ~16px 边距，枝条放哪儿都会糊在字上。
+樱花改由底纹承担 —— `@media` 里换成**加强版 pattern**（透明度 ×1.9）并把格子收到 180px；
+桌面那套 0.18~0.34 的透明度在 390px 上实测接近一片纯粉。
+
+试过在「顶栏与卡片之间」那条 35px 的带子里放两朵小樱花：box 页卡片从 y=122 起还行，
+question / admin 页卡片从 y=110 起就切掉半个，结果是黏在卡片边上的粉色碎块。手机上没有
+可靠的留白，就不放装饰层 —— 观感交给配色与底纹。
+
+⚠️ **窄屏覆盖必须重新声明每个作用域选择器**：`@media` 不提升特异性。
+作用域块是 `html[data-theme-style][data-page-scope="box"]`（0,2,1），而媒体查询里常见的
+`html[data-theme-style]`（0,1,1）根本压不住它 —— 表现是「手机上装饰层没关掉，桌面版照样铺开」。
+深色作用域块更是 0,3,1，还得再补一条 `[data-theme="dark"][data-theme-style][data-page-scope]`。
+`TestNarrowMediaOverridesScopedDeco` 会在这里把关：外层每一处非 none 的 `--tb-deco`，
+媒体查询里都要求有同属性名、属性数不少于它的选择器再声明一次。
 
 ### 深色
 
@@ -116,11 +128,11 @@ python dev/theme-tools/gen_new_sakura.py \
 
 | 版本 | CSS | gzip 后 | 额外请求 | 清晰度 |
 | --- | --- | --- | --- | --- |
-| 内联 SVG（默认） | 51.2KB | **3.9KB** | 0 | 矢量，任意 DPR |
-| 位图 | 10.6KB | 2.7KB | 5 个 webp，共 48.9KB | 2 倍图 |
+| 内联 SVG（默认） | 53.8KB | **4.0KB** | 0 | 矢量，任意 DPR |
+| 位图 | 11.8KB | 2.8KB | 5 个 webp，共 48.9KB | 2 倍图 |
 
-服务端挂了 gzip（`internal/route/gzip.go`），所以内联版**总传输 3.9KB**，比位图版的
-2.7 + 48.9 = 51.6KB 小一个数量级 —— 换位图省不了流量，只是把开销从 CSS 挪到图片。
+服务端挂了 gzip（`internal/route/gzip.go`），所以内联版**总传输 4.0KB**，比位图版的
+2.8 + 48.9 = 51.7KB 小一个数量级 —— 换位图省不了流量，只是把开销从 CSS 挪到图片。
 位图版唯一正当的理由是**素材要单独复用**（分享卡、海报、其它系统）。
 
 ⚠️ 直接连桶的 S3 endpoint（`*.r2.cloudflarestorage.com`）会 403，**只有自定义域/r2.dev 可匿名读**。
@@ -140,7 +152,7 @@ python dev/theme-tools/gen_new_sakura.py \
 ## 怎么验证
 
 ```bash
-go test ./internal/theme          # 10 槽等长、深浅块成对、必需令牌齐全
+go test ./internal/theme          # 10 槽等长、深浅块成对、必需令牌齐全、窄屏覆盖特异性
 ```
 
 视觉自检用项目真实页面快照：

internal/theme/narrow_test.go

@@ -0,0 +1,170 @@
+package theme
+
+import (
+	"io/fs"
+	"regexp"
+	"strings"
+	"testing"
+
+	"github.com/tamakyi/TamaBox/static"
+)
+
+var ruleRe = regexp.MustCompile(`(?s)([^{}]+)\{([^{}]*)\}`)
+
+// TestNarrowMediaOverridesScopedDeco 守一个只会「静默失效」的坑：
+// 窄屏媒体查询里写的装饰层覆盖，若特异性不如页面作用域块，就完全不生效。
+//
+// 作用域块是 html[data-theme-style][data-page-scope="box"]（两个属性），
+// 而 @media 里常见的写法是 html[data-theme-style]（一个属性）——
+// 媒体查询不会提升特异性，于是桌面的装饰层在手机上照旧铺开，
+// 表现就是「加了素材，窄屏糊在卡片上」。深色作用域块有三个属性，更难压。
+//
+// 判定：外层每一处「不全是 none」的 --tb-deco 声明，窄屏媒体查询里必须有一处属性名集合
+// 相同、属性个数不少于它、值相同或更宽泛的选择器再声明一次
+// （媒体查询在文件更后，同特异性必胜）。本来就声明成 none 的（如深色直接关掉装饰层）不算。
+func TestNarrowMediaOverridesScopedDeco(t *testing.T) {
+	checked := 0
+	for _, slug := range discover() {
+		name := themeCSSDir + slug + ".css"
+		b, err := fs.ReadFile(static.FS, name)
+		if err != nil {
+			t.Fatalf("读取 %s: %v", name, err)
+		}
+		css := commentRe.ReplaceAllString(string(b), "")
+		inner, outer := splitNarrow(css)
+
+		outerSels := decoSels(outer, true)
+		if len(outerSels) == 0 {
+			continue
+		}
+		narrowSels := decoSels(inner, false)
+		for _, s := range outerSels {
+			checked++
+			if !coveredBy(s, narrowSels) {
+				t.Errorf("%s: 窄屏 @media (max-width: 640px) 里没有能压住 `%s` 的装饰层声明"+
+					"（同属性名、属性数不少于它）—— 该作用域在手机上会沿用桌面装饰层", name, s.raw)
+			}
+		}
+	}
+	t.Logf("共校验 %d 处作用域装饰层声明", checked)
+}
+
+// splitNarrow 把 css 拆成「窄屏媒体查询内部」与「其余」两部分。
+// 任何 max-width 断点都算（shiroko 用的是 900px，按内容宽度自己定更合理）。
+func splitNarrow(css string) (inner, outer string) {
+	var rest strings.Builder
+	for {
+		i := strings.Index(css, "@media (max-width:")
+		if i < 0 {
+			rest.WriteString(css)
+			return inner, rest.String()
+		}
+		rest.WriteString(css[:i])
+		open := strings.IndexByte(css[i:], '{')
+		if open < 0 {
+			return inner, rest.String()
+		}
+		open += i
+		depth, end := 0, -1
+		for j := open; j < len(css); j++ {
+			switch css[j] {
+			case '{':
+				depth++
+			case '}':
+				depth--
+				if depth == 0 {
+					end = j
+				}
+			}
+			if end >= 0 {
+				break
+			}
+		}
+		if end < 0 {
+			return inner, rest.String()
+		}
+		inner += css[open+1 : end]
+		css = css[end+1:]
+	}
+}
+
+type decoSel struct {
+	raw   string
+	attrs map[string]string // 属性名 → 值（空值表示只检查属性存在）
+}
+
+// decoSels 取出所有声明了 --tb-deco 的规则里的选择器。
+// skipNone 用于外层：值全是 none 的本来就没有装饰层可压，不必要求窄屏再声明一次。
+// 窄屏侧不能跳（那里往往正是靠 none 来收掉桌面装饰层）。
+func decoSels(css string, skipNone bool) []decoSel {
+	var out []decoSel
+	for _, m := range ruleRe.FindAllStringSubmatch(css, -1) {
+		value := declarationValue(m[2], "--tb-deco:")
+		if value == "" || (skipNone && allNone(value)) {
+			continue
+		}
+		for _, one := range strings.Split(m[1], ",") {
+			one = strings.TrimSpace(one)
+			if strings.HasPrefix(one, "@") {
+				continue
+			}
+			out = append(out, decoSel{raw: one, attrs: attrMap(one)})
+		}
+	}
+	return out
+}
+
+func declarationValue(body, key string) string {
+	i := strings.Index(body, key)
+	if i < 0 {
+		return ""
+	}
+	rest := body[i+len(key):]
+	if j := strings.IndexByte(rest, ';'); j >= 0 {
+		rest = rest[:j]
+	}
+	return strings.TrimSpace(rest)
+}
+
+func allNone(v string) bool {
+	layers := splitTopLevel(v)
+	if len(layers) == 0 {
+		return false
+	}
+	for _, l := range layers {
+		if l != "none" {
+			return false
+		}
+	}
+	return true
+}
+
+// attrMap 解析选择器里的 [name="value"]，只保留属性名与值。
+func attrMap(sel string) map[string]string {
+	out := map[string]string{}
+	for _, m := range regexp.MustCompile(`\[([a-zA-Z-]+)(?:="?([^"\]]*)"?)?\]`).FindAllStringSubmatch(sel, -1) {
+		out[m[1]] = m[2]
+	}
+	return out
+}
+
+// coveredBy 判断媒体查询里的某个选择器是否能在同特异性下压过 outer。
+func coveredBy(outer decoSel, narrow []decoSel) bool {
+	for _, n := range narrow {
+		if len(n.attrs) != len(outer.attrs) {
+			continue
+		}
+		ok := true
+		for k, v := range outer.attrs {
+			nv, has := n.attrs[k]
+			if !has || (nv != "" && nv != v) {
+				ok = false
+				break
+			}
+		}
+		if ok {
+			return true
+		}
+	}
+	return false
+}

static/css/themes/new-sakura.css

@@ -156,8 +156,25 @@ html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope="vote"] {
         --tb-deco: none, none, none, none, none, none, none, none, none, none;
         --tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
         --tb-deco-position: left top, left top, left top, left top, left top, left top, left top, left top, left top, left top;
-        /* 手机上唯一的留白是顶栏上下两条，装饰层没有立足之地 —— 缩小底纹让樱花密起来 */
-        --tb-page-pattern-size: 200px 200px;
+        /* 手机上装饰层整个收掉（卡片占满宽度），樱花只能由底纹承担：
+           换成加强版 + 缩小格子，否则 390px 上看就是一片纯粉 */
+        --tb-page-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cg%20transform%3D%22translate%2896%2084%29%20scale%280.34%29%20translate%28-50%20-50%29%22%20opacity%3D%220.65%22%3E%3Cg%20fill%3D%22%23f2bfd0%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%280%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%2872%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28144%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28216%2050%2050%29%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2227%22%20rx%3D%2214%22%20ry%3D%2221%22%20transform%3D%22rotate%28288%2050%2050%29%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28236%20208%29%20rotate%2828%29%20scale%280.26%29%22%20opacity%3D%220.46%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f2bfd0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28188%2052%29%20rotate%28-34%29%20scale%280.2%29%22%20opacity%3D%220.34%22%3E%3Cpath%20d%3D%22M20%201c9%200%2015%208%2015%2018%200%205-2%209-4%2012l-4-5-7%209-7-9-4%205c-2-3-4-7-4-12C5%209%2011%201%2020%201z%22%20fill%3D%22%23f2bfd0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+        --tb-page-pattern-size: 180px 180px;
+    }
+    html[data-theme-style="new-sakura"][data-page-scope] {
+        --tb-deco: none, none, none, none, none, none, none, none, none, none;
+        --tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
+        --tb-deco-position: left top, left top, left top, left top, left top, left top, left top, left top, left top, left top;
+    }
+    html[data-theme="dark"][data-theme-style="new-sakura"] {
+        --tb-deco: none, none, none, none, none, none, none, none, none, none;
+        --tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
+        --tb-deco-position: left top, left top, left top, left top, left top, left top, left top, left top, left top, left top;
+    }
+    html[data-theme="dark"][data-theme-style="new-sakura"][data-page-scope] {
+        --tb-deco: none, none, none, none, none, none, none, none, none, none;
+        --tb-deco-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
+        --tb-deco-position: left top, left top, left top, left top, left top, left top, left top, left top, left top, left top;
     }
 }