/* ---------- 拼豆保险箱：箱盖上的绒面托盘 ---------- */

/* 箱盖比正文宽：盘面要占满，别缩在纸页中间 */
.modal__panel:has(.lock) { width: 76cqw; }

.lock {
  --cell: min(3.5cqw, 7.6cqh);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6cqw;
  margin: 0 0 .6cqh;
}

/* ---------- 箱盖：橡木 + 铁包边 ---------- */
.lock__lid {
  position: relative;
  flex: 0 0 auto;
  padding: 2.1cqh 1.2cqw 2.7cqh;
  border: .3cqw solid #221610;
  border-radius: .5cqw;
  perspective: 70cqh;
  background:
    linear-gradient(180deg, rgba(255, 224, 170, .12), rgba(0, 0, 0, 0) 34%),
    repeating-linear-gradient(91deg,
      #4b3321 0 2px, #3c2918 2px 5px, #46301d 5px 9px, #3a2717 9px 13px),
    #3a2717;
  box-shadow:
    0 1.6cqh 3.2cqh rgba(0, 0, 0, .55),
    inset 0 0 0 2px rgba(0, 0, 0, .5),
    inset 0 0 4cqh rgba(0, 0, 0, .55);
}
/* 上下两道铁箍 + 铆钉 */
.lock__lid::before,
.lock__lid::after {
  content: "";
  position: absolute;
  left: .35cqw;
  right: .35cqw;
  height: 1cqh;
  border-radius: .12cqw;
  background-image:
    radial-gradient(circle at 1cqw 50%, #f0dcae 0 .07cqw, #7a6538 .09cqw, rgba(0, 0, 0, 0) .12cqw),
    linear-gradient(180deg, #6d7175, #34383b 48%, #565a5e 76%, #24272a);
  background-size: 2.1cqw 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 .25cqh .5cqh rgba(0, 0, 0, .6);
}
.lock__lid::before { top: .55cqh; }
.lock__lid::after { bottom: .55cqh; }

/* 锁扣：成功时向上翻开 */
.lock__hasp {
  position: absolute;
  left: 50%;
  bottom: -1.4cqh;
  width: 3.6cqw;
  height: 2.3cqh;
  margin-left: -1.8cqw;
  border-radius: .18cqw .18cqw .55cqw .55cqw;
  background: linear-gradient(180deg, #f2dcab, #a5833f 42%, #4f3c1b);
  box-shadow: 0 .25cqh .5cqh rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .45);
  transform-origin: top center;
  transition: transform .65s var(--ease-in-out);
}
.lock__hasp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: .5cqw;
  height: .5cqw;
  margin-left: -.25cqw;
  border-radius: 50%;
  background: #221610;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 240, 200, .25);
}
.lock.is-solved .lock__hasp { transform: rotateX(-108deg); }

/* ---------- 托盘：下沉的绒面 ---------- */
.lock__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), var(--cell));
  gap: .34cqw;
  padding: .8cqw;
  border-radius: .25cqw;
  background: radial-gradient(130% 90% at 50% -10%, #1b201a, #0a0c09 68%), #0a0c09;
  box-shadow:
    inset 0 .7cqh 1.6cqh rgba(0, 0, 0, .95),
    inset 0 0 0 2px rgba(0, 0, 0, .75),
    0 0 0 1px rgba(200, 163, 90, .3);
}

/* 每个格子是一个圆坑 */
.lock__cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 62%, #161a14, #050705 78%);
  box-shadow:
    inset 0 .12cqh .22cqh rgba(0, 0, 0, .95),
    inset 0 -.06cqh 0 rgba(255, 255, 255, .05),
    0 0 0 1px rgba(0, 0, 0, .6);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.lock__cell:not(.is-given):hover {
  box-shadow:
    inset 0 .12cqh .22cqh rgba(0, 0, 0, .95),
    0 0 0 1px rgba(240, 178, 74, .55),
    0 0 1cqw rgba(240, 178, 74, .25);
}
.lock__cell:focus-visible {
  outline: none;
  box-shadow:
    inset 0 .12cqh .22cqh rgba(0, 0, 0, .95),
    0 0 0 2px #f0b24a,
    0 0 1.2cqw rgba(240, 178, 74, .45);
}

