/* ============================================================
   胡侃比特 · 互动小游戏样式（games.css）
   设计原则：安静、克制，与 style.css 同一杂志气质。
   - 全部颜色来自全站 CSS 变量（自动适配暗色模式）
   - 所有类名加 gm- 前缀，避免污染全局
   - 尊重 prefers-reduced-motion
   ============================================================ */

/* ---------- 容器与通用 ---------- */

.gm-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6rem 1.7rem 1.8rem;
  margin: 2.2rem 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ink);
}

.gm-kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--accent-ink);
  margin: 0 0 0.5rem;
}

.gm-title {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 0.4rem;
}

.gm-desc {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0 0 1.3rem;
}

.gm-panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  margin-top: 1rem;
}

.gm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.3rem;
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
}

.gm-row label { color: var(--ink-soft); }

.gm-big {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0.3rem 0 0.1rem;
  transition: color 0.3s;
}

.gm-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.2rem 0 0;
  line-height: 1.9;
}

.gm-foot {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  line-height: 1.9;
}

.gm-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.2rem;
  margin-top: 0.9rem;
}

.gm-stat-grid .gm-cell .gm-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}

.gm-stat-grid .gm-cell .gm-value {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 按钮：与全站 .btn 同气质，但独立实现 */
.gm-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  touch-action: manipulation;
}

.gm-btn:hover { background: var(--accent-ink); }
.gm-btn:active { opacity: 0.8; }
.gm-btn:disabled { opacity: 0.45; cursor: default; }
.gm-btn:disabled:hover { background: var(--ink); }

.gm-btn.gm-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.gm-btn.gm-ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: transparent; }

/* 分段按钮 */
.gm-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.gm-seg button {
  font-family: var(--sans);
  font-size: 0.82rem;
  border: none;
  background: var(--card);
  color: var(--ink-soft);
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  touch-action: manipulation;
}

.gm-seg button + button { border-left: 1px solid var(--line); }
.gm-seg button.gm-on { background: var(--accent); color: #fff; }
.gm-seg button:disabled { opacity: 0.5; cursor: default; }

/* 滑块（gm- 作用域内自包含实现） */
.gm-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  flex: 1;
  min-width: 150px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
}

.gm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--paper);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  cursor: grab;
}

.gm-range::-webkit-slider-thumb:active { cursor: grabbing; }

.gm-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--paper);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
  cursor: grab;
}

.gm-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ============================================================
   游戏一 · 购买力时光机
   ============================================================ */

.gm-tm-year {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.gm-tm-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.1rem;
  margin-top: 1.1rem;
}

.gm-bread-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.15rem 0.2rem;
  margin: 0.8rem 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
}

.gm-bread {
  text-align: center;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}

.gm-bread.gm-dim {
  opacity: 0.14;
  filter: grayscale(1);
  transform: scale(0.86);
}

.gm-tm-milestone {
  margin-top: 0.9rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0 0.15rem 0.9rem;
  line-height: 1.9;
  min-height: 3.4em;
}

.gm-tm-milestone .gm-ms-year {
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  margin-right: 0.4em;
}

/* 对照面板：另一套系统 */
.gm-cap-panel {
  border: 1px dashed var(--accent);
  background: var(--accent-wash);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
}

.gm-cap-panel .gm-cap-title {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--accent-ink);
  margin: 0 0 0.7rem;
}

.gm-cap-bar {
  position: relative;
  height: 1.9rem;
  border-radius: 7px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
}

.gm-cap-bar .gm-cap-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  font-weight: 700;
  white-space: nowrap;
}

.gm-mined-wrap { margin-top: 0.8rem; }

.gm-mined-bar {
  height: 0.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--line) 60%, transparent);
  overflow: hidden;
}

.gm-mined-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--good);
  transition: width 0.4s ease;
}

.gm-cap-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.55rem 0 0;
  line-height: 1.8;
}

/* ============================================================
   游戏二 · 孤勇者矿工
   ============================================================ */

.gm-mine-btn {
  display: block;
  width: min(100%, 21rem);
  margin: 0.4rem auto 0.9rem;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 1.05rem 2rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s, box-shadow 0.2s;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.gm-mine-btn:hover { background: var(--accent-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.gm-mine-btn:active { transform: scale(0.985); }

.gm-log {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.75;
  color: var(--ink-faint);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-top: 0.9rem;
  height: 9.2rem;
  overflow: hidden;
  word-break: break-all;
}

.gm-log-line { display: block; color: var(--ink-faint); }
.gm-log-line .gm-zero { color: var(--good); font-weight: 700; }
.gm-log-line.gm-hit { color: var(--ink); }

.gm-mono { font-family: var(--mono); font-size: 0.72rem; word-break: break-all; }
.gm-zero { color: var(--good); font-weight: 700; }

.gm-success {
  margin-top: 1rem;
  border: 1px solid var(--good);
  background: color-mix(in srgb, var(--good) 9%, transparent);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--ink);
  word-break: break-all;
  animation: gm-fadein 0.5s ease;
}

.gm-success .gm-success-head {
  font-weight: 700;
  color: var(--good);
  margin: 0 0 0.4rem;
}

@keyframes gm-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* 找到合格 nonce 时的一次柔和闪烁 */
@keyframes gm-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent); }
  60% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--good) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 0%, transparent); }
}

.gm-flash { animation: gm-flash 0.9s ease 1; }

