/* ============================================================
   暖色底子 —— 沿用 lovetree 的设计 token
   奶油底、苔藓绿、香槟金（只给奖励和成长）、杏色高光、衬线标题

   排版遵循 Anthropic frontend-design 的原则：
   一套统一的字号比例（下面的 --fs-*），所有文字都从里面取，
   不再出现 0.82/0.86/0.92/1.02 这种彼此无关的临时值。
   个性集中在两处——衬线大标题和评分圆盘，其余标签、说明一律安静克制。
   ============================================================ */
:root {
  /* 颜色 */
  --moss: oklch(0.53 0.12 155);
  --moss-dark: oklch(0.46 0.12 155);
  --moss-light: oklch(0.94 0.03 155);
  --champagne: oklch(0.78 0.10 75);
  --champagne-dark: oklch(0.65 0.12 65);
  --champagne-light: oklch(0.94 0.04 75);
  --apricot: oklch(0.72 0.11 55);
  --apricot-dark: oklch(0.62 0.13 45);
  --apricot-light: oklch(0.95 0.03 55);

  --cream: oklch(0.955 0.018 78);
  --cream-dark: oklch(0.92 0.02 78);
  --linen: oklch(0.94 0.016 75);
  --bg-card: oklch(0.985 0.012 78);

  --text: oklch(0.30 0.02 55);
  --text-secondary: oklch(0.44 0.02 55);
  --text-muted: oklch(0.56 0.015 55);

  --border: oklch(0.88 0.015 75);
  --shadow: 0 10px 30px -12px oklch(0.4 0.05 60 / 0.28);
  --shadow-sm: 0 4px 14px -8px oklch(0.4 0.05 60 / 0.25);

  --radius: 0.9rem;
  --radius-lg: 1.4rem;

  /* 字体家族：全站统一 Noto Sans。
     霞鹜文楷（--font-display）只允许出现在两处：入口页的"安全屋"、头像圆章。
     其余任何地方都别再用它，不然整体就花了。 */
  --font-sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-display: 'LXGW WenKai', 'Noto Serif SC', 'Songti SC', Georgia, serif;

  /* 统一字号阶梯，一屏最多出现三四档：
     12 小标签 / 13 meta / 15 次要 / 17 正文 / 22 卡片标题 / 28 页面标题 / hero 只给"安全屋" */
  --fs-eyebrow: 0.75rem;   /* 12px */
  --fs-xs: 0.8125rem;      /* 13px */
  --fs-sm: 0.9375rem;      /* 15px */
  --fs-base: 1.0625rem;    /* 17px */
  --fs-md: 1.1875rem;      /* 19px  引导性段落、房间正文 */
  --fs-lg: 1.375rem;       /* 22px */
  --fs-xl: 1.75rem;        /* 28px */
  --fs-hero: clamp(2.1rem, 6.5vw, 3rem);

  /* 字重 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* 行高 */
  --lh-tight: 1.28;
  --lh-snug: 1.45;
  --lh-base: 1.68;

  /* 小标签统一的字间距 */
  --track-label: 0.14em;

  /* 每条线切换的主色，默认苔藓绿 */
  --accent: var(--moss);
  --accent-dark: var(--moss-dark);
  --accent-light: var(--moss-light);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

/* 质量底线：键盘操作时焦点可见（鼠标点击不显示，不干扰视觉） */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 6px; }

/* 质量底线：用户系统开了"减弱动态效果"就全部安静下来 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

::selection { background: var(--champagne-light); color: var(--text); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 12% -8%, oklch(0.96 0.035 75 / 0.7), transparent 60%),
    radial-gradient(900px 640px at 100% 0%, oklch(0.95 0.03 155 / 0.5), transparent 55%),
    var(--cream);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100%; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 44px) 20px 64px;
}

/* ---------- 文字基调 ---------- */
/* 标题走无衬线中黑，大小定死三档，别在页面里再另起字号 */
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-base); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.center { text-align: center; }

