/* ============================================================
   BRASSLOCK
   一台黄铜密码机。暗色是车间夜班，亮色是同一台机器搬到白天的工作台上。
   所有颜色都走自定义属性，主题切换只换一组令牌。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --fd: 'Big Shoulders Display', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --fm: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fb: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --r: 10px;
  --rail-h: 60px;
}

/* ---------- 暗：车间夜班 ---------- */
:root, [data-theme="dark"] {
  --page-1: #303845;
  --page-2: #171B22;

  --panel-1: #232932;
  --panel-2: #191E25;
  --panel-3: #14181E;
  --groove:  #10141A;
  --well:    #0B0E13;

  --edge:  #090C10;
  --line:  rgba(255,255,255,.065);
  --lift:  rgba(255,255,255,.085);
  --shade: rgba(0,0,0,.55);
  --drop:  rgba(0,0,0,.5);
  --scrim: rgba(6,8,11,.84);

  --fg:       #DDE3EB;
  --fg-dim:   #8B95A3;
  --fg-faint: #5B6472;
  --engrave-sh: 0 -1px 0 rgba(0,0,0,.55);

  --key-1: #2C333D; --key-2: #21272F; --key-3: #1B2027;
  --key-on-1: #39414D; --key-on-2: #262D36; --key-on-3: #1F252D;

  --brass:    #D8B45A; --brass-lo: #8A6E22; --brass-hi: #F5E6B8;
  --chrome:   #C3CCD8; --chrome-lo: #79838F; --chrome-hi: #EEF4FA;
  /* 压在实心黄铜上的字，和压在「掺了黄铜的键帽」上的字。夜里黄铜是亮的，白天是暗的，
     所以这两个跟着主题翻个面，别的地方引它就行。 */
  --on-brass: #2A2005;
  --go-fg:    #F5E6B8;
  --red:  #D9483B;
  --jade: #43A57C;

  --paper: #EAE3D2; --paper-lo: #D5CBB4; --paper-ink: #2A2620;
  --paper-drop: rgba(0,0,0,.34);

  --door-1: #333B47; --door-2: #1D232B; --door-3: #262D37; --door-edge: #0A0D11;
  --vault-1: #262D37; --vault-2: #171C23; --vault-3: #12161B;

  --bar: #333B45;
  color-scheme: dark;
}

/* ---------- 亮：日光工作台 ----------
   同一台机器，换成白天。机身从钢青转成温白的镴（pewter），
   黄铜压深一档才压得住浅底，而所有显示窗口——数字滚轮——一律留在暗处：
   那是发光的部件，不该跟着背景一起变白。 */
[data-theme="light"] {
  --page-1: #F2ECDF;
  --page-2: #D9D1C0;

  --panel-1: #F6F1E6;
  --panel-2: #E8E1D2;
  --panel-3: #DCD4C3;
  --groove:  #CEC5B2;
  --well:    #BDB4A0;

  --edge:  #A2977F;
  --line:  rgba(58,46,26,.15);
  --lift:  rgba(255,255,255,.9);
  --shade: rgba(72,58,34,.2);
  --drop:  rgba(84,70,44,.26);
  --scrim: rgba(46,38,24,.6);

  --fg:       #23272E;
  --fg-dim:   #5B6069;
  --fg-faint: #8C8F97;
  --engrave-sh: 0 1px 0 rgba(255,255,255,.8);

  --key-1: #F0EADD; --key-2: #E1D9C8; --key-3: #D4CBB8;
  --key-on-1: #FBF7EC; --key-on-2: #EDE5D5; --key-on-3: #DED5C2;

  --brass:    #8E6F16; --brass-lo: #5C480E; --brass-hi: #CFAC46;
  --chrome:   #5F6874; --chrome-lo: #414952; --chrome-hi: #929CA9;
  --on-brass: #FDF6E2;
  --go-fg:    #4A390A;
  --red:  #A82E21;
  --jade: #1F6B4C;

  --paper: #FFFCF4; --paper-lo: #F0E9D7; --paper-ink: #2A2620;
  --paper-drop: rgba(84,70,44,.22);

  --door-1: #EDE6D7; --door-2: #CBC2AE; --door-3: #DED6C4; --door-edge: #A2977F;
  --vault-1: #F3EDE0; --vault-2: #E2DAC9; --vault-3: #D6CDBA;

  --bar: #B7AD98;
  color-scheme: light;
}