/* 自动挖矿开关 */
.gm-switch {
  font-family: var(--sans);
  font-size: 0.82rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  touch-action: manipulation;
}

.gm-switch:hover { border-color: var(--accent); color: var(--accent-ink); }

.gm-switch.gm-on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 700;
}

/* ============================================================
   游戏三 · 内存池停车场（区块空间拍卖）
   ============================================================ */

.gm-mp-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0.2rem 0 0.7rem;
  font-variant-numeric: tabular-nums;
}

.gm-mp-readout strong { color: var(--ink); }

/* 区块：一座 12 格的桥 */
.gm-block {
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  padding: 0.55rem;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.gm-block.gm-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.gm-block-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

.gm-cell {
  height: 2.7rem;
  border-radius: 6px;
  border: 1px dashed var(--line);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
}

.gm-cell.gm-filled {
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  cursor: pointer;
}

.gm-cell.gm-filled:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

.gm-block-caption {
  font-size: 0.74rem;
  color: var(--ink-faint);
  text-align: center;
  margin: 0.45rem 0 0;
  letter-spacing: 0.06em;
}

/* 等待区卡片 */
.gm-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.gm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.3s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  line-height: 1.6;
}

.gm-card:hover { border-color: var(--accent); }

.gm-card.gm-selected {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(60, 40, 10, 0.12);
  background: var(--accent-wash);
}

.gm-card .gm-card-name { font-size: 0.86rem; font-weight: 700; }

.gm-card .gm-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.gm-card .gm-card-fee { color: var(--accent-ink); font-weight: 700; }

.gm-card.gm-placed-chip { border-style: solid; border-color: var(--good); }

/* 容量不足时柔和抖动 */
@keyframes gm-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.gm-shake { animation: gm-shake 0.35s ease 1; }

.gm-tip {
  min-height: 1.6em;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

.gm-tip.gm-warn { color: var(--bad); }

/* 揭晓结果 */
.gm-reveal {
  margin-top: 1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 1rem 1.2rem;
  font-size: 0.86rem;
  line-height: 1.95;
  animation: gm-fadein 0.5s ease;
}

.gm-reveal.gm-best { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, transparent); }

.gm-reveal .gm-reveal-head { font-weight: 700; margin: 0 0 0.3rem; }
.gm-reveal.gm-best .gm-reveal-head { color: var(--good); }

.gm-reveal ul { margin: 0.3rem 0 0.5rem; padding-left: 1.3rem; color: var(--ink-soft); }
.gm-reveal li { margin-bottom: 0.15rem; }

.gm-good-text { color: var(--good); font-weight: 700; }
.gm-bad-text { color: var(--bad); }

.gm-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin: 1.2rem 0 0.4rem;
}

/* ---------- 响应式 ---------- */

@media (max-width: 640px) {
  .gm-box { padding: 1.2rem 1rem 1.4rem; }
  .gm-panel { padding: 0.95rem 0.9rem; }
  .gm-tm-cols { grid-template-columns: 1fr; }
  .gm-bread-grid { font-size: 0.92rem; }
  .gm-cell { height: 2.2rem; font-size: 0.8rem; border-radius: 4px; }
  .gm-block-grid { gap: 2px; }
  .gm-pool { grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); }
}

/* ---------- 减少动态效果 ---------- */

@media (prefers-reduced-motion: reduce) {
  .gm-bread,
  .gm-card,
  .gm-cell,
  .gm-block,
  .gm-mine-btn,
  .gm-btn,
  .gm-mined-fill { transition: none; }

  .gm-flash,
  .gm-shake { animation: none; }

  .gm-success,
  .gm-reveal { animation: none; }
}

/* ============================================================
   追加组件：八字黄历 · 实时价格挂件 · 第一笔转账（沙盒钱包）
   ============================================================ */

/* ---------- 五行配色 ---------- */
:root {
  --el-wood:  #4d7c57;
  --el-fire:  #b5483a;
  --el-earth: #9a6b2f;
  --el-metal: #a8861d;
  --el-water: #3f6e9e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --el-wood:  #82b08c;
    --el-fire:  #d08376;
    --el-earth: #c79a55;
    --el-metal: #d4b35a;
    --el-water: #7da7d4;
  }
}

/* ---------- 八字黄历 ---------- */
.gm-alm-date {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  outline: none;
}

.gm-alm-date:focus { border-color: var(--accent); }

.gm-alm-head {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.4rem 0 1rem;
}

.gm-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 0.4rem 0 1.1rem;
}

.gm-pillar { text-align: center; }

.gm-pillar-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}

.gm-char {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.5vw, 1.95rem);
  font-weight: 700;
  line-height: 1.5;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin: 0 auto 0.4rem;
  max-width: 4.4rem;
  padding: 0.3rem 0 0.35rem;
}

.gm-char small {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  opacity: 0.85;
  margin-top: 0.1rem;
}

