/* tank 屏的 UI：把它变成场景里的石头（SKEUO_DRAFT 4.9）。
 *
 * 变量在 css/stone.css（`--stone-face` / `--stone-deep` / `--stone-seam` /
 * `--stone-lit`），全部挂在 `.view[data-view="tank"]` 上。
 *
 * 三条判据（从占卜屏那一轮继承，账在 stone.css 开头）：
 *   ① 换底不换语义色
 *   ② 凸出还是凹进决定亮暗
 *   ③ 体是冷的，照在它上面的光才是暖的
 *
 * ⚠️ **作用域一律限定在 `.view[data-view="tank"]` 之内。**
 * `button` / `input` / `select` 用在每一屏（对战 HUD、结算、弹窗、顶栏），
 * 不限定就会炸到全站——占卜屏那一轮的 `button:hover` 就是这么冒出来
 * 一个盖住整座宫殿的深蓝方块的。
 *
 * ==================== 这一屏在说什么 ====================
 *
 * 背景（js/render/props/arenaHall.js）是**你站在那座竞技场里面**：一圈断柱、
 * 中心一座冷光信标、正对面一个缺口当门。所以这一屏的 UI 不能是"浮在场景前面
 * 的一张卡片"，它得是**场地里的石头**：
 *
 *   面板        场地那一头的一块石台，下沿正压在地平线上
 *   两个标签    台前立着的两块牌，选中那块被推出来一点
 *   按钮        凿出来的凸块      input / select  凿进去的凹格
 *   布景入口    场地边的一块指路碑，碑上开着一道通往别处的小门
 *
 * ---- 面板的下沿 = 地平线，这条是**硬**的 ----
 *
 * 家具那一层的地平线**直接读这块 DOM 的下沿**（arenaHall 的 `horizonY`,
 * 靠 `data-prop` 量出来的盒子），误差 1px。于是：
 *
 *   · 面板不许有任何**盒子之外**的装饰（`::after` 一律在 padding 盒里面,
 *     外阴影只用 box-shadow）。`getBoundingClientRect()` 量不到那些东西,
 *     一旦下沿的"视觉位置"和"盒子位置"分开，地平线就跟着错。
 *   · 也**不许有 transform**。位移不改盒子，那会立刻造出同一种错位。
 *
 * 上一轮这条对不上的根因是 `horizonY` 拿的是比例（h × 0.505）而面板下沿是
 * 固定像素——视口一矮，面板就盖过地平线。现在两页都挂了 `data-prop`
 * （`tank.card` 在 index.html，`tank.rooms` 由 tankView 挂上），这条根治了。
 */