/* 眉标 / 小标签：全站唯一的一种，安静克制 */
.kicker {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 26px;
}
.back {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); font-size: var(--fs-sm); font-family: var(--font-sans);
  padding: 6px 4px; border-radius: 8px;
}
.back:hover { color: var(--text); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 34px);
}

/* ---------- 按钮 ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border: none; cursor: pointer;
  padding: 13px 22px;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn-primary {
  background: var(--accent); color: white;
  box-shadow: 0 10px 22px -12px var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--linen); color: var(--text); }
.btn-block { width: 100%; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

/* ---------- 入口页 ---------- */
.landing-head { text-align: center; margin: 10vh 0 44px; }
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 4.3rem);
  color: var(--text); line-height: 1.06; letter-spacing: 0.04em;
}
/* 签名元素：手绘线稿——一间小屋，屋旁一棵树（苔藓绿），屋顶上一弯月（杏色）。
   打开页面时一笔一笔画出来。全站的"个性"就花在这幅头图 + 安全屋三个字上，别处保持安静。 */
.brand-art {
  width: 150px; height: auto; display: block;
  margin: 0 auto 8px; color: var(--text-secondary);
}
.brand-art path, .brand-art circle {
  fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.brand-art .ink { stroke: currentColor; }
.brand-art .tree { stroke: var(--moss); }
.brand-art .moon { stroke: var(--apricot-dark); }
.brand-art .draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.1s ease forwards;
}
.brand-art .d1 { animation-delay: 0.15s; }
.brand-art .d2 { animation-delay: 0.65s; }
.brand-art .d3 { animation-delay: 1.05s; }
.brand-art .d4 { animation-delay: 0s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.brand-poem {
  margin: 18px auto 0;
  font-family: var(--font-display);
  font-size: var(--fs-md); color: var(--text-secondary);
  letter-spacing: 0.06em;
}
.brand-sub {
  margin: 12px auto 0; max-width: 26em;
  color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug);
}

/* 入场：一次编排好的渐次浮现，别处不再加动效 */
.landing-head .brand-name { animation: rise 0.8s ease both 0.1s; }
.landing-head .brand-poem { animation: rise 0.8s ease both 0.3s; }
.landing-head .brand-sub  { animation: rise 0.8s ease both 0.45s; }
.choose { animation: rise 0.8s ease both 0.6s; }
.landing-foot { animation: rise 0.8s ease both 0.75s; }

.choose { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .choose { grid-template-columns: 1fr; } }

.role-card {
  position: relative;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  overflow: hidden;
}
.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.role-card .glow {
  position: absolute; inset: -40% 40% auto -30%; height: 180px;
  background: radial-gradient(circle, var(--rc-glow), transparent 70%);
  opacity: 0.6; pointer-events: none;
}
.role-card .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.95rem; font-weight: var(--fw-normal);
  color: var(--rc-strong);
  background: var(--rc-soft); border: 1px solid var(--rc-line);
  margin-bottom: 16px;
}
.role-card h2 { font-size: var(--fs-lg); }
.role-card .type {
  display: inline-block; margin-top: 8px; margin-bottom: 12px;
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); color: var(--rc-strong);
  background: var(--rc-soft); padding: 4px 12px; border-radius: 999px;
}
.role-card .desc { color: var(--text-secondary); font-size: var(--fs-sm); min-height: 3.4em; line-height: var(--lh-snug); }
.role-card .go {
  margin-top: 18px; color: var(--rc-strong); font-weight: var(--fw-medium); font-size: var(--fs-sm);
}
.role-card.moss  { --rc-glow: oklch(0.7 0.12 155 / .4); --rc-soft: var(--moss-light); --rc-line: oklch(0.85 0.05 155); --rc-strong: var(--moss-dark); }
.role-card.apricot { --rc-glow: oklch(0.8 0.12 55 / .45); --rc-soft: var(--apricot-light); --rc-line: oklch(0.86 0.06 55); --rc-strong: var(--apricot-dark); }