.gm-el-wood  { color: var(--el-wood);  background: color-mix(in srgb, var(--el-wood) 12%, transparent);  border-color: color-mix(in srgb, var(--el-wood) 40%, transparent); }
.gm-el-fire  { color: var(--el-fire);  background: color-mix(in srgb, var(--el-fire) 12%, transparent);  border-color: color-mix(in srgb, var(--el-fire) 40%, transparent); }
.gm-el-earth { color: var(--el-earth); background: color-mix(in srgb, var(--el-earth) 12%, transparent); border-color: color-mix(in srgb, var(--el-earth) 40%, transparent); }
.gm-el-metal { color: var(--el-metal); background: color-mix(in srgb, var(--el-metal) 14%, transparent); border-color: color-mix(in srgb, var(--el-metal) 42%, transparent); }
.gm-el-water { color: var(--el-water); background: color-mix(in srgb, var(--el-water) 12%, transparent); border-color: color-mix(in srgb, var(--el-water) 40%, transparent); }

.gm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.9rem;
}

.gm-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  border-width: 0;
  padding: 0;
}

.gm-meter {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 0.9rem 0 0.4rem;
}

.gm-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--el-metal), var(--el-water));
  transition: width 0.6s var(--ease-breath);
}

/* ---------- 实时价格挂件 ---------- */
.ticker-slot {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 35;
  margin: 0;
}

@media (max-width: 480px) {
  .ticker-slot { right: 8px; bottom: 8px; }
  .gm-ticker { font-size: 0.64rem; padding: 0.38rem 0.6rem; gap: 0.25rem 0.5rem; }
  .gm-tk-chg { display: none; }
}

.gm-ticker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line-faint);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  line-height: 1.7;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: border-color var(--dur) var(--ease-breath), color var(--dur) var(--ease-breath);
}

.gm-ticker:hover { border-color: var(--accent); color: var(--ink); }

.gm-ticker .gm-tk-btc { color: var(--accent-ink); font-weight: 700; }
.gm-ticker .gm-tk-up { color: var(--good); }
.gm-ticker .gm-tk-down { color: var(--bad); }
.gm-ticker .gm-tk-dim { color: var(--ink-faint); }

/* ---------- 第一笔转账（沙盒钱包） ---------- */
.gm-wallet {
  max-width: 26rem;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.3rem 1.3rem 1.5rem;
  font-family: var(--sans);
  box-shadow: 0 10px 34px rgba(60, 40, 10, 0.06);
}

.gm-sandbox-badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  margin-bottom: 0.9rem;
}

.gm-steps {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.gm-step-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.3s;
}

.gm-step-dot.on { background: var(--accent); }

.gm-step-title {
  font-family: var(--serif);
  font-size: 1.0rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.8rem;
}

.gm-addr-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font-size: 0.8rem;
  margin-bottom: 0.9rem;
  line-height: 1.8;
}

.gm-addr-mono {
  font-family: var(--mono);
  font-size: 0.68rem;
  word-break: break-all;
  color: var(--ink-soft);
  line-height: 1.8;
}

.gm-addr-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  outline: none;
}

.gm-addr-input:focus { border-color: var(--accent); }
.gm-addr-input.bad { border-color: var(--bad); }
.gm-addr-input.ok { border-color: var(--good); }

.gm-field-msg { font-size: 0.76rem; line-height: 1.85; margin: 0.5rem 0 0; }
.gm-field-msg.bad { color: var(--bad); }
.gm-field-msg.ok { color: var(--good); }
.gm-field-msg.dim { color: var(--ink-faint); }

.gm-fee-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.gm-fee-opt {
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.7;
  text-align: center;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.3rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  touch-action: manipulation;
}

.gm-fee-opt.on { border-color: var(--accent); background: var(--accent-wash); }
.gm-fee-opt .big { font-weight: 700; font-size: 0.85rem; display: block; }
.gm-fee-opt .dim { color: var(--ink-faint); font-size: 0.67rem; display: block; }

.gm-summary {
  font-size: 0.84rem;
  line-height: 2.1;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 0.7rem 0.1rem;
  margin-bottom: 1.1rem;
}

.gm-summary .row { display: flex; justify-content: space-between; gap: 1rem; }
.gm-summary .row .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.gm-hold {
  position: relative;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: 10px;
  padding: 0.95rem 1rem;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.gm-hold .gm-hold-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--accent);
  opacity: 0.88;
}

.gm-hold.holding .gm-hold-fill { width: 100%; transition: width 1.1s linear; }
.gm-hold .gm-hold-label { position: relative; z-index: 1; }

.gm-txflow { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.82rem; }

.gm-txflow li {
  padding: 0.5rem 0 0.5rem 1.6rem;
  position: relative;
  line-height: 1.9;
  border-bottom: 1px dashed var(--line);
  animation: gm-reveal-in 0.45s ease;
}

.gm-txflow li::before {
  content: "✓";
  position: absolute;
  left: 0.1rem;
  color: var(--good);
  font-weight: 700;
}

@keyframes gm-reveal-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.gm-confs { display: flex; gap: 0.45rem; margin: 0.9rem 0 0.3rem; }

.gm-conf {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition: background 0.3s, border-color 0.3s;
}

.gm-conf.on { background: var(--good); border-color: var(--good); }

.gm-wallet-row { display: flex; gap: 0.6rem; margin-top: 1rem; }
.gm-wallet-row .gm-btn { flex: 1; text-align: center; }