.view[data-view="tank"] {
  /* 窄边的迎光。**只有窄边用 lit**（判据 ③）：整块面刷暖色会立刻读成
     "另一种材料"。三档分别给"棱"、"边框"、"极淡的反光"。
     光源是柱顶那两盏封住的暖灯（--stone-lit 是 #ffc07a）。 */
  --tk-lit-1: color-mix(in srgb, var(--stone-lit) 14%, transparent);
  --tk-lit-2: color-mix(in srgb, var(--stone-lit) 22%, transparent);
  --tk-lit-0: color-mix(in srgb, var(--stone-lit) 6%, transparent);
  /* 暗缝和接地影。石头的暗不是"更黑的蓝"，是**没有光到过的地方**。 */
  --tk-seam: rgba(5, 9, 9, 0.9);
  --tk-cast: rgba(0, 0, 0, 0.85);
  /* 斑驳：两组周期互质、角度略差的重复渐变，互相打拍子出来的不规则纹理。
     账在 css/divination.css 的 `.diviner-table` 上（那儿是从竖木纹换过来的）。
     ⚠️ 角度用 2/178 而不是 0/180：完全水平的层理读作"页面的分隔线"。 */
  --tk-grain:
    repeating-linear-gradient(2deg,
      rgba(214, 236, 232, 0.020) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(178deg,
      rgba(180, 210, 206, 0.016) 0 1px, transparent 1px 11px);

  /* ---- ⚠️ 石台的高度：**一个数，两页共用** ----
     两页的自然高度不一样（我的鱼缸 350、做客 292），而地平线是**量出来的**
     那一页的下沿。如果两页的下沿不同高，切一次标签地平线就跳一次
     ——那读作"地在动"，而地是这一屏唯一不动的东西。
     所以两块石台一样高：它们是**同一块**石台（场地那一头那面墙），
     换的只是墙上摆着什么。
     ⚠️ 这个数有一条**硬上界**：面板下沿必须留在 `h × 0.72` 之上
     （arenaHall.horizonY 的夹子，再往下整块地面就被挤没了）。内容从
     y ≈ 144 起，所以 `144 + 石台高 ≤ 0.72h`，也就是说
     **352 这个值要求台子至少 689px 高**（1280×720 那一档还剩 22px 余量）。
     再往上抬一档（比如给状态行留一整行的位置）就会在 720 上越界,
     地平线会被夹到面板下沿**之上**——那时候面板就压在地面上了。 */
  --tk-slab-h: 352px;
}

/* ==================== ① 面板 = 场地那一头的一块石台 ==================== */

.view[data-view="tank"] .card {
  position: relative;
  /* 圆角是 UI 的语言。**石头的角是切角或崩口**，2px 是"凿出来的棱被水磨过
     几百年"——8px（--r-md）是"一张卡片"。 */
  border-radius: 2px;
  border: 0;
  /* 上棱一道迎光（判据 ②：凸出 = 上沿一道 lit + 下方 seam + 接地影）。
     ⚠️ 这一屏唯一"照亮东西"的光其实是**画面中央偏下**那座信标（arenaHall
     开头那段），照理这块台子的下缘才该更亮。这里仍然按"上棱迎光"画,
     因为它是**凸出**这件事的读法本身（stone.css 判据 ②），把它反过来会
     立刻读成一个凹槽。代价是 lit 压到 14% 且只有 1px：真正的暖只留给
     脚边那两盏灯。 */
  border-top: 1px solid var(--tk-lit-2);
  /* 下面留出近沿的厚度（::after 那 13px）+ 一档间距 */
  padding: var(--sp-4) var(--sp-4) 30px;
  background:
    var(--tk-grain),
    /* 体是冷的（判据 ③）。上暗下亮：光从场心那座信标来，它在下面。
       **半透明**是刻意的：这块台子泡在水里，背后那层水色和微粒透上来一点,
       它才是"场景里的石头"而不是"贴在场景前面的一块板"。
       透得也不多（0.90~0.94）——面板下沿要能挡住地平线以上的一切,
       那是整屏纵深的支点。 */
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-deep) 90%, transparent) 0%,
      color-mix(in srgb, var(--stone-face) 91%, transparent) 58%,
      color-mix(in srgb, var(--stone-face) 94%, transparent) 100%);
  box-shadow:
    /* 上棱的内高光：和上面那道 border-top 是同一条棱的两个面 */
    inset 0 1px 0 var(--tk-lit-1),
    /* 两侧和下方的暗缝 */
    inset 1px 0 0 var(--tk-seam),
    inset -1px 0 0 var(--tk-seam),
    /* ---- 接地影：落在地平线下面那片海底上 ----
       ⚠️ **只能用 box-shadow**，不能用 `::after` 伸到盒子外面：
       外阴影不进 `getBoundingClientRect()`，所以地平线不会跟着跑
       （见文件开头"面板的下沿 = 地平线"那段）。 */
    0 16px 26px -14px var(--tk-cast),
    0 3px 0 -1px rgba(3, 6, 7, 0.75);
}

/* 近沿的厚度。你站在场地里，这块台子的近侧朝着你——所以看得见它的**厚**。
   ⚠️ **在 padding 盒里面**（bottom: 0），不是 `bottom: -13px`：
   盒子外面的东西量不到，地平线就会和看得见的下沿错开 13px。 */
