/* 试炼池那一屏的 UI（拟物化第 3 批，2026-08-29）。
 *
 * 背景那一半在 js/render/props/trialPool.js（那儿有"为什么草案 4.3 那份方案
 * 不能照做"的账）。这个文件只管**站在池边的那些东西是什么材料**。
 *
 * ---- 爆炸半径 ----
 *
 * 每一条选择器都钉在 `.view[data-view="trial"]` 里。`.tr-*` / `.trial-*` 目前
 * 只有这一屏在用，但那是**现在**——占卜屏那一轮的 `button:hover` 也曾经
 * "只有那一屏在用"，然后冒出一个盖住整座宫殿的深蓝方块。作用域是结构，
 * 不是当下的事实。tools/trialPool.test.js 扫这一条。
 *
 * ---- 这一屏的石头 ----
 *
 * 变量在 css/stone.css（`.view[data-view="trial"]` 那一组），从这一屏自己的
 * 水色推。它是深度轴上最深的一屏，所以面比别的屏更暗；灯是暖的封住的灯,
 * 所以 `--stone-lit` 是暖的。
 *
 * ---- 三条继承来的判据 ----
 *
 * ① **换底不换语义色。** 胜率涨/跌那两个绿红、`--sys-trial` 那个青
 *    一个值都不动——它们是信息（这次比上次好还是坏），不是风格。
 * ② **凸出还是凹进决定亮暗。** 选中的鱼笼凸出、没选的平、槽和刻痕凹进。
 * ③ **体是冷的，照在它上面的光才是暖的。** 大面积用 face，只有窄边用 lit。
 */

/* ==================== 面板 = 池边那块石台 ====================
 *
 * ⚠️ **它的下沿就是这一屏的地平线**：背景那边 `contentBox()` 读的正是这个
 * border-box，池口的中心和大小全从它推。所以这个文件**不许改它的盒子**
 * （padding / border 可以，margin 和 height 不行）——改了就是把地平线挪了,
 * 而背景那边一个字都不会知道。天梯那一屏栽过这一次（加载中卡片只有 92px,
 * 台阶跟着往上跑）。
 */
.view[data-view="trial"] .card {
  border-radius: 0;              /* 圆角是 UI 的语言，一块石头的角是切角 */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 94%, var(--stone-lit)) 0%,
    var(--stone-face) 62%,
    color-mix(in srgb, var(--stone-face) 82%, var(--stone-deep)) 100%);
  box-shadow:
    /* 上棱迎光：池沿两盏灯在台子的上边 */
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 20%, transparent),
    /* 两侧收进去的厚度 */
    inset 1px 0 0 var(--stone-seam),
    inset -1px 0 0 var(--stone-seam),
    /* 下沿一道基座 + 接地影落在池沿的石头上 */
    0 1px 0 var(--stone-seam),
    0 6px 18px -6px rgba(0, 0, 0, 0.9);
  border: 0;
}

/* ==================== 鱼笼 / 对手牌 ====================
 *
 * 4.3 说的是「待放鱼笼 ×3，选中 = 笼门开」。落成石头之后"门开"没有形,
 * 换成**凸出**：没选的是**平的**一块石片（既不凸也不凹），选中的被推出来、
 * 上棱迎光、脚下有影。
 *
 * ⚠️ 为什么不是"没选的凹进、选中的平"：凹进在这套语言里的意思是
 * "这是一个槽，东西该放进去"（空的鱼谱格子、输入框都是那个意思）。
 * 一排可选项不是一排空槽。
 */