.landing-foot { text-align: center; margin-top: 34px; color: var(--text-muted); font-size: var(--fs-xs); }

/* ---------- 走廊(2.0:插画门卡) ---------- */
.hall-banner {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 24px;
  border: 1px solid var(--border);
}
.hall-banner img { display: block; width: 100%; height: auto; }

.lamps {
  font-size: var(--fs-sm); color: var(--text-secondary);
  margin: 18px 2px 8px;
}

.doors {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4px;
}
@media (max-width: 560px) { .doors { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.door-card {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); color: var(--text);
  transition: transform .2s ease;
}
.door-card img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.door-card:hover:not(:disabled) img { transform: translateY(-3px); box-shadow: var(--shadow); }
.door-card:hover:not(:disabled) { transform: none; }
.door-card:disabled { cursor: default; }
.door-card.locked img { opacity: 0.55; filter: saturate(0.75); }
.door-card.current img { border-color: var(--accent); box-shadow: 0 10px 26px -12px var(--accent); }
.door-card .dl {
  margin-top: 10px; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  line-height: var(--lh-snug); text-align: center;
}
.door-card.locked .dl { color: var(--text-muted); font-weight: var(--fw-normal); }
.door-card .ds {
  margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted);
  text-align: center; font-variant-numeric: tabular-nums;
}
.door-card.cleared .ds { color: var(--champagne-dark); }
.door-card.current .ds { color: var(--accent-dark); }
.door-card.surprise:not(.locked) img { border-color: var(--champagne); box-shadow: 0 10px 26px -12px var(--champagne-dark); }
.door-card.surprise .ds { color: var(--champagne-dark); }

/* 走廊尽头的客厅 */
.living-card {
  width: 100%; margin-top: 26px;
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
  cursor: pointer; font-family: var(--font-sans); color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.living-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.living-card:disabled { cursor: default; opacity: 0.65; }
.living-card.locked img { filter: saturate(0.6); opacity: 0.7; }
.living-card img {
  width: 112px; height: auto; border-radius: 10px; flex: none;
  border: 1px solid var(--border);
}
.living-card .body { flex: 1; }
.living-card .t { display: block; font-size: var(--fs-base); font-weight: var(--fw-medium); }
.living-card .s { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: var(--lh-snug); }
.living-card .arrow { color: var(--text-muted); }

/* 房间场景页(钥匙房、天台) */
.room-scene { text-align: center; padding: 2vh 0; }
.room-hero {
  width: min(100%, 560px); height: auto; display: block; margin: 0 auto 26px;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.room-copy p {
  color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-snug);
  max-width: 30em; margin: 0 auto 10px;
}
.room-copy p:first-child { color: var(--text); }

/* 信箱房 */
.mail-block { max-width: 34em; margin: 22px auto 0; text-align: left; }
.mail-mine {
  max-width: 34em; margin: 22px auto 0; text-align: left;
  background: var(--apricot-light); border: 1px solid oklch(0.86 0.06 55);
  border-radius: var(--radius); padding: 16px 18px;
}
.mail-mine .meta { font-size: var(--fs-xs); color: var(--apricot-dark); margin-bottom: 6px; }
.mail-mine .mine-text {
  font-family: var(--font-display); color: var(--text);
  font-size: var(--fs-base); line-height: var(--lh-snug);
}
.mail-mine .mail-edit {
  margin-top: 10px; border: none; background: transparent; cursor: pointer;
  color: var(--apricot-dark); font-size: var(--fs-sm); font-family: var(--font-sans); padding: 2px 0;
}
.mail-mine .mail-edit:hover { text-decoration: underline; }

.mail-box { max-width: 34em; margin: 18px auto 0; text-align: center; }
.mail-box.empty-box {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 22px 20px; background: var(--linen);
}
.mail-box .empty-title {
  font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-secondary); margin-bottom: 6px;
}
.mail-box.empty-box p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); max-width: 26em; margin: 0 auto; }