[data-metal="brass"]  { --metal: var(--brass);  --metal-lo: var(--brass-lo);  --metal-hi: var(--brass-hi); }
[data-metal="chrome"] { --metal: var(--chrome); --metal-lo: var(--chrome-lo); --metal-hi: var(--chrome-hi); }

/* ============================================================ 底子 */

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--fb);
  color: var(--fg);
  background:
    radial-gradient(120% 90% at 50% -18%, var(--page-1), var(--page-2) 62%),
    var(--page-2);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease;
}

#fx {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 90;
}

/* 这一版的显示/隐藏全靠 hidden 属性，而下面很多块都有自己的 display，
   会盖掉浏览器默认的 [hidden]{display:none}。所以在这里一次说死。 */
[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--metal) 40%, transparent); color: var(--fg); }

:focus-visible {
  outline: 2px solid var(--metal);
  outline-offset: 2px;
}

/* ============================================================ 顶栏 */

.rail {
  position: sticky; top: 0; z-index: 60;
  height: var(--rail-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(12px, 3vw, 26px);
  background: linear-gradient(180deg, var(--panel-1), var(--panel-3));
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--lift), 0 6px 22px -10px var(--drop);
}

.rail__mark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.rail__word {
  font-family: var(--fd); font-weight: 800; font-size: 22px;
  letter-spacing: .1em; color: var(--brass);
  text-shadow: var(--engrave-sh);
}
.rail__sub { font-size: 10px; color: var(--fg-faint); letter-spacing: .28em; margin-top: 3px; }

.rail__nav { display: flex; gap: 2px; margin-left: 8px; }

.tab {
  position: relative;
  padding: 7px 14px;
  font-size: 13px; letter-spacing: .1em;
  color: var(--fg-dim); text-decoration: none;
  border-radius: 7px;
  transition: color .16s, background .16s;
}
.tab:hover { color: var(--fg); background: var(--lift); }
.tab[data-on] {
  color: var(--fg);
  background: linear-gradient(180deg, var(--key-on-1), var(--key-on-3));
  box-shadow: inset 0 1px 0 var(--lift), 0 1px 0 var(--shade);
}
.tab[data-on]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--brass);
}

.rail__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 外观开关：一盏三档的信号灯 */
.lamp {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px;
  font: inherit; font-size: 11px; letter-spacing: .12em; color: var(--fg-dim);
  background: linear-gradient(180deg, var(--key-1), var(--key-3));
  border: 1px solid var(--edge); border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--lift);
  cursor: pointer;
}
.lamp:hover { color: var(--fg); }
.lamp__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brass) 70%, transparent), inset 0 -1px 1px var(--shade);
}
[data-theme-pick="light"] .lamp__dot { background: var(--brass-hi); }
[data-theme-pick="dark"]  .lamp__dot { background: var(--chrome-lo); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }

.chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px;
  text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--key-1), var(--key-3));
  border: 1px solid var(--edge); border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--lift);
}
.chip:hover { background: linear-gradient(180deg, var(--key-on-1), var(--key-on-3)); }
.chip__pic { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 var(--lift); }
.chip__pic img, .chip__pic svg { display: block; width: 100%; height: 100%; }
.chip__txt { display: flex; flex-direction: column; line-height: 1.2; }
.chip__name { font-size: 12px; color: var(--fg); max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__tag { font-size: 9px; letter-spacing: .16em; color: var(--fg-faint); }

/* ============================================================ 舞台 */

.stage { padding: clamp(16px, 3vw, 30px) clamp(12px, 3vw, 26px) 60px; }
.scr[hidden] { display: none; }

.screen { max-width: 1120px; margin: 0 auto; }

.screen--setup {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

/* ============================================================ 面板与控件 */

.panel {
  border-radius: var(--r);
  border: 1px solid var(--edge);
  padding: clamp(16px, 2.4vw, 24px);
}

.raised {
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2) 70%, var(--panel-3));
  box-shadow:
    inset 0 1px 0 var(--lift),
    inset 0 -1px 0 var(--shade),
    0 14px 34px -18px var(--drop);
}