.view[data-view="tank"] .card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13px;
  border-radius: 0 0 2px 2px;
  /* 台面 → 近侧面的转折：一道极淡的棱，然后越往下越暗到接地 */
  background: linear-gradient(180deg,
    rgba(12, 20, 19, 0.55),
    rgba(5, 9, 9, 0.72) 55%,
    rgba(3, 5, 6, 0.82));
  box-shadow: inset 0 1px 0 var(--tk-lit-0);
  pointer-events: none;
}

/* 台上的字要坐在自己的底上（规矩 5）。这块台子已经是实底，所以只收行长
   ——满宽的说明在 1440 上是一行 80 个汉字。 */
.view[data-view="tank"] .card > .hint { max-width: 46ch; }

/* ---- 两块石台一样高，而且**高度不随内容变** ----

   ⚠️ 这一条不是排版偏好，是**几何**：地平线 = 量出来的那块 DOM 的下沿
   （arenaHall 的 `horizonY`），而那一次测量发生在**进屏那一拍**
   （main.js 的 applyStageLayout）。之后：
     · 切标签      —— 两页不同高就会让地平线错开（见 --tk-slab-h 那段）
     · 异步到达的数据 —— 房间列表从"正在检索…"变成三行，石台就长高了,
       而那时候没有任何东西会去重量（`.view` 的盒子是钉在视口上的,
       ResizeObserver 不会响）
   两件事都会让面板浮在地平线上面或者压过它。

   所以石台的高度**由它自己定死**，内容在里面排：
     · 房间列表吃掉剩下的高度（一整面墙的龛，格子多少不改变墙有多高）
     · 状态行**预留一行**（它平时是空的，一出现就会把整块台子顶高一档）

   ⚠️ 治本的那一刀不在这个文件里：main.js 的 `stageObserver` 只观察
   `.view` 和 `documentElement`，**没观察带 `data-prop` 的元素本身**。
   加一句 `for (const el of document.querySelectorAll('[data-prop]'))
   stageObserver.observe(el)` 之后，上面这些就全部自愈了，
   这一节也可以只留"两页同高"那一条。 */
.view[data-view="tank"] .card {
  min-height: var(--tk-slab-h);
}
.view[data-view="tank"] #rooms-card {
  display: flex;
  flex-direction: column;
}
.view[data-view="tank"] #tank-list {
  flex: 1 1 auto;
  /* max-height 那一道闸换成"吃掉剩下的"。`min-height: 0` 是 flex 项目滚动
     的必要条件：不给的话它的最小尺寸是内容尺寸，`overflow-y` 永远不生效。 */
  max-height: none;
  min-height: 0;
}
/* ⚠️ 这里本来给状态行**预留了一行**（`min-height: 24px`）：它平时是空的,
   一出现就把整块石台顶高 24px，而那时候没人会去重量地平线。
   **撤了**——预留之后石台是 374 高，`144 + 374 = 518`，正好顶在
   1280×720 的夹子（518.4）上，再差一个像素地平线就被夹到面板**之上**去了。
   两害相权：状态行出现那一下面板下沿短暂地低于地平线 24px（下一次重布局
   就回来），比矮屏上永久压住地面要轻。真要治，还是 main.js 那一句
   `stageObserver.observe(带 data-prop 的元素)`。 */

/* ==================== ② 两个标签 = 台前立着的两块牌 ====================

   用户：「不要单纯用按钮切换，而是实际场景中的物件」。

   这一排在语义上仍然是 tablist（读屏器和键盘全靠它，js/ui/components/tabs.js
   管 aria-selected / tabIndex / 方向键），**按钮一个都没少**——变的只是
   它们看起来是什么：两块立在台前的石牌，选中那块被推出来一点。

   "走进另一座场地"那个动作在背景那一层（arenaHall 的 PUSH：点下的那一瞬间
   画面朝缺口推一段再减速落回）。这里只负责"哪块牌是被推出来的那块"。 */