/* 天台上"对方屋子亮了几盏灯"的一行 */
.partner-lamps:empty { display: none; }
.partner-lamps {
  margin: 14px auto 0; max-width: 30em;
  font-family: var(--font-display); color: var(--champagne-dark);
  font-size: var(--fs-base); line-height: var(--lh-snug);
}

/* 信箱房那扇门被对方留言点亮时 */
.door-card.surprise.lit { border-color: var(--champagne); box-shadow: 0 0 0 2px var(--champagne-light), var(--shadow-sm); }
.door-card.surprise.lit .ds { color: var(--champagne-dark); }

/* ---------- 关卡地图 ---------- */
.map-head { margin-bottom: 8px; }
.map-head h1 { color: var(--text); }
.map-head p { font-size: var(--fs-base); line-height: var(--lh-snug); }
.progress-line {
  height: 8px; border-radius: 999px; background: var(--cream-dark);
  overflow: hidden; margin: 18px 0 30px;
}
.progress-line > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--champagne)); transition: width .5s ease; }

.levels { display: grid; gap: 14px; }
.level-node {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  cursor: pointer; transition: transform .16s, box-shadow .2s, border-color .2s;
  text-align: left; width: 100%; font-family: var(--font-sans);
}
.level-node:hover:not(.locked) { transform: translateX(3px); box-shadow: var(--shadow-sm); border-color: var(--rc-line, var(--accent)); }
.level-node.locked { opacity: 0.55; cursor: not-allowed; }
.level-node .num {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--linen); color: var(--text-secondary); font-size: var(--fs-sm);
}
.level-node.cleared .num { background: var(--champagne-light); color: var(--champagne-dark); border: 1px solid var(--champagne); }
.level-node.current .num { background: var(--accent); color: white; }
.level-node .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.level-node .body .t { display: block; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.level-node .body .s { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; line-height: var(--lh-snug); }
.level-node .badge { font-size: var(--fs-xs); color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
.level-node.cleared .badge { color: var(--champagne-dark); }

.arena-entry {
  margin-top: 26px; border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(120deg, var(--champagne-light), transparent);
}
.arena-entry.locked { opacity: 0.7; }
.arena-entry .body { flex: 1; }
.arena-entry .body .t { font-weight: var(--fw-medium); font-size: var(--fs-base); }
.arena-entry .body .s { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; line-height: var(--lh-snug); }

/* ---------- 关卡页 ---------- */
.scene { margin-bottom: 22px; }
.narration {
  color: var(--text-secondary);
  background: var(--linen); border-radius: var(--radius);
  padding: 14px 18px; font-size: var(--fs-base); line-height: var(--lh-snug); margin-bottom: 14px;
}
.bubble-row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.bubble-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--fw-normal);
  background: var(--linen); color: var(--text-muted); border: 1px solid var(--border);
}
.bubble-avatar.xiaoshu { background: var(--moss-light); color: var(--moss-dark); border-color: oklch(0.85 0.05 155); }
.bubble-avatar.xiaoyue { background: var(--apricot-light); color: var(--apricot-dark); border-color: oklch(0.86 0.06 55); }
.bubble {
  background: white; border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px; padding: 12px 16px;
  box-shadow: var(--shadow-sm); max-width: 80%;
  font-size: var(--fs-base); line-height: var(--lh-snug);
}
.bubble .who { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 3px; }

.task-box {
  background: var(--accent-light); border-radius: var(--radius);
  padding: 14px 18px; margin: 20px 0 8px;
}
.task-box .label { font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); color: var(--accent-dark); font-weight: var(--fw-medium); }
.task-box .task { margin-top: 5px; font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text); }
.hint {
  font-size: var(--fs-sm); color: var(--text-muted);
  margin: 12px 2px 0; padding-left: 12px;
  border-left: 2px solid var(--border);
  line-height: var(--lh-snug);
}