.view[data-view="trial"] .trial-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.view[data-view="trial"] .trial-chip {
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  text-align: left;
  border: 0;
  border-radius: 1px;
  cursor: var(--cur-pointer);
  color: inherit;
  font: inherit;
  background: color-mix(in srgb, var(--stone-face) 70%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
.view[data-view="trial"] .trial-chip:hover {
  background: color-mix(in srgb, var(--stone-face) 88%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 18%, transparent);
}
.view[data-view="trial"] .trial-chip.on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 34%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 6px -3px rgba(0, 0, 0, 0.85);
}
/* 选中那一格的名字点着灯。**这里仍然用 --sys-trial**（判据①）：
   它是"选中"这条信息的颜色，全站一致。 */
.view[data-view="trial"] .trial-chip.on .tc-name {
  color: var(--sys-trial);
  text-shadow: 0 0 6px color-mix(in srgb, var(--sys-trial) 40%, transparent);
}
.view[data-view="trial"] .tc-name { font-size: var(--fs-base); color: var(--ink); }
.view[data-view="trial"] .tc-sub {
  font-size: var(--fs-xs);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* ==================== 闸门把手 ====================
 *
 * 4.3：「禁用 = 把手**锁上**（加锁形，不只是变灰）」。这条值得照做——
 * 变灰只说"现在不行"，锁形说的是"还差一件事没做"，而这一屏禁用的原因
 * 恰恰永远是那个（鱼没选或对手没选）。
 *
 * ⚠️ 锁形用 `::after` 画，**不进 DOM**：它是这一个状态的视觉，不是一件
 * 要被读屏器念出来的东西（按钮本身有 `disabled`，读屏器已经会说"不可用"）。
 */
.view[data-view="trial"] .trial-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-3);
}
.view[data-view="trial"] #trial-run-btn {
  position: relative;
  border: 0;
  border-radius: 1px;
  padding: 9px 22px;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 84%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 30%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 7px -3px rgba(0, 0, 0, 0.85);
}
.view[data-view="trial"] #trial-run-btn:hover:not([disabled]) {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 46%, transparent),
    0 1px 0 var(--stone-seam),
    0 4px 9px -3px rgba(0, 0, 0, 0.9);
}
/* 拉下把手 = 凹进去 */
.view[data-view="trial"] #trial-run-btn:active:not([disabled]) {
  transform: translateY(1px);
  background: var(--stone-deep);
  box-shadow: inset 0 2px 5px -1px rgba(0, 0, 0, 0.75);
}
.view[data-view="trial"] #trial-run-btn[disabled] {
  cursor: not-allowed;
  color: var(--ink-faint);
  padding-right: 40px;                       /* 给锁让出位置 */
  background: color-mix(in srgb, var(--stone-face) 56%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 6%, transparent);
}
/* 锁：一个吊在把手右边的小环 + 锁体。两笔，凹进去。 */
.view[data-view="trial"] #trial-run-btn[disabled]::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 10px;
  transform: translateY(-40%);
  border-radius: 1px;
  background: var(--stone-seam);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.8),
    /* 锁梁：上方半个环，用 border 画 */
    0 -5px 0 -3.5px var(--stone-seam),
    0 -6px 0 -4px color-mix(in srgb, var(--stone-lit) 24%, transparent);
}

/* ==================== 黑板 = 一块凹进石台的板 ====================
 *
 * 4.3：「池边黑板 + 水位标尺」。它是**凹进**的：整块结果嵌在石台里,
 * 而不是浮在上面——一块浮着的板会和上面那些凸出的鱼笼抢"哪个是可点的"。
 */
