/* 墨线分镜 · 营火 / 营火选武器 / 设置（W3-E 负责）。规格见 docs/superpowers/specs/2026-10-13-ink-panels-ui-design.md（S17）
 * 类名一律 ink-rest__ / ink-rw__ / ink-settings__ 前缀。 */

/* ---------- 营火 rest ---------- */
.ink-rest { background: var(--paper); }
.ink-rest__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ink-rest__deco i { position: absolute; left: -90px; bottom: 90px; width: 320px; height: 320px; border-radius: 50%; opacity: .08; }
.ink-rest__head { position: relative; z-index: 2; flex: none; padding: var(--safe-top) 16px 0 18px; }
.ink-rest__anchor { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ink-rest__anchor p { margin: 0; font-size: 13px; font-weight: 800; color: #333; }

.ink-rest__opts {
  position: relative; z-index: 2; flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 18px 16px 8px 14px;
}
.ink-rest__opt {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 150px; padding: 14px 14px 14px 22px; text-align: left;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); box-shadow: var(--shadow);
  transform: rotate(-.8deg);
  transition: transform .15s var(--ease-out), box-shadow .15s, filter .3s;
  -webkit-tap-highlight-color: transparent;
}
.ink-rest__opt:nth-child(2) { transform: rotate(.9deg); }
.ink-rest__opt.is-on {
  background: var(--yellow);
  transform: translate(-3px, -3px) rotate(0deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.ink-rest__opt.is-disabled { filter: grayscale(1); opacity: .6; box-shadow: 3px 3px 0 var(--ink); }
.ink-rest__opts.is-picked .ink-rest__opt:not(.is-on) { filter: grayscale(.85) brightness(.92); }
.ink-rest__opts.is-picked .ink-rest__opt.is-disabled:not(.is-on) { filter: grayscale(1); }

.ink-rest__plate { flex: none; border: 3.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.ink-rest__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ink-rest__name { font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: .02em; }
.ink-rest__big { display: flex; align-items: baseline; gap: 6px; font-size: 34px; line-height: 1; }
.ink-rest__big small { font-family: var(--font-cjk); font-weight: 900; font-size: 12px; letter-spacing: 0; }
.ink-rest__desc { margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.4; color: #333; }
.ink-rest__desc.is-lock { color: var(--red); }

.ink-rest__foot { position: relative; z-index: 2; flex: none; padding: 10px 16px calc(14px + var(--safe-bottom)); }
.ink-rest__ok { width: 100%; }

/* ---------- 营火选武器 restWeapon（商店武器格语法） ---------- */
.ink-rw { background: var(--paper); }
.ink-rw__lead { flex: none; margin: 2px 0 0; padding: 0 18px; font-size: 13px; font-weight: 800; line-height: 1.4; color: #333; }
.ink-rw__list { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 22px 14px; }
.ink-rw__row {
  position: relative; flex: none; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 96px; padding: 10px 12px 10px 26px; text-align: left;
  background: var(--white); color: var(--ink);
  border: var(--line) solid var(--ink); box-shadow: var(--shadow);
  transition: transform .15s var(--ease-out), box-shadow .15s, filter .3s;
  -webkit-tap-highlight-color: transparent;
}
/* 稀有度条纹（与 shop.css 的商品格一致） */
.ink-rw__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(-45deg, var(--r) 0 5px, var(--ink) 5px 7px);
  border-right: 3px solid var(--ink);
}
.ink-rw__row:nth-child(odd) { transform: rotate(-.6deg); }
.ink-rw__row:nth-child(even) { transform: rotate(.5deg); }
.ink-rw__row.is-on {
  background: var(--yellow);
  transform: translate(-3px, -3px) rotate(0deg);
  box-shadow: 7px 7px 0 var(--ink);
}
.ink-rw__list.is-picked .ink-rw__row:not(.is-on) { filter: grayscale(.85) brightness(.92); }
.ink-rw__plate { flex: none; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ink-rw__body { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ink-rw__name { font-weight: 900; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
.ink-rw__tag {
  display: inline-block; padding: 0 5px; border: 2px solid var(--ink); background: var(--r);
  color: var(--ink); font-weight: 900; font-size: 10px; line-height: 1.5; white-space: nowrap;
}
.ink-rw__lv { font-size: 18px; line-height: 1.1; letter-spacing: .03em; }
.ink-rw__desc { margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.35; color: #333; }
.ink-rw__plus {
  flex: none; padding: 4px 9px; background: var(--ink); color: var(--yellow);
  font-size: 20px; line-height: 1; transform: skewX(-8deg);
}
.ink-rw__row.is-on .ink-rw__plus { background: var(--red); color: var(--white); }
.ink-rw__foot { flex: none; padding: 10px 16px calc(14px + var(--safe-bottom)); }
.ink-rw__ok { width: 100%; }

/* ---------- 设置弹层 ---------- */
.ink-settings { width: min(100%, 360px); }
/* 组件库的关闭钮是 40px，设置弹层里放大到 44px 触控下限（只作用于本弹层） */
.ink-settings .ink-modal__x { width: 44px; height: 44px; top: -22px; right: -12px; }
.ink-settings__body { display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 16px; }
.ink-settings__sec { margin: 10px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #555; }
.ink-settings__sec:first-child { margin-top: 0; }
.ink-settings__sec.is-danger { color: var(--red); }

.ink-settings__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 58px; padding: 8px 12px; text-align: left;
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.ink-settings__row:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.ink-settings__row[disabled] { opacity: .4; }
.ink-settings__row.is-static { cursor: default; }
.ink-settings__row.is-danger { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.ink-settings__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ink-settings__text b { font-weight: 900; font-size: 16px; line-height: 1.2; }
.ink-settings__text small { font-weight: 700; font-size: 11px; line-height: 1.35; color: #555; overflow-wrap: anywhere; }
.ink-settings__row.is-danger .ink-settings__text b { color: var(--red); }

/* 黑白两态贴纸开关：开为黑底白字，关为白底黑字 */
.ink-settings__sw {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 44px; padding: 0 10px;
  background: var(--white); color: var(--ink); border: 2.5px solid var(--ink);
  font-weight: 900; font-size: 15px; transform: skewX(-10deg);
}
.ink-settings__sw.is-on { background: var(--ink); color: var(--white); }

/* 右侧动作贴纸（重看、切换、复制等）；危险动作用红底 */
.ink-settings__act {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink);
  font-weight: 900; font-size: 13px; line-height: 1.1; white-space: nowrap; transform: skewX(-8deg);
}
.ink-settings__act.is-danger { background: var(--red); color: var(--white); }

/* BGM 风格列表（二级弹层） */
.ink-settings__picks { display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.ink-settings__pick {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; min-height: 56px; padding: 7px 10px; text-align: left;
  background: var(--white); color: var(--ink); border: 2.5px solid var(--ink);
}
.ink-settings__pick b { font-weight: 900; font-size: 14px; line-height: 1.2; }
.ink-settings__pick small { font-weight: 700; font-size: 11px; line-height: 1.35; color: #555; }
.ink-settings__pick i {
  position: absolute; right: 8px; top: 8px; padding: 0 6px; font-style: normal;
  background: var(--ink); color: var(--yellow); font-weight: 900; font-size: 11px; line-height: 1.6;
}
.ink-settings__pick.is-on { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.ink-settings__pick.is-future { border-style: dashed; background: var(--paper-2); color: #555; }

/* ---------- 矮屏（360x640）：压紧营火与武器格的间距，保证主按钮同屏 ---------- */
@media (max-height: 700px) {
  .ink-rest__head { padding-top: calc(var(--safe-top) - 4px); }
  .ink-rest__anchor { margin-top: 8px; }
  .ink-rest__opts { gap: 12px; padding-top: 12px; }
  .ink-rest__opt { min-height: 124px; }
  .ink-rest .ink-rest__plate { width: 64px; height: 64px; }
  .ink-rest__name { font-size: 19px; }
  .ink-rest__big { font-size: 28px; }
  .ink-rw__row { min-height: 84px; }
  .ink-rw .ink-rw__plate { width: 54px; height: 54px; }
}