:root {
  --ink: #211b16;
  --muted: #756a5f;
  --paper: #f5efe3;
  --paper-strong: #fffaf0;
  --cinnabar: #a7342d;
  --jade: #21736a;
  --gold: #b8862b;
  --sky: #4f8ecf;
  --leaf: #6f9f3f;
  --charcoal: #1a2221;
  --line: rgba(33, 27, 22, 0.16);
  --shadow: 0 24px 70px rgba(35, 24, 12, 0.18);

  /* ===== 设计系统 v0.1 token（SPEC_设计系统_v0.1.md）===== */
  --fs-display: 34px;
  --fs-headline: 24px;
  --fs-subtitle: 17px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --radius-card: 12px;
  --radius-chip: 999px;
  --radius-inner: 8px;
  --gap-card: 24px;
  --pad-card: 14px;
  --pad-card-lg: 16px;
  --surface-l1: rgba(255, 252, 246, .94);
  --surface-l2: rgba(250, 246, 236, .72);
  --surface-l3: transparent;
  --shadow-l1: 0 12px 28px rgba(38, 36, 32, .10);
  --element-wood: #5a8f63;
  --element-fire: #bb594d;
  --element-earth: #b48445;
  --element-metal: #9b8644;
  --element-water: #4b819c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--skin-ink, var(--ink));
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  background: var(--skin-bg-gradient, radial-gradient(circle at 18% 12%, rgba(246, 215, 150, 0.5), transparent 28%), linear-gradient(180deg, #7db9df 0%, #f5efe3 46%, #dfe7bf 100%));
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 28px;
  width: min(1280px, calc(100% - 24px));
  margin: 0 auto;
  padding: 20px 0;
}

.preview-ribbon {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid rgba(255, 250, 240, 0.34);
  border-radius: 999px;
  background: rgba(42, 82, 76, 0.92);
  color: #fff3c4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(35, 24, 12, 0.14);
}

.entry-panel {
  position: sticky;
  top: 16px;
  align-self: start;
  min-height: calc(100vh - 40px);
  padding: 18px;
  color: var(--skin-text-inverse, var(--paper-strong));
  background: var(--skin-panel-gradient, linear-gradient(180deg, rgba(42, 82, 76, 0.96), rgba(81, 46, 30, 0.96))), var(--charcoal);
  border: 1px solid var(--skin-ornament-light, rgba(255, 250, 240, 0.22));
  border-radius: 8px;
  box-shadow: 0 24px 70px var(--skin-shadow-ambient, rgba(35, 24, 12, 0.18));
  overflow: hidden;
}

.entry-panel::before {
  content: "";
  position: absolute;
  inset: 58px 0 auto;
  height: 190px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.12), transparent),
    repeating-linear-gradient(45deg, rgba(255, 250, 240, 0.08) 0 2px, transparent 2px 18px);
  pointer-events: none;
}

.entry-panel > * {
  position: relative;
}

.game-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.game-hud span {
  display: grid;
  place-items: center;
  min-height: 30px;
  color: #3a2817;
  background: linear-gradient(180deg, #fff3bc, #e0aa47);
  border: 1px solid rgba(70, 41, 15, 0.28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.brand-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: start;
}

.seal {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--paper-strong);
  background: linear-gradient(180deg, #d04a38, #8f241f);
  border: 2px solid rgba(255, 250, 240, 0.64);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 800;
}

.eyebrow {
  margin: 0 0 8px;
  color: currentColor;
  opacity: 0.68;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
}

.hero-copy {
  margin: 0;
  color: rgba(255, 250, 240, 0.74);
  font-size: 14px;
  line-height: 1.65;
}

.hero-avatar {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 170px;
  margin: 18px 0;
  padding: 18px;
  color: #fff7dd;
  background:
    radial-gradient(circle at 50% 36%, rgba(246, 215, 150, 0.48), transparent 28%),
    linear-gradient(180deg, rgba(112, 156, 86, 0.3), rgba(34, 32, 27, 0.3));
  border: 1px solid rgba(255, 250, 240, 0.22);
  border-radius: 8px;
}

.hero-avatar span {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  color: #3a2817;
  background: linear-gradient(180deg, #fff1b5, #d49b3d);
  border: 3px solid rgba(255, 250, 240, 0.72);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  font-size: 44px;
  font-weight: 900;
}

.hero-avatar strong {
  font-size: 15px;
}

h2 {
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 1.25;
}

.birth-form {
  display: grid;
  gap: 12px;
}

.birth-form label {
  display: grid;
  gap: 8px;
  color: rgba(255, 250, 240, 0.74);
  font-size: 14px;
}

.birth-form input,
.birth-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: var(--paper-strong);
  background: rgba(255, 250, 240, 0.12);
  border: 1px solid rgba(255, 250, 240, 0.26);
  border-radius: 6px;
}

.date-selects {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 6px;
}

.date-selects select {
  min-width: 0;
  padding: 0 8px;
}

/* 下拉展开的选项：深字浅底，避免白字白底看不见 */
.birth-form select option {
  color: #2a2620;
  background: #f4efe6;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 4px;
  background: rgba(255, 250, 240, 0.12);
  border: 1px solid rgba(255, 250, 240, 0.26);
  border-radius: 8px;
}

.segmented-control button {
  min-height: 38px;
  color: rgba(255, 250, 240, 0.78);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
}

.segmented-control button.active {
  color: #3a2817;
  background: linear-gradient(180deg, #fff3bc, #d49b3d);
}

.birth-form button {
  min-height: 50px;
  margin-top: 4px;
  color: var(--ink);
  background: linear-gradient(135deg, #f6d796, #d49b3d);
  border: 0;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
}

.birth-form button:disabled {
  opacity: 0.72;
  cursor: wait;
}

.chart-source-card {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px;
  color: rgba(255, 250, 240, 0.78);
  background: rgba(255, 250, 240, 0.1);
  border: 1px solid rgba(255, 250, 240, 0.22);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.chart-source-card strong {
  color: #f6d796;
}

.notice {
  margin: 22px 0 0;
  color: rgba(255, 250, 240, 0.66);
  font-size: 13px;
  line-height: 1.65;
}

.result-stage {
  min-height: calc(100vh - 64px);
}

.empty-state,
.story-stage,
.choice-panel,
.outcome-panel,
.ending-panel,
.cultivation-play,
.evidence-panel,
.save-panel,
.identity-band,
.natal-layout article,
.phase-layout,
.time-panel,
.event-card,
.linkage-panel,
.focus-panel,
.cultivation-card,
.share-card {
  border: 1px solid var(--card-edge, var(--line));
  box-shadow: 0 16px 36px rgba(35, 24, 12, 0.08);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 64px);
  padding: 32px;
  background: rgba(255, 250, 240, 0.58);
}

.empty-state p {
  max-width: 560px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.8;
  text-align: center;
}

.hidden {
  display: none;
}

.result {
  display: grid;
  gap: 16px;
}

.identity-band {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  padding: 28px;
  background: rgba(255, 250, 240, 0.72);
}

.identity-band p,
.phase-main p,
.event-card p,
.cultivation-card p,
.share-card p {
  color: var(--muted);
  line-height: 1.72;
}

.story-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  padding: 24px;
  color: var(--paper-strong);
  background:
    radial-gradient(circle at 85% 20%, rgba(246, 215, 150, 0.2), transparent 26%),
    linear-gradient(140deg, rgba(31, 67, 75, 0.96), rgba(94, 36, 31, 0.88)),
    var(--charcoal);
  border-radius: 8px;
}

.story-stage h2 {
  font-size: clamp(30px, 4vw, 48px);
}

.story-stage p {
  color: rgba(255, 250, 240, 0.74);
  font-size: 18px;
  line-height: 1.9;
}

.story-status {
  padding: 18px;
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(255, 250, 240, 0.2);
}

.story-status strong {
  display: block;
  color: #f6d796;
  font-size: 24px;
}

.story-status span {
  color: rgba(255, 250, 240, 0.66);
}

.choice-history {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.choice-history p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.choice-history strong {
  display: inline;
  margin-right: 8px;
  font-size: 13px;
}

.adjustment-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.adjustment-history span,
.adjustment-history em {
  padding: 5px 8px;
  color: rgba(255, 250, 240, 0.78);
  border: 1px solid rgba(255, 250, 240, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
}

.adjustment-history em {
  color: #f6d796;
}

.choice-panel,
.cultivation-play,
.outcome-panel,
.ending-panel,
.evidence-panel,
.save-panel {
  padding: 22px;
  background: rgba(255, 250, 240, 0.72);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.choice-card,
.cultivation-card {
  width: 100%;
  min-height: 124px;
  padding: 18px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 250, 240, 0.82);
  border: 1px solid rgba(167, 52, 45, 0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.choice-card:hover,
.cultivation-card:hover {
  transform: translateY(-2px);
  background: var(--paper-strong);
  border-color: rgba(167, 52, 45, 0.5);
}

.choice-card:disabled {
  cursor: default;
}

.choice-locked {
  opacity: 0.58;
  transform: none;
}

.choice-selected {
  opacity: 1;
  background: var(--paper-strong);
  border-color: rgba(167, 52, 45, 0.72);
}

.choice-card strong,
.cultivation-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--cinnabar);
  font-size: 18px;
}

.choice-card span {
  color: var(--muted);
  line-height: 1.6;
}

.choice-card small {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  color: rgba(167, 52, 45, 0.82);
  border-top: 1px solid rgba(167, 52, 45, 0.16);
  line-height: 1.55;
}

.choice-disabled {
  background: rgba(33, 27, 22, 0.05);
  border-style: dashed;
}

.outcome-panel,
.ending-panel {
  border-color: rgba(184, 134, 43, 0.38);
}

.outcome-panel p,
.ending-panel p,
.save-panel p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.probability-panel {
  display: grid;
  gap: 12px;
  margin: 18px 0 4px;
  padding: 16px;
  background: rgba(34, 32, 27, 0.06);
  border: 1px solid rgba(184, 134, 43, 0.28);
  border-radius: 8px;
}

.probability-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.probability-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--paper-strong);
  background: var(--charcoal);
  border-radius: 999px;
  font-size: 13px;
}

.probability-header strong {
  color: var(--ink);
  font-size: 22px;
}

.probability-header small {
  color: var(--muted);
  font-size: 13px;
}

.outcome-panel .probability-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.probability-evidence {
  display: grid;
  gap: 8px;
}

.outcome-panel .probability-evidence p {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.probability-evidence strong {
  color: var(--ink);
  font-weight: 700;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.outcome-panel button,
.ending-panel button,
.save-panel button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--paper-strong);
  background: var(--charcoal);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.ending-summary {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.ending-summary p {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid rgba(184, 134, 43, 0.46);
}

.evidence-panel {
  display: block;
}

.evidence-panel summary {
  color: var(--cinnabar);
  font-weight: 800;
  cursor: pointer;
}

.evidence-panel > section {
  margin-top: 16px;
}

.pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.pillar {
  padding: 14px;
  background: rgba(167, 52, 45, 0.08);
  border: 1px solid rgba(167, 52, 45, 0.16);
  border-radius: 6px;
}

.pillar dt {
  color: var(--muted);
  font-size: 12px;
}

.pillar dd {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 800;
}

.phase-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  padding: 24px;
  background: rgba(245, 239, 227, 0.74);
}

.natal-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.natal-layout article,
.time-panel {
  padding: 22px;
  background: rgba(255, 250, 240, 0.72);
}

.trait-list {
  display: grid;
  gap: 10px;
}

.trait-list p {
  margin: 0;
  padding-left: 12px;
  color: var(--muted);
  border-left: 3px solid rgba(167, 52, 45, 0.42);
  line-height: 1.7;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.time-grid article {
  padding: 14px;
  background: rgba(167, 52, 45, 0.08);
  border: 1px solid rgba(167, 52, 45, 0.14);
  border-radius: 6px;
}

.time-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--cinnabar);
}

.time-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.element-bars {
  display: grid;
  gap: 10px;
}

.element-row {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  gap: 10px;
  align-items: center;
}

.meter {
  height: 10px;
  overflow: hidden;
  background: rgba(33, 27, 22, 0.1);
  border-radius: 999px;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--jade), var(--gold));
}

.section-heading {
  margin: 8px 0 14px;
}

.event-lines,
.cultivation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.event-card {
  padding: 20px;
  background: rgba(255, 250, 240, 0.7);
}

.event-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--cinnabar);
  font-size: 18px;
}

.event-score {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 10px;
  color: var(--paper-strong);
  background: var(--charcoal);
  border-radius: 999px;
  font-size: 12px;
}

.linkage-panel {
  padding: 22px;
  color: var(--paper-strong);
  background:
    linear-gradient(135deg, rgba(33, 115, 106, 0.92), rgba(26, 34, 33, 0.95)),
    var(--charcoal);
}

.linkage-panel p {
  margin-bottom: 0;
  color: rgba(255, 250, 240, 0.76);
  line-height: 1.75;
}

.focus-panel {
  padding: 22px;
  background: rgba(255, 250, 240, 0.76);
}

.focus-panel p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.75;
}

.line-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.line-summary span {
  padding: 8px 10px;
  color: var(--paper-strong);
  background: var(--charcoal);
  border-radius: 999px;
  font-size: 12px;
}

.storylet-clues {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 250, 240, 0.16);
}

.storylet-clues p {
  margin: 0;
  color: #f6d796;
  font-size: 14px;
  line-height: 1.6;
}

.storylet-clues div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.storylet-clues span {
  padding: 5px 8px;
  color: rgba(255, 250, 240, 0.72);
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(255, 250, 240, 0.16);
  border-radius: 999px;
  font-size: 12px;
}

.scene-trace {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px;
  background: rgba(255, 250, 240, 0.06);
  border: 1px solid rgba(255, 250, 240, 0.14);
}

.scene-trace span,
.scene-trace small {
  color: rgba(255, 250, 240, 0.58);
  font-size: 12px;
}

.scene-trace em {
  color: #f6d796;
  font-size: 12px;
  font-style: normal;
  word-break: break-all;
}

.share-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  color: var(--paper-strong);
  background:
    linear-gradient(120deg, rgba(33, 27, 22, 0.9), rgba(94, 36, 31, 0.88)),
    var(--charcoal);
}

.share-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border: 1px solid rgba(246, 215, 150, 0.32);
}

.share-card h2,
.share-card p,
.share-tags {
  position: relative;
  z-index: 1;
}

.share-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.share-tags span {
  padding: 7px 10px;
  color: #f6d796;
  border: 1px solid rgba(246, 215, 150, 0.38);
  border-radius: 999px;
  font-size: 12px;
}

/* 命格分享卡：导出内容只使用命盘推导摘要，避免带出原始出生资料。 */
.fate-share-card-head,
.fate-share-card-actions,
.fate-share-themes,
.fate-share-preview,
.fate-share-status {
  position: relative;
  z-index: 1;
}

.fate-share-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.fate-share-card-hint {
  margin: 4px 0 0;
  color: rgba(255, 250, 240, 0.62) !important;
  font-size: 12px;
}

.fate-share-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.fate-share-card-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(246, 215, 150, 0.55);
  border-radius: 999px;
  background: #f6d796;
  color: #34291e;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.fate-share-card-actions button.ghost {
  background: transparent;
  color: #f6d796;
}

.fate-share-card-actions button:disabled {
  cursor: wait;
  opacity: .68;
}

.fate-share-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.fate-share-themes button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(246, 215, 150, .35);
  border-radius: 999px;
  background: rgba(255, 250, 240, .08);
  color: rgba(255, 250, 240, .72);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.fate-share-themes button[aria-pressed="true"] {
  border-color: #f6d796;
  background: rgba(246, 215, 150, .16);
  color: #fff7dc;
}

.fate-share-themes button:focus-visible,
.fate-share-card-actions button:focus-visible {
  outline: 2px solid #fff7dc;
  outline-offset: 2px;
}

.fate-share-preview {
  display: grid;
  justify-items: center;
  margin-top: 24px;
  min-height: 0;
}

.fate-share-preview:empty {
  display: none;
}

.fate-share-preview svg {
  display: block;
  width: min(100%, 300px);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}

.fate-share-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: rgba(255, 250, 240, 0.76) !important;
  font-size: 12px;
}

.fate-share-status[data-tone="warn"] {
  color: #f6d796 !important;
}

.fate-share-stage {
  margin-top: 18px;
  padding: 20px;
}

.fate-share-stage-title {
  margin: 18px 0 4px;
  color: #fffaf0;
  font-size: 20px;
}

.fate-share-stage-copy {
  margin: 0;
  color: rgba(255, 250, 240, .68) !important;
  font-size: 13px;
}

.fate-share-stage #share-title {
  margin: 18px 0 0;
  color: #fffaf0;
  font-size: 18px;
}

@media (max-width: 520px) {
  .fate-share-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .fate-share-card-actions {
    justify-content: flex-start;
  }
}

body[data-mode="cyber"] {
  --paper: #eef3ef;
  --paper-strong: #fafffb;
  --cinnabar: #176b87;
  --jade: #00a878;
  --gold: #d6a12f;
  --charcoal: #13201f;
}

body[data-mode="light"] {
  --paper: #fff7e9;
  --paper-strong: #fffdf7;
  --cinnabar: #c24c35;
  --jade: #3b8b73;
  --gold: #d4942f;
  --charcoal: #27302b;
}

body.auto-demo-result .app-shell {
  grid-template-columns: minmax(320px, 430px);
}

body.auto-demo-result .preview-ribbon,
body.auto-demo-result .entry-panel,
body.auto-demo-result .empty-state,
body.auto-demo-result .story-stage,
body.auto-demo-result .choice-panel,
body.auto-demo-result .cultivation-play,
body.auto-demo-result .evidence-panel,
body.auto-demo-result .share-card,
body.auto-demo-result .save-panel {
  display: none;
}

body.auto-demo-result .result-stage {
  min-height: auto;
}

@media (max-width: 980px) {
  .app-shell,
  .identity-band,
  .story-stage,
  .natal-layout,
  .phase-layout,
  .event-lines,
  .cultivation-grid,
  .choice-grid,
  .time-grid {
    grid-template-columns: 1fr;
  }

  .entry-panel {
    position: static;
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 20px, 1360px);
    padding: 10px 0;
  }

  .entry-panel,
  .story-stage,
  .choice-panel,
  .outcome-panel,
  .ending-panel,
  .cultivation-play,
  .evidence-panel,
  .save-panel,
  .identity-band,
  .natal-layout article,
  .phase-layout,
  .time-panel,
  .event-card,
  .focus-panel,
  .cultivation-card,
  .share-card {
    padding: 18px;
  }

  .brand-row {
    grid-template-columns: 46px 1fr;
  }

  .seal {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
}

/* v0.4 mobile-game shell: keep the app feeling like a vertical light-operation game. */
.app-shell {
  grid-template-columns: minmax(320px, 430px) minmax(320px, 560px);
  justify-content: center;
  align-items: start;
}

.entry-panel,
.empty-state,
.story-stage,
.choice-panel,
.outcome-panel,
.ending-panel,
.cultivation-play,
.evidence-panel,
.save-panel,
.share-card {
  border-radius: 18px;
}

.home-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.home-status article,
.init-card,
.privacy-card,
.return-loop,
.progress-panel {
  padding: 12px;
  background: rgba(255, 250, 240, 0.1);
  border: 1px solid rgba(255, 250, 240, 0.18);
  border-radius: 14px;
}

.home-status span,
.privacy-card span,
.return-loop span,
.module-card span,
.progress-head span,
.progress-stats span,
.unlock-list span {
  display: block;
  color: rgba(255, 250, 240, 0.56);
  font-size: 11px;
  line-height: 1.4;
}

.home-status strong,
.privacy-card strong,
.return-loop strong,
.progress-head strong {
  display: block;
  margin-top: 4px;
  color: #f6d796;
  font-size: 13px;
  line-height: 1.35;
}

.wake-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 14px 0;
  padding: 14px;
  color: #2f281f;
  background: linear-gradient(160deg, #fff8e9 0%, #ead9bb 100%);
  border: 1px solid rgba(246, 215, 150, 0.54);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(12, 10, 7, 0.16);
  overflow: hidden;
}

.wake-card.hidden {
  display: none;
}

.wake-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.wake-card .eyebrow {
  margin-bottom: 4px;
  color: #725a2a;
}

