/* ============================================================================
   金缮台 · bench.css —— 本作自己的一套尺度与色名（全应用只用这一套）
   ----------------------------------------------------------------------------
   色名（七个角色，全作只用这七个）：台 ink / 台面 felt / 釉 glaze / 金 gold /
                                   灰灰 faint / 线 line / 禁 warn
   尺度：字号 13 / 15 / 18 / 24 / 34    间距 5 / 9 / 16 / 26 / 40
         圆角 3 / 10 / 全圆（只有按钮是胶囊，容器一律近直角）
   分隔：1px 实线 + 内侧 1px 高光（像一块磨过的石台沿）
   字体：正文系统无衬线；器物名与读数用衬线（"账本感"）
   ========================================================================== */
:root {
  --ink:   #16191d;   /* 台：底色 */
  --felt:  #232830;   /* 台面：画布那一块 */
  --glaze: #cfd9df;   /* 釉：正文与浅色 */
  --gold:  #d8ac48;   /* 金：归位、强调 */
  --faint: #8b959c;   /* 灰：次要文字 */
  --line:  #333a41;   /* 线：分隔 */
  --warn:  #d4664a;   /* 禁：出错、破坏性 */
  --s1: 5px; --s2: 9px; --s3: 16px; --s4: 26px; --s5: 40px;
  --f1: 13px; --f2: 15px; --f3: 18px; --f4: 24px; --f5: 34px;
  --r1: 3px; --r2: 10px; --pill: 999px;
  --serif: Georgia, "Songti SC", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ink); color: var(--glaze);
  font: 400 var(--f2)/1.5 var(--sans);
  -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
body { display: flex; flex-direction: column; min-height: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:active { transform: translateY(1px); }

/* ---------- 顶栏：左是这一件，右是两个页签 ---------- */
#bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2);
  padding: calc(var(--s2) + env(safe-area-inset-top)) var(--s3) var(--s2);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03);
}
.who { min-width: 0; }
.who b { display: block; font: 400 var(--f4)/1.15 var(--serif); letter-spacing: .02em; }
.who span { display: block; margin-top: 2px; font-size: var(--f1); color: var(--faint); }
#tabs { display: flex; gap: var(--s3); flex: none; }
#tabs button {
  padding: var(--s1) 0; font-size: var(--f2); color: var(--faint);
  border-bottom: 2px solid transparent;
}
#tabs button.on { color: var(--glaze); border-bottom-color: var(--gold); }

/* ---------- 修复台 ---------- */
#stage { position: relative; flex: 1; min-height: 0; background: var(--felt); overflow: hidden; }
#cv { display: block; width: 100%; height: 100%; touch-action: none; }
#toast {
  position: absolute; left: 50%; bottom: calc(var(--s4) * 2.1);
  transform: translate(-50%, 8px); max-width: 88%;
  padding: var(--s1) var(--s2); border-radius: var(--r2);
  background: rgba(12,14,16,0.88); border: 1px solid var(--line);
  font-size: var(--f1); color: var(--glaze); opacity: 0; transition: opacity .18s, transform .18s;
  pointer-events: none; text-align: center;
}
#toast.in { opacity: 1; transform: translate(-50%, 0); }

#tools {
  position: absolute; left: var(--s3); right: var(--s3);
  bottom: calc(var(--s2) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--s1);
}
#tools .row { display: flex; gap: var(--s1); }
#tools button {
  padding: var(--s2) var(--s3); border-radius: var(--pill);
  border: 1px solid var(--line); background: rgba(22,25,29,0.82);
  font-size: var(--f2); backdrop-filter: blur(3px);
}
#tools button.wide { width: 100%; font-size: var(--f1); }
#tools .row button { flex: 1; }
#tools button.done { color: var(--faint); border-style: dashed; }
/* 那一行：虚线、灰字、没有前缀也没有角标 —— 它就是这一件事旁边的一句交待 */
#tools button.ad { color: var(--faint); border-style: dashed; border-color: #4a4238; line-height: 1.35; }
#tools button:disabled { opacity: .72; }
#tools button:not(:disabled):active { background: rgba(216,172,72,0.14); }

/* ---------- 器物架 ---------- */
#shelf { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3); }
.shelfnote { margin: 0 0 var(--s2); font-size: var(--f1); color: var(--faint); }
.shelfnote b { color: var(--gold); font-family: var(--serif); font-size: var(--f2); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(5, 1fr); } }
.cell {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: var(--s1) var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--r2);
  background: #1b1f24; color: var(--faint); font-size: var(--f1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.cell canvas { width: 100%; height: auto; display: block; }