@media (max-width: 600px) {
  .gm-fee-opts { grid-template-columns: 1fr; }
  .gm-wallet { padding: 1.1rem 1rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-meter-fill, .gm-step-dot, .gm-char, .gm-fee-opt { transition: none; }
  .gm-hold.holding .gm-hold-fill { transition: none; }
  .gm-txflow li { animation: none; }
}

/* ============================================================
   活的区块链（首页 hero）：打包→封存→前进，挖矿的具像化
   ============================================================ */
.gm-chain-root { position: relative; margin: 2.6rem auto 0; max-width: 480px; }

.gm-chain { display: flex; align-items: center; justify-content: center; }

.gm-chain-block {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1.5px solid var(--ink-faint);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 7px;
  align-content: center;
  justify-items: center;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.gm-chain-block:hover,
.gm-chain-block:focus-visible { border-color: var(--accent); box-shadow: 0 0 12px rgba(194, 65, 12, 0.22); }

/* 打包中的区块：暖橙呼吸，像窑火 */
.gm-chain-block.mining {
  border-style: dashed;
  border-color: var(--accent);
  animation: chain-breathe 2.4s ease-in-out infinite;
}

@keyframes chain-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
  50% { box-shadow: 0 0 16px 0 rgba(194, 65, 12, 0.28); }
}

.gm-chain-block.just-sealed { animation: chain-seal 0.8s ease; }

@keyframes chain-seal {
  0% { border-color: var(--accent); box-shadow: 0 0 18px rgba(194, 65, 12, 0.45); }
  100% { box-shadow: 0 0 0 rgba(194, 65, 12, 0); }
}

.gm-chain-link { flex: none; width: 20px; height: 1.5px; background: var(--celadon); }

.gm-chain-link.dashed {
  background: repeating-linear-gradient(90deg, var(--celadon) 0 4px, transparent 4px 8px);
  opacity: 0.7;
}

.gm-tx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.85; }
.gm-tx-dot.alt { background: var(--celadon); }

.gm-tx-dot.pop { animation: dot-pop 0.45s var(--ease-breath); }

@keyframes dot-pop {
  from { transform: scale(0); }
  60% { transform: scale(1.5); }
  to { transform: scale(1); }
}

/* 内存池：一撮轻轻漂浮的待办转账 */
.gm-mempool {
  flex: none;
  margin-left: 10px;
  width: 36px;
  min-height: 46px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: center;
  justify-content: center;
  padding: 0;
}

.gm-mempool .gm-tx-dot { opacity: 0.5; animation: mp-float 3s ease-in-out infinite alternate; }
.gm-mempool .gm-tx-dot:nth-child(2n) { animation-delay: 0.7s; }
.gm-mempool .gm-tx-dot:nth-child(3n) { animation-delay: 1.3s; }

@keyframes mp-float {
  from { transform: translateY(-2px); }
  to { transform: translateY(2px); }
}

.gm-chain-tip {
  position: absolute;
  z-index: 6;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.8;
  text-align: left;
  box-shadow: 0 8px 24px rgba(60, 40, 10, 0.12);
  width: max-content;
  max-width: 250px;
  animation: gm-reveal-in 0.25s ease;
}

.gm-chain-tip p { margin: 0; color: var(--ink-soft); }
.gm-chain-tip-head { color: var(--ink); font-weight: 700; }
.gm-chain-tip-foot { color: var(--ink-faint); font-size: 0.66rem; margin-top: 0.2rem; }

@media (max-width: 420px) {
  .gm-chain-block { width: 38px; height: 38px; padding: 5px; }
  .gm-chain-link { width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-chain-block.mining, .gm-mempool .gm-tx-dot, .gm-tx-dot.pop, .gm-chain-block.just-sealed { animation: none; }
}

/* ============================================================
   ₿ 铸币徽记：凡出现聪/比特币金额处，一枚有凹凸感的小金币
   （让人真切知道：此刻经手的是比特币）
   ============================================================ */
.gm-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.12em;
  height: 1.12em;
  margin-right: 0.24em;
  border-radius: 50%;
  border: 1px solid rgba(58, 30, 6, 0.55);
  background: linear-gradient(165deg, #ecbf72 0%, #c9913f 48%, #8a541f 100%);
  color: #43280a;
  font-family: var(--serif);
  font-size: 0.92em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.16em;
  flex: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 240, 205, 0.8),
    inset 0 -1.5px 2px rgba(50, 25, 0, 0.5),
    0 1px 3px rgba(80, 40, 5, 0.3);
}

.gm-coin::before {
  content: "₿";
  display: block;
  font-size: 0.72em;
  text-shadow: 0 1px 0 rgba(255, 238, 198, 0.55);
}

/* ============================================================
   信任的两道难题：双花问题 + 拜占庭将军
   ============================================================ */
.gm-ds-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-size: 1.5rem;
  min-height: 2.2rem;
  margin: 0.6rem 0;
}

.gm-ds-recv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.gm-ds-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.9;
  transition: border-color 0.3s;
}

.gm-ds-card.got { border-color: var(--good); }
.gm-ds-card .state { font-weight: 700; }

.gm-ds-ledger {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 2;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.95rem;
  margin: 0.8rem 0;
}

.gm-ds-ledger .ok { color: var(--good); }
.gm-ds-ledger .no { color: var(--bad); font-weight: 700; }

/* 拜占庭沙盘 */
.gm-bz-field {
  position: relative;
  height: 250px;
  max-width: 320px;
  margin: 1.1rem auto;
}

.gm-bz-city {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.1rem;
  opacity: 0.85;
  transition: transform 0.5s, opacity 0.5s;
}

.gm-bz-city.fallen { transform: translate(-50%, -50%) scale(0.82); opacity: 0.45; }