textarea {
  width: 100%; min-height: 130px; resize: vertical;
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base);
  color: var(--text); caret-color: var(--accent);
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-top: 18px;
  transition: border-color .2s, box-shadow .2s;
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
input.code-input {
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: var(--fs-lg); letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums; caret-color: var(--accent);
  text-align: center; text-transform: uppercase;
  width: 100%; padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
input.code-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
input.text-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-base);
}
input.text-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
label.field { display: block; margin-top: 16px; }
label.field .lab { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 6px; display: block; }

/* ---------- 评分卡 ---------- */
.result { margin-top: 8px; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.score-head { display: flex; align-items: center; gap: 20px; }
.dial {
  --pct: 0; width: 92px; height: 92px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--dial-c) calc(var(--pct) * 1%), var(--cream-dark) 0);
}
.dial::after {
  content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-card);
}
.dial .n { position: relative; z-index: 1; font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--text); font-variant-numeric: tabular-nums; }
.verdict .tag { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.verdict.pass .tag { color: var(--moss-dark); }
.verdict.fail .tag { color: var(--apricot-dark); }
.verdict .sub { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 3px; line-height: var(--lh-snug); }

.fb { margin-top: 20px; display: grid; gap: 14px; }
.fb .block { border-radius: var(--radius); padding: 14px 16px; line-height: var(--lh-snug); }
.fb .block .h { font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); margin-bottom: 6px; font-weight: var(--fw-medium); }
.fb .good { background: var(--moss-light); }
.fb .good .h { color: var(--moss-dark); }
.fb .grow { background: var(--apricot-light); }
.fb .grow .h { color: var(--apricot-dark); }
.fb .better { background: var(--champagne-light); border: 1px solid var(--champagne); }
.fb .better .h { color: var(--champagne-dark); }
.fb .better .txt { color: var(--text); }
.total-fb { text-align: center; color: var(--text-secondary); margin: 18px 0 4px; font-size: var(--fs-base); line-height: var(--lh-snug); }

.pill-note {
  display: inline-block; font-size: var(--fs-xs); color: var(--text-muted);
  background: var(--linen); padding: 3px 10px; border-radius: 999px; margin-bottom: 14px;
}

/* ---------- 结局页 ---------- */
.ending { text-align: center; padding: 8vh 0; }
.ending h1 { margin: 0 0 14px; color: var(--text); }
.ending p { color: var(--text-secondary); font-size: var(--fs-base); max-width: 30em; margin: 0 auto 8px; line-height: var(--lh-snug); }

/* ---------- 对练场 ---------- */
.arena-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.arena-tabs button {
  flex: 1; padding: 11px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; font-family: var(--font-sans);
  color: var(--text-secondary); font-size: var(--fs-sm);
}
.arena-tabs button.on { background: var(--accent); color: white; border-color: var(--accent); }

.code-reveal {
  text-align: center; background: var(--champagne-light); border: 1px solid var(--champagne);
  border-radius: var(--radius); padding: 22px; margin-top: 18px;
}
.code-reveal .code { font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: 0.25em; color: var(--champagne-dark); font-variant-numeric: tabular-nums; }
.code-reveal .link { font-size: var(--fs-xs); word-break: break-all; color: var(--text-muted); margin-top: 8px; }

.letter {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  background: var(--bg-card); margin-bottom: 12px;
}
.letter .meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.letter .scene-q { font-size: var(--fs-base); line-height: var(--lh-snug); }
.letter .ans { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.letter .ans .sc { color: var(--champagne-dark); font-weight: var(--fw-medium); }
.letter .waiting { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-muted); }

.empty { text-align: center; color: var(--text-muted); padding: 30px 10px; font-size: var(--fs-base); }

.spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--accent-light); border-top-color: var(--accent);
  animation: spin .7s linear infinite; vertical-align: -3px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--text); color: var(--cream); padding: 10px 18px; border-radius: 999px;
  font-size: var(--fs-sm); box-shadow: var(--shadow); z-index: 50; animation: rise .3s ease both;
}

/* ============================================================
   动画层 —— 让走进这间屋子更丝滑
   一处签名动作：推门进屋时一层暖光漫过屏幕。其余都是克制的浮入与呼吸。
   全部受顶部 prefers-reduced-motion 规则约束，关掉动效时自动安静。
   ============================================================ */

/* 每屏进来时轻轻浮起——全站统一的"翻页"手感 */
.wrap { animation: screen-in .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 入口页自己有编排好的渐次浮现，不要叠加整屏浮起 */
.wrap:has(.landing-head) { animation: none; }

/* 推门进屋：一层暖光从门的位置漫开，盖过屏幕，再散去，露出房间 */
.door-wipe {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: radial-gradient(circle at center,
    oklch(0.97 0.05 80 / .97) 0%, oklch(0.95 0.045 78 / .96) 48%, oklch(0.93 0.04 76 / .93) 100%);
  opacity: 0; overflow: hidden;
}
.door-wipe::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 46vmax; height: 46vmax; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.15);
  background: radial-gradient(circle, oklch(0.99 0.07 82 / .95), transparent 62%);
}
.door-wipe.in  { animation: wipe-in .4s ease forwards; }
.door-wipe.in::before { animation: bloom .4s ease forwards; }
.door-wipe.out { animation: wipe-out .5s ease forwards; }
@keyframes wipe-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wipe-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bloom {
  from { transform: translate(-50%, -50%) scale(.15); opacity: .5; }
  to   { transform: translate(-50%, -50%) scale(3.4); opacity: 1; }
}

/* 走廊：门错落浮入 */
.doors .door-card { animation: door-pop .5s cubic-bezier(.2,.7,.3,1) both; }
.doors .door-card:nth-child(1){animation-delay:.03s}
.doors .door-card:nth-child(2){animation-delay:.07s}
.doors .door-card:nth-child(3){animation-delay:.11s}
.doors .door-card:nth-child(4){animation-delay:.15s}
.doors .door-card:nth-child(5){animation-delay:.19s}
.doors .door-card:nth-child(6){animation-delay:.23s}
.doors .door-card:nth-child(7){animation-delay:.27s}
.doors .door-card:nth-child(8){animation-delay:.31s}
.doors .door-card:nth-child(9){animation-delay:.35s}
.doors .door-card:nth-child(10){animation-delay:.39s}
.doors .door-card:nth-child(11){animation-delay:.43s}
.doors .door-card:nth-child(12){animation-delay:.47s}
.doors .door-card:nth-child(n+13){animation-delay:.5s}
@keyframes door-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* 当前那扇开着的门，灯光轻轻呼吸，把视线引到"你在这儿" */
.door-card.current img { animation: door-breathe 2.8s ease-in-out infinite; }
@keyframes door-breathe {
  0%, 100% { box-shadow: 0 10px 26px -12px var(--accent); }
  50%      { box-shadow: 0 12px 30px -8px var(--accent), 0 0 0 3px var(--accent-light); }
}

/* 刚点亮的那扇门，回到走廊时亮灯闪一下 */
.door-card.just-lit img { animation: lamp-on 1.2s ease both; }
@keyframes lamp-on {
  0%   { filter: brightness(1); }
  22%  { filter: brightness(1.4) saturate(1.12); box-shadow: 0 0 0 5px var(--champagne-light), var(--shadow); }
  55%  { filter: brightness(1.12); }
  100% { filter: brightness(1); }
}

/* 评分表盘：弧线和数字由 JS 的 setInterval 一起往上长（见 animateDial） */
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }

/* 天台夜屋：窗光轻轻呼吸 */
.ending .room-hero { animation: night-glow 4.5s ease-in-out infinite; }
@keyframes night-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.07) saturate(1.04); } }