/* ============================================================
   庭院 · 各视图
   ============================================================ */

/* ── 首页 · 世界状态 ────────────────────────────────────── */
.world { margin-bottom: var(--s6); }
.world__date {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  color: var(--moon-100);
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.world__line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--moon-300);
  letter-spacing: 0.08em;
}
.world__line b { color: var(--moon-200); font-weight: 400; }
.world__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--moon-400); opacity: .7; }

/* 月痕：一个月相刻度，安静地表示"人生走到哪儿了" */
.trace {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: var(--s4);
}
.trace__tick {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}
.trace__tick.is-past { background: rgba(157,146,216,.42); box-shadow: 0 0 9px -2px var(--c-moontrace); }
.trace__tick.is-now  { background: var(--c-glimmer); box-shadow: 0 0 12px -1px var(--c-glimmer); }
.trace__cap {
  font-size: var(--t-xs);
  color: var(--moon-400);
  letter-spacing: 0.14em;
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
}

/* ── 快速记下 ────────────────────────────────────────────── */
.quick { margin-top: var(--s4); }
.picks { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pick {
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--s-1);
  font-size: var(--t-sm);
  color: var(--moon-300);
  transition: all var(--e2) var(--ease);
}
.pick:hover { border-color: var(--line-2); color: var(--moon-100); }
.pick.is-on {
  border-color: rgba(226,189,124,.36);
  background: var(--c-glimmer-wash);
  color: var(--c-glimmer);
}

/* ── 世界 · 空间网格 ─────────────────────────────────────── */
.spaces { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 380px) { .spaces { grid-template-columns: 1fr; } }

.space {
  position: relative;
  text-align: left;
  padding: var(--s4) var(--s3) var(--s3);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--space-wash, transparent), transparent 70%), var(--s-1);
  overflow: hidden;
  transition: border-color var(--e2) var(--ease), transform var(--e2) var(--ease), background var(--e2) var(--ease);
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.space:hover { border-color: var(--line-2); transform: translateY(-2px); }
.space__glyph { font-size: 19px; line-height: 1; filter: saturate(0.85); }
.space__name {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  color: var(--moon-100);
  letter-spacing: 0.10em;
  margin-top: var(--s3);
}
.space__sub { font-size: var(--t-xs); color: var(--moon-400); margin-top: 3px; line-height: 1.6; }
.space__state {
  margin-top: var(--s3);
  font-size: var(--t-xs);
  color: var(--moon-400);
  letter-spacing: 0.10em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.space__state i { width: 4px; height: 4px; border-radius: 50%; background: var(--dot, var(--moon-400)); box-shadow: 0 0 8px -1px var(--dot, transparent); }
.space--unlit { opacity: 0.56; }
.space--unlit:hover { opacity: 0.82; }

/* ── 空间详情 ────────────────────────────────────────────── */
.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--moon-400);
  margin-bottom: var(--s4);
  letter-spacing: 0.10em;
}
.detail__back:hover { color: var(--moon-100); }
.detail__glyph { font-size: 30px; line-height: 1; }
.detail__name {
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  color: var(--moon-100);
  letter-spacing: 0.14em;
  margin-top: var(--s3);
}
.detail__sub { font-size: var(--t-sm); color: var(--moon-300); margin-top: 6px; letter-spacing: 0.06em; }
.detail__blurb {
  margin-top: var(--s5);
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: 2;
  color: var(--moon-200);
  letter-spacing: 0.04em;
}
.detail__holds { margin-top: var(--s5); display: flex; flex-direction: column; gap: 1px; }
.detail__holds li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--moon-300);
}
.detail__holds li:last-child { border-bottom: 0; }
.detail__holds li::before { content: "·"; color: var(--moon-400); }

/* ── 档案 · 成长枝 ───────────────────────────────────────── */
.branches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.branch {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--s-1);
  font-size: var(--t-sm);
  color: var(--moon-200);
}
.branch b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--dot, var(--moon-100)); }
.branch i { width: 4px; height: 4px; border-radius: 50%; background: var(--dot, var(--moon-400)); align-self: center; }
.branch.is-zero { opacity: 0.42; }

/* ── 账本 ────────────────────────────────────────────────── */
.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__why { color: var(--moon-300); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger__amt { font-variant-numeric: tabular-nums; flex: none; }
.ledger__amt.is-in { color: var(--c-glimmer); }
.ledger__amt.is-out { color: var(--c-rose); }

/* ── 我 · 色板 ───────────────────────────────────────────── */
.palette { display: flex; flex-direction: column; gap: 1px; }
.palette__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.palette__row:last-child { border-bottom: 0; }
.palette__dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex: none;
  background: var(--dot);
  box-shadow: 0 0 12px -2px var(--dot);
}
.palette__name { color: var(--moon-100); width: 62px; flex: none; letter-spacing: 0.08em; }
.palette__use { color: var(--moon-400); font-size: var(--t-xs); line-height: 1.6; }

/* ── 规则：散文，不编号 ─────────────────────────────────── */
.prose {
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: 2.05;
  color: var(--moon-200);
  letter-spacing: 0.03em;
}
.prose p + p { margin-top: var(--s3); }
.prose em { font-style: normal; color: var(--c-glimmer); }
.prose b { font-weight: 400; color: var(--moon-100); }

/* ── 覆盖层 / 落成礼 ─────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(4, 6, 12, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn var(--e3) var(--ease-out) both;
}
.overlay[hidden] { display: none; }

.sheet {
  width: 100%;
  max-width: 388px;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  padding: var(--s6) var(--s5);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(20, 26, 44, 0.96), rgba(9, 12, 20, 0.98));
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 1);
}
.sheet__moon { width: 54px; height: 54px; margin-bottom: var(--s4); }
.sheet__title {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  color: var(--moon-100);
  letter-spacing: 0.16em;
}
.sheet__lead {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--moon-300);
  line-height: 1.95;
}
.sheet__field { margin-top: var(--s5); }
.sheet__label {
  font-size: var(--t-xs);
  letter-spacing: 0.20em;
  color: var(--moon-400);
  margin-bottom: var(--s2);
  display: block;
}
.sheet__foot { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.sheet__toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--s-1);
  text-align: left;
  transition: border-color var(--e2) var(--ease);
}
.sheet__toggle:hover { border-color: var(--line-2); }
.sheet__toggle.is-on { border-color: rgba(226,189,124,.34); background: var(--c-glimmer-wash); }
.sheet__toggle .box {
  width: 16px; height: 16px; border-radius: 5px; flex: none; margin-top: 3px;
  border: 1px solid var(--line-2); display: grid; place-items: center;
}
.sheet__toggle.is-on .box { background: var(--c-glimmer); border-color: var(--c-glimmer); }
.sheet__toggle .box svg { width: 9px; height: 9px; stroke: var(--night-1000); opacity: 0; }
.sheet__toggle.is-on .box svg { opacity: 1; }
.sheet__toggle b { font-weight: 400; color: var(--moon-100); font-size: var(--t-sm); display: block; }
.sheet__toggle span { font-size: var(--t-xs); color: var(--moon-400); line-height: 1.7; display: block; margin-top: 2px; }

/* ── 时间轴（档案） ─────────────────────────────────────── */
.spine { position: relative; padding-left: var(--s2); }
.spine__day {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--moon-400);
  margin: var(--s5) 0 var(--s2);
}
.spine__day:first-child { margin-top: 0; }