/* ==================== 四屏的"石头"：每屏一套，从它自己的水色推 ==================== 这一整轮（SKEUO_DRAFT 4.8 / 4.9）把世界定成了沉在水底的亚特兰蒂斯， 四屏的背景已经是石头了；这个文件解决的是**UI 那一半**。 ---- 为什么不是一套全站的 `--stone` ---- 深度轴刚建立（backdrop.js 的 SCENES）：天梯最浅偏蓝 → 鱼缸 → 鱼谱 → 图鉴最深。UI 的底如果全站一个色，四屏的区分就只剩背景， **UI 反过来把刚建立的深度轴抹掉一半**。 所以每屏一套，而且不是"挑四个好看的色"——是从**那一屏的水色**等亮度换算： --stone-face 面板的面。不透光的实体，比水暗一档（L ≈ near × 0.62） --stone-deep 凹进去的底（L ≈ near × 0.30） --stone-seam 暗缝（从 deep 再压一档） --stone-lit 迎光的棱。**冷暖跟着那一屏有什么灯**，不是配色偏好 `--stone-lit` 那一条最要紧： 天梯 天光 → 冷白 #bdcad8 鱼缸 柱顶暖灯 → 暖 #ffc07a 鱼谱 龛里暖灯 → 暖 #ffc07a 图鉴 发光刻纹 → 冷 #aeced8 ← **这一屏一盏暖灯都没有** 图鉴和鱼谱因此并排看就是两种地方：一个全冷、一个全暖。那不是风格选择, 是"那屏点着什么灯"的直接结果。 ---- 三条从占卜屏那一轮继承的判据 ---- ① **换底不换语义色。** 正面绿 / 负面红 / 部位色 / 召唤那颗品红一个值都不动 ——它们是**信息**（这条词条是好是坏、三维哪一条高），不是风格。 ② **凸出还是凹进决定亮暗。** 占卜屏那次 `.name-row` 就是栽在这儿： 等亮度换算数学没错，但把"凿出来的凹格"画成了"托起来的木盘"。 凸出（按钮）= 上沿一道 lit + 下方 seam + 接地影 凹进（输入框/槽）= 上缘 inset 阴影 + 下缘极淡的 lit 反光 ③ **体是冷的，照在它上面的光才是暖的。** 大面积的面用 face（冷）, 只有**窄边**用 lit。整块面刷暖色会立刻读成"另一种材料"。 ---- 作用域 ---- 全部挂在 `.view[data-view="..."]` 上，**不进 tokens.css**。 理由是爆炸半径：`button` / `input` / `select` 用在每一屏（对战 HUD、结算、 弹窗、顶栏、开发面板）。占卜屏那一轮就是因为 `button:hover` 是全站的, 冒出过一个盖住整座宫殿的深蓝方块。 */ /* ---- ⚠️ 占卜屏：**判据的来源，却一直没并进来**（2026-08-30 补）---- * * 这个文件开头那三条判据写着"从占卜屏那一轮继承"——它是拟物化第 1 批， * 后面四屏的做法都是从它身上学的。**而它自己没有这一套变量**： * 那一轮做的时候还没有 stone.css，于是它把同一种材料**手写了一遍** * （实测 `css/divination.css` 里 208 处颜色、167 种色号）。 * * 典型的"抽象出现在第三个调用方之后，没人回头改第一个"。 * * 下面这一组是从**它现在真的画出来的颜色**反推的，不是重新配色—— * 目的是让它进到同一套词汇里，而不是让它换个样子： * * face 桌板和铜座的中间调（实测 rgba(36,49,45) 一族），压到 #1c2620 * ——⚠️ 压这一档是有原因的：原值 #243129 对 `--ink-faint` 只有 * 4.07:1，低于 AA 的 4.5（tools/inkContrast.test.js 会红）。 * 它是全站最亮的一块"面"，而最亮的面就是对比度的瓶颈。 * deep 铜座渐变的底（实测 rgba(18,29,31)） * seam 从 deep 再压一档 * lit **暖**：台上那盏封住的铜灯。这一屏的注释里早就写着 * "石头的体是冷的、照在它上面的光是暖的"——那句话说的就是这个值。 */ .view[data-view="divination"] { --stone-face: #1c2620; --stone-deep: #121d1f; --stone-seam: #0a1214; --stone-lit: #eeca98; } .view[data-view="ladder"] { --stone-face: #142732; --stone-deep: #0a1318; --stone-seam: #080f14; --stone-lit: #bdcad8; /* 天光：这四屏里唯一的天然白光 */ } .view[data-view="tank"] { --stone-face: #142220; --stone-deep: #0a1010; --stone-seam: #070c0c; --stone-lit: #ffc07a; /* 柱顶那两盏封住的灯 */ } .view[data-view="codex"] { --stone-face: #111e1e; --stone-deep: #080e0e; --stone-seam: #060909; --stone-lit: #ffc07a; /* 每个龛里一盏 */ } .view[data-view="atlas"] { --stone-face: #0f1b1f; --stone-deep: #070d0f; --stone-seam: #030607; --stone-lit: #aeced8; /* 发光的刻纹。**这一屏没有暖光** */ } /* 试炼池（第 3 批，2026-08-29）。深度轴上最深的一屏——它是从房间的地面 **再往下凿**的一个坑，所以这一组是四屏里最暗的。灯是池沿那两盏封住的, 所以迎光是暖的。 */ .view[data-view="trial"] { --stone-face: #0b1618; --stone-deep: #050b0c; --stone-seam: #030708; --stone-lit: #ffc07a; /* 池沿左右各一盏 */ } /* 布景（第 5 批）。这一屏不是一间屋子，是**一张台子**：面比别的屏亮一档 （那盏聚光的灯就在正上方），迎光是暖的。 */ .view[data-view="layout"] { --stone-face: #14211f; --stone-deep: #0a1211; --stone-seam: #060b0a; --stone-lit: #ffd0a0; /* 工作灯：比别的屏那几盏更白一点，因为它更近 */ } /* ==================== 屏内切换：物件在换，不是 div 在换 ==================== 用户：「不要单纯用按钮切换，而是实际场景中的物件，切换过渡一定要做好」。 机制在 js/ui/components/tabs.js（那儿有完整的账）。这里只管两件事： ---- ① 为什么不做交叉淡入 ---- 硬验收有两条：**任何一帧不许有两块面板同时可见**（那读作"内容重影"）， **场景层任何一帧不许是空的**。交叉淡入直接违反第一条。 所以形状是「旧的下沉 → 那一瞬硬切 → 新的升起」，而 DOM 那一下硬切被藏在 **背景正在推物件**的那一段里。和切屏那层幕同一条判据 （css/system.css：幕把背景的硬切藏在最暗的时刻）。 ---- ② 位移的方向是"沉下去 / 升起来"，不是左右滑 ---- 左右滑是"翻页"的语言（同一件东西的下一页）。而这三段是**三件不同的物件** （榜 / 你自己那块碑 / 一对石柱），换的是"你在看哪一件"， 所以动作该是那一件被推上来。 */ /* ---- ③ 沉到最暗，**但不沉到没有** ---- 实测（天梯 13/360 帧、鱼缸 2/27 帧，两位各自独立量到）： 原来 sink 的末帧是 `opacity: 0`、rise 的首帧也是 0，于是中间有 **40~90ms 面板层整个是空的**。 放在从前那不算问题——面板那时候是一张浮在场景上的 UI 卡片， 消失 90ms 只是"卡片换了"。但这一轮面板已经**变成场景里的一块石头**了, 一块石头凭空消失 90ms 读作一次闪，而且正是用户抱怨过的那一类 （「场景间切换会产生黑屏」）。 所以给它一个**地板**：沉到 --tab-dim 就不再往下，换上来的那一块从 同一个值起。任何一帧都有石头在，而两块**仍然一帧都不同时可见** （硬切发生在 dim 那一瞬，前一块在这一瞬被 hidden）。 那正是切屏那层幕的同一条判据：**把硬切藏在最暗的时刻**。 ---- 位移必须在硬切那一点接上 ---- 原来 sink 收在 +6px，而 rise 从 **−5px** 起——那是从上面**降下来**, 叫 rise 但做的是反向，而且和 sink 的末位置差 11px。 以前看不见所以无所谓；现在那一瞬是可见的（0.34），11px 的跳会读出来。 改成 rise 也从 +6px 起：石头沉下去、换一块、从同一个深度升回来。 一个数（--tab-drop）管两头。 */ .view { --tab-dim: 0.34; /* 最暗那一档：还看得出是块石头，但读不出上面刻着什么 */ --tab-drop: 6px; /* 沉多深。sink 的终点和 rise 的起点是**同一个值** */ } .tab-panel.tab-out { animation: tab-sink var(--t-fast) var(--ease-out) forwards; } .tab-panel.tab-in { animation: tab-rise var(--t-base) var(--ease-out); } @keyframes tab-sink { from { opacity: 1; transform: translateY(0); } to { opacity: var(--tab-dim); transform: translateY(var(--tab-drop)); } } @keyframes tab-rise { from { opacity: var(--tab-dim); transform: translateY(var(--tab-drop)); } to { opacity: 1; transform: translateY(0); } } /* ⚠️ **`forwards` 只给 `tab-sink`，不给 `tab-rise`。** `tab-out` 的末帧要留住（不留的话面板会在 hidden 之前弹回不透明，闪一下）。 而 `tab-rise` **不许留末帧**：留了就等于给面板挂上一个常驻的 `transform`, 而**带 transform 的祖先会成为 `position: fixed` 后代的包含块**—— 占卜屏那一轮就是这么把一块铺满视口的画布收进内容列的 （实测 1997×1440 → 1320×1330）。 */ @media (prefers-reduced-motion: reduce) { /* 这一层动效是**纯装饰**：内容一模一样，只是换了个视图。 所以它是最该尊重这个设置的一层。JS 那边也会跳过动画（tabs.js）, 这里是第二道：万一哪天有人绕过 JS 直接加类。 */ .tab-panel.tab-out, .tab-panel.tab-in { animation: none; } } /* ==================== 主行动：房间里的那一块，是**被照亮的** ==================== 走查⑥："主行动点没有重量"。实测两半，都成立： ① **没标**。鱼缸那一屏的「保存」是个裸 `