.view[data-view="trial"] .trial-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: var(--sp-4);
  border: 0;
  border-radius: 1px;
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 5px -1px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
}
.view[data-view="trial"] .tr-head {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* 胜率是主角：一个数占一行，字最大。**刻在板上、自己发光。** */
.view[data-view="trial"] .tr-rate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--stone-seam);
}
.view[data-view="trial"] .tr-rate b {
  font-size: 34px;
  line-height: 1;
  color: var(--gold, #e8b84b);
  text-shadow: 0 0 10px color-mix(in srgb, var(--gold, #e8b84b) 36%, transparent);
}
.view[data-view="trial"] .tr-rate span { font-size: var(--fs-base); color: var(--ink-dim); }

/* ---- 水位线：上次 vs 这次 ----
 *
 * **这一块才是整个功能的意义**（种子固定只保证两次跑在同一组水域里，
 * 而"改完之后变了吗"要靠这个差值回答）。所以它是这块板上唯一**被凿出一道
 * 独立凹槽**的东西——形上就比别的行重一级。
 *
 * ⚠️ 涨/跌那两个颜色一个字不改（判据①）。 */
.view[data-view="trial"] .tr-compare {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 1px;
  font-size: var(--fs-base);
  color: var(--ink-dim);
  background: var(--stone-seam);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.72),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 12%, transparent);
}
.view[data-view="trial"] .tr-compare b { font-size: var(--fs-lg); }
.view[data-view="trial"] .tr-compare.up b { color: #7fd4a0; }
.view[data-view="trial"] .tr-compare.down b { color: #d98a8a; }
.view[data-view="trial"] .tr-compare.flat b { color: var(--ink-dim); }
.view[data-view="trial"] .tr-compare-note { font-size: var(--fs-xs); opacity: 0.75; }

.view[data-view="trial"] .tr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}
.view[data-view="trial"] .tr-grid > div {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-base);
}
.view[data-view="trial"] .tr-grid span { color: var(--ink-dim); }
.view[data-view="trial"] .tr-grid b { color: var(--ink); font-variant-numeric: tabular-nums; }

.view[data-view="trial"] .tr-section {
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}

/* ---- 名次分布：八根**从槽里长出来**的柱子 ----
 *
 * "全是第 5 名"和"要么第一要么垫底"是两种鱼，而平均名次那一个数把这个
 * 区别抹平了。槽是凹的，柱子在槽里发光——和池底那一层同一个读法。 */
.view[data-view="trial"] .tr-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 54px;
  padding: 3px 4px 0;
  border-radius: 1px;
  background: var(--stone-seam);
  box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.7);
}
.view[data-view="trial"] .tr-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 3px;
}
.view[data-view="trial"] .tr-bar > i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, #4a9fd0, #2a5f80);
  box-shadow: 0 0 6px -1px rgba(74, 159, 208, 0.5);
}
.view[data-view="trial"] .tr-bar > em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-dim);
}

