/* 赛前部署的那两排选项（PLAN 2.4，拟物化第六十七批）。
 *
 * 结构在 js/ui/components/deployPicker.js。这个文件只管它是什么材料。
 *
 * ---- 为什么单独一个文件 ----
 *
 * 它出现在**两个作用域完全不同的地方**：投放卡（`.deploy-overlay`，全局浮层，
 * 不属于任何一屏）和天梯屏（`.view[data-view="ladder"]`）。所以它既不能进
 * `css/ladder.css`（那儿每条选择器都必须带天梯的作用域），也不该进 style.css
 * （新写的不许再往那儿加，见 index.html 的 link 注释）。
 *
 * 爆炸半径靠**自己的类名前缀**保证：`.deploy-picker` / `.dp-*` 只有这一层用。
 * 和 css/fishDetail.css 同一条理由。
 *
 * ---- 形：两排**刻在台面上的槽**，选中的那个被推出来 ----
 *
 * 它在天梯屏用天梯的石头（那儿有 `--stone-*`），在投放卡上够不到任何一屏的
 * 变量——所以底色写的是**自适应的半透明**，压在什么上面就跟着什么走。
 * 那不是偷懒：投放卡本来就是一张浮在对战世界上的卡，它没有"这一屏的石头"。
 */

.deploy-picker {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  /* 一道暗缝把它和上面那些"它是什么"分开：上面是读的，这里是选的。 */
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.55);
}

.dp-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-2);
}
.dp-cap {
  padding-top: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.dp-opts { display: flex; flex-wrap: wrap; gap: 5px; }

/* 没选的：**平的**一块。
   ⚠️ 不做成凹槽——凹进在这套语言里的意思是"这里该放东西"（空的鱼谱格子、
   输入框），而一排可选项不是一排空槽。布景那一屏的鱼笼是同一条判据。 */
.dp-opt {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 9px;
  border: 0;
  border-radius: 1px;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: var(--cur-pointer);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dp-opt:hover { background: rgba(255, 255, 255, 0.085); }

/* 选中的：**推出来**（上棱迎光 + 接地影）。
   高亮用 `--other`（"选中"的语义色，全站一致），这里只加形不换色。 */
.dp-opt.is-on {
  background: rgba(232, 184, 75, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 3px 7px -3px rgba(0, 0, 0, 0.85);
  outline: 1px solid var(--other);
  outline-offset: -1px;
}

.dp-name { font-size: var(--fs-sm); color: var(--ink); }
.dp-blurb { font-size: var(--fs-xs); color: var(--ink-dim); }
.dp-note { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-faint); }

/* ---- 锁死（排位配完对之后）----
 *
 * ⚠️ **置灰而不是藏起来。** 玩家要看得见自己当初选的是什么——藏掉的话，
 * 打完复盘时那一层决策等于从来没发生过，而它恰恰是这一局里他唯一做过的
 * 那个选择。
 *
 * `pointer-events: none` 是第二道：JS 那边（readDeployClick）已经挡了，
 * 这里挡的是"鼠标看起来还能按"那个假信号。 */
.deploy-picker.is-locked .dp-opt {
  pointer-events: none;
  cursor: var(--cur-no);
}
.deploy-picker.is-locked .dp-opt:not(.is-on) { opacity: 0.4; }

@media (max-width: 520px) {
  /* 窄屏上标题那一列会把选项挤成一列窄条。改成上下两段。 */
  .dp-row { grid-template-columns: 1fr; gap: 3px; }
  .dp-cap { padding-top: 0; }
  .dp-opt { flex: 1 1 8em; }
}