.panel__head { margin-bottom: 18px; }
.panel__title {
  margin: 0; font-family: var(--fd); font-weight: 800;
  font-size: clamp(26px, 4vw, 34px); letter-spacing: .06em;
  color: var(--fg); text-shadow: var(--engrave-sh);
}
.panel__note { margin: 5px 0 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.65; }

.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fg-faint);
}

.hint { margin: 7px 0 0; font-size: 11.5px; color: var(--fg-faint); line-height: 1.6; }
.err  { margin: 7px 0 0; font-size: 11.5px; color: var(--red); min-height: 1em; }
.err:empty { min-height: 0; }

.bank {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  background: var(--groove);
  border: 1px solid var(--edge); border-radius: 8px;
  box-shadow: inset 0 2px 5px var(--shade);
}

.key {
  flex: 1 1 auto; min-width: 54px;
  padding: 9px 12px;
  font: inherit; font-size: 13px; color: var(--fg-dim);
  background: linear-gradient(180deg, var(--key-1), var(--key-2));
  border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--lift);
  cursor: pointer;
  transition: color .14s, background .14s, transform .08s;
}
.key:hover { color: var(--fg); }
.key:active { transform: translateY(1px); }
.key[aria-checked="true"] {
  color: var(--fg);
  background: linear-gradient(180deg, var(--key-on-1), var(--key-on-2) 55%, var(--key-on-3));
  box-shadow: inset 0 1px 0 var(--lift), inset 0 -2px 6px var(--shade);
}
.key[aria-checked="true"]::after {
  content: ''; display: block; height: 2px; margin: 6px -4px -3px;
  border-radius: 2px; background: var(--brass);
}
.key[disabled] { opacity: .4; cursor: not-allowed; }

.bank--tabs { display: inline-flex; }
.bank--tabs .key { min-width: 88px; flex: 0 1 auto; }

.names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.namefield {
  width: 100%;
  padding: 10px 12px;
  font: inherit; font-size: 14px; color: var(--fg);
  background: var(--groove);
  border: 1px solid var(--edge); border-radius: 7px;
  box-shadow: inset 0 2px 5px var(--shade);
}
.namefield::placeholder { color: var(--fg-faint); }
.namefield:focus { outline: none; border-color: var(--metal); box-shadow: inset 0 2px 5px var(--shade), 0 0 0 2px color-mix(in srgb, var(--metal) 26%, transparent); }

.manual {
  padding: 14px; margin-bottom: 16px;
  background: var(--groove);
  border: 1px solid var(--edge); border-radius: 8px;
  box-shadow: inset 0 2px 6px var(--shade);
}
/* 两人手动布密码时的交接提示：一次只摊开一个人的格子，这行说明轮到谁写。 */
.manual__step {
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--edge);
  font-size: 12px; line-height: 1.5; color: var(--metal);
  letter-spacing: .02em;
}
.secretbox + .secretbox { margin-top: 12px; }
.secretbox__lab { display: block; margin-bottom: 6px; font-size: 11px; color: var(--fg-dim); }
.secretbox__row { display: flex; gap: 6px; }
.secretbox__input {
  flex: 1; min-width: 0;
  padding: 11px 13px;
  font-family: var(--fm); font-size: 17px; letter-spacing: .42em; color: var(--metal);
  background: var(--well);
  border: 1px solid var(--edge); border-radius: 7px;
  box-shadow: inset 0 2px 7px var(--shade);
}
.secretbox__input:focus { outline: none; box-shadow: inset 0 2px 7px var(--shade), 0 0 0 2px color-mix(in srgb, var(--metal) 26%, transparent); }

.mini {
  padding: 0 12px; flex: none;
  font: inherit; font-size: 12px; color: var(--fg-dim);
  background: linear-gradient(180deg, var(--key-1), var(--key-2));
  border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--lift);
  cursor: pointer;
}
.mini:hover { color: var(--fg); }
.mini:active { transform: translateY(1px); }
.mini--danger:hover { color: var(--red); }