.view[data-view="trial"] .tr-cause {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-base);
  padding: 4px 6px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--stone-seam) 70%, transparent);
  color: #cfe0f5;
}
.view[data-view="trial"] .tr-cause b { color: #d98a8a; font-variant-numeric: tabular-nums; }

/* ==================== 记录夹 = 墙上一叠刻着字的片 ====================
 *
 * ⚠️ **不要斑马纹**（天梯那一屏定的同一条）：隔行变底是表格的语言。
 * 这里每一行是一片压在石台上的薄石片——薄薄的凸出 + 一道接地影。 */
.view[data-view="trial"] .trial-history { display: grid; gap: 4px; }
.view[data-view="trial"] .th-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 1px;
  font-size: var(--fs-base);
  background: color-mix(in srgb, var(--stone-face) 62%, var(--stone-deep));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent),
    0 1px 0 var(--stone-seam);
}
.view[data-view="trial"] .th-rate {
  font-weight: var(--fw-bold);
  color: var(--sys-trial);
  font-variant-numeric: tabular-nums;
}
.view[data-view="trial"] .th-foe {
  color: #cfe0f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view[data-view="trial"] .th-sub,
.view[data-view="trial"] .th-time { color: var(--ink-dim); font-size: var(--fs-xs); }


/* ==================== 派遣那一页（第七十五批） ====================

   用户："在主页面单独做一个入口，放试炼和派遣（两个放一起）"。

   材料**照抄这一屏已经有的那套**（挑鱼的石片、凹进去的深格）：
   两页在同一块石台上，给派遣另做一套材质等于说"你换了个地方"。

   ⚠️ `.dp-*`（去处 / 时长 / 派它出去）和 `.db-*`（在外面的那几趟）
   本来长在别的屏上（鱼详情、图鉴），这里**各自带这一屏的前缀重写一遍**——
   不带前缀地共用一份的话，改一屏就会打到另外两屏。 */

.view[data-view="trial"] .dispatch-desk { display: grid; gap: var(--sp-3); }
.view[data-view="trial"] .dd-head {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}
.view[data-view="trial"] .dd-fish { display: flex; flex-wrap: wrap; gap: 6px; }
.view[data-view="trial"] .dd-chip {
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  text-align: left;
  border: 0;
  border-radius: 1px;
  cursor: var(--cur-pointer);
  color: inherit;
  font: inherit;
  background: color-mix(in srgb, var(--stone-face) 70%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
.view[data-view="trial"] .dd-chip.is-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 34%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 6px -3px rgba(0, 0, 0, 0.85);
}
.view[data-view="trial"] .dd-chip.is-on .dd-name {
  color: var(--sys-trial);
  text-shadow: 0 0 6px color-mix(in srgb, var(--sys-trial) 40%, transparent);
}
/* 在外面的那几条**留在行里**（抽掉的话玩家会以为鱼丢了），但压一档，
   而且它们那句副标写着"在外面"。 */
.view[data-view="trial"] .dd-chip.is-away { opacity: 0.66; }
.view[data-view="trial"] .dd-name { font-size: var(--fs-base); color: var(--ink); }
.view[data-view="trial"] .dd-sub {
  font-size: var(--fs-xs);
  color: var(--ink-dim);
}

/* ---- 去处 / 时长 / 派它出去 ---- */
.view[data-view="trial"] .dp-send,
.view[data-view="trial"] .dp-away {
  border-radius: 1px;
  padding: var(--sp-3);
  background: var(--stone-deep);
  box-shadow:
    inset 0 2px 4px -1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 color-mix(in srgb, var(--stone-lit) 10%, transparent);
  display: grid;
  gap: var(--sp-2);
}
.view[data-view="trial"] .dp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.view[data-view="trial"] .dp-cap {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  min-width: 3em;
}
.view[data-view="trial"] .dp-opts { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.view[data-view="trial"] .dp-opt {
  display: grid;
  gap: 1px;
  padding: 5px 10px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  cursor: var(--cur-pointer);
  background: color-mix(in srgb, var(--stone-face) 62%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
.view[data-view="trial"] .dp-opt.is-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 86%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 30%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 8px -4px rgba(0, 0, 0, 0.9);
}
.view[data-view="trial"] .dp-blurb {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.view[data-view="trial"] .dp-go {
  justify-self: start;
  margin-top: 3px;
  padding: 4px 14px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  cursor: var(--cur-pointer);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 88%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    0 1px 0 var(--stone-seam),
    0 2px 5px -3px rgba(0, 0, 0, 0.85);
}
.view[data-view="trial"] .dp-go:active {
  transform: translateY(1px);
  background: var(--stone-deep);
  box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.7);
}
.view[data-view="trial"] .dp-note,
.view[data-view="trial"] .dpa-note {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}
.view[data-view="trial"] .dp-away { grid-template-columns: auto 1fr; align-items: baseline; }
.view[data-view="trial"] .dpa-where { letter-spacing: 0.08em; }
.view[data-view="trial"] .dpa-left {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.view[data-view="trial"] .dpa-note { grid-column: 1 / -1; }

/* ---- 在外面的那几趟 ---- */
.view[data-view="trial"] .db-trips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.view[data-view="trial"] .db-trip {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--stone-face) 72%, var(--stone-deep));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 8%, transparent);
}
/* 回来了：**凸出**——这一页唯一在等玩家动手的东西该自己站出来。 */
.view[data-view="trial"] .db-trip.is-ready {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 84%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 32%, transparent),
    0 1px 0 var(--stone-seam),
    0 3px 8px -4px rgba(0, 0, 0, 0.9);
}
.view[data-view="trial"] .db-fish { font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.view[data-view="trial"] .db-where { color: var(--ink-dim); font-size: var(--fs-sm); }
.view[data-view="trial"] .db-left {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.view[data-view="trial"] .db-claim {
  padding: 3px 12px;
  border: 0;
  border-radius: 1px;
  color: inherit;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: var(--cur-pointer);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-face) 92%, var(--stone-lit)) 0%,
    var(--stone-face) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--stone-lit) 26%, transparent),
    0 1px 0 var(--stone-seam),
    0 2px 5px -3px rgba(0, 0, 0, 0.85);
}
.view[data-view="trial"] .db-claim:active {
  transform: translateY(1px);
  background: var(--stone-deep);
  box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.7);
}
.view[data-view="trial"] .db-empty {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}