.gm-bz-gen {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1.5px solid var(--ink-faint);
  transform: translate(-50%, -50%);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.gm-bz-gen.attack {
  background: var(--good);
  border-color: var(--good);
  box-shadow: 0 0 10px rgba(63, 111, 79, 0.5);
}

.gm-bz-gen.retreat { background: var(--bad); border-color: var(--bad); }
.gm-bz-gen.traitor { border-style: dashed; border-width: 2px; }

.gm-note.faint { color: var(--ink-faint); font-size: 0.74rem; }

/* ============================================================
   另一本账：美国国债实时钟（与创世碑同为暗色石板，对仗陈列）
   ============================================================ */
.gm-debt {
  background: #15110c;
  border: 1px solid #3a2f20;
  border-radius: 12px;
  padding: 1.7rem 1.9rem 1.5rem;
}

.gm-debt-k {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #8a7a5e;
  margin: 0 0 0.8rem;
}

.gm-debt-n {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 4.6vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #ffb056;
  text-shadow: 0 0 16px rgba(255, 176, 86, 0.35);
  margin: 0 0 0.55rem;
  word-break: break-all;
}

.gm-debt-sub {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: #c2a071;
  line-height: 1.9;
  margin: 0 0 0.85rem;
}

.gm-debt-sub .rise { color: #e06a52; font-weight: 700; font-variant-numeric: tabular-nums; }

.gm-debt-src {
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.9;
  color: #6b5d45;
  margin: 0 0 0.9rem;
}

.gm-debt-mirror {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: #cbbb9b;
  border-top: 1px dashed #3a2f20;
  padding-top: 0.85rem;
  margin: 0;
}

/* ============================================================
   BTC Yield 计算器（金库）
   ============================================================ */
.gm-yield-wrap {
  display: flex;
  gap: 2.4rem;
  justify-content: center;
  align-items: flex-end;
  margin: 1rem 0 0.4rem;
}

.gm-yield-col { text-align: center; }

.gm-yield-bar {
  position: relative;
  width: 54px;
  height: 150px;
  margin: 0 auto;
  border-bottom: 1.5px solid var(--ink-faint);
}

.gm-yield-bar .fill {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  background: var(--ink-faint);
  border-radius: 3px 3px 0 0;
  transition: height 0.5s var(--ease-breath), background 0.5s var(--ease-breath);
}

.gm-yield-lab {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
}

/* ============================================================
   序幕引导 / 三幕标头 / 重看引导 / 确认链咬合
   ============================================================ */
.gm-box { position: relative; }

.gm-primer { text-align: center; padding: 1.6rem 0.6rem 0.8rem; animation: gm-fadein 0.5s var(--ease-breath); }
.gm-primer-step { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; color: var(--ink-faint); margin: 0 0 1rem; }
.gm-primer-big { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); margin: 0 0 0.6rem; line-height: 1.8; }
.gm-primer-sm { font-family: var(--serif); font-size: 0.92rem; color: var(--ink-soft); line-height: 2; margin: 0 0 1.4rem; }

@keyframes gm-fadein { from { opacity: 0; } to { opacity: 1; } }

.gm-replay {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--line-faint);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-breath), border-color var(--dur-fast) var(--ease-breath);
}
.gm-replay:hover { color: var(--accent-ink); border-color: var(--accent); }

.gm-act {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--accent-ink);
  border-bottom: 1px solid var(--line-faint);
  padding-bottom: 0.45rem;
  margin: 0 0 0.9rem;
}

/* 确认链：六块之间的咬合杆 */
.gm-confs { align-items: center; }
.gm-conf { position: relative; }
.gm-conf + .gm-conf::before {
  content: "";
  position: absolute;
  left: -0.45rem;
  top: 50%;
  width: 0.45rem;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--celadon);
}

/* ============================================================
   孤勇者矿工 · 能量对照表 与 点击耗散粒
   ============================================================ */
.gm-energy {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.95rem;
  margin-top: 1rem;
  font-family: var(--sans);
}

.gm-energy-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin: 0.15rem 0; font-size: 0.78rem; }
.gm-energy-k { color: var(--ink-faint); letter-spacing: 0.08em; flex: none; }
.gm-energy-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-ink); }
.gm-energy-v.net { color: var(--bad); }
.gm-energy-n { color: var(--ink-faint); font-size: 0.7rem; }

.gm-zap {
  position: absolute;
  right: 8%;
  top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--accent-ink);
  pointer-events: none;
  animation: gm-zap-up 0.8s var(--ease-breath) forwards;
}

@keyframes gm-zap-up {
  from { opacity: 0.9; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-26px); }
}

@media (prefers-reduced-motion: reduce) { .gm-zap { display: none; } }

/* ============================================================
   釉光层延伸：游戏器皿同享宝光（与 style.css 判词一致）
   ============================================================ */
.gm-box {
  background-image: linear-gradient(168deg, rgba(255, 253, 247, 0.4), rgba(255, 253, 247, 0) 32%);
}

@media (prefers-color-scheme: dark) {
  .gm-box {
    background-image: linear-gradient(168deg, rgba(240, 200, 140, 0.05), rgba(240, 200, 140, 0) 36%);
    border-top-color: #413a2b;
  }
}

/* ============================================================
   支付窗 · 闪电演习柜台（lightning-demo）
   ============================================================ */
.gm-pay { font-family: var(--sans); }