.wake-card .avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fffaf0;
  border: 2px solid rgba(255, 250, 240, 0.72);
  border-radius: 50%;
  box-shadow: inset 0 -7px 14px rgba(0, 0, 0, 0.18);
  font-size: 28px;
  font-weight: 900;
}

.wake-card .el-木 {
  background: radial-gradient(circle at 30% 28%, #93c878, #3f7e43);
}

.wake-card .el-火 {
  background: radial-gradient(circle at 30% 28%, #e48a63, #a93b2b);
}

.wake-card .el-土 {
  background: radial-gradient(circle at 30% 28%, #dfb35a, #8d641f);
}

.wake-card .el-金 {
  color: #302c25;
  background: radial-gradient(circle at 30% 28%, #eee6d3, #9d9788);
}

.wake-card .el-水 {
  background: radial-gradient(circle at 30% 28%, #6d9fd0, #294c70);
}

.wake-card .name {
  color: #2d251d;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wake-card .epithet {
  margin-top: 3px;
  color: #8a6525;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.wake-card .relation,
.wake-card .message,
.wake-card .blessing,
.wake-card .disclaimer,
.wake-card .evidence {
  overflow-wrap: anywhere;
}

.wake-card .relation {
  color: #6d5c4b;
  font-size: 13px;
  line-height: 1.7;
}

.wake-card .message {
  color: #2f281f;
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-line;
}

.wake-card .blessing {
  padding: 10px 12px;
  color: #3d3125;
  background: rgba(184, 134, 43, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.7;
}

.wake-card .evidence {
  color: #796d60;
  font-size: 12px;
  line-height: 1.7;
}

.wake-card .evidence summary {
  color: #805e21;
  cursor: pointer;
}

.wake-card .evidence ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.wake-card .disclaimer {
  color: #8f8271;
  font-size: 11px;
  line-height: 1.6;
}

.progress-panel {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.progress-head,
.progress-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.progress-meter {
  height: 10px;
  overflow: hidden;
  background: rgba(255, 250, 240, 0.12);
  border-radius: 999px;
}

.progress-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #f6d796, #51b49f);
  border-radius: inherit;
  transition: width 220ms ease;
}

.unlock-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.unlock-list span {
  min-height: 28px;
  padding: 6px 8px;
  color: rgba(255, 250, 240, 0.62);
  background: rgba(255, 250, 240, 0.08);
  border: 1px dashed rgba(255, 250, 240, 0.18);
  border-radius: 999px;
}

.unlock-list span.unlocked {
  color: #3a2817;
  background: linear-gradient(180deg, #fff3bc, #e0aa47);
  border-style: solid;
}

.privacy-card {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: rgba(255, 250, 240, 0.68);
  font-size: 12px;
  line-height: 1.55;
}

.privacy-card button {
  min-height: 36px;
  color: #3a2817;
  background: linear-gradient(180deg, #fff3bc, #d49b3d);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.module-dock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}

.module-card {
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 13px;
  color: rgba(255, 250, 240, 0.82);
  text-align: left;
  text-decoration: none;
  background: rgba(255, 250, 240, 0.11);
  border: 1px solid rgba(255, 250, 240, 0.2);
  border-radius: 16px;
}

.module-card strong {
  color: #fff7dd;
  font-size: 17px;
}

.module-card small {
  color: rgba(255, 250, 240, 0.62);
  line-height: 1.45;
}

.module-primary {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.4), transparent 24%),
    linear-gradient(135deg, #f6d796, #d49b3d);
  color: #3a2817;
  border-color: rgba(255, 250, 240, 0.66);
  box-shadow: 0 14px 34px rgba(212, 155, 61, 0.34);
}

.module-primary span,
.module-primary small,
.module-primary strong {
  color: #3a2817;
}

.module-locked {
  opacity: 0.68;
  cursor: not-allowed;
  border-style: dashed;
}

.birth-form {
  gap: 10px;
}

.birth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 8px;
}

.init-card .eyebrow {
  margin-bottom: 10px;
  color: #f6d796;
  opacity: 0.9;
}

.segmented-control.triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-control.compact {
  margin-top: 8px;
}

.segmented-control button {
  min-width: 0;
  padding: 0 8px;
  white-space: normal;
  line-height: 1.25;
}

.focus-picks button {
  min-height: 44px;
}

.birth-form .start-run {
  min-height: 58px;
  margin-top: 8px;
  border-radius: 18px;
  font-size: 18px;
  box-shadow: 0 14px 32px rgba(212, 155, 61, 0.34);
}

.return-loop {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  color: rgba(255, 250, 240, 0.68);
  font-size: 12px;
  line-height: 1.55;
}

.recommended-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0 4px;
  padding: 12px;
  background: rgba(246, 215, 150, 0.12);
  border: 1px solid rgba(246, 215, 150, 0.26);
  border-radius: 14px;
}

.recommended-action span {
  padding: 5px 8px;
  color: #3a2817;
  background: #f6d796;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.recommended-action strong {
  color: #fff7dd;
}

.recommended-action small {
  color: rgba(255, 250, 240, 0.66);
}

.feedback-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.feedback-strip span {
  padding: 8px 10px;
  color: #3a2817;
  background: linear-gradient(180deg, #fff3bc, #e0aa47);
  border: 1px solid rgba(184, 134, 43, 0.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.player-feedback-panel {
  padding: 18px;
  margin-top: 18px;
  background: rgba(28, 55, 51, 0.88);
  border: 1px solid rgba(246, 215, 150, 0.24);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(22, 38, 34, 0.18);
}

.player-feedback-panel h2,
.player-feedback-panel label,
.player-feedback-panel strong {
  color: #fff7dd;
}

.feedback-rating,
.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-rating button {
  width: 42px;
  height: 42px;
  padding: 0;
  color: #f8ead0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  font-weight: 900;
}

.feedback-rating button.active {
  color: #263f39;
  background: #f6d796;
  border-color: #f6d796;
}

.feedback-form-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.feedback-form-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}

.feedback-form-row select,
.feedback-form-row textarea {
  width: 100%;
  min-width: 0;
  color: #263f39;
  background: #fffaf0;
  border: 1px solid rgba(246, 215, 150, 0.55);
  border-radius: 12px;
  font: inherit;
}

.feedback-form-row select {
  height: 44px;
  padding: 0 10px;
}

.feedback-form-row textarea {
  min-height: 74px;
  padding: 10px;
  resize: vertical;
}

.feedback-actions button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
}

.feedback-analysis-summary {
  display: grid;
  gap: 4px;
  min-height: 24px;
  margin-top: 12px;
  color: rgba(255, 250, 240, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.feedback-analysis-summary span,
.feedback-analysis-summary small {
  color: rgba(255, 250, 240, 0.7);
}

.return-memory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.return-memory article {
  padding: 12px;
  background: rgba(184, 134, 43, 0.08);
  border: 1px solid rgba(184, 134, 43, 0.2);
  border-radius: 14px;
}

.return-memory span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.return-memory strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.run-reward-panel {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 14px;
  color: var(--paper-strong);
  background:
    linear-gradient(135deg, rgba(33, 115, 106, 0.94), rgba(34, 32, 27, 0.9)),
    var(--charcoal);
  border-radius: 14px;
}

.run-reward-panel span,
.run-reward-panel small {
  color: rgba(255, 250, 240, 0.68);
}

.run-reward-panel strong {
  color: #f6d796;
  font-size: 18px;
}

.trigger-panel {
  display: grid;
  gap: 14px;
  margin: 16px 0;
  padding: 16px;
  color: var(--paper-strong);
  background:
    linear-gradient(135deg, rgba(167, 52, 45, 0.92), rgba(33, 115, 106, 0.88)),
    var(--charcoal);
  border: 1px solid rgba(255, 250, 240, 0.24);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(35, 24, 12, 0.16);
}

.compact-heading h2 {
  margin-bottom: 0;
  font-size: 22px;
}

.trigger-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.trigger-main strong {
  color: #fff7dd;
  font-size: 17px;
  line-height: 1.55;
}

.trigger-main span {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: #3a2817;
  background: linear-gradient(180deg, #fff3bc, #d9a344);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.trigger-side-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trigger-side-list article {
  display: grid;
  gap: 5px;
  min-height: 82px;
  padding: 12px;
  background: rgba(255, 250, 240, 0.12);
  border: 1px solid rgba(255, 250, 240, 0.18);
  border-radius: 8px;
}

.trigger-side-list strong {
  color: #f6d796;
  font-size: 13px;
}

.trigger-side-list span,
.trigger-next-hint {
  color: rgba(255, 250, 240, 0.76);
  font-size: 13px;
  line-height: 1.6;
}

.trigger-evidence {
  display: grid;
  gap: 6px;
}

.trigger-evidence p {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(27, 24, 20, 0.22);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.trigger-evidence strong {
  color: #f6d796;
}

.trigger-evidence span {
  color: rgba(255, 250, 240, 0.76);
}

.trigger-next-hint {
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 250, 240, 0.1);
  border-left: 3px solid #f6d796;
  border-radius: 6px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: minmax(320px, 430px);
  }
}

@media (max-width: 560px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(246, 215, 150, 0.42), transparent 30%),
      linear-gradient(180deg, #315852 0%, #f5efe3 54%, #dfe7bf 100%);
  }

  .app-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8px 16px 8px 10px;
    overflow-x: hidden;
  }

  .preview-ribbon,
  .entry-panel {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
  }

  .brand-row > div,
  .hero-copy,
  .wake-card,
  .wake-card .name,
  .wake-card .message,
  .wake-card .blessing,
  .wake-card .evidence,
  .module-card,
  .home-status article {
    min-width: 0;
    max-width: 100%;
  }

  .hero-copy,
  .module-card small {
    overflow-wrap: anywhere;
  }

  .game-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-hud span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-hud span:nth-child(3) {
    grid-column: 1 / -1;
  }

  .home-status,
  .module-dock,
  .return-memory,
  .unlock-list,
  .feedback-form-row {
    grid-template-columns: 1fr;
  }

  .birth-grid {
    grid-template-columns: 1fr;
  }

  .story-stage h2 {
    font-size: 30px;
  }

  .story-stage p {
    font-size: 16px;
    line-height: 1.75;
  }

  .game-hud {
    gap: 5px;
  }

  .game-hud span {
    min-width: 0;
    padding: 0 6px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
  }

  .choice-card,
  .cultivation-card {
    min-height: 104px;
  }

  .outcome-panel .probability-evidence p {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .trigger-main,
  .trigger-side-list,
  .trigger-evidence p {
    grid-template-columns: 1fr;
  }

  .trigger-main span {
    justify-self: start;
    white-space: normal;
    text-align: center;
  }
}

/* compass-ui: water-ink cyan shell ported from compass-preview.html. */
.compass-body {
  --mo: #262420;
  --mo-soft: #5a564e;
  --mo-faint: #8d887d;
  --xuan: #f4efe4;
  --xuan2: #ece5d6;
  --qing: #5d8a93;
  --qing-deep: #356b7a;
  --qing-green: #6f9a78;
  --qing-pale: #aec6c6;
  --zhu: #b35a47;
  --zhe: #a8824e;
  --su: #b8b2a4;
  --xuanhei: #3a4a55;
  /* 五行主题引擎:个性层默认=天青;按 body[data-element] 潜移默化偏向喜用神 */
  --accent: #5d8a93;
  --accent-deep: #356b7a;
  --accent-soft: rgba(93, 138, 147, .14);
  --ease: cubic-bezier(.16, .84, .34, 1);
  --kai: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
  --song: "Songti SC", "STSong", "Noto Serif SC", serif;
  --hei: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --app-viewport-h: 100svh;
  --shell-pad-x: 0px;
  --shell-pad-y: 0px;
  --phone-max-w: 438px;
  --phone-max-h: var(--app-viewport-h);
  --phone-height: var(--app-viewport-h);
  --surface-radius: 0px;
  --surface-border: 0 solid transparent;
  --surface-shadow:
    inset 0 0 90px rgba(38, 36, 32, .10),
    inset 0 0 0 1px rgba(38, 36, 32, .05);
  --stage-chrome: 76px;
  --stage-pad-x: clamp(18px, 6vw, 26px);
  --stage-pad-y: 6px;
  --stage-pad-bottom: clamp(28px, 7svh, 46px);
  --topbar-pad-x: clamp(16px, 6vw, 24px);
  --topbar-pad-y: 6px;
  --topbar-pad-bottom: 12px;
  --hub-world-size: clamp(250px, 78vw, 360px);
  --window-inset: clamp(12px, 4vw, 28px);
  --game-window-max-w: 860px;
  --game-window-width: min(calc(100vw - var(--window-inset) - var(--window-inset)), var(--game-window-max-w));
  --game-window-max-h: min(calc(var(--app-viewport-h) - var(--window-inset) - var(--window-inset)), 900px);
  --game-window-body-pad: clamp(14px, 3vw, 20px);
  --ambient-bg: radial-gradient(120% 80% at 50% 30%, #4a4843, #34322d 70%, #26241f 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--app-viewport-h);
  min-height: var(--app-viewport-h);
  margin: 0;
  padding: var(--shell-pad-y) var(--shell-pad-x);
  color: var(--skin-page-text, #262420);
  background: var(--skin-page-background, radial-gradient(120% 80% at 50% 30%, #4a4843, #34322d 70%, #26241f 100%));
  font-family: var(--song);
  overflow: hidden;
  isolation: isolate;
}

@supports (height: 100dvh) {
  .compass-body {
    --app-viewport-h: 100dvh;
  }
}

.compass-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.compass-body [hidden] {
  display: none !important;
}

/* 旧引擎 DOM 仅作 app.js 初始化兼容层，永远不可见(优先级压过 .app-shell{display:grid}) */
#legacy-app-root,
#legacy-app-root[hidden] {
  display: none !important;
}

.compass-body button,
.compass-body input,
.compass-body select,
.compass-body textarea {
  font: inherit;
}

.compass-phone {
  position: relative;
  z-index: 1;
  flex: 0 1 var(--phone-max-w);
  width: min(100%, var(--phone-max-w));
  min-width: 0;
  height: var(--phone-height);
  max-height: var(--phone-height);
}

.compass-surface {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(140% 36% at 50% 0%, rgba(93, 138, 147, .10), transparent 55%),
    radial-gradient(120% 120% at 50% 50%, var(--xuan) 60%, var(--xuan2) 100%);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}

.compass-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(38, 36, 32, .015) 0 2px, transparent 2px 5px);
}

.compass-surface .ribbon {
  text-align: center;
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--qing-deep);
  padding: 13px 0 4px;
  opacity: .85;
  font-family: var(--kai);
}

.compass-surface .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--topbar-pad-y) var(--topbar-pad-x) var(--topbar-pad-bottom);
  font-size: 12px;
  position: relative;
  z-index: 2;
}

.compass-surface .dots {
  display: flex;
  gap: 9px;
}

.compass-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(38, 36, 32, .18);
  transition: .4s;
}

.compass-dot.done {
  background: var(--qing);
}

.compass-dot.active {
  background: var(--zhu);
  transform: scale(1.7);
}

.compass-surface .shichen {
  font-family: var(--kai);
  color: var(--qing-deep);
  font-size: 13px;
}

.compass-surface .back {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--mo-faint);
  user-select: none;
  padding: 0;
}

.compass-stage {
  display: none;
  min-width: 0;
  padding: var(--stage-pad-y) var(--stage-pad-x) var(--stage-pad-bottom);
  position: relative;
  z-index: 2;
  background: var(--skin-stage-veil, var(--stage-veil, transparent));
  animation: compassFadeUp .7s var(--ease);
}

.compass-stage.active {
  display: block;
}

.compass-stage[data-step="0"].active {
  height: calc(100% - var(--stage-chrome));
  min-height: 0;
  max-height: calc(100% - var(--stage-chrome));
  display: grid;
  align-content: stretch;
  overflow: hidden;
  padding-bottom: 18px;
}

.compass-stage[data-step="1"].active,
.compass-stage[data-step="16"].active {
  max-height: calc(100% - var(--stage-chrome));
  overflow: auto;
  overscroll-behavior: contain;
}

.compass-stage.in-game-window {
  display: block;
  min-width: 0;
  padding: 2px 4px 26px;
  animation: none;
}

.compass-stage.in-game-window .center-col {
  min-height: auto;
}

.game-window-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--window-inset);
  overflow: hidden;
}

.game-window-backdrop {
  position: absolute;
  inset: 0;
  background: var(--skin-scrim, radial-gradient(circle at 50% 42%, rgba(244, 239, 228, .22), transparent 32%), rgba(19, 24, 24, .54));
  backdrop-filter: blur(4px);
}

.game-window {
  position: relative;
  z-index: 1;
  width: var(--game-window-width);
  max-height: var(--game-window-max-h);
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--mo);
  background:
    linear-gradient(180deg, rgba(250, 246, 236, .98), rgba(238, 231, 217, .98)),
    radial-gradient(circle at 92% 8%, var(--skin-accent-soft, var(--accent-soft)), transparent 36%),
    repeating-linear-gradient(0deg, rgba(120, 100, 70, .028) 0, rgba(120, 100, 70, .028) 1px, transparent 1px, transparent 5px);
  border-radius: 5px;
  /* 木框册页:青描边 + 外深木框 + 内宣纸描边 + 墨影 */
  box-shadow:
    0 0 0 1px rgba(53, 107, 122, .32),
    0 0 0 7px rgba(74, 58, 42, .94),
    0 0 0 8px rgba(38, 28, 18, .55),
    0 30px 82px rgba(12, 14, 14, .44),
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset 0 0 40px rgba(120, 100, 70, .07);
}

/* 卷轴轴头:上下深木横条,暗示这是一卷可展的册页 */
.game-window::before,
.game-window::after {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  height: 7px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, #5d4733 0%, #4a3a2a 45%, #34271a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 215, .18);
}

.game-window::before {
  top: -7px;
  border-radius: 5px 5px 0 0;
}

.game-window::after {
  bottom: -7px;
  border-radius: 0 0 5px 5px;
}

.game-window-titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px 10px 18px;
  background: linear-gradient(90deg, rgba(93, 138, 147, .16), rgba(250, 246, 236, .72));
  border-bottom: 1px solid rgba(53, 107, 122, .24);
}

.game-window-titlebar > div {
  min-width: 0;
  padding-left: 11px;
  border-left: 3px solid #a23b30;
  box-shadow: -1px 0 0 rgba(162, 59, 48, .25);
}

.game-window-kicker {
  display: block;
  color: var(--skin-accent-deep, var(--accent-deep));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.game-window-titlebar h2 {
  margin: 0;
  color: var(--mo);
  font-family: var(--kai);
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.game-window-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--qing-deep);
  background: rgba(250, 246, 236, .76);
  border: 1px solid rgba(53, 107, 122, .28);
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.game-window-close:hover {
  color: var(--xuan);
  background: var(--qing-deep);
}

.game-window-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--game-window-body-pad);
}

body.game-window-open {
  overflow: hidden;
}

