/*
 * 生产模拟器外壳样式
 *
 * 只管这几样：顶上那条（游戏天 + 钱）、五个标签、工坊 / 挂机 / 玩家三块。
 * 制作与采集两块的外观在 craft.css / gather.css 里，这个页面把它们也引进来，
 * 所以那两个看板在壳里和在独立页面里长得一样。挂机没有自己的 css，就在这个文件里。
 *
 * 移动端优先：基础样式按窄屏写，再用 min-width: 681px 补宽屏。
 * 681 这个数跟站点主题的断点对齐（主题在 max-width: 680px 做移动端调整）。
 * 配色全部走主题变量，明暗两种主题都能用。
 *
 * ---------------------------------------------------------------------------
 * 「不许往下无限堆」这条是这里最要紧的规矩。
 *
 * 之前每一屏都是把内容一路铺下去，手机上量出来最长的一屏是 3.16 个屏幕高，
 * 而且没上限 —— 内容再多就一直长。当时的解法是"**一屏就是屏幕那么大**，
 * 装不下的自己那块里滚"。
 *
 * 那个解法后来被否了：手机上两层滚动体感很差（手指划不动页面）。
 * 现在的解法是"**整页一条滚动条，但内容要真的收得住**"——
 * 把每一块做小（技能图标条、整格是按钮、教学折叠），而不是把多余的部分切掉。
 * 所以现在两件事：
 *   1. 看板**不设高度上限、不自己滚**，页面自然滚（见下面「页面自然滚」）
 *   2. 重的东西（仓库、设备商店）仍然放到弹窗里，各占一层，不参与页面堆叠
 * ---------------------------------------------------------------------------
 */

:root {
  /* 这里原来有 --board-max / --board-max-wide（每个看板的高度上限）。
     已经拆掉了：手机上嵌套滚动体感很差，改成整页一条滚动条。
     详见下面「页面自然滚」那一段。 */
}

.sim-error {
  margin-bottom: 16px;
  border: 1px solid var(--game-fault);
  border-radius: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--game-fault) 14%, var(--surface));
  color: var(--game-fault);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------------- 顶上那条：游戏天 + 钱 ---------------- */

.sim-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;

  border: 1px solid var(--game-line);}

.sim-money {
  color: var(--muted);
  font-size: 11.5px;
}

.sim-money strong {
  color: var(--game-gold);
  font-size: 13px;
}

/* ---------------- 标签 ---------------- */

.sim-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 4px;
  background: var(--surface-2);
}

.sim-tab {
  flex: 1 1 0;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sim-tab:hover:not([aria-selected="true"]) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.sim-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--game-line));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
}

.sim-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* hidden 属性必须压得住下面的 display */
.sim-panel[hidden] {
  display: none;
}

/* ---------------- 挂机 ----------------
 * 一个槽位，挂一张配方或一个采集区域。
 * 这一屏的"主角"是**槽位卡**：现在挂着什么、挂了多少游戏时间、跑了多少趟。
 * 候选做成格子（一格一个），收成做成一对一行（手机上两对一行会被压成竖排）。 */

.idle-board {
  overflow: hidden;

  padding: 10px;
}

.idle-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.idle-heading h2 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  font-weight: 650;
}

/* 状态标签和制作 / 采集那两个是同一套尺寸（.craft-status / .gather-status） */
.idle-status {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.idle-status[data-kind="active"] {
  border-color: color-mix(in srgb, var(--game-line) 60%, var(--muted));
  color: var(--muted);
}

.idle-status[data-kind="running"] {
  border-color: color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  color: var(--game-ready);
}

.idle-status[data-kind="stopped"] {
  border-color: color-mix(in srgb, var(--game-risk) 60%, var(--game-line));
  color: var(--game-risk);
}

.idle-slot {
  display: grid;
  gap: 4px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
}

.idle-slot[data-state="running"] {
  border-color: color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  background: color-mix(in srgb, var(--game-ready) 9%, var(--surface-2));
}

.idle-slot[data-state="stopped"] {
  border-color: color-mix(in srgb, var(--game-risk) 55%, var(--game-line));
  background: color-mix(in srgb, var(--game-risk) 9%, var(--surface-2));
}

.idle-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
}

.idle-slot-head strong {
  font-size: 14px;
}

.idle-slot-kind {
  flex: none;
  border: 1px solid var(--game-line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--muted);
  font-size: 10.5px;
}