.view[data-view="tank"] .screen-tabs {
  /* 药丸形的分段控件整条退掉：那是 UI 的语言 */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: var(--sp-2);
  /* 两块牌**底对齐**：被推出来的那块是往上抬，底边还站在同一条地上 */
  align-items: flex-end;
  /* 牌和台子之间留一档：它们是**两件东西**（牌立在台前），
     贴上去就成了文件夹标签 */
  margin-bottom: var(--sp-2);
}

.view[data-view="tank"] .screen-tabs > button {
  border-radius: 2px;
  padding: 7px 18px;
  /* 未选的那块是**平的**：没有上棱、没有接地影，只有一条压在石头里的缝。 */
  background:
    var(--tk-grain),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-deep) 82%, transparent),
      color-mix(in srgb, var(--stone-seam) 80%, transparent));
  color: var(--ink-dim);
  box-shadow:
    inset 0 1px 0 var(--tk-lit-0),
    inset 0 -1px 0 var(--tk-seam);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.view[data-view="tank"] .screen-tabs > button:hover:not(.on) {
  /* 原来那条是 `background: rgba(255,255,255,0.05)`——一层白纱。
     石头上的"手放上来了"是**多接了一点光**，不是蒙了一层白。 */
  background:
    var(--tk-grain),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-face) 86%, transparent),
      color-mix(in srgb, var(--stone-deep) 84%, transparent));
  color: var(--ink);
}

.view[data-view="tank"] .screen-tabs > button.on {
  /* 凸出那一套三件（判据 ②）：上沿一道 lit + 下方 seam + 接地影。
     ⚠️ transform 只在**牌**上，不在面板上：带 transform 的祖先会成为
     `position: fixed` 后代的包含块（占卜屏那次把一块铺满视口的画布
     收进了内容列），而牌里面只有一个图标和一段字。 */
  transform: translateY(-3px);
  background:
    var(--tk-grain),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-face) 94%, transparent),
      color-mix(in srgb, var(--stone-deep) 92%, transparent));
  color: var(--ink);
  font-weight: var(--fw-bold);
  box-shadow:
    inset 0 1px 0 var(--tk-lit-2),
    inset 0 -2px 0 -1px var(--tk-seam),
    0 6px 10px -5px var(--tk-cast);
}

/* ==================== ③ UI 原子：凸出 / 凹进 ====================

   ⚠️ 每一条都带 `.view[data-view="tank"]`。`button` / `input` / `select`
   用在每一屏，不限定就是全站。 */

/* ---- 凸出：按钮 ----
   `:not(.es-cta)` —— 空状态那个出口的颜色是**系统色**（这一屏是哪一屏、
   点它去哪儿），那是信息不是风格（判据 ①），一个值都不动。
   `:not([data-tab])` —— 标签那两块牌在上面单独一节。 */
/* ⚠️ `:not(.primary-btn)` 是 2026-08-30 加的：这条通用规则是"这一屏按钮的
   默认材料"，而主行动按钮**自带语义**（它是这一屏要你按的那一颗）。
   和图鉴那次标签页同一条判据：**默认材料只回答"它是什么做的"，
   回答不了"它是不是主角"。** 主行动的样子在 css/stone.css 末尾统一给。 */
.view[data-view="tank"] button:not(.es-cta):not([data-tab]):not(.primary-btn) {
  border-radius: 2px;
  border: 1px solid var(--tk-seam);
  border-top-color: var(--tk-lit-2);
  background:
    var(--tk-grain),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-face) 95%, transparent),
      color-mix(in srgb, var(--stone-deep) 92%, transparent));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 var(--tk-lit-1),
    0 3px 6px -3px var(--tk-cast);
}

.view[data-view="tank"] button:not(.es-cta):not([data-tab]):not(.primary-btn):hover:not(:disabled) {
  background:
    var(--tk-grain),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-face) 100%, transparent),
      color-mix(in srgb, var(--stone-face) 88%, transparent));
  border-top-color: color-mix(in srgb, var(--stone-lit) 34%, transparent);
}