/* 悬停预演：还没落子时先给一颗半透明的珠子 */
.lock__grid[data-sel] .lock__cell:not(.is-filled):not(.is-given):hover::after {
  content: "";
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: var(--sel, transparent);
  opacity: .3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* 珠子：从上方看的短圆柱 */
.lock__bead {
  display: none;
  position: relative;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 52% 58%, var(--c, #333), rgba(0, 0, 0, .85) 128%);
  box-shadow:
    inset 0 -.18cqh .22cqh rgba(0, 0, 0, .6),
    0 .1cqh .16cqh rgba(0, 0, 0, .7);
}
.lock__cell.is-filled .lock__bead { display: block; }

/* 出厂钉死的珠子：黄铜压环 + 铆钉 */
.lock__cell.is-given { cursor: default; }
.lock__cell.is-given .lock__bead::after {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  border: 1px solid rgba(240, 224, 178, .8);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.lock__cell.is-given .lock__bead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26%;
  width: .26cqw;
  height: .26cqw;
  min-width: 3px;
  min-height: 3px;
  margin-left: -.13cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d2, #a5823f 72%);
  box-shadow: 0 .06cqh .12cqh rgba(0, 0, 0, .65);
}

/* 抽不动的抖动 */
.lock__cell.is-stuck { animation: lock-stuck .32s var(--ease-out); }
@keyframes lock-stuck {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
}

/* 放错的珠子：轻轻抬一下再落回去，错落着来 */
.lock__cell.is-wrong .lock__bead {
  animation: lock-wrong .46s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 55ms);
}
@keyframes lock-wrong {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-.3cqh) scale(1.04); }
  70% { transform: translateY(.05cqh) scale(.99); }
}

/* 成功：从中间往外亮一遍 */
.lock__cell.is-open .lock__bead {
  animation: lock-open .6s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 32ms);
}
@keyframes lock-open {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.16); filter: brightness(1.75); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ---------- 右侧：料盘、提示、按钮 ---------- */
.lock__side {
  flex: 0 1 20cqw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1cqh;
}
.lock__side .inspect__hint { margin: 0; }

.lock__rods { display: flex; flex-direction: column; gap: .7cqh; }
.lock__rod {
  display: flex;
  align-items: center;
  gap: .55cqw;
  width: 100%;
  padding: .5cqh .8cqw;
  font-size: max(.86cqw, 12px);
  letter-spacing: .1em;
  text-align: left;
  color: #3b2a16;
  border: 1px solid rgba(80, 58, 30, .38);
  border-radius: .22cqw;
  background: linear-gradient(180deg, rgba(255, 250, 235, .6), rgba(232, 214, 180, .38));
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
/* 一根短铁棍：左侧亮、右侧暗，像圆柱 */
.lock__rod i {
  flex: 0 0 auto;
  width: .5cqw;
  min-width: 5px;
  height: 1.55cqh;
  border-radius: .12cqw;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .6), var(--c) 34%, rgba(0, 0, 0, .55));
  box-shadow: 0 .08cqh .16cqh rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.lock__rod b {
  margin-left: auto;
  font-weight: 400;
  color: #6b5231;
  font-variant-numeric: tabular-nums;
}
.lock__rod:hover { border-color: rgba(140, 42, 30, .5); }
.lock__rod.is-active {
  border-color: #8c2a1e;
  background: linear-gradient(180deg, rgba(255, 244, 226, .75), rgba(228, 196, 170, .5));
  transform: translateX(.18cqw);
}
.lock__rod.is-active i {
  box-shadow: 0 0 0 1px rgba(140, 42, 30, .7), 0 0 .6cqw rgba(140, 42, 30, .35);
}
.lock__rod.is-empty { opacity: .45; }
.lock__rod.is-empty i { filter: grayscale(.8) brightness(.7); }