.idle-slot-line {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.idle-slot-line strong {
  color: var(--text);
}

/* 「一遍」那一行：产出与消耗的总览，压在槽位卡上给一眼看的账。
   单独一条类名是为了它能在里面放「耗 柑橘叶 ×2」这种次要信息而整行不抢眼。 */
.idle-slot-run {
  color: var(--muted);
}

.idle-slot-reason {
  margin: 0;
  border-left: 2px solid var(--game-risk);
  padding-left: 7px;
  color: color-mix(in srgb, var(--game-risk) 80%, var(--text));
  font-size: 11.5px;
  line-height: 1.6;
}

.idle-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* 槽位卡上那两个按钮：停下是次要动作（灰药丸），再挂一次是主要动作 */
.idle-stop {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  padding: 5px 14px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.idle-stop:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--game-line));
}

.idle-retry {
  min-height: 34px;
  padding: 5px 14px;
  font-size: 12.5px;
}

/* 小节标题用的是共用的 .board-section-title（和制作·采集同一套值）——
   挂机这边不再另立一套自己的章节标题。 */

/* 有收成时才画那条分隔线（不然空着的时候会多出一条吊在页尾的横线）。 */
.idle-batch:not([hidden]) {
  /* 这块现在**一直画着**（空的时候填 —），所以它是"页面的一部分"而不是"冒出来的一块"，
     间距按普通章节给。 */
  margin-top: 10px;
  border-top: 1px solid var(--game-line);
  padding-top: 8px;
}

.idle-report {
  display: grid;
  /* 和结算那两张表（.craft-result-stats / .gather-result-stats）同一套列宽与行距 */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0 0 10px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 9px 11px;
  background: var(--surface-2);
  font-size: 12px;
}

.idle-report dt {
  color: var(--muted);
  white-space: nowrap;
}

.idle-report dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

/* ---------------- 工坊 ---------------- */

.workshop-board {
  overflow: hidden;

  padding: 10px;
}

.workshop-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.workshop-heading h2 {
  margin: 2px 0 0;
  font-size: 1.15rem;
}

.workshop-heading .eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workshop-status {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.workshop-status[data-kind="active"] {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--game-line));
  color: var(--accent);
}


/* 订单标题行右边那个「刷新全部」：只在全交完时出现（用户："全做完了可以刷新"） */
.order-refresh {
  border: 1px solid color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  border-radius: 999px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--game-ready) 12%, var(--surface-2));
  color: var(--game-ready);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.order-refresh[hidden] {
  display: none;
}

.workshop-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.workshop-section-title small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
}

/* ---------------- 订单 ---------------- */

.workshop-orders {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workshop-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
}

.workshop-order[data-ready="true"] {
  border-color: color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
}

.workshop-order[data-done="true"] {
  opacity: 0.55;
}

.workshop-order-pay {
  color: var(--game-gold);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.workshop-order-detail {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 仓库表格 ----------------
 * 五列在手机上会挤，所以套一层横向滚动；名称列 sticky 住，
 * 滑到右边还知道看的是哪一行。 */

.workshop-table-wrap {
  overflow-x: auto;
  background: var(--surface-2);
  -webkit-overflow-scrolling: touch;

  border: 1px solid var(--game-line);
  border-radius: 12px;}

.workshop-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.workshop-table th,
.workshop-table td {
  border-bottom: 1px solid var(--game-line);
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
}

.workshop-table thead th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.workshop-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--game-line);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
}

.workshop-table tbody tr:last-child th,
.workshop-table tbody tr:last-child td {
  border-bottom: none;
}

.workshop-table tbody tr[data-empty="true"] {
  opacity: 0.5;
}

/* 优质那一列是重点：它是配方基础品质的来源 */
.workshop-table tbody td:nth-child(3) {
  color: var(--game-gold);
}

