/* 全局样式：素纸风设计系统 —— 纸面米白 / 墨色文字 / 赭石强调；卡片去边框，用阴影与留白分层 */
.screen {
  --bg: #f5f2ec;
  --card: #ffffff;
  --ink: #2b2621;
  --ink-2: #6d6459;
  --ink-3: #a2988b;
  --line: #e7e1d6;
  --line-2: #f2eee7;
  --accent: #9c5a2c;
  --accent-soft: #faf4ec;
  --shadow: 0 calc(2 * var(--rp)) calc(12 * var(--rp)) rgba(43, 38, 33, 0.05);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(30 * var(--rp));
  line-height: 1.6;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wrap { padding: calc(32 * var(--rp)) calc(32 * var(--rp)) calc(64 * var(--rp)); }

.card {
  background: var(--card);
  border-radius: calc(24 * var(--rp));
  padding: calc(32 * var(--rp)) calc(28 * var(--rp));
  margin-bottom: calc(24 * var(--rp));
  box-shadow: var(--shadow);
}

.card-title {
  font-size: calc(26 * var(--rp));
  color: var(--ink-2);
  letter-spacing: calc(2 * var(--rp));
  margin-bottom: calc(18 * var(--rp));
}

.hint { font-size: calc(24 * var(--rp)); color: var(--ink-3); }

.btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: calc(26 * var(--rp)) 0;
  border: calc(1 * var(--rp)) solid var(--accent);
  border-radius: calc(999 * var(--rp));
  color: var(--accent);
  background: transparent;
  font-size: calc(30 * var(--rp));
  margin-top: calc(24 * var(--rp));
}
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.ghost { border-color: var(--line); color: var(--ink-2); }

/* 底部操作：按钮网格（四列 / 两列） */
.op-grid { display: flex; flex-wrap: wrap; margin: calc(8 * var(--rp)) calc(-8 * var(--rp)) 0; }
.op-cell { width: 25%; box-sizing: border-box; padding: 0 calc(8 * var(--rp)) calc(16 * var(--rp)); }
.op-cell.wide { width: 50%; }
.op-btn {
  background: var(--card);
  border-radius: calc(16 * var(--rp));
  text-align: center;
  padding: calc(24 * var(--rp)) 0;
  font-size: calc(26 * var(--rp));
  color: var(--ink-2);
  box-shadow: var(--shadow);
}
.op-btn.main { color: var(--accent); }
.op-btn.quiet { color: var(--ink-3); }

.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.grow { flex: 1; }
.muted { color: var(--ink-2); font-size: calc(26 * var(--rp)); }

/* 卦画：爻线（宽 calc(200 * var(--rp)) / 线厚 calc(10 * var(--rp))；动爻转赭石） */
.gua { display: flex; flex-direction: column; align-items: center; }
.yao-line { display: flex; width: calc(200 * var(--rp)); justify-content: space-between; margin-bottom: calc(12 * var(--rp)); }
.yao-line .seg { height: calc(10 * var(--rp)); background: var(--ink); border-radius: calc(4 * var(--rp)); }
.yao-line .seg.full { width: 100%; }
.yao-line .seg.half { width: 42%; }
.yao-line.moving .seg { background: var(--accent); }