/* 按键 */
.pk {
  padding: 11px 18px;
  font: inherit; font-size: 13.5px; color: var(--fg);
  background: linear-gradient(180deg, var(--key-on-1), var(--key-2) 55%, var(--key-3));
  border: 1px solid var(--edge); border-radius: 8px;
  box-shadow: inset 0 1px 0 var(--lift), 0 2px 0 var(--shade);
  cursor: pointer;
  transition: transform .07s, box-shadow .07s;
}
.pk:hover { background: linear-gradient(180deg, var(--key-on-1), var(--key-on-2) 55%, var(--key-3)); }
.pk:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--lift); }
.pk[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.pk--go {
  color: var(--go-fg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 34%, var(--key-on-1)), color-mix(in srgb, var(--brass-lo) 40%, var(--key-3)));
  border-color: var(--brass-lo);
}
.pk--wide { width: 100%; margin-top: 10px; }
.pk--file { display: inline-flex; align-items: center; cursor: pointer; }
/* 挤在别的东西旁边的小键，比如座位行里那个「让座」。尺寸跟着 .seat__state 走，
   免得它一出现整行的高度就跳一下。 */
.pk--thin {
  flex: none;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11px; letter-spacing: .06em;
}

/* 拉杆 */
.lever {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 6px; padding: 13px 20px;
  font: inherit; text-align: left;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brass-hi) 22%, var(--brass)),
    var(--brass) 40%,
    color-mix(in srgb, var(--brass-lo) 55%, var(--brass)) 78%,
    var(--brass-lo));
  border: 1px solid var(--brass-lo); border-radius: 9px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--brass-hi) 70%, transparent),
    inset 0 -2px 6px color-mix(in srgb, var(--brass-lo) 80%, black),
    0 6px 18px -8px var(--drop);
  cursor: pointer;
  transition: transform .09s, box-shadow .09s;
}
.lever:active { transform: translateY(2px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brass-hi) 50%, transparent), inset 0 -1px 4px rgba(0,0,0,.4); }
.lever[disabled] { filter: grayscale(.65) brightness(.85); cursor: not-allowed; }
.lever__knob {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #fff8dd, var(--brass-lo) 68%, #3a2c07);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.lever__txt {
  font-family: var(--fd); font-weight: 800; font-size: 19px; letter-spacing: .2em;
  color: var(--on-brass); text-shadow: 0 1px 0 color-mix(in srgb, var(--brass-lo) 55%, transparent);
}
.lever--wide { justify-content: center; }

.split {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; font-size: 10px; letter-spacing: .3em; color: var(--fg-faint);
}
.split::before, .split::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.joinrow { display: flex; gap: 8px; align-items: flex-start; }
.joinrow__in { text-transform: uppercase; letter-spacing: .3em; font-family: var(--fm); }

/* ============================================================ 纸：纪录与榜单 */

.ledger, .sheet {
  border-radius: var(--r);
  border: 1px solid var(--edge);
  padding: 18px;
  background: linear-gradient(180deg, var(--panel-1), var(--panel-3));
  box-shadow: inset 0 1px 0 var(--lift), 0 14px 34px -18px var(--drop);
}
.ledger__title {
  margin: 0 0 12px;
  font-family: var(--fd); font-weight: 600; font-size: 17px; letter-spacing: .22em;
  color: var(--fg-dim);
}
.ledger__foot { margin: 12px 0 0; font-size: 10.5px; color: var(--fg-faint); line-height: 1.6; }

.rec {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.rec:last-child { border-bottom: 0; }
.rec__n { font-family: var(--fd); font-size: 19px; font-weight: 600; color: var(--brass); min-width: 1.6em; }
.rec__v { margin-left: auto; font-family: var(--fm); font-size: 12px; color: var(--fg); }
.rec__t { font-family: var(--fm); font-size: 10.5px; color: var(--fg-faint); }
.empty { padding: 14px 0; font-size: 12px; color: var(--fg-faint); }

/* ============================================================ 机器 */

.play { display: block; }

.playgrid { display: grid; gap: 20px; align-items: start; max-width: 1120px; margin: 0 auto; }

.machines { display: grid; gap: 16px; }
.machines[data-count="2"] { grid-template-columns: 1fr 1fr; }

.machine {
  border-radius: var(--r);
  border: 1px solid var(--edge);
  padding: 15px;
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2) 70%, var(--panel-3));
  box-shadow: inset 0 1px 0 var(--lift), inset 0 -1px 0 var(--shade), 0 14px 34px -18px var(--drop);
  transition: box-shadow .25s;
}
.machine[data-active] {
  box-shadow:
    inset 0 1px 0 var(--lift), inset 0 -1px 0 var(--shade),
    0 0 0 1px color-mix(in srgb, var(--metal) 55%, transparent),
    0 14px 34px -18px var(--drop);
}
.machine[data-dim] { opacity: .62; }