.workshop-order-empty {
  border: 1px dashed var(--game-line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------------- 玩家：属性与装备 ---------------- */

.player-board {
  overflow: hidden;

  padding: 10px;
}

.player-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.player-heading h2 {
  margin: 2px 0 0;
  font-size: 1.15rem;
}

.player-heading .eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-status {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.player-status[data-kind="active"] {
  color: var(--muted);
}

.player-status[data-kind="done"] {
  border-color: color-mix(in srgb, var(--game-ready) 55%, var(--game-line));
  color: var(--game-ready);
}

.player-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.player-section-title small {
  font-size: 11px;
  letter-spacing: 0;
}

/* 七条属性：一条一组（`div.player-stat`：名字在左值在右，必要时底下再跟一行来源）。
 * 参考物的"状态参数"就是一条属性一组地摆的（它是 `基础 + 加成 = 合计`，
 * 我们没有食品药品，加成只有装备，所以写成"这件 +N · 那件 +M"）。 */
.player-stats {
  display: grid;
  gap: 0;
  margin: 0;
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;

  border: 1px solid var(--game-line);}

.player-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--game-line);
}

.player-stat:last-child {
  border-bottom: none;
}

.player-stat dt,
.player-stat dd {
  margin: 0;
  padding: 7px 12px 0;
  font-size: 12px;
}

.player-stat dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.player-stat dt {
  color: var(--muted);
}

/* 有加成的那条，值下面还要跟一行来源 */
.player-stat:has(.player-stat-from) dt,
.player-stat:has(.player-stat-from) dd {
  padding-bottom: 0;
}

.player-stat dd.player-stat-on {
  color: var(--game-ready);
  font-weight: 650;
}

/* 来源那一行：横跨两列 */
.player-stat-from {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1px 12px 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.player-slots,
.player-shop {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.player-slot,
.player-item {
  display: grid;
  gap: 6px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.player-slot[data-empty="true"] {
  opacity: 0.65;
}

.player-slot-head,
.player-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}

.player-slot-name,
.player-item-slot {
  color: var(--muted);
  font-size: 11.5px;
}

.player-slot-head strong,
.player-item-head strong {
  font-size: 13.5px;
}

.player-item-cost {
  color: var(--game-gold);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.player-slot-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
}

.player-slot-hint {
  color: var(--muted);
}

.player-item-stats {
  color: color-mix(in srgb, var(--game-ready) 70%, var(--muted));
  font-variant-numeric: tabular-nums;
}

.player-item[data-owned="true"] {
  border-color: color-mix(in srgb, var(--game-ready) 40%, var(--game-line));
}

.player-unequip,
.player-buy {
  justify-self: start;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 12.5px;
}

.player-unequip {
  border: 1px solid var(--game-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.player-unequip:hover {
  color: var(--text);
}


/* （这里原来是「接下来做什么」那条横幅的样式，已经连元素一起去掉了。） */

/* ---------------- 页面自然滚，不做嵌套滚动 ----------------
 *
 * 这里**以前**是给每个看板设高度上限（--board-max）让它自己滚。
 * 已经拆掉了，因为手机上两层滚动的体感很差：手指在板子里划，板子先滚到头，
 * 页面纹丝不动；得再划一次页面才动 —— 那种"划不动"的感觉不是错觉，是嵌套滚动。
 *
 * 现在的规矩换成：
 *   1. **一条滚动条**，就是页面自己那条；看板不再自己有高度上限、不再自己滚
 *   2. 页面该多长就多长，但**内容本身要收得住**——
 *      "别把东西一路往下堆"这条没变，只是不再靠"切掉 + 内部滚"来实现，
 *      而是靠把每一块做小（技能图标条、整格是按钮、教学折叠）。
 *      `measure_ui.js --check` 改为在**没有上限**的前提下量真实高度。
 *   3. 重的东西（仓库、设备商店）仍然放弹窗，那是"另起一层"，
 *      和这里的嵌套滚动不是一回事；弹窗自己滚是对的（不然就成了整页）
 *
 * 注意：这里**不能**留 `overflow-x: hidden` ——
 * 按 CSS 规则，x 轴一旦不是 visible，y 轴就会被算成 auto，
 * 于是又变回一个嵌套滚动容器。所以横向溢出改由 `--check` 盯着。
 */

.sim-panel > section {
  /* 不加高度上限、不自己滚：交给页面 */
}

/* 弹窗（底部抽屉）的样式搬到 sim/shared.css 了 —— 制作与采集的独立页面也要用
 * （技能详情那一层）。这里只留"抽屉打开时底下那层不许跟着滚"。 */

body:has(.sheet-overlay:not([hidden])) {
  overflow: hidden;
}

/* 仓库与商店的入口按钮：一行，说明放左边，按钮放右边 */
.sim-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.sim-entry-text {
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.sim-entry .button {
  flex: none;
}

/* ---------------- 宽屏 ---------------- */

@media (min-width: 681px) {
  .sim-tab {
    font-size: 14px;
  }

  .sheet-overlay {
    align-items: center;
    justify-items: center;
  }

  .sheet {
    width: min(720px, 92vw);
    border-bottom: 1px solid var(--game-line);
    border-radius: 16px;
  }

  .sheet-head {
    border-radius: 16px 16px 0 0;
  }

  .workshop-orders {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workshop-order {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .player-shop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------- 仓库表格：四列，挤得下 ----------------
 * 之前是五列，手机上量出来 420px 塞进 346px 的框里，得横着滚。
 * 现在把"谁要它"折进名称那一格，只剩三列数字，宽度就够了。 */

.workshop-table {
  min-width: 0;
  width: 100%;
}

.workshop-table th,
.workshop-table td {
  padding: 7px 6px;
  white-space: normal;
}

.workshop-table .col-name {
  text-align: left;
  width: auto;
}

.workshop-table .col-num {
  width: 3.4em;
  text-align: right;
  white-space: nowrap;
}

.workshop-table tbody th {
  position: static;
  border-right: none;
  font-weight: 650;
}

/* 名称下面那行小字：谁要它 / 来自哪张配方 */
.workshop-table .col-use {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
}

/* 没库存的行压暗，但别压到看不见 —— 它们同时也是"该去采什么"的清单 */
.workshop-table tbody tr[data-empty="true"] {
  opacity: 0.55;
}
/* ---------------- 一格一个，不是一行一个 ----------------
 * 手机上两列，宽一点自动多列。之前的订单、槽位、设备都是一行一个，
 * 既浪费宽度，也没法像游戏物品栏那样一眼扫完。 */

.workshop-orders,
.player-shop {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

/* 订单格：整格就是交付按钮 */
.workshop-order {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 3px;
  min-height: 70px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}

.workshop-order:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--game-line));
}

.workshop-order:active:not(:disabled) {
  transform: translateY(1px);
}

/* 交得了的整格亮起来，交过的压暗 —— 不用读文字也知道该点哪张 */
.workshop-order[data-ready="true"] {
  border-color: color-mix(in srgb, var(--game-ready) 60%, var(--game-line));
  background: color-mix(in srgb, var(--game-ready) 10%, var(--surface-2));
}

.workshop-order[data-done="true"] {
  opacity: 0.5;
  cursor: default;
}

.workshop-order:disabled {
  cursor: not-allowed;
}

.workshop-order-empty {
  grid-column: 1 / -1;
}

/* 槽位也排成格子 */
.player-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.player-slot {
  display: grid;
  gap: 5px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--surface-2);
}

.player-slot[data-empty="true"] {
  border-style: dashed;
}

.player-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.player-slot-head span {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.player-slot-head strong {
  font-size: 13.5px;
}

.player-slot-hint {
  margin: 0;
  color: var(--game-ready);
  font-size: 10.5px;
  line-height: 1.5;
}

.player-slot .player-unequip {
  justify-self: start;
}

/* 设备格 */
.player-item {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 3px;
  min-height: 96px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  padding: 10px 11px;
  background: var(--surface-2);
}

.player-item[data-owned="true"] {
  border-color: color-mix(in srgb, var(--game-ready) 45%, var(--game-line));
}

.player-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.player-item-slot {
  color: var(--muted);
  font-size: 10.5px;
}

.player-item-head strong {
  font-size: 13.5px;
}

.player-item-cost {
  color: var(--game-gold);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.player-item-stats {
  margin: 0;
  color: var(--game-ready);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.player-item .player-buy {
  align-self: end;
  justify-self: start;
  margin-top: 2px;
}
/* 网格里每一格外面套的那层 li：只负责占格子 */
.workshop-order-cell {
  display: grid;
}

.workshop-order-name {
  font-size: 13.5px;
  line-height: 1.35;
}

.workshop-order-pay {
  color: var(--game-gold);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.workshop-order-detail {
  align-self: end;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 两条等级（制作 / 采集）：名字 + Lv + 经验条 + 数字。
   经验只从"真的做出来"里来，所以这条常显在这里。 */
.player-levels {
  display: grid;
  gap: 5px;
  margin: 0 0 9px;
}

.player-level {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.player-level-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 4.6em;
}

.player-level-name {
  color: var(--muted);
  font-size: 11.5px;
}

.player-level-at {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.player-level-track {
  height: 7px;
  border-radius: 999px;
  background: var(--game-track);
  overflow: hidden;
}

.player-level-fill {
  display: block;
  height: 100%;
  background: var(--game-gain);
}

.player-level-xp {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}