.gm-pay-tickets { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.4rem 0 1rem; }

.gm-pay-t {
  flex: 1 1 150px;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  background-image: linear-gradient(168deg, rgba(255, 253, 247, 0.45), rgba(255, 253, 247, 0) 34%);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: box-shadow 0.35s var(--ease-breath), border-color 0.35s var(--ease-breath), opacity 0.35s var(--ease-breath);
}

.gm-pay-t:hover { box-shadow: var(--shadow-lift); }
.gm-pay-t.sel { border-color: var(--celadon); box-shadow: var(--shadow-warm); }
.gm-pay-t .n { display: block; font-family: var(--serif); font-weight: 700; font-size: 0.98rem; margin-bottom: 0.25rem; }
.gm-pay-t .p { display: block; font-size: 0.82rem; color: var(--accent-ink); letter-spacing: 0.04em; }
.gm-pay-t .m { display: block; font-size: 0.76rem; color: var(--ink-faint); margin-top: 0.3rem; line-height: 1.7; }

.gm-pay-stage { border-top: 1px dashed var(--line); padding-top: 1rem; }

.gm-pay-inv {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 1rem 1.1rem;
  margin: 0 0 0.9rem;
}

.gm-pay-inv .h { font-size: 0.74rem; letter-spacing: 0.12em; color: var(--ink-faint); margin: 0 0 0.5rem; }
.gm-pay-inv .amt { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.2rem; }
.gm-pay-inv .memo { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
.gm-pay-inv .raw {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  color: var(--ink-faint);
  word-break: break-all;
  background: var(--paper-2);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  line-height: 1.8;
}

.gm-pay-route { display: flex; align-items: center; gap: 0.45rem; margin: 0.9rem 0; font-size: 0.78rem; color: var(--ink-faint); flex-wrap: wrap; }
.gm-pay-hop { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); background: transparent; transition: background 0.4s var(--ease-breath), border-color 0.4s var(--ease-breath); }
.gm-pay-hop.lit { background: var(--celadon); border-color: var(--celadon); }
.gm-pay-link { flex: 1 1 18px; height: 1px; background: var(--line); min-width: 14px; }

.gm-pay-done { color: var(--accent-ink); font-weight: 600; font-size: 0.9rem; }

.gm-ticket {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  margin: 0.9rem 0 0.4rem;
  background: var(--card);
  background-image: linear-gradient(168deg, rgba(255, 253, 247, 0.5), rgba(255, 253, 247, 0) 36%);
  position: relative;
  overflow: hidden;
}

.gm-ticket::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, #c9913f 45%, transparent);
  border-radius: 8px;
  pointer-events: none;
}

.gm-ticket .tk-k { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ink-faint); margin: 0 0 0.4rem; }
.gm-ticket .tk-n { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; margin: 0 0 0.3rem; }
.gm-ticket .tk-m { font-family: var(--serif); font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.8rem; }
.gm-ticket .tk-s { font-family: var(--mono, ui-monospace, monospace); font-size: 0.76rem; color: var(--accent-ink); letter-spacing: 0.08em; }
.gm-ticket .tk-d { font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.5rem; }
.gm-ticket .tk-w {
  position: absolute;
  right: 0.9rem;
  top: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.15rem 0.4rem 0.15rem 0.55rem;
  transform: rotate(6deg);
  opacity: 0.8;
}

.gm-pay-note { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.9; margin: 0.7rem 0 0; }

@media (prefers-color-scheme: dark) {
  .gm-pay-t, .gm-pay-inv, .gm-ticket {
    background-image: linear-gradient(168deg, rgba(240, 200, 140, 0.055), rgba(240, 200, 140, 0) 38%);
    border-top-color: #413a2b;
  }
}

/* ============================================================
   2026-07 大改版 · 八件套新组件样式
   ============================================================ */

/* —— 内联乐器变体：嵌在正文里的"仪器"，比完整游戏更轻 —— */
.gm-box.gm-inline { padding: 1.3rem 1.4rem 1.5rem; }