.machine__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.machine__pic {
  width: 32px; height: 32px; border-radius: 7px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 var(--lift);
}
.machine__pic img, .machine__pic svg { display: block; width: 100%; height: 100%; }
.machine__id { min-width: 0; }
.machine__name {
  font-family: var(--fd); font-weight: 600; font-size: 19px; letter-spacing: .1em;
  color: var(--metal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.machine__sub { font-size: 10px; letter-spacing: .18em; color: var(--fg-faint); }
.machine__tally { margin-left: auto; text-align: right; }
.machine__count { font-family: var(--fd); font-size: 25px; font-weight: 800; color: var(--fg); line-height: 1; }
.machine__unit { font-size: 9px; letter-spacing: .24em; color: var(--fg-faint); }

/* column-reverse + 追加写入 = 最新一条永远压在最上面。
   不设高度上限，也不自带滚动条：拨过的每一手都摊开摆着，推理时不用来回卷。 */
.log {
  display: flex; flex-direction: column-reverse; gap: 7px;
  padding: 4px 6px 4px 2px;
}

.stub {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  background: linear-gradient(178deg, var(--paper), var(--paper-lo));
  border-radius: 4px;
  box-shadow: 0 2px 5px -1px var(--paper-drop);
  color: var(--paper-ink);
  animation: stub-in .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes stub-in { from { opacity: 0; transform: translateY(-9px) rotate(-.6deg); } }
.stub__no {
  font-family: var(--fm); font-size: 9.5px; color: #8C8069;
  min-width: 2.2em;
}
.stub__d { font-family: var(--fm); font-size: 16px; letter-spacing: .16em; font-weight: 600; }
.stub__g { margin-left: auto; display: flex; gap: 6px; }
.stub--void { opacity: .55; }
.stub--void .stub__d { color: #8C8069; letter-spacing: .3em; }

/* 环形读数 */
.gauge {
  position: relative; width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--g-on) calc(var(--p) * 1turn), var(--g-off) 0);
  box-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.gauge::after {
  content: attr(data-v);
  position: absolute; inset: 5px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--fm); font-size: 11.5px; font-weight: 600; color: var(--g-ink);
}
.gauge { --g-on: #C39B3A; --g-off: #92701F33; --g-ink: #33260A; }
.gauge[data-zero] { --g-on: #CFC6B0; --g-off: #B6AC9355; --g-ink: #6E6553; }
.gauge[data-full] { --g-on: #2C6E52; --g-off: #46A87F44; --g-ink: #08301F; }
.gauge[data-full]::after { background: #A8EBCB; }
.gauge--loose { --g-on: #8A8574; --g-off: #BDB49C44; --g-ink: #55503F; }

/* ============================================================ 操作台 */

.console {
  border-radius: var(--r);
  border: 1px solid var(--edge);
  padding: 16px;
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2) 70%, var(--panel-3));
  box-shadow: inset 0 1px 0 var(--lift), inset 0 -1px 0 var(--shade), 0 14px 34px -18px var(--drop);
}

.console__who {
  font-family: var(--fd); font-weight: 800; font-size: 22px; letter-spacing: .1em;
  color: var(--metal);
}
.console__rule { margin: 3px 0 13px; font-size: 11px; color: var(--fg-faint); line-height: 1.6; }

.wheels { display: flex; gap: 6px; justify-content: center; margin-bottom: 11px; }

.wheel {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 62px;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--well), #1B2129 22%, #10151B 50%, #171C24 78%, #070A0E);
  border: 1px solid var(--edge);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.8), inset 0 -3px 7px rgba(0,0,0,.6);
  overflow: hidden;
  cursor: pointer;
}
.wheel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 34%, transparent 66%, rgba(0,0,0,.4));
  pointer-events: none;
}
.wheel__d {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--fm); font-weight: 600;
  font-size: clamp(19px, 4.2vw, 27px);
  color: var(--metal);
  text-shadow: 0 0 12px color-mix(in srgb, var(--metal) 45%, transparent);
}
.wheel__d.is-blank { color: #2C333D; text-shadow: none; }
.wheel[data-roll] .wheel__d { animation: roll .17s cubic-bezier(.3,.9,.4,1); }
@keyframes roll { from { transform: translateY(-72%); opacity: .25; } }
.wheel[data-slot] { cursor: default; }

.msg {
  min-height: 2.6em; margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--fg-dim);
}
.msg[data-tone="good"] { color: var(--jade); }
.msg[data-tone="bad"]  { color: var(--red); }