@keyframes gameWindowInkIn {
  from {
    opacity: 0;
    transform: scale(.92);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes gameWindowInkOut {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(.94);
    filter: blur(5px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .game-window-layer:not([hidden]) .game-window {
    animation: gameWindowInkIn .26s var(--ease) both;
  }

  .game-window-layer.is-closing .game-window {
    animation: gameWindowInkOut .18s var(--ease) both;
  }
}

@media (max-width: 560px) {
  .compass-body {
    --window-inset: 8px;
    --game-window-body-pad: 12px;
  }

  .game-window-layer {
    padding: var(--window-inset);
  }

  .game-window {
    width: var(--game-window-width);
    height: var(--game-window-max-h);
    max-height: var(--game-window-max-h);
    border-radius: 8px;
  }

  .game-window-titlebar {
    padding: 10px 10px 9px 12px;
  }

  .game-window-titlebar h2 {
    font-size: 18px;
  }

  .game-window-close {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .game-window-body {
    padding: var(--game-window-body-pad);
  }

  .compass-stage.in-game-window {
    padding: 0 0 20px;
  }

  .compass-stage[data-step="0"].active {
    padding-left: 14px;
    padding-right: 14px;
  }

  .compass-stage[data-step="0"].active .hub-page {
    grid-template-rows: auto auto minmax(96px, .42fr) minmax(0, 1fr) auto;
    gap: 8px;
  }

  .hub-compass-world svg {
    width: var(--hub-world-size);
  }

  .compass-stage[data-step="0"].active .hub-module-card {
    min-height: 74px;
    padding: 9px;
  }
}

@keyframes compassFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.compass-surface .center-col {
  min-height: min(76vh, calc(var(--phone-height) - var(--stage-chrome) - 24px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gap, 24px);
}

.compass-surface .entry-col,
.compass-surface .outcome-col,
.compass-surface .vow-col,
.compass-surface .echo-col {
  min-height: auto;
  padding-top: 12px;
}

.compass-surface .seal {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kai);
  font-size: 62px;
  font-weight: 700;
  color: var(--xuan);
  background: var(--zhu);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(179, 90, 71, .3);
  position: relative;
  animation: compassBreathe 3s ease-in-out infinite;
  letter-spacing: 0;
}

.compass-surface .seal::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(244, 239, 228, .5);
  border-radius: 6px;
}

@keyframes compassBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.compass-surface .hero-copy {
  margin: 0;
  font-family: var(--kai);
  font-size: 24px;
  font-weight: 700;
  color: var(--mo);
  letter-spacing: 4px;
  line-height: 1.35;
}

.compass-surface .sub-copy {
  margin: 0;
  font-size: 14px;
  color: var(--mo-soft);
  line-height: 2;
  font-family: var(--song);
}

.launch-gate,
.create-profile-col {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow-x: hidden;
}

.compass-surface .launch-seal {
  width: min(38vw, 156px);
  height: min(38vw, 156px);
  min-width: 116px;
  min-height: 116px;
  font-size: clamp(52px, 16vw, 72px);
}

.launch-gate .eyebrow,
.create-profile-col .eyebrow {
  color: var(--qing-deep);
  font-family: var(--kai);
  font-weight: 700;
}

.launch-actions {
  width: min(100%, 360px);
  display: grid;
  gap: 10px;
}

.launch-actions .cta {
  width: 100%;
}

.compass-surface .login-placeholder {
  color: rgba(53, 107, 122, .72);
  border-style: dashed;
  background: rgba(250, 246, 236, .42);
}

.launch-privacy {
  max-width: 420px;
}

.compass-surface .cta {
  font-family: var(--kai);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--skin-button-text, #f4efe4);
  padding: 15px 44px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--skin-button-background, linear-gradient(180deg, var(--qing), var(--qing-deep)));
  box-shadow: 0 8px 22px rgba(53, 107, 122, .32);
  transition: .25s;
  user-select: none;
}

.compass-surface .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(53, 107, 122, .42);
}

.compass-surface .cta:disabled {
  opacity: .65;
  cursor: wait;
}

.compass-surface .cta.ghost {
  background: transparent;
  color: var(--qing-deep);
  border: 1.5px solid var(--qing);
  box-shadow: none;
  font-size: 15px;
  letter-spacing: 4px;
  padding: 12px 28px;
}

.compass-surface .cta.ghost:hover {
  background: rgba(93, 138, 147, .1);
}

.compass-surface .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}

.compass-birth-form {
  width: 100%;
  display: grid;
  gap: 11px;
}

.create-profile-col .create-back {
  width: min(100%, 300px);
  margin-top: -4px;
}

.compass-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.compass-form-row.date-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compass-form-row.location-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compass-birth-form label {
  display: grid;
  gap: 6px;
  text-align: left;
  color: var(--mo-soft);
  font-size: 12px;
  font-family: var(--kai);
  font-weight: 700;
}

.compass-birth-form select,
.compass-birth-form input,
.compass-feedback select,
.compass-feedback textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  color: var(--mo);
  background: #faf6ec;
  border: 1px solid rgba(38, 36, 32, .16);
  border-radius: 8px;
  padding: 0 10px;
}

.compass-birth-form select option {
  color: var(--mo);
  background: #faf6ec;
}

.compass-field-note {
  display: block;
  margin-top: -4px;
  color: var(--mo-faint);
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
  overflow-wrap: anywhere;
}

.compass-label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.compass-help-button {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .12);
  border: 1px solid rgba(93, 138, 147, .28);
  border-radius: 50%;
  cursor: help;
  font-size: 12px;
  line-height: 1;
}

.compass-inline-check {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px !important;
  min-width: 0;
  color: var(--mo-soft);
  font-family: var(--song) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.45;
}

.compass-inline-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: 0 0 auto;
  accent-color: var(--qing-deep);
}

.compass-advanced-check {
  padding: 8px 10px;
  background: rgba(93, 138, 147, .08);
  border: 1px solid rgba(93, 138, 147, .18);
  border-radius: 8px;
}

.compass-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  background: rgba(93, 138, 147, .09);
  border: 1px solid rgba(93, 138, 147, .26);
  border-radius: 8px;
}

.compass-segmented.triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compass-segmented.calendar-type {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compass-segmented button {
  min-height: 38px;
  min-width: 0;
  color: var(--mo-soft);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--kai);
  font-weight: 700;
}

.compass-segmented button.active {
  color: var(--xuan);
  background: linear-gradient(180deg, var(--qing), var(--qing-deep));
}

.compass-status,
.compass-mini-summary,
.compass-privacy {
  width: 100%;
  padding: 11px 13px;
  color: var(--mo-soft);
  background: rgba(250, 246, 236, .66);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.compass-status[data-tone="warn"] {
  color: var(--zhu);
  border-color: rgba(179, 90, 71, .38);
}

.compass-true-solar,
.true-solar-panel {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 11px 13px;
  color: var(--mo-soft);
  background: rgba(250, 246, 236, .76);
  border: 1px solid rgba(93, 138, 147, .24);
  border-left: 3px solid var(--qing-deep);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.compass-true-solar[hidden],
.true-solar-panel.hidden {
  display: none;
}

.compass-true-solar strong,
.true-solar-panel strong {
  color: var(--qing-deep);
  font-family: var(--kai);
  font-size: 14px;
}

.compass-true-solar p,
.true-solar-panel p {
  margin: 0;
}

.compass-true-solar[data-shifted="true"],
.true-solar-panel[data-shifted="true"] {
  background: rgba(245, 239, 227, .92);
  border-color: rgba(179, 90, 71, .24);
  border-left-color: var(--zhu);
}

.compass-true-solar[data-shifted="true"] strong,
.true-solar-panel[data-shifted="true"] strong {
  color: var(--zhu);
}

.compass-mini-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  font-family: var(--kai);
  color: var(--qing-deep);
}

.compass-privacy {
  display: grid;
  gap: 6px;
  text-align: left;
}

.compass-privacy strong {
  color: var(--mo);
  font-family: var(--kai);
}

.compass-privacy button {
  justify-self: start;
  min-height: 34px;
  color: var(--qing-deep);
  background: transparent;
  border: 1px solid var(--qing);
  border-radius: 6px;
  cursor: pointer;
  padding: 0 12px;
  font-family: var(--kai);
  font-weight: 700;
}

.profile-return-panel {
  width: 100%;
  display: grid;
  gap: 10px;
}

.profile-list {
  display: grid;
  gap: 8px;
  width: 100%;
}

.profile-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  color: var(--mo-soft);
  text-align: left;
  background: rgba(250, 246, 236, .72);
  border: 1px solid rgba(93, 138, 147, .22);
  border-radius: 8px;
}

.profile-item strong,
.profile-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-item strong {
  color: var(--mo);
  font-family: var(--kai);
  font-size: 14px;
}

.profile-item small {
  margin-top: 3px;
  color: var(--mo-faint);
  font-size: 12px;
  line-height: 1.55;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-actions button {
  min-height: 30px;
  min-width: 0;
  padding: 0 10px;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .08);
  border: 1px solid rgba(93, 138, 147, .28);
  border-radius: 6px;
  cursor: pointer;
}

.profile-actions button:hover {
  color: var(--xuan);
  background: var(--qing-deep);
}

.hub-page {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding-top: 12px;
}

.hub-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.hub-hero > div {
  min-width: 0;
}

.hub-hero .hero-copy {
  color: var(--skin-page-text, #262420);
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}

.hub-actions {
  flex: 0 0 auto;
}

.hub-actions .cta.ghost {
  width: auto;
  white-space: nowrap;
}

.hub-today {
  display: grid;
  gap: 6px;
  padding: 13px;
  color: var(--mo-soft);
  background:
    var(--skin-hub-today-background, linear-gradient(180deg, rgba(250, 246, 236, .82), rgba(250, 246, 236, .58))),
    radial-gradient(circle at 92% 10%, var(--accent-soft), transparent 42%);
  border: 1px solid var(--skin-hub-today-border, rgba(93, 138, 147, .22));
  border-radius: 8px;
}

.hub-today span,
.hub-today strong,
.hub-today small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hub-today span {
  color: var(--skin-page-text, #262420);
  font-family: var(--kai);
  font-size: 18px;
  line-height: 1.45;
}

.hub-today strong {
  color: var(--accent-deep);
  font-size: 13px;
}

.hub-today small {
  color: var(--mo-faint);
  line-height: 1.55;
}

.baike-time-hook {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--qing-deep);
  text-align: left;
  line-height: 1.55;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .9), rgba(244, 239, 228, .68)),
    linear-gradient(90deg, color-mix(in srgb, var(--baike-accent, var(--qing)) 18%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--baike-accent, var(--qing)) 36%, rgba(53, 107, 122, .16));
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(38, 36, 32, .06);
  overflow-wrap: anywhere;
}

.baike-time-hook[hidden] {
  display: none;
}

.baike-time-hook:hover {
  border-color: color-mix(in srgb, var(--baike-accent, var(--qing)) 62%, rgba(53, 107, 122, .28));
  transform: translateY(-1px);
}

.compass-stage[data-step="0"].active .hub-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto auto minmax(88px, .48fr) minmax(0, 1fr) auto;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.compass-stage[data-step="0"].active .hub-hero {
  align-items: center;
}

.compass-stage[data-step="0"].active .hub-hero .hero-copy {
  font-size: 20px;
  line-height: 1.18;
}

.compass-stage[data-step="0"].active .hub-today {
  gap: 3px;
  padding: 9px 11px;
}

.compass-stage[data-step="0"].active .hub-today span {
  font-size: 15px;
  line-height: 1.3;
}

.compass-stage[data-step="0"].active .hub-baike-time-hook {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.hub-compass-world {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 6px 0;
  overflow: hidden;
}

button.hub-compass-world {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

button.hub-compass-world:focus-visible {
  outline: 2px solid var(--zhu);
  outline-offset: -2px;
}

.hub-compass-world svg {
  display: block;
  width: var(--hub-world-size);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 16px 28px rgba(38, 36, 32, .14));
}

/* 罗盘盘面：底图加载失败时 image 自然为空，程序化环线仍完整显示。 */
.compass-texture {
  opacity: .16;
  pointer-events: none;
}

.compass-frame,
.compass-divider {
  fill: none;
  stroke: var(--skin-line-ink, var(--line-ink, var(--mo)));
}

.compass-frame {
  stroke-width: 1.6;
  opacity: .72;
}

.compass-divider {
  stroke-width: 1;
  opacity: .38;
}

.compass-divider-outer {
  stroke: var(--skin-card-edge, var(--card-edge, var(--line-ink, var(--mo))));
  opacity: .62;
}

.compass-divider-inner {
  stroke: var(--accent, var(--qing));
  opacity: .46;
}

.compass-tick {
  stroke: var(--accent, var(--qing));
  stroke-width: 1;
  opacity: .52;
}

.compass-tick-major {
  stroke: var(--skin-line-ink, var(--line-ink, var(--mo)));
  stroke-width: 1.45;
  opacity: .78;
}

.compass-branch {
  fill: var(--skin-line-ink, var(--line-ink, var(--mo)));
  font-family: var(--kai);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.compass-stage[data-step="0"].active .hub-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  overflow: visible;
}

.compass-stage[data-step="0"].active .hub-module-card {
  min-height: 78px;
  gap: 4px;
  padding: 8px 10px;
}

.compass-stage[data-step="0"].active .hub-module-card strong {
  font-size: 16px;
}

.compass-stage[data-step="0"].active .hub-module-card small {
  font-size: 11px;
  line-height: 1.35;
}

.compass-stage[data-step="0"].active .compass-privacy {
  gap: 2px;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.35;
}

.hub-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.hub-module-card {
  min-width: 0;
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 13px;
  color: var(--mo-soft);
  text-align: left;
  background: rgba(250, 246, 236, .72);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(38, 36, 32, .06);
  transition: .22s;
}

.hub-module-card:hover {
  transform: translateY(-1px);
  border-color: rgba(53, 107, 122, .42);
  box-shadow: 0 14px 28px rgba(53, 107, 122, .12);
}

.hub-module-card span,
.hub-module-card strong,
.hub-module-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hub-module-card span {
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
}

.hub-module-card strong {
  color: var(--skin-page-text, #262420);
  font-family: var(--kai);
  font-size: 18px;
  line-height: 1.3;
}

.hub-module-card small {
  color: var(--mo-faint);
  font-size: 12px;
  line-height: 1.55;
}

.hub-module-card.primary {
  background: var(--skin-primary-card-background, linear-gradient(180deg, rgba(93, 138, 147, .16), rgba(250, 246, 236, .78)), radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .72), transparent 34%));
  border-color: var(--skin-primary-card-border, rgba(53, 107, 122, .36));
}

/* 主页只保留主线，常驻 tab 为其他模块提供同一套浮层入口。 */
.compass-tabbar {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100vw - 32px), 440px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 5px;
  transform: translateX(-50%);
  background: var(--skin-tabbar-background, rgba(255, 253, 247, .94));
  border: 1px solid var(--skin-tabbar-border, rgba(53, 107, 122, .24));
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(26, 40, 38, .18);
  backdrop-filter: blur(12px);
}

.compass-tabbar[hidden] {
  display: none;
}