/* —— 通用滑杆行 —— */
.gm-ctl { display: flex; align-items: center; gap: 0.8rem; margin: 0.55rem 0; }
.gm-ctl-lab { flex: none; width: 5.2em; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); }
.gm-ctl input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.gm-ctl-val { flex: none; min-width: 4.2em; text-align: right; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* —— 复利侵蚀 —— */
.gm-cd-head, .gm-vl-head, .gm-rl-head, .gm-en-head, .gm-sc-head { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); margin: 0 0 0.9rem; }
.gm-cd-big { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--accent-ink); text-align: center; margin: 1rem 0 0.2rem; font-variant-numeric: tabular-nums; }
.gm-cd-note { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); text-align: center; line-height: 1.8; margin: 0 0 0.8rem; }
.gm-cd-chart { display: block; width: 100%; height: auto; }
.gm-cd-axis { stroke: var(--line); stroke-width: 1; fill: none; }
.gm-cd-dash { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.gm-cd-line { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.gm-cd-dot { fill: var(--accent-ink); }
.gm-cd-lbl { font-family: var(--sans); font-size: 10px; fill: var(--ink-faint); }

/* —— 价值的语言 —— */
.gm-vl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.gm-vl-panel { background: var(--paper-2); border: 1px solid var(--line-faint); border-radius: 10px; padding: 0.9rem 1rem 1rem; }
.gm-vl-t { font-family: var(--sans); font-size: 0.8rem; color: var(--ink); margin: 0 0 0.7rem; line-height: 1.7; }
.gm-vl-row { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.gm-vl-opt.sel { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.gm-vl-out { font-family: var(--sans); font-size: 0.8rem; line-height: 1.8; color: var(--ink-faint); margin: 0; min-height: 3.2em; }
.gm-vl-out.ok { color: var(--good); }
.gm-vl-out.no { color: var(--bad); }
.gm-vl-note { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); text-align: center; margin: 1rem 0 0; letter-spacing: 0.03em; }
@media (max-width: 620px) { .gm-vl-wrap { grid-template-columns: 1fr; } }

/* —— 两把尺子 —— */
.gm-rl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.6rem; }
.gm-rl-panel { background: var(--paper-2); border: 1px solid var(--line-faint); border-radius: 10px; padding: 0.8rem 0.9rem; }
.gm-rl-t { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 0.4rem; letter-spacing: 0.05em; }
.gm-rl-svg { display: block; width: 100%; height: auto; }
.gm-rl-sofa { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
.gm-rl-bar { stroke: var(--accent-ink); stroke-width: 1.6; }
.gm-rl-tick { stroke: var(--accent-ink); stroke-width: 1.1; }
.gm-rl-num { font-family: var(--mono); font-size: 9px; fill: var(--ink-faint); }
.gm-rl-read { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); margin: 0.4rem 0 0; line-height: 1.7; min-height: 2.4em; }
.gm-rl-payoff { display: none; margin-top: 1.1rem; }
.gm-rl-payoff.show { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gm-rl-payoff.show { animation: gm-rl-in 0.5s var(--ease-breath); }
}
@keyframes gm-rl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gm-rl-rrow { display: grid; grid-template-columns: 4.6em 1fr; grid-template-rows: auto auto; column-gap: 0.8rem; align-items: center; margin: 0.7rem 0; }
.gm-rl-rname { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink); grid-row: span 2; }
.gm-rl-rbar { display: block; height: 8px; border-radius: 4px; background: var(--line-faint); overflow: hidden; position: relative; }
.gm-rl-rfill { position: absolute; inset: 0; border-radius: 4px; }
.gm-rl-fiat .gm-rl-rfill { background: var(--bad); width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gm-rl-payoff.show .gm-rl-fiat .gm-rl-rfill { animation: gm-rl-shrink 2.6s var(--ease-breath) 0.4s forwards; }
}
@keyframes gm-rl-shrink { from { width: 100%; } to { width: 34%; } }
.gm-rl-gold .gm-rl-rfill { background: #c9913f; width: 96%; }
.gm-rl-btc .gm-rl-rfill { background: var(--accent); width: 100%; }
.gm-rl-rnote { font-family: var(--sans); font-size: 0.74rem; color: var(--ink-faint); line-height: 1.6; margin-top: 0.25rem; }
@media (max-width: 620px) { .gm-rl-wrap { grid-template-columns: 1fr; } }

/* —— MBS 切片工坊 —— */
.gm-mbs-note { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); line-height: 1.8; margin: 0.3rem 0 0.8rem; }
.gm-mbs-bucket { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 340px; margin: 0.6rem 0 1rem; transition: opacity 0.5s var(--ease-breath); }
.gm-mbs-chip { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--celadon); opacity: 0.75; }
.gm-mbs-chip.risky { background: var(--bad); }
.gm-mbs-bucket.gone, .gm-btn.gone { opacity: 0; pointer-events: none; height: 0; margin: 0; overflow: hidden; }
.gm-mbs-tr { display: grid; grid-template-columns: 8.5em 1fr 5em; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; margin: 0.65rem 0; }
.gm-mbs-tname { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.gm-mbs-bar { position: relative; display: block; height: 16px; border-radius: 4px; overflow: hidden; background: var(--celadon); opacity: 0.9; }
.gm-mbs-aaa .gm-mbs-bar { background: var(--good); }
.gm-mbs-junk .gm-mbs-bar { background: #c9913f; }
.gm-mbs-fill { position: absolute; top: 0; right: 0; bottom: 0; width: 0; background: var(--bad); transition: width 0.4s var(--ease-breath); }
.gm-mbs-state { font-family: var(--sans); font-size: 0.74rem; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gm-mbs-tr.hurt .gm-mbs-state { color: var(--bad); }
.gm-mbs-tr.dead .gm-mbs-state { color: var(--bad); font-weight: 700; }
.gm-mbs-tnote { grid-column: 2 / 4; font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.15rem; }
.gm-mbs-stamp {
  display: inline-block; margin: 0.5rem 0 0.2rem; padding: 0.2rem 0.9rem;
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.22em; color: #9c6b28;
  border: 2px solid #c9913f; border-radius: 6px; transform: rotate(-6deg) scale(1.6); opacity: 0;
  transition: transform 0.45s var(--ease-breath), opacity 0.45s var(--ease-breath);
}
.gm-mbs-stamp.on { opacity: 0.9; transform: rotate(-6deg) scale(1); }
.gm-mbs-verdict { font-family: var(--sans); font-size: 0.82rem; line-height: 1.85; color: var(--ink); background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 0.6rem 0.9rem; margin: 0.7rem 0 0; min-height: 3.4em; }

/* —— 能量秤 —— */
.gm-en-big { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; text-align: center; margin: 0.6rem 0 0; color: var(--accent-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.gm-en-unit { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); text-align: center; margin: 0.1rem 0 1rem; letter-spacing: 0.1em; }
.gm-en-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 0.8rem; }
.gm-en-opt.sel { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.gm-en-out { font-family: var(--sans); font-size: 0.86rem; line-height: 1.9; color: var(--ink); text-align: center; min-height: 3.6em; margin: 0 auto 0.5rem; max-width: 34em; }
.gm-en-foot, .gm-lk-foot, .gm-sc-foot { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint); line-height: 1.7; margin: 0.9rem 0 0; }

/* —— 海关锁 —— */
.gm-lk-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.9rem; }
.gm-lk-panel { background: var(--paper-2); border: 1px solid var(--line-faint); border-radius: 10px; padding: 0.9rem 1rem 1rem; }
.gm-lk-t { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink); margin: 0 0 0.7rem; }
.gm-lk-dials { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.gm-lk-dial { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2.6em; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-family: var(--mono); font-size: 1.1rem; color: var(--ink); transition: border-color 0.3s, box-shadow 0.3s; }
.gm-lk-dials.open .gm-lk-dial { border-color: var(--accent); box-shadow: 0 0 8px rgba(214, 166, 76, 0.35); color: var(--accent-ink); }
.gm-lk-stat { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-soft); line-height: 1.7; margin: 0.3rem 0 0.6rem; font-variant-numeric: tabular-nums; }
.gm-lk-field { display: block; width: 100%; height: auto; background: #201c15; border-radius: 8px; margin-bottom: 0.5rem; }
.gm-lk-star { fill: #e3b864; opacity: 0.7; }
.gm-lk-out { font-family: var(--sans); font-size: 0.78rem; line-height: 1.8; color: var(--ink-soft); margin: 0.6rem 0 0; font-variant-numeric: tabular-nums; }
.gm-lk-out b { color: var(--accent-ink); }
@media (max-width: 620px) { .gm-lk-wrap { grid-template-columns: 1fr; } }

/* —— 稀缺性图表 —— */
.gm-sc-seg { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.gm-sc-tab.sel { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.gm-sc-chart { display: block; width: 100%; height: auto; }
.gm-sc-grid { stroke: var(--line-faint); stroke-width: 1; }
.gm-sc-glbl { font-family: var(--sans); font-size: 10px; fill: var(--ink-faint); }
.gm-sc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm-sc-dot { stroke: none; }
path.gm-sc-usd { stroke: var(--ink-faint); }   circle.gm-sc-usd { fill: var(--ink-faint); }
path.gm-sc-house { stroke: var(--celadon); }   circle.gm-sc-house { fill: var(--celadon); }
path.gm-sc-btc { stroke: #c9913f; }            circle.gm-sc-btc { fill: #c9913f; }
path.gm-sc-hbtc { stroke: var(--accent); }     circle.gm-sc-hbtc { fill: var(--accent); }
text.gm-sc-lbl { font-family: var(--sans); font-size: 10.5px; font-weight: 600; }
text.gm-sc-usd { fill: var(--ink-faint); } text.gm-sc-house { fill: var(--celadon); }
text.gm-sc-btc { fill: #9c6b28; } text.gm-sc-hbtc { fill: var(--accent-ink); }
.gm-sc-cap { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); line-height: 1.8; margin: 0.5rem 0 0; }

/* —— 迷你区块浏览器 —— */
.gm-xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.gm-xp-t { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: var(--ink); margin: 0; }
.gm-xp-badge { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0.18rem 0.6rem; }
.gm-xp-badge.live { color: var(--good); border-color: var(--good); }
.gm-xp-strip { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 0.2rem 0 0.6rem; }
.gm-xp-chain { flex: none; align-self: center; width: 22px; height: 2px; background: var(--accent-ink); opacity: 0.55; position: relative; }
.gm-xp-chain::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 2px solid var(--accent-ink); border-radius: 50%; transform: translate(-50%, -50%); background: var(--card); opacity: 0.9; }
.gm-xp-card { flex: none; position: relative; width: 9.6em; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.75rem 0.55rem; }
.gm-xp-card.new { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-wash), var(--shadow-warm); }
@media (prefers-reduced-motion: no-preference) {
  .gm-xp-card.new { animation: gm-xp-arrive 0.7s var(--ease-breath); }
}
@keyframes gm-xp-arrive { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.gm-xp-h { font-family: var(--mono); font-size: 0.86rem; font-weight: 700; color: var(--accent-ink); margin: 0 0 0.25rem; }
.gm-xp-row2 { font-family: var(--sans); font-size: 0.7rem; color: var(--ink-soft); margin: 0 0 0.15rem; font-variant-numeric: tabular-nums; }
.gm-xp-hash { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-faint); margin: 0.25rem 0 0; overflow: hidden; text-overflow: ellipsis; }
.gm-xp-now { position: absolute; top: -0.6em; right: 0.6em; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--accent-ink); background: var(--card); border: 1px solid var(--accent); border-radius: 999px; padding: 0.05rem 0.45rem; }
.gm-xp-note { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-soft); line-height: 1.8; margin: 0.4rem 0 0.4rem; }
.gm-xp-link { margin: 0.3rem 0 0; font-family: var(--sans); font-size: 0.8rem; }
.gm-xp-link a { color: var(--accent-ink); }