/* 按下去 = **压进石头里**：凸出的三件事全部反过来（上缘变暗、接地影收掉）。
   位移留着——它是最便宜也最有效的"点到了"（style.css 那条）。 */
.view[data-view="tank"] button:not(.es-cta):not([data-tab]):not(.primary-btn):active:not(:disabled) {
  transform: translateY(1px);
  border-top-color: var(--tk-seam);
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 var(--tk-lit-0);
}

/* ---- 凹进：input / select ----
   判据 ②：凹进 = 上缘 inset 阴影 + 下缘极淡的 lit 反光。
   （占卜屏那次 `.name-row` 就是栽在这儿：等亮度换算数学没错，
   但把"凿出来的凹格"画成了"托起来的木盘"。） */
.view[data-view="tank"] input,
.view[data-view="tank"] select,
.view[data-view="tank"] .tank-field input,
.view[data-view="tank"] .tank-field select {
  border-radius: 2px;
  /* ⚠️ 这一条治的是**最后一个原生控件**：`<select>` 自带的那个箭头和
     底色由操作系统画，凿得再像石头，右边那个三角仍然是 Windows/macOS 的。
     `appearance: none` 收掉它，下面自己画一个。
     （全站只剩这一个 select——别处的下拉早就换成自绘的了，理由写在
     js/ui/views/fishDetail.js 顶上：原生下拉**展开之后**长什么样由系统
     说了算。这一条只治收起来的那一半，展开那一半仍然是系统的；
     等第二个 select 出现再谈抽一个自绘组件——这个项目的规矩是
     **抽象在第三个调用方到场时做**。） */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--tk-seam);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-seam) 92%, transparent),
    color-mix(in srgb, var(--stone-deep) 88%, transparent));
  color: var(--ink);
  box-shadow:
    /* 上缘：凿下去那一刀留下的暗 */
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(0, 0, 0, 0.5),
    /* 下缘：极淡的反光。**极淡**——它只是在说"这里到底了" */
    inset 0 -1px 0 var(--tk-lit-0);
}

/* 自己画的那个角标。**两条渐变拼成的箭头**，不是 SVG data-URI——
   data-URI 里塞不进 CSS 变量，颜色就只能写死，那又是一处会漂的抄件。
   拼渐变能直接吃 `--ink-dim`，跟着文字那一档走。
   ⚠️ 它写在 `background-image` 里，而上面那条用的是 `background` 简写
   ——**顺序不能反**，简写会把它清掉。 */
/* ⚠️ 选择器要和上面那条**一样长**（`.tank-field select` 是 0,3,1）：
   短了就被它的 `background` 简写吃掉——实测只剩一层渐变，角标不见了。 */
.view[data-view="tank"] select,
.view[data-view="tank"] .tank-field select {
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-seam) 92%, transparent),
      color-mix(in srgb, var(--stone-deep) 88%, transparent));
  background-position: right 13px center, right 9px center, 0 0;
  background-size: 5px 5px, 5px 5px, auto;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* 焦点环走全站那一套（style.css 的 :focus-visible），这里只把"选中了"
   做成**槽里多了一点光**。 */
.view[data-view="tank"] input:focus,
.view[data-view="tank"] select:focus {
  border-color: color-mix(in srgb, var(--stone-lit) 26%, var(--tk-seam));
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent);
}

/* 水域说明那一行是**凹进去的一条刻字带**：它解释的是上面那个槽里的选择,
   所以它该和那个槽是同一块石头上的两道凿痕。 */
.view[data-view="tank"] .scene-hint {
  padding: 7px 10px;
  border-radius: 2px;
  background: rgba(6, 11, 11, 0.45);
  box-shadow:
    inset 0 2px 3px -1px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 var(--tk-lit-0);
}

/* ---- 空态 = 空着的凹格 ----
   虚线框是"这里将来会有东西"的 UI 说法；石头的说法是**一个空着的槽**：
   凿好了，还没放东西进去。图标和那句话不动（`.es-cta` 的系统色也不动）。 */