.lock__tip {
  margin: 0;
  padding: .45cqh .7cqw;
  border-left: 2px solid rgba(140, 42, 30, .5);
  background: linear-gradient(90deg, rgba(140, 42, 30, .09), rgba(140, 42, 30, 0));
  font-size: .9cqw;
  line-height: 1.6;
  letter-spacing: .04em;
  color: #6b2a1e;
}
.lock__tip[data-kind="ok"] {
  border-left-color: rgba(61, 82, 38, .7);
  color: #3d5226;
  background: linear-gradient(90deg, rgba(61, 82, 38, .1), rgba(61, 82, 38, 0));
}

.lock__actions {
  display: flex;
  flex-direction: column;
  gap: .6cqh;
  margin-top: .4cqh;
  /* 不贴纸页下沿：毛边裁切会把按钮下缘削掉一截 */
  margin-bottom: .6cqh;
}
.lock__actions .btn {
  width: 100%;
  min-height: 38px;
  padding: .65cqh 1cqw;
  font-size: max(1.02cqw, 14px);
  letter-spacing: .08em;
}

/* ---------- 矮屏：纸页放宽，格子吃满高度 ---------- */
@media (max-height: 640px) {
  .modal__panel:has(.lock) { width: 86cqw; }
  .lock {
    --cell: min(4.5cqw, 7.1cqh);
    gap: 1cqw;
  }
  .lock__lid {
    padding: 1.3cqh 1cqw 1.8cqh;
    border-width: .22cqw;
  }
  .lock__lid::before { top: .35cqh; height: .8cqh; }
  .lock__lid::after { bottom: .35cqh; height: .8cqh; }
  .lock__hasp { display: none; }
  .lock__side { flex: 0 1 24cqw; gap: .7cqh; }
  .lock__side .inspect__hint { font-size: max(.86cqw, 12px); line-height: 1.7; }
  .lock__tip { font-size: max(.86cqw, 12px); padding: .35cqh .6cqw; }
  /* 矮屏：四个按钮排成两列，确认占整行，免得把纸页顶穿 */
  .lock__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5cqh .6cqw;
  }
  .lock__actions .btn { min-height: 44px; font-size: max(1cqw, 14px); }
  .lock__actions .btn--primary { grid-column: 1 / -1; }
  .lock__rod { font-size: max(.86cqw, 12px); }
}

/* ---------- 极矮 / 极窄舞台：盘面在上，侧栏在下，整块滚动 ----------
   正常手机全屏（舞台高 ≥390）和 PC 不会命中，样式保持不变。 */
@container (max-height: 300px), (max-width: 520px) and (max-height: 380px) {
  .modal__panel:has(.lock) { width: 92cqw; }
  .modal__panel:has(.lock) .sheet {
    height: 92cqh;
    max-height: 92cqh;
  }

  .sheet[data-single="true"].sheet--lock .sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .3cqw;
  }

  .lock {
    --cell: min(3.2cqw, 5cqh);
    flex-direction: column;
    align-items: stretch;
    gap: 1.2cqh;
  }

  .lock__lid {
    align-self: center;
    padding: 1cqh .8cqw 1.4cqh;
    border-width: .2cqw;
  }

  .lock__side {
    flex: 0 0 auto;
    width: 100%;
    gap: .6cqh;
  }

  /* 三根铁棍横排，省一条竖向空间 */
  .lock__rods { flex-direction: row; gap: .8cqw; }
  .lock__rod {
    flex: 1 1 0;
    min-width: 0;
    padding: .4cqh .5cqw;
  }

  .lock__actions .btn { min-height: 36px; }

  /* 玩过一次的玩家：紧凑模式不再重复教学文案 */
  .sheet--lock-seen .lock__side .inspect__hint { display: none; }
}