.compass-tabbar button {
  min-width: 0;
  min-height: 50px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 3px;
  color: var(--mo-faint);
  background: transparent;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.compass-tabbar button span {
  font-size: 16px;
  line-height: 1;
}

.compass-tabbar button.active,
.compass-tabbar button[aria-current="page"] {
  color: var(--xuan);
  background: linear-gradient(180deg, var(--qing), var(--qing-deep));
  box-shadow: 0 3px 10px rgba(53, 107, 122, .2);
}

.compass-tabbar button:focus-visible,
.relation-hub-switch button:focus-visible,
.discover-shortcuts button:focus-visible,
.profile-cultivation-entry button:focus-visible {
  outline: 2px solid var(--zhu);
  outline-offset: 2px;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active {
  padding-bottom: 82px;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .hub-page {
  grid-template-rows: auto auto auto minmax(72px, .42fr) auto auto;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .hub-module-grid {
  grid-template-columns: minmax(0, 1fr);
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .hub-module-card {
  min-height: 72px;
}

.discover-page {
  min-width: 0;
  display: grid;
  gap: 12px;
  color: var(--mo, #262420);
  overflow-x: hidden;
}

.discover-hero,
.discover-module-shell {
  min-width: 0;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 252, 246, .95), rgba(244, 239, 228, .8));
  border: 1px solid rgba(53, 107, 122, .2);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(38, 36, 32, .07);
  overflow: hidden;
}

.discover-hero h2,
.discover-module-head h2 {
  margin: 0;
  color: var(--mo, #262420);
  font-family: var(--kai);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.discover-hero p:not(.eyebrow),
.discover-module-head p {
  margin: 6px 0 0;
  color: var(--mo-faint, rgba(38, 36, 32, .68));
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.discover-card {
  min-width: 0;
  min-height: 154px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px;
  color: var(--mo-soft, #35312c);
  text-align: left;
  background: rgba(250, 246, 236, .78);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(38, 36, 32, .06);
  transition: .22s;
  overflow: hidden;
}

.discover-card:hover {
  transform: translateY(-1px);
  border-color: rgba(53, 107, 122, .42);
  box-shadow: 0 14px 28px rgba(53, 107, 122, .12);
}

.discover-card__badge,
.discover-module-head span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--accent-deep, #356b7a);
  background: var(--accent-soft, rgba(93, 138, 147, .14));
  border: 1px solid rgba(53, 107, 122, .18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.discover-card strong {
  color: var(--mo, #262420);
  font-family: var(--kai);
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.discover-card small,
.discover-card em {
  color: var(--mo-faint, rgba(38, 36, 32, .68));
  font-size: 12px;
  line-height: 1.55;
  font-style: normal;
  overflow-wrap: anywhere;
}

.discover-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.discover-shortcuts button,
.profile-cultivation-entry button {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--xuan);
  background: linear-gradient(180deg, var(--qing), var(--qing-deep));
  border: 1px solid var(--qing-deep);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.discover-experiments {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(250, 246, 236, .56);
  border: 1px dashed rgba(53, 107, 122, .3);
  border-radius: 8px;
}

.discover-experiments summary {
  color: var(--accent-deep);
  cursor: pointer;
  font-family: var(--kai);
  font-weight: 800;
}

.discover-experiments summary span {
  margin-left: 6px;
  color: var(--mo-faint);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
}

.relation-hub-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  background: rgba(53, 107, 122, .09);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 9px;
}

.relation-hub-switch button {
  min-height: 40px;
  padding: 7px;
  color: var(--qing-deep);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.relation-hub-switch button.active,
.relation-hub-switch button[aria-pressed="true"] {
  color: var(--xuan);
  background: var(--qing-deep);
}

.discover-module-shell {
  display: grid;
  gap: 12px;
}

.discover-back {
  justify-self: start;
  min-height: 36px;
  padding: 8px 11px;
  color: var(--accent-deep, #356b7a);
  background: rgba(255, 252, 246, .9);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.discover-module-head {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.discover-module-body {
  min-width: 0;
  overflow-x: hidden;
}

.discover-empty {
  margin: 0;
  padding: 14px;
  color: var(--mo-faint, rgba(38, 36, 32, .68));
  background: rgba(255, 252, 246, .86);
  border: 1px solid rgba(53, 107, 122, .18);
  border-radius: 8px;
  line-height: 1.7;
}

.profile-center-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.profile-cultivation-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.profile-cultivation-entry p:not(.eyebrow) {
  margin: 5px 0 0;
  color: var(--mo-faint);
  font-size: 13px;
  line-height: 1.55;
}

/* account-ui.js 的浮动登录入口不再遮挡顶部条右侧文本。 */
.bac-chip {
  left: 12px !important;
  right: auto !important;
}

body.game-window-open .bac-chip {
  display: none;
}

.profile-center-fallback {
  min-width: 0;
  padding: 14px;
  color: var(--mo-soft);
  background: rgba(250, 246, 236, .74);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 8px;
}

.profile-skin-section {
  min-width: 0;
}

.profile-skin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(31, 117, 108, .13);
}

.profile-skin-switcher-slot,
.profile-skin-switcher-slot .bazi-skin-switcher {
  min-width: 0;
  max-width: 100%;
}

.profile-skin-switcher-slot .bazi-skin-card {
  max-width: 100%;
  min-width: 0;
}

.wellness-page {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.wellness-hero,
.wellness-panel {
  min-width: 0;
  padding: 14px;
  color: var(--mo, #262420);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .92), rgba(244, 239, 228, .74)),
    radial-gradient(circle at 92% 8%, rgba(93, 138, 147, .14), transparent 38%);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(38, 36, 32, .08);
  overflow: hidden;
}

.wellness-hero {
  background:
    linear-gradient(135deg, rgba(53, 107, 122, .95), rgba(38, 36, 32, .88)),
    var(--qing-deep, #356b7a);
  color: var(--xuan, #f4efe4);
}

.wellness-hero .sec {
  margin-bottom: 8px;
  color: var(--xuan, #f4efe4);
}

.wellness-hero p,
.wellness-panel p,
.wellness-panel small,
.wellness-panel h3,
.wellness-achievement strong,
.wellness-achievement em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wellness-hero p,
.wellness-main-copy,
.wellness-note {
  margin: 0;
  line-height: 1.72;
}

.wellness-panel-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.wellness-panel-head h3 {
  margin: 0;
  color: var(--mo, #262420);
  font-family: var(--kai);
  font-size: 18px;
  line-height: 1.35;
}

.wellness-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 9px;
  color: var(--qing-deep, #356b7a);
  background: rgba(53, 107, 122, .08);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.wellness-switch input {
  accent-color: var(--qing-deep, #356b7a);
}

.wellness-optin-panel.is-on {
  border-color: rgba(111, 154, 120, .42);
}

.wellness-optin-panel .cta:disabled,
.wellness-task-actions .cta:disabled {
  opacity: .62;
  cursor: default;
}

.wellness-content {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.wellness-content[hidden] {
  display: none;
}

.wellness-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wellness-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--qing-deep, #356b7a);
  background: rgba(53, 107, 122, .1);
  border: 1px solid rgba(53, 107, 122, .24);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.wellness-main-copy {
  color: var(--mo-soft, #5e544a);
}

.wellness-list {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.wellness-list li {
  min-width: 0;
  padding-left: 12px;
  color: var(--mo, #262420);
  border-left: 2px solid var(--qing, #5d8a93);
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.wellness-note {
  display: block;
  color: var(--mo-faint, #756a5f);
  font-size: 12px;
}

.wellness-task-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.wellness-task-actions .cta {
  width: auto;
  min-height: 40px;
  padding: 0 18px;
}

.wellness-achievements {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.wellness-achievement {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  color: var(--mo-soft, #5e544a);
  background: rgba(250, 246, 236, .7);
  border: 1px dashed rgba(53, 107, 122, .22);
  border-radius: 8px;
}

.wellness-achievement span {
  color: var(--qing-deep, #356b7a);
  font-size: 11px;
  font-weight: 700;
}

.wellness-achievement strong {
  color: var(--mo, #262420);
  font-family: var(--kai);
  font-size: 16px;
  line-height: 1.35;
}

.wellness-achievement em {
  color: var(--mo-faint, #756a5f);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.wellness-achievement.complete {
  background:
    linear-gradient(180deg, rgba(111, 154, 120, .16), rgba(250, 246, 236, .72));
  border-color: rgba(111, 154, 120, .42);
}

.compass-surface .mentor-rail {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 11px;
  background: linear-gradient(90deg, rgba(244, 239, 228, .95), rgba(236, 229, 214, .88));
  border: 1px solid rgba(93, 138, 147, .3);
  border-radius: 999px;
  padding: 8px 16px 8px 9px;
  margin: 6px 0 18px;
  box-shadow: 0 4px 14px rgba(38, 36, 32, .08);
}

.compass-rail-avatar,
.compass-surface .rail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kai);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.compass-surface .rail-text {
  font-size: 13.5px;
  color: var(--mo);
  line-height: 1.5;
  font-family: var(--kai);
}

.compass-surface .mentor-card {
  width: 100%;
  border-radius: 10px;
  padding: 24px 22px;
  text-align: left;
  background: linear-gradient(165deg, #faf6ec, #f0e9da);
  border: 1px solid rgba(38, 36, 32, .14);
  box-shadow: 0 14px 40px rgba(38, 36, 32, .12);
  position: relative;
}

.compass-surface .mentor-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: var(--qing);
  border-radius: 2px;
}

.compass-surface .mentor-top {
  display: flex;
  align-items: center;
  gap: 15px;
}

.compass-surface .mentor-halo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kai);
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}

.compass-surface .el-木 { background: radial-gradient(circle at 33% 30%, #8aab8a, #557a5c); }
.compass-surface .el-火 { background: radial-gradient(circle at 33% 30%, #cf7a64, #9c3f2e); }
.compass-surface .el-土 { background: radial-gradient(circle at 33% 30%, #c79f63, #8a6535); }
.compass-surface .el-金 { color: #3a3326; background: radial-gradient(circle at 33% 30%, #d6cfc0, #9a9384); }
.compass-surface .el-水 { background: radial-gradient(circle at 33% 30%, #5f7d8c, #2f4450); }

.compass-surface .mentor-name {
  font-family: var(--kai);
  font-size: 24px;
  font-weight: 700;
  color: var(--mo);
  letter-spacing: 1px;
}

.compass-surface .mentor-epithet {
  font-size: 12.5px;
  color: var(--qing-deep);
  margin-top: 3px;
  letter-spacing: 2px;
}

.compass-surface .mentor-relation {
  margin: 18px 0 8px;
  font-size: 12.5px;
  color: var(--mo-faint);
  font-family: var(--song);
  line-height: 1.7;
}

.compass-surface .mentor-msg {
  font-family: var(--kai);
  font-size: 17px;
  line-height: 2.1;
  color: var(--mo);
  white-space: pre-line;
  min-height: 2em;
  font-weight: 500;
}

.compass-surface .mentor-bless {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(93, 138, 147, .1);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--qing-deep);
  font-family: var(--kai);
  line-height: 1.7;
}

.compass-surface .mentor-evi {
  margin-top: 14px;
  font-size: 12px;
  color: var(--mo-faint);
}

.compass-surface .mentor-evi summary {
  cursor: pointer;
  color: var(--qing-deep);
}

.mentor-evidence-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  line-height: 1.8;
}

.mentor-evidence-list p {
  margin: 0;
}

.mentor-evidence-list strong {
  margin-right: 5px;
  color: var(--qing-deep);
}

.compass-surface .mentor-disc {
  margin-top: 11px;
  font-size: 11px;
  color: var(--mo-faint);
  line-height: 1.6;
}

.compass-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 6px 0;
}

#compass-svg,
#compass-svg2,
#relation-player-compass,
#relation-partner-compass,
#cultivation-network-svg {
  width: 100%;
  max-width: min(90vw, 390px);
  aspect-ratio: 1;
  display: block;
}

.ring-seg {
  transition: opacity .4s;
}

.ring-mid { opacity: .7; }
.ring-weak { opacity: .4; }

.el-label {
  font-family: var(--kai);
  font-size: 17px;
  font-weight: 700;
  fill: var(--xuan);
  text-anchor: middle;
  pointer-events: none;
}

.ink-line {
  stroke: var(--skin-line-ink, var(--line-ink, var(--mo)));
  fill: none;
}

.core-circle {
  fill: var(--skin-core-fill, var(--core-fill, #faf6ec));
  stroke: var(--skin-line-ink, var(--mo));
  stroke-width: 1.5;
}

.core-pulse {
  animation: corePulse 2.2s ease-in-out infinite;
  transform-origin: 200px 200px;
}

@keyframes corePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

.core-phase {
  font-family: var(--kai);
  font-size: 31px;
  font-weight: 700;
  fill: var(--mo);
  text-anchor: middle;
  pointer-events: none;
}

.core-line {
  font-size: 13px;
  fill: var(--mo-soft);
  text-anchor: middle;
  font-family: var(--song);
  pointer-events: none;
}

.core-time {
  font-size: 12px;
  fill: var(--mo-faint);
  text-anchor: middle;
  font-family: var(--song);
  pointer-events: none;
}

.core-hint {
  font-size: 13px;
  font-weight: 700;
  fill: var(--zhu);
  text-anchor: middle;
  font-family: var(--kai);
  pointer-events: none;
}

.zone-hit {
  fill: #faf6ec;
  stroke: var(--mo);
  stroke-width: 1.4;
  cursor: pointer;
  transition: .35s;
}

.compass-zone.zone-active .zone-hit {
  stroke: var(--qing-deep);
  stroke-width: 3;
  fill: rgba(93, 138, 147, .14);
}

.compass-zone.zone-dimmed {
  opacity: .4;
}

.compass-zone.zone-locked {
  opacity: .38;
}

.zone-num {
  font-family: var(--kai);
  font-size: 25px;
  font-weight: 700;
  fill: var(--mo);
  text-anchor: middle;
  pointer-events: none;
}

.zone-tag {
  font-family: var(--kai);
  font-size: 12px;
  font-weight: 700;
  fill: var(--zhu);
  text-anchor: middle;
  pointer-events: none;
}

.needle {
  transform-origin: 200px 200px;
  transition: transform .45s var(--ease);
  pointer-events: none;
}

.needle line {
  stroke: var(--mo);
}

.trig-text {
  font-size: 12px;
  fill: var(--accent-deep, var(--qing-deep));
  text-anchor: middle;
  font-family: var(--kai);
  font-weight: 700;
}

.choice-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  min-width: 0;
}

.compass-stage[data-step="4"].active {
  display: grid;
  align-content: start;
  gap: 12px;
}

.scene-scroll-card {
  width: min(100%, 560px);
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 2px auto 0;
  padding: clamp(18px, 4.8vw, 24px) clamp(16px, 5vw, 24px);
  color: var(--mo);
  text-align: left;
  letter-spacing: 0 !important;
  background:
    linear-gradient(90deg, rgba(78, 52, 32, .16), transparent 4%, transparent 96%, rgba(78, 52, 32, .16)),
    linear-gradient(180deg, rgba(255, 252, 245, .94), rgba(239, 232, 216, .9));
  border: 1px solid rgba(53, 107, 122, .24);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(38, 36, 32, .12), inset 0 0 0 1px rgba(255, 252, 245, .72);
}

.scene-scroll-card::before,
.scene-scroll-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.scene-scroll-card::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(255, 252, 245, .86), rgba(255, 252, 245, .78)),
    url("./skins/mochiqing/bg.jpg") center / cover no-repeat;
  opacity: .24;
  mix-blend-mode: multiply;
}

.scene-scroll-card::after {
  left: 10px;
  right: 10px;
  top: 9px;
  bottom: 9px;
  z-index: -1;
  border-top: 1px solid rgba(53, 107, 122, .22);
  border-bottom: 1px solid rgba(53, 107, 122, .18);
}

.scene-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 10px;
}

.scene-draw-label {
  color: var(--accent-deep, var(--qing-deep));
  font-family: var(--kai);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.scene-red-seal,
.cc-red-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--zhu);
  font-family: var(--kai);
  font-weight: 700;
  border: 1px solid rgba(179, 90, 71, .62);
  background: rgba(179, 90, 71, .07);
}

.scene-red-seal {
  width: 30px;
  height: 30px;
  font-size: 18px;
  transform: rotate(-7deg);
}

.scene-card-title {
  margin: 0 0 12px;
  color: var(--mo);
  font-family: var(--kai);
  font-size: clamp(21px, 6.2vw, 29px);
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.scene-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0 0 14px;
}

.scene-meta-pill {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px;
  background: rgba(255, 252, 246, .58);
  border: 1px solid rgba(53, 107, 122, .16);
  border-radius: 6px;
}

.scene-meta-pill small {
  color: var(--accent-deep, var(--qing-deep));
  font-family: var(--kai);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.scene-meta-pill b {
  min-width: 0;
  color: var(--mo-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scene-event-main {
  margin: 0;
  padding: 14px 0 8px;
  color: var(--mo);
  font-family: var(--song);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 650;
  line-height: 1.9;
  overflow-wrap: anywhere;
  border-top: 1px solid rgba(179, 90, 71, .18);
}

.scene-fate-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  color: var(--mo-faint);
  background: rgba(53, 107, 122, .08);
  border-left: 3px solid var(--accent, var(--qing));
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.scene-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 12px;
}

.scene-tag {
  padding: 5px 8px;
  color: var(--accent-deep, var(--qing-deep));
  background: rgba(93, 138, 147, .1);
  border: 1px solid rgba(93, 138, 147, .24);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.scene-card-clue {
  margin: 12px 0 0;
  color: rgba(58, 74, 85, .72);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.compass-choice-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--mo);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  appearance: none;
}

.cc-card-face {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 13px 12px;
  background:
    linear-gradient(180deg, rgba(255, 252, 245, .9), rgba(239, 232, 216, .84)),
    url("./skins/mochiqing/cardback.jpg") center / cover no-repeat;
  border: 1px solid rgba(53, 107, 122, .2);
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(38, 36, 32, .09), inset 0 0 0 1px rgba(255, 252, 245, .6);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.cc-card-face::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(38, 36, 32, .07);
  border-radius: 6px;
}

.cc-card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 15% 18%, rgba(179, 90, 71, .11), transparent 24%);
  opacity: .8;
}

.compass-choice-card:hover {
  transform: none;
  box-shadow: none;
}

.compass-choice-card:hover .cc-card-face {
  transform: translateY(-2px) rotate(.25deg);
  border-color: var(--accent, var(--qing));
  box-shadow: 0 14px 26px rgba(38, 36, 32, .14), 0 0 0 1px rgba(93, 138, 147, .12);
}

.compass-choice-card:active .cc-card-face {
  transform: translateY(0) scale(.99);
}

.compass-choice-card.sel {
  box-shadow: none;
  background: transparent;
}

.compass-choice-card.sel .cc-card-face {
  border-color: var(--accent-deep, var(--qing-deep));
  background:
    linear-gradient(180deg, rgba(255, 252, 245, .94), rgba(232, 239, 236, .88)),
    url("./skins/mochiqing/cardback.jpg") center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--accent-deep, var(--qing-deep)), 0 12px 24px rgba(53, 107, 122, .18);
}

.compass-choice-card.disabled {
  opacity: .5;
  cursor: default;
}

.compass-choice-card.disabled .cc-card-face,
.compass-choice-card:disabled .cc-card-face {
  transform: none;
  box-shadow: 0 6px 14px rgba(38, 36, 32, .06);
}

.cc-num {
  width: 34px;
  height: 42px;
  border-radius: 999px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kai);
  font-weight: 700;
  color: var(--xuan);
  background: linear-gradient(180deg, var(--accent, var(--qing)), var(--accent-deep, var(--qing-deep)));
  box-shadow: inset 0 0 0 1px rgba(255, 252, 245, .38), 0 5px 10px rgba(53, 107, 122, .2);
}

.cc-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cc-intent {
  color: var(--accent-deep, var(--qing-deep));
  font-family: var(--kai);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cc-title {
  font-family: var(--kai);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--mo);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cc-sub,
.cc-lock {
  font-size: 11.5px;
  color: var(--qing-deep);
  margin-top: 2px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cc-red-seal {
  width: 26px;
  height: 26px;
  justify-self: end;
  align-self: start;
  font-size: 15px;
  transform: rotate(8deg);
}

.story-title {
  font-family: var(--kai);
  font-size: 21px;
  font-weight: 700;
  color: var(--mo);
  letter-spacing: 1px;
  text-align: center;
}

.story-event {
  margin: 0;
  font-size: 14.5px;
  color: var(--mo-soft);
  line-height: 2.05;
  text-align: left;
  font-family: var(--song);
  overflow-wrap: anywhere;
}

.outcome-layers {
  width: min(100%, 680px);
  display: grid;
  gap: 10px;
  text-align: left;
}

.outcome-layer {
  border: 1px solid rgba(53, 107, 122, .18);
  border-radius: 8px;
  background: rgba(255, 252, 244, .68);
  box-shadow: 0 10px 28px rgba(38, 36, 32, .06);
  padding: 12px 14px;
  overflow: hidden;
}

.outcome-layer-tengod {
  border-left: 4px solid var(--qing);
}

.outcome-layer-youli {
  border-left: 4px solid var(--accent, var(--zhu));
}

.outcome-layer-return {
  border-left: 4px solid var(--zhu);
}

.outcome-layer-kicker {
  margin-bottom: 6px;
  font-family: var(--kai);
  font-size: 12px;
  color: var(--qing-deep);
  letter-spacing: 0;
}

.outcome-layer p {
  margin: 0;
  color: var(--mo-soft);
  font-family: var(--song);
  font-size: 13.5px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.outcome-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.outcome-link {
  min-height: 36px;
  border: 1px solid rgba(53, 107, 122, .28);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  background: var(--qing);
  font-family: var(--kai);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}

.outcome-link.ghost {
  color: var(--qing-deep);
  background: rgba(53, 107, 122, .08);
}

.outcome-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(53, 107, 122, .12);
}

.clue-copy {
  margin: 8px 0 0;
  color: var(--qing-deep);
  font-family: var(--kai);
  font-size: 12.5px;
  text-align: center;
}

.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0;
}

.chip {
  font-size: 11px;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .1);
  border: 1px solid rgba(93, 138, 147, .28);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--kai);
}

.lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.line-bar {
  display: grid;
  grid-template-columns: 40px 1fr 46px;
  align-items: center;
  gap: 10px;
}

.line-bar .lab {
  font-size: 13px;
  color: var(--mo);
  font-family: var(--kai);
  font-weight: 700;
}

.line-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(38, 36, 32, .1);
  overflow: hidden;
}

.line-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .7s var(--ease);
}

.line-num {
  font-size: 13px;
  text-align: right;
  color: var(--mo-soft);
  font-variant-numeric: tabular-nums;
}

.line-bar.main .lab {
  color: var(--qing-deep);
}

.up-chip {
  color: var(--qing-green);
  font-size: 11px;
  margin-left: 3px;
}

.mentor-reply {
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 8px;
  text-align: left;
  background: rgba(111, 154, 120, .12);
  border: 1px solid rgba(111, 154, 120, .3);
}

.reply-who {
  font-family: var(--kai);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--qing-green);
}

.reply-text {
  font-family: var(--kai);
  font-size: 15px;
  color: var(--mo);
  line-height: 1.9;
  margin-top: 5px;
}

.compass-surface .probability-panel {
  width: 100%;
  margin: 0;
  color: var(--mo);
  background: rgba(250, 246, 236, .74);
  border-color: rgba(93, 138, 147, .28);
}

.compass-surface .probability-header strong {
  color: var(--mo);
}

.compass-surface .probability-badge {
  background: var(--qing-deep);
}

.vow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  width: 100%;
}

.vow-item {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px 12px;
  border: 1px solid rgba(38, 36, 32, .16);
  border-radius: 8px;
  font-family: var(--kai);
  color: var(--mo-soft);
  cursor: pointer;
  transition: .25s;
  background: #faf6ec;
  text-align: left;
}

.vow-item strong {
  color: var(--mo);
  font-size: 15px;
}

.vow-item span {
  font-family: var(--song);
  font-size: 12px;
  line-height: 1.6;
}

.vow-item.recommend {
  border-color: rgba(93, 138, 147, .38);
}

.vow-item.sel {
  background: rgba(93, 138, 147, .14);
  border-color: var(--qing-deep);
  color: var(--mo);
}

.echo-card {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  background: linear-gradient(165deg, #faf6ec, #f0e9da);
  border: 1px solid rgba(38, 36, 32, .14);
  box-shadow: 0 12px 32px rgba(38, 36, 32, .1);
}

.growth {
  font-size: 13px;
  color: var(--qing-deep);
  margin-top: 12px;
  font-family: var(--kai);
  line-height: 1.6;
}

h2.sec {
  font-family: var(--kai);
  font-size: 18px;
  font-weight: 700;
  color: var(--mo);
  margin: 0 0 8px;
  letter-spacing: 1px;
}

.ending-summary {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}

.ending-summary p {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid rgba(93, 138, 147, .42);
  color: var(--mo-soft);
  font-size: 13px;
  line-height: 1.7;
}

.ending-summary strong {
  display: block;
  color: var(--mo);
  font-family: var(--kai);
}

.run-reward {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .10);
  border: 1px solid rgba(93, 138, 147, .26);
  border-radius: 8px;
  font-family: var(--kai);
  font-size: 12px;
}

.run-reward strong {
  color: var(--mo);
  font-size: 15px;
}

.compass-feedback {
  width: 100%;
  display: grid;
  gap: 9px;
  padding: 14px;
  background: rgba(250, 246, 236, .72);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 10px;
}

.compass-feedback-rating {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.compass-feedback-rating button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(93, 138, 147, .32);
  color: var(--qing-deep);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

.compass-feedback-rating button.active {
  color: var(--xuan);
  background: var(--qing-deep);
}

.compass-feedback textarea {
  min-height: 70px;
  padding: 10px;
  resize: vertical;
}

.compass-feedback .feedback-analysis-summary {
  min-height: 20px;
  color: var(--mo-soft);
  font-size: 12px;
  line-height: 1.5;
}

.relation-entry {
  width: min(100%, 280px);
}

.relation-input-col {
  min-height: auto;
  padding-top: 12px;
}

.relation-form {
  gap: 12px;
}

.relation-form label {
  overflow-wrap: anywhere;
}

.relation-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.relation-privacy {
  border-color: rgba(179, 90, 71, .26);
  background: rgba(250, 246, 236, .78);
}

.relation-result {
  display: grid;
  gap: 13px;
  padding-bottom: 12px;
}

.relation-dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: center;
}

.relation-disc {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.relation-disc > span {
  color: var(--qing-deep);
  font-family: var(--kai);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.relation-disc-small {
  max-width: 290px;
}

.relation-link {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: var(--qing-deep);
  font-family: var(--kai);
  font-size: 12px;
  font-weight: 700;
}

.relation-link::before,
.relation-link span {
  content: "";
  display: block;
  height: 1px;
  min-width: 0;
  background: linear-gradient(90deg, transparent, rgba(53, 107, 122, .72));
}

.relation-link span {
  background: linear-gradient(90deg, rgba(53, 107, 122, .72), transparent);
}

.relation-link::before {
  order: 1;
}

.relation-link strong {
  order: 2;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.relation-link span {
  order: 3;
}

.relation-panel {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 14px;
  background: rgba(250, 246, 236, .72);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
}

.relation-climate {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.relation-climate .story-event {
  grid-column: 1 / -1;
}

.relation-confidence {
  --p: 0%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  color: var(--qing-deep);
  background:
    radial-gradient(circle at center, #faf6ec 58%, transparent 59%),
    conic-gradient(var(--qing-deep) var(--p), rgba(93, 138, 147, .16) 0);
  font-family: var(--kai);
  font-weight: 700;
}

.relation-confidence span {
  font-size: 18px;
  line-height: 1;
}

.relation-confidence small {
  font-size: 10px;
  color: var(--mo-faint);
}

.relation-list,
.relation-task-list {
  display: grid;
  gap: 8px;
}

.relation-list-item {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border-left: 3px solid rgba(93, 138, 147, .42);
  background: rgba(244, 239, 228, .5);
  border-radius: 6px;
}

.relation-list-item strong {
  color: var(--mo);
  font-family: var(--kai);
  font-size: 14px;
}

.relation-list-item span,
.relation-list-item p,
.relation-empty {
  margin: 0;
  color: var(--mo-soft);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.relation-task {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 12px;
  color: var(--mo-soft);
  background: #faf6ec;
  border: 1px solid rgba(38, 36, 32, .14);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.relation-task.done {
  color: var(--mo);
  background: rgba(93, 138, 147, .12);
  border-color: rgba(53, 107, 122, .48);
}

.relation-task-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--qing-deep);
  border: 1px solid rgba(93, 138, 147, .38);
  border-radius: 50%;
  font-weight: 700;
}

.relation-task strong,
.relation-task small,
.relation-task em {
  display: block;
  overflow-wrap: anywhere;
}

.relation-task strong {
  color: var(--mo);
  font-family: var(--kai);
  font-size: 14px;
}

.relation-task small {
  margin-top: 2px;
  color: var(--qing-deep);
  font-size: 11px;
  font-style: normal;
}

.relation-task em {
  margin-top: 5px;
  color: var(--mo-soft);
  font-size: 12px;
  font-style: normal;
  line-height: 1.65;
}

.relation-redline {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 12px;
  color: var(--zhu);
  background: rgba(179, 90, 71, .08);
  border: 1px solid rgba(179, 90, 71, .28);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.relation-redline button {
  justify-self: start;
  min-height: 34px;
  color: var(--zhu);
  background: transparent;
  border: 1px solid rgba(179, 90, 71, .42);
  border-radius: 6px;
  cursor: pointer;
  padding: 0 12px;
  font-family: var(--kai);
  font-weight: 700;
}

.guanxi-net-page {
  display: grid;
  gap: 13px;
  padding-bottom: 12px;
}

.guanxi-net-hero,
.guanxi-net-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(93, 138, 147, .13), rgba(250, 246, 236, .78)),
    rgba(250, 246, 236, .82);
  border: 1px solid rgba(53, 107, 122, .24);
  border-radius: 8px;
}

.guanxi-net-hero p,
.guanxi-net-panel h3 {
  margin: 0;
}

.guanxi-net-hero > p:last-child {
  color: var(--mo-soft);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.guanxi-net-head,
.guanxi-net-actions,
.guanxi-card {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guanxi-net-head {
  justify-content: space-between;
}

.guanxi-net-panel h3 {
  color: var(--mo);
  font-family: var(--kai);
  font-size: 17px;
}

.guanxi-net-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.guanxi-count {
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .12);
  border: 1px solid rgba(93, 138, 147, .25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.guanxi-net-actions button,
.guanxi-delete {
  min-height: 32px;
  padding: 0 10px;
  color: var(--qing-deep);
  background: rgba(250, 246, 236, .75);
  border: 1px solid rgba(53, 107, 122, .32);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--kai);
  font-weight: 700;
}

.guanxi-net-actions button:disabled {
  cursor: default;
  opacity: .48;
}

.guanxi-list {
  display: grid;
  gap: 9px;
}

.guanxi-card {
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 11px;
  color: var(--mo);
  background: rgba(244, 239, 228, .72);
  border: 1px solid rgba(38, 36, 32, .12);
  border-left: 3px solid rgba(53, 107, 122, .55);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.guanxi-card:focus-visible {
  outline: 2px solid rgba(53, 107, 122, .62);
  outline-offset: 2px;
}

.guanxi-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.guanxi-card-title,
.guanxi-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.guanxi-card-title strong {
  color: var(--mo);
  font-family: var(--kai);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.guanxi-card-title span,
.guanxi-card-meta span {
  color: var(--qing-deep);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.guanxi-card-meta span {
  color: var(--mo-soft);
}

.guanxi-card small,
.guanxi-empty {
  color: var(--mo-faint);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.guanxi-empty {
  margin: 0;
  padding: 14px;
  background: rgba(244, 239, 228, .56);
  border: 1px dashed rgba(53, 107, 122, .32);
  border-radius: 8px;
}

.guanxi-delete {
  flex: 0 0 auto;
  color: var(--zhu);
  border-color: rgba(179, 90, 71, .32);
}

.relation-partner-dot {
  opacity: .82;
  stroke: rgba(244, 239, 228, .75);
  stroke-width: 1;
}

.relation-dot-label {
  fill: var(--xuan);
  font-family: var(--kai);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.relation-partner-core {
  fill: rgba(250, 246, 236, .92);
}

.cultivation-page {
  display: grid;
  gap: 13px;
  padding-bottom: 14px;
}

.cultivation-starline,
.cultivation-network-panel,
.cultivation-detail {
  width: 100%;
  padding: 14px;
  background: rgba(250, 246, 236, .72);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
}

.cultivation-starline {
  display: grid;
  gap: 9px;
}

.cultivation-star-head,
.cultivation-head,
.cultivation-detail-head,
.cultivation-exp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cultivation-star-head {
  justify-content: flex-start;
  align-items: flex-start;
}

.cultivation-tone-dot {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  flex: 0 0 12px;
  background: var(--qing);
  box-shadow: 0 0 0 4px rgba(93, 138, 147, .12);
}

.tone-good .cultivation-tone-dot {
  background: var(--qing-green);
  box-shadow: 0 0 0 4px rgba(111, 154, 120, .14);
}

.tone-flat .cultivation-tone-dot {
  background: var(--zhe);
  box-shadow: 0 0 0 4px rgba(168, 130, 78, .13);
}

.tone-alert .cultivation-tone-dot {
  background: var(--zhu);
  box-shadow: 0 0 0 4px rgba(179, 90, 71, .12);
}

.cultivation-one-line,
.cultivation-yi-ji {
  margin: 0;
  color: var(--mo-soft);
  font-size: 12.5px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.cultivation-yi-ji {
  display: grid;
  gap: 6px;
}

.cultivation-yi-ji span {
  display: block;
  padding-left: 10px;
  border-left: 3px solid rgba(93, 138, 147, .35);
}

.cultivation-yi-ji b {
  margin-right: 6px;
  color: var(--qing-deep);
  font-family: var(--kai);
}

.cultivation-network-panel {
  display: grid;
  gap: 10px;
  overflow: visible;
}

.cultivation-head {
  align-items: flex-start;
}

.cultivation-feedback {
  min-height: 22px;
  max-width: 45%;
  color: var(--qing-deep);
  font-family: var(--kai);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.cultivation-svg-wrap {
  width: 100%;
  display: grid;
  justify-items: center;
  overflow: visible;
}

#cultivation-network-svg {
  max-width: min(94vw, 386px);
  overflow: visible;
}

.cultivation-core {
  stroke: var(--line-ink, var(--qing-deep));
  fill: var(--core-fill, rgba(250, 246, 236, .96));
}

/* 水墨青保留养成网原有青墨描边与半透宣纸圆心；付费皮肤使用统一 core token。 */
body[data-skin="ink-green"] .cultivation-core {
  stroke: var(--qing-deep);
  fill: rgba(250, 246, 236, .96);
}

.tengod-link {
  stroke: rgba(53, 107, 122, .46);
  stroke-width: 1.35;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.tengod-link.rel-same { stroke-dasharray: none; }
.tengod-link.rel-out { stroke-dasharray: 4 5; }
.tengod-link.rel-in { stroke-dasharray: 8 4; }
.tengod-link.rel-control-out { stroke-dasharray: 2 5; stroke: rgba(168, 130, 78, .5); }
.tengod-link.rel-control-in { stroke-dasharray: 1 6; stroke: rgba(179, 90, 71, .42); }

.tengod-node {
  cursor: pointer;
  outline: none;
}

.tengod-node-aura {
  fill: none;
  stroke: var(--node-glow, var(--qing));
  stroke-width: 2;
  opacity: 0;
}

.tengod-node.today .tengod-node-aura,
.tengod-node.selected .tengod-node-aura {
  opacity: .72;
}

.tengod-node.today .tengod-node-aura {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(93, 138, 147, .38));
}

.tengod-node-seal {
  fill: var(--node-color, var(--qing));
  stroke: var(--node-seal, rgba(244, 239, 228, .9));
  stroke-width: 1.5;
  transition: .25s;
}

.tengod-node-portrait {
  pointer-events: none;
}

.tengod-node-portrait-ring {
  fill: none;
  stroke: rgba(250, 246, 236, .88);
  stroke-width: 1.35;
  pointer-events: none;
}

.tengod-node-portrait-fallback {
  fill: rgba(250, 246, 236, .76);
  stroke: rgba(38, 36, 32, .14);
  stroke-width: 1;
  pointer-events: none;
}

.tengod-node-nameplate {
  fill: rgba(38, 36, 32, .72);
  stroke: rgba(250, 246, 236, .5);
  stroke-width: .55;
  pointer-events: none;
}

.tengod-node:hover .tengod-node-seal,
.tengod-node:focus .tengod-node-seal,
.tengod-node.selected .tengod-node-seal {
  stroke: var(--mo);
  stroke-width: 1.7;
}

.tengod-name,
.tengod-tag,
.tengod-lv-name,
.tengod-today-badge text {
  text-anchor: middle;
  pointer-events: none;
  font-family: var(--kai);
  paint-order: stroke;
  stroke: rgba(38, 36, 32, .26);
  stroke-width: .55px;
}

.tengod-name {
  fill: var(--xuan);
  font-size: 14px;
  font-weight: 700;
}

.tengod-node-portrait-name {
  fill: rgba(255, 252, 246, .97);
  font-size: 11px;
  stroke: rgba(38, 36, 32, .6);
  stroke-width: .7px;
}

.tengod-tag {
  fill: rgba(250, 246, 236, .92);
  font-size: 9.5px;
}

.tengod-lv-name {
  fill: rgba(250, 246, 236, .86);
  font-size: 8.5px;
}

.tengod-lv-dot {
  fill: rgba(250, 246, 236, .35);
  stroke: rgba(38, 36, 32, .18);
  stroke-width: .5;
}

.tengod-lv-dot.on {
  fill: var(--xuan);
}

.tengod-today-badge rect {
  fill: rgba(250, 246, 236, .95);
  stroke: rgba(93, 138, 147, .55);
}

.tengod-today-badge text {
  fill: var(--qing-deep);
  stroke: none;
  font-size: 9px;
  font-weight: 700;
}

.tengod-node.gain-flash .tengod-node-aura {
  animation: tenGodGainFlash 1.3s ease-out;
}

@keyframes tenGodGainFlash {
  0% { opacity: 1; stroke-width: 7; }
  100% { opacity: .2; stroke-width: 2; }
}

.cultivation-detail {
  gap: 12px;
}

.shishen-portrait {
  width: clamp(96px, 16vw, 120px);
  max-width: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  justify-self: center;
}

.cultivation-shishen-portrait,
.baike-shishen-portrait {
  margin: 0 auto 3px;
}

.shishen-portrait-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 7px 8px;
  background:
    linear-gradient(90deg, rgba(91, 61, 33, .96), rgba(176, 133, 78, .96) 20%, rgba(95, 66, 38, .98) 50%, rgba(176, 133, 78, .94) 80%, rgba(91, 61, 33, .96)),
    rgba(111, 78, 45, .92);
  border: 1px solid rgba(66, 44, 25, .45);
  border-radius: 6px;
  box-shadow:
    0 10px 22px rgba(38, 36, 32, .16),
    inset 0 0 0 1px rgba(250, 246, 236, .28);
}

.shishen-portrait-frame::before,
.shishen-portrait-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 1;
  width: calc(100% + 20px);
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(74, 48, 25, .98), rgba(190, 146, 86, .98) 22%, rgba(84, 54, 30, 1) 52%, rgba(190, 146, 86, .96) 78%, rgba(74, 48, 25, .98));
  border: 1px solid rgba(66, 44, 25, .42);
  box-shadow: 0 4px 9px rgba(38, 36, 32, .16);
  transform: translateX(-50%);
}

.shishen-portrait-frame::before {
  top: -5px;
}

.shishen-portrait-frame::after {
  bottom: -5px;
}

.shishen-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .92), rgba(244, 239, 228, .9));
  border: 1px solid rgba(250, 246, 236, .88);
  border-radius: 4px;
  outline: 2px solid rgba(255, 252, 246, .62);
  outline-offset: -5px;
  box-shadow:
    inset 0 0 18px rgba(53, 107, 122, .13),
    0 0 0 1px rgba(53, 107, 122, .18);
}

.cultivation-detail-head {
  align-items: flex-start;
}

.cultivation-level-pill {
  flex: 0 0 auto;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .1);
  border: 1px solid rgba(93, 138, 147, .28);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--kai);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cultivation-exp {
  display: grid;
  gap: 6px;
}

.cultivation-exp-top {
  color: var(--mo-faint);
  font-size: 12px;
  font-family: var(--kai);
}

#cultivation-exp-fill {
  background: var(--qing-deep);
}

.cultivation-level-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 7px;
}

.cultivation-level-steps span {
  min-width: 0;
  padding: 8px 7px;
  color: var(--mo-soft);
  background: rgba(244, 239, 228, .62);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cultivation-level-steps b {
  display: block;
  color: var(--qing-deep);
  font-family: var(--kai);
  font-size: 11px;
}

.cultivation-level-steps span.done {
  border-color: rgba(93, 138, 147, .26);
  background: rgba(93, 138, 147, .08);
}

.cultivation-level-steps span.active {
  color: var(--mo);
  border-color: rgba(53, 107, 122, .52);
  background: rgba(93, 138, 147, .14);
}

.cultivation-memory {
  display: grid;
  gap: 8px;
}

.cultivation-memory strong {
  color: var(--mo);
  font-family: var(--kai);
}

.cultivation-memory-list {
  display: grid;
  gap: 7px;
}

.cultivation-memory-list .relation-list-item {
  margin: 0;
}

.cultivation-privacy {
  border-color: rgba(93, 138, 147, .22);
}

.youli-page {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 13px;
  padding-bottom: 16px;
  overflow-x: hidden;
}

.youli-hero,
.youli-panel {
  width: 100%;
  min-width: 0;
  padding: 14px;
  color: var(--mo);
  background: rgba(250, 246, 236, .76);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
}

.youli-hero {
  background:
    radial-gradient(90% 90% at 86% 0%, rgba(93, 138, 147, .18), transparent 56%),
    rgba(250, 246, 236, .82);
}

.youli-hero p,
.youli-lead-panel p {
  margin: 0;
  color: var(--mo-soft);
  font-size: 13px;
  line-height: 1.8;
}

.youli-panel-head,
.youli-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.youli-panel-head {
  margin-bottom: 12px;
}

.youli-panel h3,
.youli-section-head strong {
  margin: 0;
  color: var(--mo);
  font-family: var(--kai);
  font-size: 18px;
  line-height: 1.35;
}

.youli-section-head small,
.youli-day-pill,
.youli-share-status,
.youli-source-note {
  color: var(--mo-faint);
  font-size: 12px;
  line-height: 1.55;
}

.youli-day-pill {
  flex: 0 0 auto;
  padding: 4px 10px;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .1);
  border: 1px solid rgba(93, 138, 147, .25);
  border-radius: 999px;
  font-family: var(--kai);
  white-space: nowrap;
}

.youli-section {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(38, 36, 32, .09);
}

.youli-section.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.youli-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.youli-color-swatch,
.youli-avoid-chip,
.youli-tag,
.youli-number-seal,
.youli-yiji-row {
  min-width: 0;
  color: var(--mo);
  background: rgba(255, 252, 246, .86);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
}

.youli-color-swatch {
  display: grid;
  gap: 7px;
  min-height: 82px;
  padding: 9px;
}

.youli-color-swatch i {
  display: block;
  width: 100%;
  height: 24px;
  border-radius: 6px;
  background: var(--youli-color, var(--qing));
  box-shadow: inset 0 0 0 1px rgba(255, 252, 246, .55);
}

.youli-color-swatch span,
.youli-number-seal span {
  font-family: var(--kai);
  font-size: 17px;
  font-weight: 700;
}

.youli-color-swatch small,
.youli-tag small,
.youli-number-seal small,
.youli-yiji-row small {
  display: block;
  margin-top: 2px;
  color: var(--mo-faint);
  font-size: 11px;
  line-height: 1.35;
}

.youli-avoid-grid,
.youli-tag-row,
.youli-number-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.youli-avoid-grid span {
  align-self: center;
  color: var(--mo-faint);
  font-size: 12px;
}

.youli-avoid-chip {
  padding: 6px 9px;
  color: rgba(90, 86, 78, .78);
  border-style: dashed;
  opacity: .78;
}

.youli-direction-compass {
  display: grid;
  justify-items: center;
  overflow: hidden;
}

.youli-direction-compass svg {
  width: min(100%, 248px);
  height: auto;
  display: block;
}

.youli-compass-ring {
  fill: none;
  stroke: rgba(53, 107, 122, .38);
  stroke-width: 2;
}

.youli-compass-ring.faint {
  stroke-width: 1;
  opacity: .65;
}

.youli-dir-point circle {
  fill: rgba(244, 239, 228, .92);
  stroke: rgba(38, 36, 32, .14);
}

.youli-dir-point text {
  text-anchor: middle;
  fill: var(--mo-soft);
  font-family: var(--kai);
  font-size: 12px;
  pointer-events: none;
}

.youli-dir-point.active circle {
  fill: var(--qing);
  stroke: var(--qing-deep);
}

.youli-dir-point.active text {
  fill: var(--xuan);
  font-weight: 700;
}

.youli-dir-point.center circle {
  fill: rgba(168, 130, 78, .12);
}

.youli-dir-point.center.active circle {
  fill: var(--zhe);
}

.youli-needle {
  fill: rgba(179, 90, 71, .2);
  stroke: rgba(179, 90, 71, .55);
  stroke-width: 1.5;
}

.youli-tag {
  padding: 7px 10px;
  color: var(--qing-deep);
}

.youli-number-seal {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 48px;
  padding: 6px;
  color: var(--xuan);
  background: var(--youli-color, var(--zhu));
  border-color: rgba(255, 252, 246, .75);
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 5px 12px rgba(38, 36, 32, .13);
}

.youli-number-seal small {
  color: rgba(255, 252, 246, .78);
  margin: 0;
}

.youli-yiji {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.youli-yiji-col {
  display: grid;
  gap: 7px;
}

.youli-yiji-col b {
  color: var(--qing-deep);
  font-family: var(--kai);
}

.youli-yiji-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  line-height: 1.55;
}

.youli-yiji-row.yi {
  border-color: rgba(93, 138, 147, .32);
  background: rgba(93, 138, 147, .08);
}

.youli-yiji-row.ji {
  border-color: rgba(168, 130, 78, .32);
  background: rgba(168, 130, 78, .08);
}

.youli-source-note {
  min-height: 36px;
  padding: 9px 10px;
  background: rgba(244, 239, 228, .7);
  border: 1px dashed rgba(53, 107, 122, .28);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.youli-kaitian-panel {
  overflow-x: hidden;
}

.youli-kaitian-slot {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.youli-kaitian-slot .bazi-kt {
  max-width: 100%;
}

.youli-icon-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  color: var(--xuan);
  background: var(--qing-deep);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--kai);
}

.youli-share-preview {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 10px;
  background: rgba(38, 36, 32, .05);
  border: 1px solid rgba(38, 36, 32, .08);
  border-radius: 8px;
  overflow: hidden;
}

.youli-share-preview svg {
  display: block;
  width: min(100%, 260px);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(38, 36, 32, .12);
}

.youli-share-status[data-tone="warn"] {
  color: var(--zhu);
}

.youli-lead-panel {
  display: grid;
  gap: 12px;
}

.youli-lead-panel .cta {
  width: 100%;
  padding-left: 18px;
  padding-right: 18px;
  letter-spacing: 3px;
}

.youli-qiwei-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(38, 36, 32, .42);
  backdrop-filter: blur(2px);
}

.youli-qiwei-panel[hidden] {
  display: none;
}

.youli-qiwei-card {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 320px);
  padding: 18px;
  text-align: center;
  color: var(--mo);
  background: var(--xuan);
  border: 1px solid rgba(53, 107, 122, .24);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}

.youli-qiwei-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: var(--mo-soft);
  background: rgba(38, 36, 32, .06);
  cursor: pointer;
}

.youli-qr-placeholder {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  margin: 12px auto 0;
  color: var(--qing-deep);
  background:
    linear-gradient(90deg, rgba(53, 107, 122, .14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(53, 107, 122, .14) 1px, transparent 1px),
    rgba(93, 138, 147, .08);
  background-size: 18px 18px;
  border: 1px dashed rgba(53, 107, 122, .48);
  border-radius: 8px;
  font-family: var(--kai);
}

.baike-page {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding-bottom: 28px;
}

.baike-hero,
.baike-panel {
  min-width: 0;
  padding: 16px;
  color: var(--mo);
  background: rgba(255, 252, 246, .76);
  border: 1px solid rgba(53, 107, 122, .18);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(38, 36, 32, .08);
}

.baike-hero {
  background:
    linear-gradient(135deg, rgba(93, 138, 147, .14), rgba(255, 252, 246, .82)),
    rgba(255, 252, 246, .78);
}

.baike-hero p,
.baike-empty,
.baike-result-meta {
  margin: 0;
  color: var(--mo-soft);
  line-height: 1.75;
}

.baike-panel-head,
.baike-card-top,
.baike-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.baike-panel-head h3,
.baike-detail-head h3 {
  margin: 2px 0 0;
  color: var(--qing-deep);
  font-family: var(--kai);
  letter-spacing: 2px;
}

.baike-total-progress {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: var(--xuan);
  background: var(--qing-deep);
  border-radius: 999px;
  font-family: var(--kai);
  font-weight: 700;
}

.baike-achievements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.baike-achievement {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  background: rgba(93, 138, 147, .07);
  border: 1px solid rgba(53, 107, 122, .16);
  border-radius: 8px;
}

.baike-achievement span,
.baike-achievement strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.baike-achievement span {
  color: var(--mo-soft);
  font-size: 12px;
}

.baike-achievement strong {
  color: var(--mo);
  font-family: var(--kai);
  font-size: 17px;
}

.baike-achievement em {
  color: var(--mo-faint);
  font-size: 11px;
  font-style: normal;
}

.baike-achievement.complete {
  border-color: rgba(168, 130, 78, .38);
  background: rgba(168, 130, 78, .10);
}

.baike-achievement.complete em {
  color: var(--zhe);
  font-weight: 700;
}

.baike-search {
  display: grid;
  gap: 6px;
}

.baike-search span {
  color: var(--qing-deep);
  font-family: var(--kai);
  font-weight: 700;
}

.baike-search input {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  color: var(--mo);
  background: rgba(244, 239, 228, .72);
  border: 1px solid rgba(53, 107, 122, .24);
  border-radius: 8px;
  outline: none;
}

.baike-search input:focus {
  border-color: var(--qing);
  box-shadow: 0 0 0 3px rgba(93, 138, 147, .14);
}

.baike-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.baike-tabs button {
  flex: 1 1 70px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 9px;
  color: var(--qing-deep);
  background: rgba(244, 239, 228, .64);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 999px;
  cursor: pointer;
}

.baike-tabs button.active {
  color: var(--xuan);
  background: linear-gradient(180deg, var(--qing), var(--qing-deep));
  border-color: transparent;
}

.baike-tabs small {
  opacity: .72;
}

.baike-result-meta {
  margin-top: 10px;
  font-size: 12px;
}

.baike-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.baike-card {
  min-width: 0;
  min-height: 128px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  text-align: left;
  color: var(--mo);
  background: rgba(255, 252, 246, .84);
  border: 1px solid rgba(38, 36, 32, .12);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(38, 36, 32, .06);
}

.baike-card:hover,
.baike-card.selected {
  border-color: rgba(53, 107, 122, .45);
  box-shadow: 0 10px 24px rgba(53, 107, 122, .14);
  transform: translateY(-1px);
}

.baike-card.unseen {
  opacity: .66;
  filter: saturate(.84);
}

.baike-card.locked {
  opacity: 1;
  align-content: center;
  background:
    linear-gradient(180deg, rgba(244, 239, 228, .82), rgba(255, 252, 246, .76)),
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--baike-accent, var(--qing)) 15%, transparent), transparent 38%);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--baike-accent, var(--qing)) 36%, rgba(38, 36, 32, .12));
  filter: none;
}

.baike-card.seen {
  border-color: rgba(93, 138, 147, .42);
  background:
    linear-gradient(180deg, rgba(93, 138, 147, .10), rgba(255, 252, 246, .86)),
    rgba(255, 252, 246, .84);
}

.baike-card-top em,
.baike-card-top i,
.baike-detail-head span,
.baike-review-note {
  font-style: normal;
  font-size: 11px;
}

.baike-card-top em,
.baike-detail-head span {
  color: var(--qing-deep);
}

.baike-card-top i {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: var(--mo-faint);
  background: rgba(38, 36, 32, .05);
  border-radius: 999px;
}

.baike-card.seen .baike-card-top i {
  color: var(--xuan);
  background: var(--qing);
}

.baike-card strong {
  min-width: 0;
  color: var(--mo);
  font-family: var(--kai);
  font-size: 19px;
  overflow-wrap: anywhere;
}

.baike-card.locked .baike-lock-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  color: var(--baike-accent, var(--qing));
  font-family: Georgia, serif;
  font-size: 42px;
  line-height: 1;
  background: rgba(255, 252, 246, .72);
  border: 1px solid color-mix(in srgb, var(--baike-accent, var(--qing)) 34%, rgba(53, 107, 122, .16));
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(53, 107, 122, .08);
}

.baike-card p {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  color: var(--mo-soft);
  font-size: 13px;
  line-height: 1.55;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.baike-detail {
  display: grid;
  gap: 10px;
}

.baike-detail-head {
  align-items: flex-start;
}

.baike-detail-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.baike-detail-copy {
  margin: 0;
  color: var(--mo-soft);
  line-height: 1.85;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.baike-locked-detail {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  color: var(--mo-soft);
  background:
    linear-gradient(180deg, rgba(244, 239, 228, .82), rgba(255, 252, 246, .74)),
    linear-gradient(90deg, color-mix(in srgb, var(--baike-accent, var(--qing)) 14%, transparent), transparent);
  border: 1px dashed color-mix(in srgb, var(--baike-accent, var(--qing)) 38%, rgba(53, 107, 122, .18));
  border-radius: 8px;
}

.baike-locked-detail .baike-lock-mark {
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--baike-accent, var(--qing));
  font-family: Georgia, serif;
  font-size: 38px;
  line-height: 1;
  background: rgba(255, 252, 246, .76);
  border: 1px solid color-mix(in srgb, var(--baike-accent, var(--qing)) 32%, rgba(53, 107, 122, .14));
  border-radius: 50%;
}

.baike-locked-detail div {
  min-width: 0;
}

.baike-locked-detail span {
  color: var(--qing-deep);
  font-size: 12px;
  font-weight: 700;
}

.baike-locked-detail p {
  margin: 4px 0 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.baike-review-note {
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 5px 8px;
  color: var(--zhe);
  background: rgba(168, 130, 78, .10);
  border: 1px dashed rgba(168, 130, 78, .38);
  border-radius: 999px;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .compass-body {
    --stage-pad-x: clamp(16px, 4.8vw, 18px);
    --hub-world-size: clamp(138px, 42vw, 168px);
  }

  .compass-stage {
    padding-left: var(--stage-pad-x);
    padding-right: var(--stage-pad-x);
  }

  .compass-surface .hero-copy {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .compass-surface .cta {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    letter-spacing: clamp(2px, 1.25vw, 5px);
  }

  .outcome-link-row {
    display: grid;
  }

  .outcome-link {
    width: 100%;
  }

  .hub-hero {
    display: grid;
  }

  .hub-actions,
  .hub-actions .cta.ghost {
    width: 100%;
  }

  .compass-form-row.date-row,
  .compass-form-row.location-row,
  .compass-mini-summary,
  .hub-module-grid,
  .discover-grid,
  .wellness-grid,
  .wellness-achievements,
  .relation-two-col,
  .relation-climate,
  .youli-section.two-col,
  .youli-yiji {
    grid-template-columns: 1fr;
  }

  .discover-card {
    min-height: 112px;
  }

  .profile-skin-switcher-slot .bazi-skin-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .youli-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .youli-panel-head {
    flex-direction: column;
  }

  .wellness-panel-head,
  .wellness-task-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .wellness-task-actions .cta {
    width: 100%;
  }

  .baike-hero,
  .baike-panel {
    padding: 13px;
  }

  .baike-achievements,
  .baike-grid {
    grid-template-columns: 1fr;
  }

  .baike-time-hook {
    font-size: 12px;
    line-height: 1.45;
  }

  .baike-locked-detail {
    align-items: flex-start;
  }

  .baike-panel-head,
  .baike-detail-head,
  .guanxi-net-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .youli-icon-btn,
  .youli-day-pill,
  .baike-total-progress {
    align-self: flex-start;
  }

  .relation-confidence {
    justify-self: start;
  }

  .guanxi-net-actions {
    justify-content: flex-start;
  }

  .guanxi-card {
    align-items: stretch;
    flex-direction: column;
  }

  .guanxi-delete {
    align-self: flex-start;
  }

  .cultivation-star-head,
  .cultivation-head,
  .cultivation-detail-head,
  .cultivation-exp-top {
    align-items: flex-start;
  }

  .shishen-portrait {
    width: clamp(92px, 34vw, 112px);
  }

  .cultivation-feedback {
    max-width: 100%;
    text-align: left;
  }

  .onboarding-layer {
    justify-content: center;
    padding: 12px;
  }

  .onboarding-card {
    width: 100%;
  }

  .compass-surface .mentor-rail {
    border-radius: 14px;
    align-items: flex-start;
  }

  .line-bar {
    grid-template-columns: 40px 1fr 42px;
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .compass-body {
    --stage-chrome: 66px;
    --stage-pad-x: 12px;
    --stage-pad-y: 4px;
    --stage-pad-bottom: 22px;
    --topbar-pad-x: 12px;
    --topbar-pad-y: 4px;
    --topbar-pad-bottom: 8px;
    --hub-world-size: clamp(124px, 39vw, 148px);
    --window-inset: 6px;
    --game-window-body-pad: 10px;
  }

  .compass-surface .ribbon {
    padding: 10px 8px 2px;
    font-size: clamp(9px, 2.8vw, 10px);
    letter-spacing: clamp(2px, 1vw, 3.5px);
  }

  .compass-surface .topbar {
    gap: 8px;
    font-size: 11px;
  }

  .compass-surface .back,
  .compass-surface .shichen {
    min-width: 0;
    font-size: 11px;
  }

  .compass-surface .dots {
    gap: 7px;
  }

  .compass-surface .hero-copy {
    font-size: clamp(20px, 6vw, 22px);
    line-height: 1.3;
    letter-spacing: clamp(1px, .8vw, 2px) !important;
  }

  .compass-surface .sub-copy {
    font-size: clamp(12px, 3.75vw, 13px);
    line-height: 1.75;
  }

  .compass-surface .launch-seal {
    width: clamp(104px, 34vw, 122px);
    height: clamp(104px, 34vw, 122px);
    min-width: 0;
    min-height: 0;
    font-size: clamp(46px, 14vw, 56px);
  }

  .launch-actions {
    width: 100%;
  }

  .compass-surface .cta {
    min-width: 0;
    padding: 12px;
    font-size: clamp(15px, 4.6vw, 17px);
    letter-spacing: clamp(1px, .9vw, 2.5px);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .compass-surface .cta.ghost {
    padding: 11px 12px;
    font-size: clamp(13px, 4vw, 14px);
    letter-spacing: clamp(1px, .8vw, 2px);
  }

  .compass-segmented {
    gap: 5px;
  }

  .compass-segmented button {
    padding: 0 4px;
    font-size: 12px;
  }

  .compass-stage[data-step="0"].active .hub-page {
    gap: 7px;
  }

  .compass-stage[data-step="0"].active .hub-module-card {
    min-height: 68px;
    padding: 8px;
  }

  .compass-stage[data-step="0"].active .hub-module-card strong {
    font-size: 15px;
  }

  .compass-stage[data-step="0"].active .hub-module-card small {
    font-size: 10.5px;
  }

  .game-window-titlebar {
    gap: 8px;
  }

  .game-window-kicker {
    font-size: 11px;
  }

  .game-window-titlebar h2 {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  .compass-body {
    --shell-pad-x: clamp(24px, 6vw, 72px);
    --shell-pad-y: clamp(18px, 4svh, 36px);
    --phone-max-w: 464px;
    --phone-max-h: 900px;
    --phone-height: min(calc(var(--app-viewport-h) - var(--shell-pad-y) - var(--shell-pad-y)), var(--phone-max-h));
    --surface-radius: 8px;
    --surface-border: 1px solid rgba(244, 239, 228, .34);
    --surface-shadow:
      0 28px 76px rgba(12, 30, 31, .30),
      0 0 0 1px rgba(53, 107, 122, .12),
      inset 0 0 90px rgba(38, 36, 32, .09),
      inset 0 0 0 1px rgba(255, 255, 255, .18);
    --stage-pad-x: clamp(22px, 3vw, 30px);
    --hub-world-size: clamp(180px, 22vw, 220px);
    --window-inset: clamp(28px, 4vw, 46px);
    --game-window-max-w: 920px;
    --game-window-body-pad: clamp(20px, 2.4vw, 28px);
    --ambient-bg:
      linear-gradient(180deg, #203638 0%, #426f68 38%, #d4e3d8 100%);
  }

  .compass-body::before {
    opacity: 1;
    background:
      repeating-radial-gradient(circle at 18% 18%, rgba(255, 250, 230, .38) 0 1px, transparent 1.6px 72px),
      linear-gradient(150deg, transparent 0 56%, rgba(16, 46, 49, .30) 56.6% 64%, transparent 64.6%) left 70% / 58% 42% no-repeat,
      linear-gradient(30deg, transparent 0 52%, rgba(43, 83, 80, .26) 52.6% 63%, transparent 63.6%) right 66% / 62% 38% no-repeat,
      linear-gradient(180deg, rgba(244, 239, 228, 0) 0 48%, rgba(244, 239, 228, .22) 100%);
  }

  .compass-phone {
    width: min(calc(100vw - var(--shell-pad-x) - var(--shell-pad-x)), var(--phone-max-w));
  }

  .compass-surface .ribbon {
    padding-top: 14px;
  }

  .compass-stage[data-step="0"].active .hub-module-card {
    min-height: 84px;
  }

  .game-window-titlebar {
    padding: 14px 18px 12px 22px;
  }
}

@media (min-width: 1024px) {
  .compass-body {
    --shell-pad-x: clamp(48px, 8vw, 120px);
    --shell-pad-y: clamp(24px, 4.5svh, 46px);
    --phone-max-w: 480px;
    --phone-max-h: 920px;
    --stage-pad-x: 30px;
    --hub-world-size: clamp(196px, 18vw, 232px);
    --game-window-max-w: 980px;
    --game-window-body-pad: 28px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .compass-body {
    --shell-pad-x: 0px;
    --shell-pad-y: 0px;
    --phone-max-w: min(100vw, 520px);
    --phone-height: var(--app-viewport-h);
    --stage-chrome: 56px;
    --stage-pad-x: clamp(12px, 4vw, 20px);
    --stage-pad-y: 2px;
    --stage-pad-bottom: 14px;
    --topbar-pad-x: clamp(12px, 4vw, 18px);
    --topbar-pad-y: 3px;
    --topbar-pad-bottom: 6px;
    --hub-world-size: clamp(112px, 28svh, 150px);
    --window-inset: 6px;
    --game-window-body-pad: 10px;
  }

  .compass-surface {
    border-radius: 0;
  }

  .compass-surface .ribbon {
    padding: 7px 8px 1px;
    font-size: 9px;
    letter-spacing: 3px;
  }

  .compass-surface .topbar {
    font-size: 11px;
  }

  .compass-surface .center-col {
    min-height: auto;
  }

  .compass-surface .launch-seal {
    width: clamp(76px, 28svh, 110px);
    height: clamp(76px, 28svh, 110px);
    min-width: 0;
    min-height: 0;
    font-size: clamp(36px, 12svh, 52px);
  }

  .compass-stage[data-step="0"].active .hub-page {
    grid-template-rows: auto auto minmax(66px, .34fr) minmax(0, 1fr) auto;
    gap: 6px;
  }

  .compass-stage[data-step="0"].active .hub-module-card {
    min-height: 60px;
    padding: 7px 8px;
  }

  .compass-stage[data-step="0"].active .hub-module-card strong {
    font-size: 14px;
  }

  .compass-stage[data-step="0"].active .hub-module-card small,
  .compass-stage[data-step="0"].active .compass-privacy {
    font-size: 10.5px;
  }

  .game-window {
    border-radius: 6px;
  }
}

/* ==================== 转场动效 · 水墨晕开 ==================== */
@media (prefers-reduced-motion: no-preference) {
  /* 进屏:整屏轻晕入 */
  .compass-stage.active {
    animation: stageInk 0.66s var(--ease) both;
  }
  @keyframes stageInk {
    0%   { opacity: 0; filter: blur(5px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; filter: blur(0); }
  }
  /* 内容逐项浮现(错峰),这是"有感觉"的核心 */
  .compass-stage.active > * {
    animation: childRise 0.6s var(--ease) both;
  }
  .compass-stage.active > *:nth-child(1) { animation-delay: 0.05s; }
  .compass-stage.active > *:nth-child(2) { animation-delay: 0.14s; }
  .compass-stage.active > *:nth-child(3) { animation-delay: 0.23s; }
  .compass-stage.active > *:nth-child(4) { animation-delay: 0.32s; }
  .compass-stage.active > *:nth-child(5) { animation-delay: 0.41s; }
  .compass-stage.active > *:nth-child(6) { animation-delay: 0.50s; }
  .compass-stage.active > *:nth-child(n+7) { animation-delay: 0.58s; }
  @keyframes childRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

/* 墨晕过场幕:每次切屏从中心晕开一层薄墨 */
#compass-veil {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(135% 95% at 50% 42%,
    rgba(38, 36, 32, 0.18), rgba(38, 36, 32, 0.05) 46%, rgba(244, 239, 228, 0) 72%);
  mix-blend-mode: multiply;
}
#compass-veil.sweep { animation: veilSweep 0.62s ease both; }
@keyframes veilSweep {
  0%   { opacity: 0; transform: scale(1.05); }
  38%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* 排盘 loading · 水墨呼吸 */
#compass-loading {
  position: fixed; inset: 0; z-index: 80; display: none; place-items: center; text-align: center;
  background: rgba(244, 239, 228, 0.82); backdrop-filter: blur(2px);
}
#compass-loading.show { display: grid; }
#compass-loading .ink-ring {
  width: 62px; height: 62px; margin: 0 auto; border-radius: 50%;
  border: 2px solid rgba(38, 36, 32, 0.12); border-top-color: var(--qing-deep);
  animation: inkSpin 1.05s linear infinite;
}
#compass-loading .ink-word {
  margin-top: 18px; color: var(--mo); letter-spacing: 0.34em; font-size: 0.92rem;
  font-family: var(--song, "Noto Serif SC", serif);
  animation: inkBreath 1.8s ease-in-out infinite;
}
@keyframes inkSpin { to { transform: rotate(360deg); } }
@keyframes inkBreath { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  pointer-events: none;
}

.onboarding-layer[hidden] {
  display: none;
}

.onboarding-card {
  pointer-events: auto;
  width: min(360px, calc(100vw - 36px));
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 15px;
  color: var(--mo);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .96), rgba(244, 239, 228, .92)),
    radial-gradient(circle at 96% 8%, rgba(93, 138, 147, .16), transparent 34%);
  border: 1px solid rgba(53, 107, 122, .24);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(38, 36, 32, .18);
}

.onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.onboarding-top span {
  color: var(--qing-deep);
  font-family: var(--kai);
  font-weight: 700;
}

.onboarding-top button,
.onboarding-next {
  min-width: 0;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .08);
  border: 1px solid rgba(53, 107, 122, .22);
  border-radius: 8px;
  cursor: pointer;
}

.onboarding-top button {
  padding: 5px 8px;
}

.onboarding-card strong {
  min-width: 0;
  color: var(--mo);
  font-family: var(--kai);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.onboarding-card p {
  min-width: 0;
  margin: 0;
  color: var(--mo-soft);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.onboarding-dots {
  display: flex;
  gap: 6px;
}

.onboarding-dots i {
  width: 7px;
  height: 7px;
  background: rgba(53, 107, 122, .2);
  border-radius: 50%;
}

.onboarding-dots i.active {
  background: var(--qing-deep);
}

.onboarding-next {
  width: 100%;
  padding: 10px 12px;
  color: var(--xuan);
  background: linear-gradient(180deg, var(--qing), var(--qing-deep));
  border-color: transparent;
  font-weight: 700;
}

#compass-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 90;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 14px;
  color: var(--xuan, #f4efe4);
  background: rgba(53, 107, 122, .94);
  border: 1px solid rgba(174, 198, 198, .42);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(38, 36, 32, .24);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
}

#compass-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#compass-toast[data-tone="warn"] {
  background: rgba(179, 90, 71, .95);
}

/* 罗盘指针摆动:选择方位时指向它 */
#compass-needle {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.85s cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* 中心点亮涟漪 */
.core-ripple {
  fill: none; stroke: var(--qing); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: coreRipple 1.15s ease-out forwards;
}
@keyframes coreRipple {
  0%   { opacity: 0.55; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* 五线数值条生长 */
.line-bar .fill, .line-bar .bar > span, .line-bar i {
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==================== 合盘 · 合一罗盘(主盘叠点) ==================== */
.relation-union {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 6px 0 4px;
}
.relation-union-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.relation-union-head #relation-player-label {
  font-family: var(--song, "Noto Serif SC", serif);
  font-size: 1.02rem;
  color: var(--mo, #262420);
  letter-spacing: 0.06em;
}
.relation-union-head #relation-link-label {
  font-size: 0.82rem;
  color: var(--qing-deep, #356b7a);
  background: rgba(53, 107, 122, 0.1);
  border: 1px solid rgba(53, 107, 122, 0.28);
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 600;
}
#relation-player-compass {
  width: min(92vw, 376px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}
/* 对方派生五行叠加点 */
.union-link {
  stroke-width: 1.2;
  opacity: 0.4;
  stroke-dasharray: 2 3;
}
.union-partner-dot {
  opacity: 0.78;
  stroke: var(--xuan, #f4efe4);
  stroke-width: 1.4;
}
.union-partner-dot.union-dot-strong {
  opacity: 0.95;
  stroke: var(--mo, #262420);
  stroke-width: 1;
}
.union-dot-label {
  font-size: 11px;
  fill: var(--xuan, #f4efe4);
  text-anchor: middle;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(38, 36, 32, 0.35);
  stroke-width: 0.5;
}
/* 合一中心:关系气候 */
.union-core {
  fill: rgba(244, 239, 228, 0.92);
  stroke: var(--qing-deep, #356b7a);
  stroke-width: 1.4;
}
.union-type {
  text-anchor: middle;
  font-size: 12px;
  fill: var(--muted, #756a5f);
  letter-spacing: 0.08em;
}
.union-stage {
  text-anchor: middle;
  font-size: 21px;
  font-family: var(--song, "Noto Serif SC", serif);
  fill: var(--mo, #262420);
  letter-spacing: 0.04em;
}
.union-conf {
  text-anchor: middle;
  font-size: 12.5px;
  fill: var(--qing-deep, #356b7a);
  letter-spacing: 0.06em;
}
/* 图例 */
.relation-union-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.76rem;
  color: var(--muted, #756a5f);
}
.relation-union-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.relation-union-legend .lg::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.relation-union-legend .lg-mine::before {
  background: var(--qing, #5d8a93);
}
.relation-union-legend .lg-partner::before {
  background: var(--zhe, #a8824e);
  box-shadow: 0 0 0 1.5px var(--xuan, #f4efe4), 0 0 0 2.5px rgba(38, 36, 32, 0.25);
}
.relation-union-legend i {
  font-style: normal;
  color: var(--qing-deep, #356b7a);
}

/* ==================== 对话式导师 · 水墨聊天 ==================== */
.mentor-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 4px;
}
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  animation: bubbleIn 0.42s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
}
.chat-row.chat-player {
  flex-direction: row-reverse;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chat-ava {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--song, "Noto Serif SC", serif);
  font-size: 0.8rem;
  color: var(--xuan, #f4efe4);
  background: var(--qing, #5d8a93);
  box-shadow: 0 2px 8px rgba(38, 36, 32, 0.18);
}
.chat-ava.el-木 { background: #6f9a78; }
.chat-ava.el-火 { background: #b35a47; }
.chat-ava.el-土 { background: #a8824e; }
.chat-ava.el-金 { background: #8f8b80; }
.chat-ava.el-水 { background: #3a4a55; }
.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.62;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(38, 36, 32, 0.1);
  color: var(--mo, #262420);
  border-bottom-left-radius: 4px;
}
.chat-player .chat-bubble {
  background: rgba(53, 107, 122, 0.12);
  border-color: rgba(53, 107, 122, 0.28);
  color: var(--qing-deep, #2f5d68);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
/* 打字指示 */
.chat-typing .chat-bubble {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.chat-typing .chat-bubble i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, #756a5f);
  opacity: 0.5;
  animation: typingDot 1.1s infinite ease-in-out;
}
.chat-typing .chat-bubble i:nth-child(2) { animation-delay: 0.18s; }
.chat-typing .chat-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-3px); }
}
/* 回应按钮 */
.mentor-choices {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 4px 0 2px;
}
.mentor-choices.show {
  animation: bubbleIn 0.4s var(--ease, ease) both;
}
.chat-choice {
  text-align: left;
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px solid rgba(53, 107, 122, 0.34);
  background: rgba(244, 239, 228, 0.7);
  color: var(--mo, #262420);
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.2s, transform 0.12s, border-color 0.2s;
}
.chat-choice:hover {
  background: rgba(53, 107, 122, 0.12);
  border-color: var(--qing-deep, #356b7a);
}
.chat-choice:active {
  transform: scale(0.985);
}

/* ==================== 十神两面性(得用/失用/扬吉化凶) ==================== */
.cultivation-faces { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.cultivation-faces .face { border-radius: 10px; padding: 8px 12px; border: 1px solid rgba(38,36,32,.1); }
.cultivation-faces .face-aus { background: rgba(111,154,120,.1); border-color: rgba(111,154,120,.34); }
.cultivation-faces .face-ina { background: rgba(168,130,78,.1); border-color: rgba(168,130,78,.34); }
.cultivation-faces .face-tag { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .08em; margin-bottom: 4px; }
.cultivation-faces .face-aus .face-tag { color: #4f7a58; }
.cultivation-faces .face-ina .face-tag { color: #8a6a32; }
.cultivation-faces .face ul { margin: 0; padding-left: 16px; }
.cultivation-faces .face li { font-size: .86rem; line-height: 1.6; color: var(--mo, #262420); margin: 2px 0; }
.cultivation-faces .face-balance { margin: 2px 0 0; font-size: .86rem; line-height: 1.6; color: var(--qing-deep, #356b7a);
  background: rgba(53,107,122,.08); border-left: 2px solid var(--qing, #5d8a93); padding: 6px 10px; border-radius: 0 8px 8px 0; }

/* ==================== 国风 · 楷体标题 + 宣纸纹理(零素材) ==================== */
:root { --kai: "STKaiti","KaiTi","楷体","Kaiti SC","Noto Serif SC",serif; }
.ribbon, .hero-copy, .sec, .core-phase, .union-stage, .mentor-name,
.story-title, #compass-s-title, .relation-union-head #relation-player-label,
.cultivation-detail-head .sec, #cultivation-detail-title {
  font-family: var(--kai) !important;
  letter-spacing: .06em;
}
.ribbon { font-size: 1.06rem; }
/* 宣纸细颗粒(极轻、不挡操作) */
.compass-body::after {
  content: ""; position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* 今日宜食(五行饮食) */
.youli-food-block .youli-block-head { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.youli-food-flavors { font-size:.84rem; color:var(--qing-deep,#356b7a); margin-bottom:8px; letter-spacing:.04em; }
.youli-food-row { display:flex; flex-wrap:wrap; gap:8px; }
.youli-food-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  border:1px solid rgba(53,107,122,.28); background:rgba(244,239,228,.7); color:var(--mo,#262420); font-size:.86rem; cursor:pointer; }
.youli-food-chip:hover { background:rgba(53,107,122,.1); }
.youli-food-chip i { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.youli-food-chip i.el-木{background:#6f9a78}.youli-food-chip i.el-火{background:#b35a47}.youli-food-chip i.el-土{background:#a8824e}.youli-food-chip i.el-金{background:#8f8b80}.youli-food-chip i.el-水{background:#3a4a55}

/* 合盘·关系透镜(关系星/期待/匹配) */
.relation-lens { display:flex; flex-direction:column; gap:6px; margin:10px 0 4px; padding:10px 12px;
  background:rgba(53,107,122,.07); border:1px solid rgba(53,107,122,.22); border-radius:10px; }
.relation-lens-row { display:flex; gap:8px; align-items:baseline; font-size:.86rem; line-height:1.55; color:var(--mo,#262420); }
.relation-lens-row .lens-tag { flex:0 0 auto; font-size:.74rem; font-weight:600; color:var(--qing-deep,#356b7a);
  background:rgba(53,107,122,.12); border-radius:6px; padding:1px 7px; }
.relation-lens-row b { color:var(--qing-deep,#2f5d68); }

/* ===== 五行主题引擎 · 喜用神决定"个性层"(潜移默化,不贴标签) ===== */
body[data-element="木"] { --accent:#6f9a78; --accent-deep:#4f7a58; --accent-soft:rgba(111,154,120,.14); }
body[data-element="火"] { --accent:#b35a47; --accent-deep:#8f3a2c; --accent-soft:rgba(179,90,71,.13); }
body[data-element="土"] { --accent:#a8824e; --accent-deep:#80602f; --accent-soft:rgba(168,130,78,.14); }
body[data-element="金"] { --accent:#8f8b80; --accent-deep:#6c6860; --accent-soft:rgba(143,139,128,.16); }
body[data-element="水"] { --accent:#3a4a55; --accent-deep:#2a3a45; --accent-soft:rgba(58,74,85,.14); }

/* 水墨青沿用命局五行层的既有罗盘叠色；组件仍只消费 --skin-*。 */
body[data-skin="ink-green"] {
  --skin-accent-deep: var(--accent-deep);
  --skin-accent-soft: var(--accent-soft);
}

/* 潜移默化:进度点 / 主CTA / 罗盘指针中心 / 关键强调 悄悄偏向喜用色;命朱印保留朱(不动) */
.compass-dot.active { background: var(--accent) !important; }
#compass-start { background: linear-gradient(180deg, var(--accent), var(--accent-deep)) !important; }
#compass-needle line { stroke: var(--accent-deep); }
.union-core { stroke: var(--accent); }
.relation-union-head #relation-link-label { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.youli-day-pill { color: var(--accent-deep); }
.compass-status[data-tone=""] { border-left: 2px solid var(--accent-soft); }

/* ===== 默认皮肤·水墨青 · 即梦AI美术资产 ===== */
.launch-seal {
  width: 92px; height: 92px;
  background: url("./skins/mochiqing/seal.png") center/contain no-repeat !important;
  border: none !important; border-radius: 0 !important;
  color: transparent !important; font-size: 0 !important;
  filter: drop-shadow(0 4px 14px rgba(140, 36, 31, .26));
}
.compass-surface .mentor-halo.el-木 { background: url("./skins/mochiqing/mentor_mu.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-surface .mentor-halo.el-火 { background: url("./skins/mochiqing/mentor_huo.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-surface .mentor-halo.el-土 { background: url("./skins/mochiqing/mentor_tu.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-surface .mentor-halo.el-金 { background: url("./skins/mochiqing/mentor_jin.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-surface .mentor-halo.el-水 { background: url("./skins/mochiqing/mentor_shui.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-stage[data-step="2"] .mentor-halo.el-木 { background: url("./skins/mochiqing/mentor_mu.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-stage[data-step="2"] .mentor-halo.el-火 { background: url("./skins/mochiqing/mentor_huo.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-stage[data-step="2"] .mentor-halo.el-土 { background: url("./skins/mochiqing/mentor_tu.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-stage[data-step="2"] .mentor-halo.el-金 { background: url("./skins/mochiqing/mentor_jin.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-stage[data-step="2"] .mentor-halo.el-水 { background: url("./skins/mochiqing/mentor_shui.jpg") center 15%/cover no-repeat; color: transparent; }
.compass-stage[data-step="0"] .hub-page {
  background: var(--skin-hub-page-overlay, linear-gradient(180deg, rgba(245, 239, 227, .80), rgba(245, 239, 227, .92))), url("./skins/mochiqing/bg.jpg") top center/cover no-repeat;
  box-shadow: inset 0 0 0 999px var(--skin-stage-veil, transparent);
  border-radius: 14px;
  padding: 16px 12px 18px;
}

/* Mochiqing polish: mentor portrait frame */
.compass-stage[data-step="2"] .mentor-card {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  padding: 24px 22px;
  text-align: left;
  background: linear-gradient(165deg, #faf6ec, #f0e9da);
  border: 1px solid rgba(38, 36, 32, .14);
  box-shadow: 0 14px 40px rgba(38, 36, 32, .12);
}

.compass-stage[data-step="2"] .mentor-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: var(--qing);
  border-radius: 2px;
}

.compass-stage[data-step="2"] .mentor-name {
  font-family: var(--kai);
  font-size: 24px;
  font-weight: 700;
  color: var(--mo);
  letter-spacing: 1px;
}

.compass-stage[data-step="2"] .mentor-epithet {
  margin-top: 3px;
  color: var(--qing-deep);
  font-size: 12.5px;
  letter-spacing: 2px;
}

.compass-stage[data-step="2"] .mentor-relation {
  margin: 18px 0 8px;
  color: var(--mo-faint);
  font-family: var(--song);
  font-size: 12.5px;
  line-height: 1.7;
}

.compass-stage[data-step="2"] .mentor-msg {
  min-height: 2em;
  color: var(--mo);
  font-family: var(--kai);
  font-size: 17px;
  font-weight: 500;
  line-height: 2.1;
  white-space: pre-line;
}

.compass-stage[data-step="2"] .mentor-bless {
  margin-top: 16px;
  padding: 12px 16px;
  color: var(--qing-deep);
  background: rgba(93, 138, 147, .1);
  border-radius: 6px;
  font-family: var(--kai);
  font-size: 13.5px;
  line-height: 1.7;
}

.compass-stage[data-step="2"] .mentor-evi {
  margin-top: 14px;
  color: var(--mo-faint);
  font-size: 12px;
}

.compass-stage[data-step="2"] .mentor-evi summary {
  color: var(--qing-deep);
  cursor: pointer;
}

.compass-stage[data-step="2"] .mentor-disc {
  margin-top: 11px;
  color: var(--mo-faint);
  font-size: 11px;
  line-height: 1.6;
}

.compass-surface .mentor-portrait-intro,
.compass-stage[data-step="2"] .mentor-portrait-intro {
  --mentor-portrait-w: clamp(118px, 32vw, 138px);
  display: grid;
  grid-template-columns: var(--mentor-portrait-w) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.compass-surface .mentor-portrait-frame,
.compass-stage[data-step="2"] .mentor-portrait-frame {
  position: relative;
  width: var(--mentor-portrait-w);
  max-width: 100%;
  aspect-ratio: 3 / 4;
  padding: 7px;
  border: 1px solid rgba(255, 252, 246, .82);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .88), rgba(229, 214, 188, .72)) padding-box,
    linear-gradient(90deg, #5b3a20, #b7834b 12%, #d8b978 50%, #7a4a26 88%, #4a2f1f) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 246, .5),
    inset 0 0 18px rgba(38, 36, 32, .12),
    0 16px 26px rgba(38, 36, 32, .16);
}

.compass-surface .mentor-portrait-frame::before,
.compass-surface .mentor-portrait-frame::after,
.compass-stage[data-step="2"] .mentor-portrait-frame::before,
.compass-stage[data-step="2"] .mentor-portrait-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.compass-surface .mentor-portrait-frame::before,
.compass-stage[data-step="2"] .mentor-portrait-frame::before {
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(255, 252, 246, .72);
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(250, 246, 236, .28);
}

.compass-surface .mentor-portrait-frame::after,
.compass-stage[data-step="2"] .mentor-portrait-frame::after {
  left: 50%;
  top: -5px;
  bottom: -5px;
  z-index: 3;
  width: calc(100% + 12px);
  transform: translateX(-50%);
  border-top: 7px solid rgba(92, 58, 31, .86);
  border-bottom: 7px solid rgba(92, 58, 31, .86);
  border-radius: 14px;
  box-shadow:
    inset 0 8px 0 rgba(214, 173, 104, .32),
    inset 0 -8px 0 rgba(214, 173, 104, .24);
}

.compass-surface .mentor-portrait-frame .mentor-halo,
.compass-stage[data-step="2"] .mentor-portrait-frame .mentor-halo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  border-radius: 8px;
  font-size: 0;
  box-shadow:
    inset 0 0 24px rgba(255, 252, 246, .20),
    inset 0 -28px 36px rgba(21, 41, 42, .18);
}

.compass-surface .mentor-copy,
.compass-surface .mentor-identity,
.compass-stage[data-step="2"] .mentor-copy,
.compass-stage[data-step="2"] .mentor-identity {
  display: grid;
  min-width: 0;
}

.compass-surface .mentor-copy,
.compass-stage[data-step="2"] .mentor-copy {
  gap: 9px;
}

.compass-surface .mentor-copy .mentor-relation,
.compass-surface .mentor-copy .mentor-msg,
.compass-stage[data-step="2"] .mentor-copy .mentor-relation,
.compass-stage[data-step="2"] .mentor-copy .mentor-msg {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.compass-surface .mentor-copy .mentor-msg,
.compass-stage[data-step="2"] .mentor-copy .mentor-msg {
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.9;
}

/* Mochiqing polish: hub compass ink halo */
.hub-compass-world {
  position: relative;
}

/* 首页灵宠：挂在罗盘右下，不占用首页入口格。形象图元与外层动作解耦。 */
.pet-avatar-slot {
  position: absolute;
  right: 4%;
  bottom: 4px;
  z-index: 3;
  width: 96px;
  height: 96px;
  overflow: visible;
}

.pet-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  color: var(--ink, #262420);
  cursor: pointer;
  transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
}

.pet-avatar-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--ink, #262420) 22%, transparent));
}

.pet-avatar-label {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 2px 5px;
  border: 1px solid var(--line, rgba(38, 36, 32, .18));
  border-radius: 999px;
  background: var(--paper, rgba(255, 252, 246, .9));
  color: var(--ink, #262420);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.pet-avatar-bubble {
  position: absolute;
  right: 2px;
  bottom: calc(100% - 10px);
  z-index: 2;
  width: max-content;
  max-width: 170px;
  padding: 6px 8px;
  border: 1px solid var(--line, rgba(38, 36, 32, .18));
  border-radius: 10px;
  background: var(--paper, #fffaf0);
  box-shadow: 0 5px 15px rgba(38, 36, 32, .12);
  color: var(--ink, #262420);
  font-size: 11px;
  line-height: 1.42;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px) scale(.94);
  transform-origin: 90% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .pet-avatar {
    animation: petAvatarBreathe 4.7s ease-in-out infinite;
  }

  .pet-avatar-motion {
    transform-origin: 50px 56px;
    animation: petAvatarWiggle 3.3s ease-in-out .45s infinite;
  }

  .pet-avatar-blink {
    transform-origin: 50px 51px;
    animation: petAvatarBlink 6.9s steps(1, end) 1.4s infinite;
  }

  .pet-avatar.is-reacting {
    animation: petAvatarHop .56s cubic-bezier(.25, .8, .35, 1.2) both;
  }

  .pet-avatar.is-reacting .pet-avatar-bubble {
    animation: petAvatarBubble 3.2s var(--ease, ease) both;
  }

  @keyframes petAvatarBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    47% { transform: translateY(-2px) scale(1.018, .982); }
  }

  @keyframes petAvatarWiggle {
    0%, 76%, 100% { transform: rotate(0deg); }
    82% { transform: rotate(2.8deg); }
    89% { transform: rotate(-1.6deg); }
  }

  @keyframes petAvatarBlink {
    0%, 92%, 100% { opacity: 0; }
    94%, 96% { opacity: 1; }
  }

  @keyframes petAvatarHop {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-13px) scale(.94, 1.07); }
    75% { transform: translateY(1px) scale(1.05, .95); }
    100% { transform: translateY(0) scale(1); }
  }

  @keyframes petAvatarBubble {
    0% { opacity: 0; transform: translateY(5px) scale(.94); }
    10%, 84% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(3px) scale(.98); }
  }
}

/* 放大后的盘面占据独立行，主页仍可在纵向容器内滚动，不压住相邻文字。 */
.compass-stage[data-step="0"].active .hub-page {
  grid-template-rows: auto auto auto minmax(250px, auto) auto auto;
}

.hub-compass-world::before {
  content: "";
  position: absolute;
  inset: 8%;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(93, 138, 147, .18), rgba(93, 138, 147, .07) 38%, transparent 70%),
    radial-gradient(circle at 46% 54%, rgba(38, 36, 32, .12), transparent 58%);
  filter: blur(10px);
  opacity: .66;
  mix-blend-mode: multiply;
}

#hub-compass-svg {
  position: relative;
  z-index: 1;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, filter;
}

@media (prefers-reduced-motion: no-preference) {
  .compass-stage[data-step="0"].active #hub-compass-svg {
    animation: hubCompassInkBreath 18s ease-in-out infinite;
  }

  .compass-stage[data-step="0"].active .hub-compass-world::before {
    animation: hubCompassHaloBreath 7.5s ease-in-out infinite;
  }

  @keyframes hubCompassInkBreath {
    0%, 100% {
      transform: rotate(-1.1deg) scale(1);
      filter: drop-shadow(0 16px 28px rgba(38, 36, 32, .13));
    }
    50% {
      transform: rotate(1.1deg) scale(1.018);
      filter: drop-shadow(0 18px 32px rgba(53, 107, 122, .18));
    }
  }

  @keyframes hubCompassHaloBreath {
    0%, 100% {
      opacity: .45;
      transform: scale(.98);
    }
    50% {
      opacity: .72;
      transform: scale(1.06);
    }
  }
}

/* Mochiqing polish: subtle cardback seal texture */
.choice-card,
.cultivation-card,
.baike-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.choice-card::before,
.cultivation-card::before,
.baike-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, .7), rgba(255, 252, 246, .56)),
    url("./skins/mochiqing/cardback.jpg") center / cover no-repeat;
  opacity: .18;
  mix-blend-mode: multiply;
}

.choice-card > *,
.cultivation-card > *,
.baike-card > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 360px) {
  .compass-stage[data-step="2"] .mentor-card {
    padding: 18px 14px;
  }

  .compass-surface .mentor-portrait-intro,
  .compass-stage[data-step="2"] .mentor-portrait-intro {
    --mentor-portrait-w: clamp(98px, 34vw, 112px);
    gap: 10px;
  }

  .compass-surface .mentor-copy,
  .compass-stage[data-step="2"] .mentor-copy {
    gap: 7px;
  }
}

/* ── 软出口:深度内容末尾的按需咨询入口 ───────────────── */
.soft-exit {
  margin: 18px 0 4px;
}
.soft-exit-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(27, 127, 120, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(232, 246, 241, 0.6) 0%, rgba(251, 255, 253, 0.9) 100%);
}
.soft-exit-copy {
  display: grid;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.soft-exit-copy strong {
  color: #102521;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.soft-exit-copy span {
  color: #5c6f69;
  font-size: 12.5px;
  line-height: 1.6;
}
.soft-exit-open {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid #1b7f78;
  border-radius: 9px;
  background: #1b7f78;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.soft-exit-open:hover {
  background: #105b56;
  border-color: #105b56;
}
.soft-exit-slot {
  margin-top: 14px;
}
@media (max-width: 420px) {
  .soft-exit-open {
    width: 100%;
  }
}

/* ── E2 合盘四维选择器 ───────────────── */
.relation-lenses {
  margin: 0 0 16px;
}
.relation-lenses__lead {
  margin: 0 0 10px;
  color: #5c6f69;
  font-size: 13px;
  line-height: 1.6;
}
.relation-lenses__lead strong {
  color: #0e5b55;
}
.relation-lenses__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.relation-lens {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 12px 6px;
  border: 1px solid rgba(27, 127, 120, 0.2);
  border-radius: 11px;
  background: #fffdf7;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.relation-lens:hover {
  background: #f3fbf8;
}
.relation-lens.is-active {
  border-color: #1b7f78;
  background: #eaf6f1;
  box-shadow: 0 0 0 2px rgba(27, 127, 120, 0.18);
}
.relation-lens__glyph {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1b7f78, #0e5b55);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.relation-lens strong {
  font-size: 14px;
  color: #102521;
}
.relation-lens em {
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.4;
  color: #8a9893;
}
@media (max-width: 460px) {
  .relation-lens em { display: none; }
  .relation-lens { padding: 10px 4px; }
}

/* ── A2 命理联动回路入口 ───────────────── */
.loop-links {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px dashed rgba(27, 127, 120, 0.28);
  border-radius: 11px;
  background: rgba(234, 246, 241, 0.4);
}
.loop-links__lead {
  display: block;
  margin-bottom: 9px;
  color: #0e5b55;
  font-size: 12.5px;
  font-weight: 800;
}
.loop-links__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.loop-link {
  flex: 0 1 auto;
  padding: 8px 13px;
  border: 1px solid rgba(27, 127, 120, 0.3);
  border-radius: 999px;
  background: #fffdf7;
  color: #0e5b55;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.loop-link:hover {
  background: #1b7f78;
  color: #fff;
  border-color: #1b7f78;
}

/* ── ① 完整命盘 展开 ───────────────── */
.fullchart { margin: 14px 0 4px; }
.fullchart-toggle {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(27, 127, 120, 0.3);
  border-radius: 11px;
  background: linear-gradient(180deg, #fffdf7, #eef7f3);
  color: #0e5b55;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.fullchart-toggle:hover { background: #eaf6f1; }
.fullchart-slot { margin-top: 12px; }
.fullchart-note { margin: 0 0 10px; font-size: 12.5px; color: #5c6f69; line-height: 1.6; }
.fullchart-note.warn {
  padding: 9px 12px;
  border: 1px dashed #c9962f;
  border-radius: 8px;
  background: #fff8e8;
  color: #8a6a1e;
}

/* ── ② 世界屏 国风精修(保守:仅 hover/阴影/字距,不改结构) ───────────────── */
.hub-module-card {
  background: var(--skin-hub-card-background, linear-gradient(180deg, rgba(252, 249, 242, 0.86), rgba(247, 242, 230, 0.72)));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hub-module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(38, 36, 32, 0.14);
  border-color: rgba(53, 107, 122, 0.42);
}
.hub-module-card:active { transform: translateY(-1px); }
.hub-module-card strong { letter-spacing: 0.04em; }
.compass-surface .hero-copy,
.compass-stage[data-step="0"].active .hub-page h1,
#compass-hub-title {
  letter-spacing: 0.06em;
}
/* 模块卡入场轻微浮起,层次更稳 */
.compass-stage[data-step="0"].active .hub-module-card {
  box-shadow: 0 12px 26px rgba(38, 36, 32, 0.09);
}

/* ===== 设计系统 v0.1 · D0 首页（stage 0）===== */
.compass-body:has(.compass-stage[data-step="0"].active) .compass-phone,
.compass-body:has(.compass-stage[data-step="0"].active) .compass-surface,
.compass-stage[data-step="0"].active .hub-page {
  border-radius: var(--radius-card);
}

.compass-stage[data-step="0"].active .hub-page {
  gap: 12px;
  padding: 12px var(--pad-card) var(--pad-card);
  grid-template-rows: auto auto auto minmax(184px, auto) 72px auto auto;
}

.compass-stage[data-step="0"].active .hub-today,
.compass-stage[data-step="0"].active .hub-compass-world,
.compass-stage[data-step="0"].active .hub-baike-time-hook {
  padding: var(--pad-card);
  background: var(--skin-hub-today-background, var(--surface-l2));
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: none;
}

.compass-stage[data-step="0"].active .hub-compass-world {
  min-height: 184px;
  grid-row: 4;
}

.compass-stage[data-step="0"].active .hub-module-grid {
  gap: 12px;
}

.compass-stage[data-step="0"].active .hub-module-card.primary {
  padding: var(--pad-card-lg);
  background: var(--skin-primary-card-background, var(--surface-l1));
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-l1);
}

.compass-stage[data-step="0"].active .hub-module-card.primary:hover {
  border-color: transparent;
  box-shadow: var(--shadow-l1);
}

.compass-stage[data-step="0"].active .compass-privacy {
  padding: 0;
  background: var(--surface-l3);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.compass-stage[data-step="0"].active .hub-actions .cta.ghost,
.compass-stage[data-step="0"].active .hub-baike-time-hook,
.compass-body:has(.compass-stage[data-step="0"].active) .compass-tabbar button {
  border-radius: var(--radius-inner);
}

.compass-stage[data-step="0"].active .pet-avatar-label {
  border-radius: var(--radius-chip);
}

.compass-stage[data-step="0"].active .pet-avatar-bubble {
  border-radius: var(--radius-inner);
}

/* 灵宠移出罗盘盘面：固定 72px，贴在 L2 卡的右下留白。 */
.compass-stage[data-step="0"].active .pet-avatar-slot,
.compass-stage[data-step="0"].active .pet-avatar {
  width: 72px;
  height: 72px;
}

.compass-stage[data-step="0"].active .pet-avatar-slot {
  position: static;
  grid-row: 5;
  align-self: end;
  justify-self: end;
}

.compass-stage[data-step="0"].active .hub-module-grid {
  grid-row: 6;
}

.compass-stage[data-step="0"].active .compass-privacy {
  grid-row: 7;
}

.compass-stage[data-step="0"].active .pet-avatar-label {
  font-size: var(--fs-caption);
}

.compass-stage[data-step="0"].active .pet-avatar-bubble {
  font-size: var(--fs-caption);
}

.compass-body:has(.compass-stage[data-step="0"].active) .ribbon,
.compass-body:has(.compass-stage[data-step="0"].active) .topbar,
.compass-body:has(.compass-stage[data-step="0"].active) .compass-tabbar button,
.compass-stage[data-step="0"].active .eyebrow,
.compass-stage[data-step="0"].active .hub-today small,
.compass-stage[data-step="0"].active .hub-module-card span,
.compass-stage[data-step="0"].active .compass-privacy,
.compass-stage[data-step="0"].active .compass-privacy strong,
.compass-stage[data-step="0"].active .compass-privacy span {
  font-size: var(--fs-caption);
}

.compass-stage[data-step="0"].active .hub-hero .hero-copy {
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
}

.compass-stage[data-step="0"].active .hub-today span,
.compass-stage[data-step="0"].active .hub-module-card strong {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-medium);
}

.compass-stage[data-step="0"].active .hub-module-card small {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

.compass-stage[data-step="0"].active .hub-actions .cta.ghost,
.compass-stage[data-step="0"].active .sub-copy,
.compass-stage[data-step="0"].active .hub-today strong,
.compass-stage[data-step="0"].active .hub-baike-time-hook {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.compass-stage[data-step="0"].active .sub-copy,
.compass-stage[data-step="0"].active .hub-baike-time-hook {
  font-weight: var(--fw-regular);
}

.compass-stage[data-step="0"].active .trig-text,
.compass-stage[data-step="0"].active .core-time {
  font-size: var(--fs-caption);
}

.compass-body:has(.compass-stage[data-step="0"].active) .compass-tabbar button span {
  font-size: 20px;
}

.compass-stage[data-step="0"].active .core-phase {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
}

.compass-body:has(.compass-stage[data-step="0"].active) .compass-tabbar {
  border-radius: var(--radius-card);
}

/* tabbar 状态原有选择器多一层 class，须以同等作用域锁定首页网格行。 */
.compass-tabbar-visible .compass-stage[data-step="0"].active .hub-page {
  grid-template-rows: auto auto auto minmax(184px, auto) 72px auto auto;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .hub-compass-world {
  min-height: 184px;
  grid-row: 4;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .pet-avatar-slot {
  grid-row: 5;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .hub-module-grid {
  grid-row: 6;
}

.compass-tabbar-visible .compass-stage[data-step="0"].active .compass-privacy {
  grid-row: 7;
}

/* ── ⑩ 打卡分享卡(发社媒引流) ───────────────── */
.bazi-ci__sharemask{position:fixed;inset:0;z-index:9200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(12,26,23,.5)}
.bazi-ci__sharecard{width:100%;max-width:380px;background:#fffdf7;border:1px solid rgba(27,127,120,.2);border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(9,40,36,.3)}
.bazi-ci__share-h{margin:0 0 10px;font-size:17px;color:#102521}
.bazi-ci__share-text{margin:0 0 10px;font-size:13.5px;line-height:1.7;color:#243632}
.bazi-ci__share-link{font-size:12px;color:#0e5b55;background:#eaf6f1;border:1px solid rgba(27,127,120,.18);border-radius:8px;padding:8px 10px;word-break:break-all;margin-bottom:12px}
.bazi-ci__share-row{display:flex;gap:8px;margin-bottom:10px}
.bazi-ci__share-btn{flex:1;min-height:42px;border:1px solid #1b7f78;border-radius:9px;background:#fff;color:#0e5b55;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.bazi-ci__share-btn.primary{background:#1b7f78;color:#fff}
.bazi-ci__share-tip{margin:0 0 12px;font-size:12px;line-height:1.6;color:#8a9893}
.bazi-ci__share-close{width:100%;min-height:40px;border:1px solid rgba(0,0,0,.12);border-radius:9px;background:#fff;color:#5c6f69;font-weight:700;cursor:pointer;font-family:inherit}

/* ── ⑥ 国风书法字体(系统楷体栈,免素材;缺字回退衬线) ───────────────── */
:root { --shu: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "楷体_GB2312", "Songti SC", "SimSun", serif; }
.compass-surface .hero-copy,
#compass-hub-title,
#compass-hub-identity,
.compass-surface .ribbon,
.discover-hero h2,
.discover-module-head h2,
.bazi-bd__title,
.bazi-bd__reader-title,
.bwx__lead b,
.brc__head .brc__hmeta b,
.game-window-titlebar,
.bxd__guide b {
  font-family: var(--shu);
  letter-spacing: 0.05em;
}

/* ── 动态图·A类零资产动效(reduced-motion 自动关闭) ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes baziGlow { 0%,100%{filter:drop-shadow(0 0 0 rgba(93,138,147,0))} 50%{filter:drop-shadow(0 0 14px rgba(93,138,147,.42))} }
  @keyframes baziBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
  @keyframes baziRise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  /* 世界屏:命局世界 呼吸光晕 */
  .hub-world { animation: baziGlow 5.5s ease-in-out infinite; }
  /* 导师立绘:呼吸微动 */
  .mentor-portrait-frame { animation: baziBreathe 6.5s ease-in-out infinite; transform-origin: center bottom; }
  /* 今日一局/结果:卡牌入场上浮 */
  .scene-card { animation: baziRise .55s ease both; }
  .outcome-layer { animation: baziRise .5s ease both; }
  .outcome-layer:nth-child(2) { animation-delay: .08s; }
  .outcome-layer:nth-child(3) { animation-delay: .16s; }
}

/* ── ④ 命理动线(发现探索进度) ───────────────── */
.discover-progress { display:flex; align-items:center; gap:10px; margin-top:12px; }
.discover-progress__bar { flex:1; height:6px; border-radius:4px; background:rgba(27,127,120,.14); overflow:hidden; }
.discover-progress__bar i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#1b7f78,#c8a24a); transition:width .5s; }
.discover-progress span { font-size:12px; color:#5c6f69; font-weight:700; white-space:nowrap; }
.discover-card { position:relative; }
.discover-card__seen { position:absolute; top:8px; right:8px; font-size:10.5px; font-weight:800; color:#0e5b55; background:#eaf6f1; border:1px solid rgba(27,127,120,.3); border-radius:999px; padding:2px 7px; }
.discover-card.is-seen { border-color:rgba(27,127,120,.3); }

/* ===== 设计系统 v0.1 · D1 探索浮层（仅 #discover-window-body） ===== */
.game-window:has(#discover-window-body) {
  color: var(--skin-page-text, var(--mo));
  background: var(--skin-hub-page-overlay, var(--surface-l1));
  border-radius: var(--radius-card);
}

.game-window:has(#discover-window-body) .game-window-kicker {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.game-window:has(#discover-window-body) .game-window-titlebar h2 {
  color: var(--skin-page-text, var(--mo));
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
}

.game-window:has(#discover-window-body) .game-window-close {
  font-size: 20px;
}

.game-window:has(#discover-window-body) .game-window-body {
  padding: var(--radius-inner);
}

#discover-window-body .discover-hero,
#discover-window-body .discover-module-shell {
  background: var(--skin-hub-today-background, var(--surface-l2));
  border-radius: var(--radius-card);
}

#discover-window-body .eyebrow,
#discover-window-body .discover-hero p:not(.eyebrow),
#discover-window-body .discover-module-head p,
#discover-window-body .discover-progress span,
#discover-window-body .discover-card small,
#discover-window-body .discover-experiments summary span,
#discover-window-body .discover-card__seen {
  font-size: var(--fs-caption);
}

#discover-window-body .eyebrow,
#discover-window-body .discover-progress span,
#discover-window-body .discover-card__seen {
  font-weight: var(--fw-medium);
}

#discover-window-body .discover-hero h2,
#discover-window-body .discover-module-head h2 {
  color: var(--skin-page-text, var(--mo));
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
}

#discover-window-body .discover-shortcuts button {
  border-radius: var(--radius-inner);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

#discover-window-body .discover-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

#discover-window-body .discover-card {
  min-width: 0;
  padding: var(--radius-inner);
  color: var(--mo-soft);
  background: var(--skin-hub-today-background, var(--surface-l2));
  border-radius: var(--radius-card);
}

#discover-window-body .discover-card,
#discover-window-body .discover-card > * {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#discover-window-body .discover-card__badge {
  color: var(--skin-page-text, var(--mo-soft));
  background-color: color-mix(in srgb, var(--skin-page-text, var(--mo-soft)) 9%, transparent);
  border-color: color-mix(in srgb, var(--skin-page-text, var(--mo-soft)) 18%, transparent);
  border-radius: var(--radius-chip);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

#discover-window-body .discover-card strong {
  color: var(--skin-page-text, var(--mo));
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-medium);
}

#discover-window-body .discover-card small {
  font-weight: var(--fw-regular);
}

#discover-window-body .discover-card em {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

#discover-window-body .discover-experiments {
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
}

#discover-window-body .discover-experiments summary {
  padding: var(--pad-card) var(--pad-card) 0;
  color: var(--skin-page-text, var(--mo));
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

#discover-window-body .discover-progress__bar,
#discover-window-body .discover-progress__bar i {
  border-radius: var(--radius-inner);
}

/* ── ③ 合盘·五行平推对照 ───────────────── */
.relation-wuxing { margin:12px 0; padding:12px 14px; border:1px solid rgba(27,127,120,.18); border-radius:11px; background:#fffdf7; }
.relation-wuxing__head { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.relation-wuxing .rwx-chip { width:46px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; }
.relation-wuxing .rwx-rel { font-size:14px; font-weight:900; color:#0e5b55; }
.relation-wuxing__txt { margin:0; font-size:13px; line-height:1.7; color:#243632; }