.view[data-view="tank"] .empty-state {
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(4, 8, 8, 0.55),
    rgba(9, 15, 15, 0.40));
  box-shadow:
    inset 0 3px 6px -2px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 var(--tk-lit-0);
}

/* ---- 房间列表：一排凿在墙上的龛 ----
   每一行是别人的一座场子。凹进（它们是墙上的格子，不是抬起来的按钮）,
   行里那个"进去打"仍然是凸出的按钮——**能点的那件东西必须是凸的**。 */
.view[data-view="tank"] .tank-row {
  /* ⚠️ **边框留着，只换颜色。** 这一行的 `:hover` 在 style.css 里把
     `border-color` 换成 `--sys-rooms`（"这一屏是哪一屏"那个系统色）——
     `border: 0` 会把那个状态信号一起删掉，而它是信息不是风格（判据 ①）。 */
  border: 1px solid var(--tk-seam);
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(5, 10, 10, 0.5),
    rgba(11, 18, 18, 0.34));
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 var(--tk-lit-0);
}
.view[data-view="tank"] .tank-row:hover {
  /* 位移留着（那 2px 有 `.tank-list` 的 `overflow-x: hidden` 兜着），
     但"亮起来"改成**龛里接到了光**：上缘的暗压掉一档，下缘的反光提一档。 */
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 var(--tk-lit-1);
}

/* ==================== ④ 布景入口 = 场地边的一块指路碑 ====================

   它是"去另一个地方"（布景是三级屏），所以它不该长得像面板里的一行设置。
   一块**立在场地边的碑**：顶上两个角是切角（石头的角是切角或崩口，不是圆角）,
   碑上开着一道小门——那道门就是入口本身。 */

.view[data-view="tank"] .tank-layout-link {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: var(--sp-3) var(--sp-4);
  /* 顶上两个切角。⚠️ `clip-path` 会把**外阴影一起剪掉**，所以接地影改用
     `filter: drop-shadow()`——它在裁剪之后才作用，跟着裁出来的形走。
     （`filter` 会让这个元素成为 fixed 后代的包含块。这里面只有一段字和
     一个按钮，没有 fixed，所以安全；别往里塞浮层。） */
  clip-path: polygon(
    0 8px, 8px 0,
    calc(100% - 8px) 0, 100% 8px,
    100% 100%, 0 100%);
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
  background:
    var(--tk-grain),
    linear-gradient(180deg,
      color-mix(in srgb, var(--stone-face) 92%, transparent),
      color-mix(in srgb, var(--stone-deep) 90%, transparent));
  box-shadow:
    inset 0 1px 0 var(--tk-lit-1),
    inset 0 -2px 0 -1px var(--tk-seam);
}

/* 碑上那行字是**刻**的：一道极暗的下沉 + 一道极亮的上沿。 */
.view[data-view="tank"] .tll-text {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 var(--tk-lit-0);
}

/* 那道门。拱顶 + 门里比外面暗一档，而**门楣接光**：
   一个平顶的方块读作按钮，拱顶读作门。 */
.view[data-view="tank"] #goto-layout {
  border-radius: 48% 48% 2px 2px / 46% 46% 2px 2px;
  padding: 8px 20px 7px;
  border-top-color: color-mix(in srgb, var(--stone-lit) 30%, transparent);
  box-shadow:
    /* 门楣那一道最亮的棱：整屏最强的一条 lit 就给它——它是这一屏唯一
       "去别处"的出口 */
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    /* 门里往里退：上缘一道内阴影，那是门洞的深 */
    inset 0 6px 10px -6px rgba(0, 0, 0, 0.6),
    0 3px 6px -3px var(--tk-cast);
}
.view[data-view="tank"] #goto-layout:hover:not(:disabled) {
  /* 门里亮起来 = 那边点着灯。**不是描边变色**：门是个洞，洞的状态在里面。 */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 40%, transparent),
    inset 0 10px 14px -8px color-mix(in srgb, var(--stone-lit) 22%, transparent),
    0 4px 8px -3px var(--tk-cast);
}