.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pad .pk { padding: 12px 0; text-align: center; font-family: var(--fm); font-size: 16px; }
.pad .pk--act { grid-column: span 2; font-family: var(--fb); font-size: 13px; letter-spacing: .08em; }
.pad .pk--go  { grid-column: span 3; }

.notes { margin-top: 14px; }
.notes__bar {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .26em; color: var(--fg-faint);
}
.notes__bar::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.notes-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 9px; }
.notes-grid[data-off] { display: none; }
.nk {
  padding: 7px 0;
  font-family: var(--fm); font-size: 12px; color: var(--fg-faint);
  background: var(--groove);
  border: 1px solid var(--edge); border-radius: 5px;
  cursor: pointer;
}
.nk[data-s="1"] { color: var(--jade); background: color-mix(in srgb, var(--jade) 16%, var(--groove)); border-color: color-mix(in srgb, var(--jade) 45%, var(--edge)); }
.nk[data-s="2"] { color: var(--fg-faint); text-decoration: line-through; opacity: .6; }

.acts { display: flex; gap: 8px; margin-top: 12px; }
.acts .pk { flex: 1; }

.turnbar {
  height: 4px; margin: 0 0 12px;
  background: var(--groove); border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 1px 2px var(--shade);
}
.turnbar__fill { height: 100%; background: var(--metal); transition: width .25s linear; }
.turnbar[data-low] .turnbar__fill { background: var(--red); }

/* ============================================================ 金库 */

.overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }

.doors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50.6%;
  background: linear-gradient(90deg, var(--door-1), var(--door-2) 55%, var(--door-3));
  border-right: 2px solid var(--door-edge);
  transition: transform .62s cubic-bezier(.72,.02,.24,1);
}
.door--l { left: 0; }
.door--r { right: 0; border-right: 0; border-left: 2px solid var(--door-edge); transform: scaleX(-1); }
.door::after {
  content: ''; position: absolute; top: 50%; right: 12px;
  width: 46px; height: 46px; margin-top: -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--brass-hi), var(--brass) 45%, var(--brass-lo));
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: opacity .3s;
}
.doors.is-open .door--l { transform: translateX(-116%); }
.doors.is-open .door--r { transform: scaleX(-1) translateX(-116%); }
.doors.is-open .door::after { opacity: 0; }

.vault {
  position: relative; z-index: 1;
  width: min(500px, 100%);
  /* 横屏手机上这块牌子比屏幕还高，底下那两个按钮会跑出去够不着。
     先让它自己能滚，下面再按屏高瘦一圈，多数情况下就用不上滚了。 */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 24px 22px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--vault-1), var(--vault-2) 62%, var(--vault-3));
  box-shadow: inset 0 1px 0 var(--lift), 0 30px 70px -26px rgba(0,0,0,.7);
  animation: vault-in .4s .18s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes vault-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.vault__eyebrow { margin: 0; font-size: 10px; letter-spacing: .34em; color: var(--fg-faint); }
.vault__title {
  margin: 6px 0 16px;
  font-family: var(--fd); font-weight: 800; font-size: clamp(30px, 6vw, 42px);
  letter-spacing: .07em; color: var(--fg); text-shadow: var(--engrave-sh);
}
.vault__sub { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.65; }

.reveal { display: flex; gap: 7px; justify-content: center; }
.reveal__d {
  position: relative; width: 46px; height: 60px;
  border-radius: 7px;
  background: linear-gradient(180deg, #0A0D12, #1D242C 22%, #10151B 50%, #191F27 78%, #070A0E);
  border: 1px solid var(--edge);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.8);
  display: grid; place-items: center;
  font-family: var(--fm); font-weight: 600; font-size: 25px;
  color: var(--brass);
  text-shadow: 0 0 14px color-mix(in srgb, var(--brass) 55%, transparent);
  overflow: hidden;
}