.cell .nm { font-family: var(--serif); font-size: var(--f1); color: var(--glaze); margin-top: var(--s1); }
.cell .pz { opacity: .8; }
.cell.done { border-color: #4a4238; background: #1e2226; }
.cell.done .nm { color: var(--gold); }
.cell.here { outline: 2px solid rgba(216,172,72,0.5); outline-offset: -2px; }
.cell.sk { height: 118px; justify-content: center; gap: var(--s1); }
.cell.sk i { display: block; width: 46%; height: 44px; border-radius: var(--r1); background: #232830; }
.cell.sk span { display: block; width: 60%; height: 9px; border-radius: var(--r1); background: #232830; }
.hollow { padding: var(--s5) var(--s3); text-align: center; color: var(--faint); }
.hollow b { display: block; font: 400 var(--f4)/1.2 var(--serif); color: var(--glaze); margin-bottom: var(--s2); }
.hollow p { margin: 0 0 var(--s4); font-size: var(--f2); }
.hollow button, .sheet button { padding: var(--s2) var(--s4); border-radius: var(--pill); font-size: var(--f2); }
.solid { background: var(--gold); color: #1a1408; font-weight: 600; }
.plain { border: 1px solid var(--line); }
.danger { border: 1px solid var(--warn); color: var(--warn); }

/* ---------- 页脚：同意一行 + 版本一行 ---------- */
#foot { padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
#consent { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--f1); color: var(--faint); }
#consent input { margin: 2px 0 0; width: 15px; height: 15px; flex: none; accent-color: var(--gold); }
#foot .line { margin: var(--s1) 0 0; font-size: 12px; color: var(--faint); }
#foot .line .bad, #footnote.bad { color: var(--warn); }
.lnk { padding: 0; font-size: 12px; color: var(--faint); text-decoration: underline; }

/* ---------- 覆盖层 ---------- */
#ov {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end;
  background: rgba(8,10,12,0.62); opacity: 0; transition: opacity .2s;
}
#ov.in { opacity: 1; }
#ov .sheet {
  width: 100%; max-height: 88vh; overflow-y: auto;
  padding: var(--s4) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));
  background: #1c2025; border-top: 1px solid #4a4238; border-radius: var(--r2) var(--r2) 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sheet h2 { margin: 0 0 var(--s1); font: 400 var(--f4)/1.25 var(--serif); color: var(--glaze); }
.sheet h2.danger { color: var(--warn); }
.sheet .lede { margin: 0 0 var(--s3); font-size: var(--f2); color: var(--faint); }
.sheet .steps { margin: 0 0 var(--s4); padding-left: 1.25em; font-size: var(--f2); }
.sheet .steps li { margin-bottom: var(--s1); }
.sheet .steps b { color: var(--gold); }
.sheet .facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: 0 0 var(--s4); font-size: var(--f2); }
.sheet .facts dt { color: var(--faint); }
.sheet .facts dd { margin: 0; font-family: var(--serif); }
.sheet .fine { margin: 0 0 var(--s3); font-size: 12px; color: var(--faint); line-height: 1.6; }
.sheet .sw { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s2); font-size: var(--f2); }
.sheet .sw input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.sheet .acts { display: flex; gap: var(--s2); justify-content: flex-end; }

/* ---------- 启动 ---------- */
#boot {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: var(--ink); opacity: 1; transition: opacity .24s;
}
#boot.out { opacity: 0; pointer-events: none; }
.bootbox { width: min(300px, 78vw); text-align: center; }
.bootbox .mark { margin-bottom: var(--s3); }
.bootbox h1 { margin: 0 0 var(--s1); font: 400 var(--f5)/1.1 var(--serif); letter-spacing: .06em; }
.bootbox p { margin: var(--s1) 0 0; font-size: var(--f1); color: var(--faint); }
.bootbox .bar { height: 2px; margin: var(--s3) 0 var(--s1); background: var(--line); overflow: hidden; }
.bootbox .bar i { display: block; height: 100%; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s linear; }
.bootbox .bootfoot { font-size: 12px; opacity: .75; }
#bootErr { color: var(--warn); font-size: 12px; line-height: 1.5; }