/* ==================== ⑤ 窄屏 ====================

   规矩 8：只保留**承载控件的那一件**物件。台子留着（控件都在它上面），
   两块牌收窄，指路碑的切角收小——8px 的切角在一块 200px 宽的碑上是崩了角,
   在 90px 上就成了一个尖顶。 */
@media (max-width: 620px) {
  /* ⚠️ 窄屏把石台的定高**撤掉**：说明和房间行都会换到三四行，钉死的高度
     只会让内容溢出。那时候两页不同高、地平线跟着量到的那一页走
     ——错开几十像素，但一屏之内看不出来（窄屏上面板本来就占掉大半）。
     宁可如此，也不要裁字（"悄悄少一行"是这个项目复发过的病）。 */
  .view[data-view="tank"] .card { min-height: 0; }
}

@media (max-width: 560px) {
  .view[data-view="tank"] .card { padding: var(--sp-3) var(--sp-3) 26px; }
  .view[data-view="tank"] .screen-tabs > button { padding: 7px 12px; }
  .view[data-view="tank"] .tank-layout-link {
    padding: var(--sp-2) var(--sp-3);
    clip-path: polygon(
      0 5px, 5px 0,
      calc(100% - 5px) 0, 100% 5px,
      100% 100%, 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 牌被推出来那一下是纯装饰（哪块选中了，aria-selected 和字重都说了）。 */
  .view[data-view="tank"] .screen-tabs > button { transition: none; }
}

/* ---- 陈列：收藏品摆在缸里 ----
 *
 * ⚠️ **视觉上要和布景那一行分开**。它们挨着，而它们是两件不同的东西：
 * 布景参与对局（有预算、有藏身/推力/食物），陈列一个机制都没有。
 * 长得一样的话玩家会以为摆件也要花那 10 点。
 *
 * 分法是**材质**而不是颜色：布景那一行是一块凸出来的石台（上面那段的
 * 切角 + 接地影），陈列这一块是**凿进石面的一排龛**——和鱼谱墙上放鱼的
 * 那些格子同一种凿法。判据②：凸出还是凹进决定亮暗。
 *
 * ⚠️ 上架那一档的亮**不许借语义色**（`--other` 那个金是"有钱可领"的意思）。
 * 这一屏的灯是 `--tk-lit-*`，摆出来的东西被自己缸里的灯照亮才说得通。
 */
.view[data-view="tank"] .tank-display {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 5px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}
.view[data-view="tank"] .tank-display .hint { margin: 4px 0 var(--sp-2); }

.view[data-view="tank"] .td-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* 一件收藏 = 一个小龛。没上架的是空龛（暗、平），上架的**点亮**。 */
.view[data-view="tank"] .td-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border: 0;
  border-radius: 1px;
  background: color-mix(in srgb, var(--stone-face) 88%, var(--stone-deep));
  color: var(--ink-dim);
  font-size: var(--fs-sm);
  cursor: var(--cur-pointer);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
.view[data-view="tank"] .td-item:hover { color: var(--ink); }

/* 上架的那一件：龛里有灯。亮的是**它**，不是它的框——
   摆出来的东西才是主角。 */
.view[data-view="tank"] .td-item.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--stone-face) 82%, var(--stone-lit) 10%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 30%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 7px -4px rgba(0, 0, 0, 0.8);
}
.view[data-view="tank"] .td-item.on .td-art {
  color: color-mix(in srgb, var(--stone-lit) 70%, var(--ink));
}

/* 架子满了之后没上架的那些：软禁用。**不用 disabled**——
   disabled 说不出"为什么"，而这里的原因（满了）是可以说清的。 */
.view[data-view="tank"] .td-item.is-off {
  opacity: 0.4;
  cursor: var(--cur-no);
  pointer-events: none;
}

.view[data-view="tank"] .td-art {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
}
.view[data-view="tank"] .td-art .pf-icon { width: 100%; height: 100%; }