.seal {
  width: 92px; height: 92px; margin: 18px auto 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--brass-hi), #C39B3A 46%, #7E6320);
  color: #2C2007;
  font-family: var(--fd); font-weight: 800; font-size: 25px; letter-spacing: .1em;
  box-shadow: 0 5px 16px -4px rgba(0,0,0,.6), inset 0 -3px 8px rgba(0,0,0,.28);
  transform: scale(0); opacity: 0;
}
.seal.is-set { animation: stamp .34s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes stamp { to { transform: scale(1) rotate(-7deg); opacity: 1; } }
.seal--gold { background: radial-gradient(circle at 36% 30%, #FFF6D2, #E8C55A 46%, #9C7A1E); }
.seal--jade { background: radial-gradient(circle at 36% 30%, #A8EBCB, #46A87F 46%, #2C7154); color: #06291B; }
.seal--dead { background: radial-gradient(circle at 36% 30%, #99A2AE, #5C6672 46%, #3A424C); color: #171B21; }

.ribbon { margin: 12px 0 0; font-size: 12.5px; color: var(--jade); min-height: 1.2em; }

.stats { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.stats > div {
  padding: 9px 15px; border-radius: 8px;
  background: var(--groove); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 2px var(--shade);
}
.stats b { display: block; font-family: var(--fd); font-size: 22px; font-weight: 800; color: var(--fg); }
.stats span { font-size: 9px; letter-spacing: .22em; color: var(--fg-faint); }

.vault__acts { display: flex; gap: 8px; margin-top: 20px; }
.vault__acts .pk { flex: 1; }

/* 矮屏幕（横过来的手机、压扁的窗口）：牌子上的每一样都收一收。 */
@media (max-height: 620px) {
  .vault { padding: 16px 20px 14px; }
  .vault__title { margin: 4px 0 10px; font-size: clamp(24px, 5vh, 32px); }
  .vault__sub { margin-top: 10px; }
  .reveal { gap: 6px; }
  .reveal__d { width: 38px; height: 48px; font-size: 21px; }
  .seal { width: 66px; height: 66px; margin-top: 12px; font-size: 19px; }
  .ribbon { margin-top: 8px; }
  .stats { margin-top: 10px; }
  .stats > div { padding: 6px 12px; }
  .stats b { font-size: 18px; }
  .vault__acts { margin-top: 12px; }
}

/* ============================================================ 提示条 */

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 95;
  transform: translate(-50%, 16px);
  padding: 11px 18px;
  font-size: 12.5px; color: var(--fg);
  background: linear-gradient(180deg, var(--panel-1), var(--panel-3));
  border: 1px solid var(--edge); border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--lift), 0 12px 30px -12px var(--drop);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tone="bad"] { color: var(--red); }

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

@media (max-width: 980px) {
  /* margin:auto 会把 grid 子项从「拉伸」改成「居中」，宽度就缩成内容那么大了，
     一台机器的时候只剩窄窄一条。宽度得自己写回来。 */
  .machines { width: 100%; max-width: 620px; margin: 0 auto; }
}

@media (min-width: 981px) {
  .playgrid { grid-template-columns: minmax(0, 1fr) 384px; }
  .playgrid .console { position: sticky; top: calc(var(--rail-h) + 18px); }
}

@media (max-width: 860px) {
  .screen--setup { grid-template-columns: 1fr; }
  .ledger { order: 2; }
}

@media (max-width: 700px) {
  .rail { gap: 8px; padding: 0 12px; }
  .rail__sub { display: none; }
  .rail__word { font-size: 18px; }
  .rail__nav { order: 3; width: 100%; }
  .chip__txt { display: none; }
  .lamp__txt { display: none; }
  .lamp { padding: 7px; }
}

@media (max-width: 620px) {
  .rail {
    height: auto; flex-wrap: wrap; padding: 8px 12px 0;
    position: static;
  }
  .rail__nav {
    margin: 8px -12px 0; padding: 0 12px 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  .rail__nav::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .machines[data-count="2"] { grid-template-columns: 1fr; }
  .names { grid-template-columns: 1fr; }
  .pad { grid-template-columns: repeat(5, 1fr); }
  .notes-grid { grid-template-columns: repeat(5, 1fr); }
  .reveal__d { width: 38px; height: 50px; font-size: 21px; }
  .stage { padding: 14px 12px 48px; }
  .playgrid .console { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .doors { display: none; }
}