/* ── 设计令牌 ────────────────────────────────────────────
   气质：温暖手绘绘本 + 博物馆展陈的克制。
   所有颜色、间距、圆角、阴影只在这里定义一次。
   ──────────────────────────────────────────────────── */

:root {
  /* 纸与墨 */
  --paper-0: #fdf8ec;   /* 最亮的纸，卡片面 */
  --paper-1: #f7eedd;   /* 常规纸 */
  --paper-2: #efe3cc;   /* 沉一点的纸，凹槽 */
  --paper-3: #e4d5ba;   /* 纸的阴影边 */
  --ink-0:   #3a2e24;   /* 主文字 */
  --ink-1:   #6b5c4d;   /* 次要文字 */
  --ink-2:   #93816d;   /* 辅助 / 占位 */
  --hair:    #d8c4a4;   /* 细线 */

  /* 泥土 */
  --soil:      #9b603f;
  --soil-dark: #6e4227;
  --soil-deep: #4a2b1a;
  --soil-lit:  #c08a5e;

  /* 草木 */
  --green:      #6f8d58;
  --green-dark: #4c6a3d;
  --green-lit:  #9dbb7d;

  /* 火 */
  --fire:      #ca5c32;
  --fire-lit:  #f0a04b;
  --fire-deep: #8c3418;

  /* 水与天 */
  --sky:   #a9c9d8;
  --water: #7fb0c4;

  /* 稀有 / 荣誉 */
  --gold:      #c1912f;
  --gold-lit:  #e8c55f;
  --gold-deep: #7d5c12;

  /* 语义 */
  --ok:   #5f8a45;
  --warn: #b9762a;
  --bad:  #a6432c;

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  /* 间距 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 42px;

  /* 阴影：低角度暖光，不要冷灰 */
  --sh-1: 0 1px 2px rgba(74, 43, 26, .10);
  --sh-2: 0 3px 10px rgba(74, 43, 26, .13);
  --sh-3: 0 10px 28px rgba(74, 43, 26, .16);
  --sh-in: inset 0 2px 6px rgba(74, 43, 26, .14);

  /* 按钮的实体感：底部一道厚边，像木头按键 */
  --lip: 4px;

  /* 字体 */
  --font-ui: ui-rounded, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-label: "Songti SC", "SimSun", "Noto Serif SC", serif; /* 展签、档案用宋体，有博物馆味 */

  --t-fast: 140ms;
  --t-mid: 260ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(.22, .68, .32, 1);
  --ease-out-back: cubic-bezier(.2, 1.3, .4, 1);

  /* ── V9 手记语言（第二层令牌） ─────────────────────
     整个游戏是一本随营手记：山野各幕长在纸上，
     博物馆是另一个世界（深墙、射灯、宋体）。
     这里只放材质与两个世界的色板，组件自己去取。 */

  /* 纸纹：一张几百字节的内联 SVG 噪点，全场复用。
     它是背景图，浏览器只栅格化一次，不是实时滤镜——手机不吃亏。 */
  --tex-paper: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 布纹：稍粗一点的经纬，麻布标签和木架背景用 */
  --tex-cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55 .18' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .29 0 0 0 0 .18 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 手写体：系统楷体，零加载。手记批注、便签、涂鸦标注用 */
  --font-hand: "Kaiti SC", "STKaiti", "KaiTi", "TW-Kai", "AR PL KaitiM GB", serif;

  /* 便签与纸胶带 */
  --note-paper: #fbf3da;
  --tape: rgba(209, 178, 118, .45);

  /* 博物馆的世界（和分享展签卡同一套） */
  --wall-0: #1a1410;      /* 展墙深处 */
  --wall-1: #262019;      /* 展墙受光面 */
  --wall-line: rgba(199, 168, 114, .30);   /* 金线 */
  --plaque-paper: #f4ecdc; /* 展签卡纸 */
  --plaque-ink: #2b231c;
  --brass: #b09a74;        /* 铜牌 */
}

/* 深色环境下不反转配色（绘本气质靠暖纸支撑），只轻微压一下亮度 */
@media (prefers-color-scheme: dark) {
  :root { --page-dim: .96; }
}

/* ── 底座：页面骨架、纸张肌理、通用排版 ─────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink-0);
  background: #e9e3d2;
  /* 纸纹：三层极低对比的噪点，避免大面积纯色的塑料感 */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(155,96,63,.10), transparent 46%),
    repeating-linear-gradient(58deg, rgba(120,90,60,.030) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-32deg, rgba(120,90,60,.024) 0 2px, transparent 2px 6px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;

  /* ── 手机上的手感 ───────────────────────────────
     网页在手机上有几个天生的动作，放在游戏里全是误触：
     手指按住一会儿就选中文字、按住图片弹出「存储到照片」、
     双击一下页面就放大。做陶器要按住要拖动，这三样必关。
     touch-action 不遗传，但浏览器判定时会从被点的元素一路
     往上取交集，所以写在 body 上，全页面的双击缩放就没了。
     真正要打字的地方在下面开回来。 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input, textarea, select, .selectable, .selectable * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img {
  max-width: 100%; display: block;
  -webkit-user-drag: none;      /* 别拖出一个半透明的图片影子 */
}

h1, h2, h3, h4 { margin: 0 0 var(--s-2); line-height: 1.25; letter-spacing: .01em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 var(--s-2); line-height: 1.72; }
p:last-child { margin-bottom: 0; }

/* ── 舞台可用高度 ─────────────────────────────────
   画面按这个数吃满屏幕。顶栏 + 旅程带 + 底坞 + 间距。
   --stage-min 是场景高度的下限：竖屏上它保证画面不会矮得没法玩，
   横屏上必须放开，否则 390 高的屏幕要撑一个 320 的坑，直接溢出。 */
:root { --chrome: 214px; --stage-h: calc(100dvh - var(--chrome)); --stage-min: 300px; }

.app {
  min-height: 100dvh;
  width: min(1760px, 100%);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ── 顶栏 ─────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.topbar__seal {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--soil-lit), var(--soil) 55%, var(--soil-dark));
  box-shadow: var(--sh-1), inset 0 -3px 4px rgba(74,43,26,.35);
  align-self: center; flex: none;
}
.topbar__title { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.topbar__sub { font-size: 13px; color: var(--ink-2); letter-spacing: .12em; }

.topbar__meta { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-0);
  border: 1.5px solid var(--hair);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-1);
  white-space: nowrap;
}
.chip--gold { border-color: var(--gold); color: var(--gold-deep); background: #fdf3d9; }
.chip__k { color: var(--ink-2); font-weight: 600; }

/* ── 旅程带：这块泥走到哪里了 ─────────────────────────
   一条画在纸上的小径：步点之间是虚线的路，走到哪儿，
   哪儿的印章就盖下来。不再是胶囊工具条。 */
.journey {
  display: flex; align-items: stretch; gap: 0;
  background: var(--tex-paper), linear-gradient(0deg, var(--paper-1), var(--paper-1));
  border: 1.5px solid var(--hair);
  border-radius: 15px 21px 13px 19px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: var(--sh-1);
  flex: none;
  position: relative;
}
/* 步点之间那条走出来的虚线小路 */
.journey::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 13px;
  border-top: 2px dashed rgba(147, 129, 109, .48);
  pointer-events: none;
}
.journey::-webkit-scrollbar { display: none; }
.journey__step {
  flex: 1 1 0; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px 5px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  position: relative;
  transition: color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
  white-space: nowrap;
}
.journey__dot {
  width: 9px; height: 9px; border-radius: 47% 53% 50% 50%;
  background: var(--paper-0);
  box-shadow: inset 0 0 0 1.5px var(--hair);
  transition: all var(--t-mid) var(--ease);
  position: relative; z-index: 1;      /* 踩在虚线小路上，不被路盖住 */
}
.journey__step.is-done { color: var(--green-dark); }
.journey__step.is-done .journey__dot { background: var(--green); box-shadow: none; }
.journey__step.is-now {
  color: var(--paper-0);
  background: linear-gradient(180deg, var(--soil-lit), var(--soil));
  box-shadow: 0 2px 0 var(--soil-dark), var(--sh-1);
}
.journey__step.is-now .journey__dot { background: var(--gold-lit); box-shadow: 0 0 0 3px rgba(232,197,95,.35); }

/* ── 舞台 ─────────────────────────────────────────── */
.stagewrap {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w, 340px);
  gap: var(--s-3);
  align-items: start;
  min-height: 0;
}
.stage {
  background: var(--tex-paper), linear-gradient(0deg, var(--paper-1), var(--paper-1));
  border: 2px solid var(--hair);
  border-radius: 24px 30px 22px 28px;   /* 手记摊开的那一页，角不是机器切的 */
  padding: var(--s-4);
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

/* ── 手记（右栏 / 手机上的底部抽屉） ───────────────── */
.side { display: flex; flex-direction: column; min-width: 0; }
.side__grip { display: none; }
.side__scroll {
  display: flex; flex-direction: column; gap: var(--s-3);
  max-height: var(--stage-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 2px;
}
.side__scroll::-webkit-scrollbar { width: 9px; }
.side__scroll::-webkit-scrollbar-thumb { background: var(--paper-3); border-radius: 999px; border: 2px solid #e9e3d2; }
.side__scroll::-webkit-scrollbar-track { background: transparent; }

/* 桌面上收起手记，把舞台放到最大 */
.app.is-tucked { --side-w: 0px; }
.app.is-tucked .side { display: none; }

/* ── 底部坞 ───────────────────────────────────────── */
.dock {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; flex: none;
}
.dock__hint { font-size: 13px; color: var(--ink-1); min-height: 20px; flex: 1 1 240px; }
.dock__acts { display: flex; gap: var(--s-2); }
/* 底坞的按钮在手机上只有二十几像素高——按钮之间留着缝，
   用透明热区把命中范围扩到手指的大小。只扩命中，不动布局。
   注意热区不往下伸：底坞贴着屏幕底，绝对定位的伪元素往下多一像素，
   文档就会多出一像素的滚动高度——横屏「一屏放得下」当场破功。
   热区必须用 ::before——::after 被「泥土笔记」的新笔记数字角标占着，
   两条规则撞在同一个伪元素上，角标会被 inset 拉成一条胶囊。 */
.dock .btn { position: relative; }
.dock .btn::before { content: ""; position: absolute; inset: -10px -5px 0; }

/* ── 特效层 ───────────────────────────────────────── */
.fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.toasts {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--s-2); align-items: center;
  pointer-events: none; z-index: 95; width: min(520px, 92vw);
}

/* 抖动：用在挖到东西、窑温骤变这种时刻 */
@keyframes shake {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-4px, 2px) }
  40% { transform: translate(3px, -3px) }
  60% { transform: translate(-3px, -1px) }
  80% { transform: translate(2px, 3px) }
}
.is-shaking { animation: shake 380ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 中等屏 ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .stagewrap { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ── 窄屏：手记变成从底下拉起来的抽屉 ───────────────── */
@media (max-width: 900px) {
  :root { --chrome: 168px; }
  .app { padding: var(--s-2) var(--s-2) 0; gap: var(--s-2); min-height: 100dvh; }
  /* 手机上不要为了撑满高度而在画面下面留一大片空 */
  .stagewrap { grid-template-columns: 1fr; flex: 0 0 auto; }
  .stage { padding: var(--s-2); border-radius: var(--r-md); }
  .topbar__sub { display: none; }
  .topbar { gap: var(--s-2); }
  .topbar__title { font-size: 17px; }
  .chip { padding: 4px 9px; font-size: 12px; }
  .journey__step { min-width: 56px; font-size: 11px; padding: 5px 2px 4px; }

  .side {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--paper-1);
    border-top: 2px solid var(--hair);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 28px rgba(74,43,26,.18);
    transform: translateY(calc(100% - 52px));
    transition: transform var(--t-mid) var(--ease);
    max-height: 84dvh;
  }
  .side.is-open { transform: translateY(0); }
  .side__grip {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 52px; flex: none;
    background: transparent; border: 0;
    font-weight: 800; color: var(--ink-1); font-size: 15px;
  }
  .side__grip::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--paper-3);
  }
  .side__gripArrow { transition: transform var(--t-mid) var(--ease); }
  .side.is-open .side__gripArrow { transform: rotate(180deg); }
  .side__scroll {
    max-height: calc(84dvh - 52px);
    padding: 0 var(--s-3) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  }

  .dock {
    position: sticky; bottom: 0;
    padding: 6px 0 calc(58px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(233,227,210,0), #e9e3d2 38%);
  }
  .dock__hint { flex: 1 1 100%; order: 2; font-size: 12px; }
  .dock__acts { order: 1; width: 100%; justify-content: space-between; }
  /* 提示条落在底坞和手记把手中间那条缝里。抬高一点就会压住底坞那行
     「走近亮着的地方就会进去」，那句话正是新手最需要看见的。 */
  .toasts { bottom: 72px; }
}

@media (max-width: 560px) {
  .btn--sm { padding: 6px 9px; font-size: 12px; }
}

/* ── 全屏模式 ─────────────────────────────────────────
   全屏的是整个文档（documentElement），不是 #app——
   弹窗、提示条、庆祝层都在 #app 外面，只全屏 #app 它们就看不见了。
   另外 --stage-h 是在 :root 上求值的，--chrome 的覆写也必须写在
   :root 上才真的生效；V8 写在 .app 上，等于没写。 */
:root:fullscreen { --chrome: 176px; }
:root:fullscreen .app { background: #e9e3d2; padding: var(--s-3) var(--s-4); }
:root:fullscreen .topbar__sub { display: inline; }

/* ── 手机上的两种布局 ─────────────────────────────
   game：画面是主角，手记收成底部抽屉
   doc ：面板本身就是内容（取名、答题、命名、博物馆、笔记），
         必须顺着排在画面下面，不能藏进抽屉里
   ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .app[data-layout="doc"] .side {
    position: static;
    transform: none;
    max-height: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: var(--s-2);
  }
  .app[data-layout="doc"] .side__grip { display: none; }
  .app[data-layout="doc"] .side__scroll { max-height: none; overflow: visible; padding: 0; }
  .app[data-layout="doc"] .dock { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  .app[data-layout="doc"] .toasts { bottom: 96px; }
}

/* ── 手机横过来 ───────────────────────────────────
   横屏最缺的是高度：390 的屏幕，顶栏加旅程带加底坞就吃掉一半。
   但横屏最不缺的是宽度——那正好把手记从底部抽屉放回右栏，
   画面和手记并排，两边都完整。
   判据用高度不用宽度：iPhone 横过来有 844 的，也有 932 的，
   932 会漏过 900 那道门槛，只有「矮」是它们共同的样子。
   ──────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 560px) {
  /* 140 是量出来的，不是估的：顶栏 26 + 旅程带 34 + 底坞 40
     + 上下留白 8 + 三道间隙 12 + 舞台自己的内边距和描边 20，
     再留 4 px 余量。少算一点，底坞就掉到屏幕外面，
     横屏上人就找不到「博物馆」那个按钮了。
     改了这一段里任何一个高度，回来把这个数重新量一遍。 */
  :root { --chrome: 144px; --stage-min: 0px; }

  .app {
    padding: 4px max(8px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    gap: 4px;
    min-height: 0;
  }

  /* 顶栏压成一条，名字和状态挤在一行里横着滚 */
  .topbar { gap: var(--s-2); flex-wrap: nowrap; min-width: 0; }
  .topbar__sub { display: none; }
  .topbar__title { font-size: 15px; }
  .topbar__seal { width: 19px; height: 19px; }
  .topbar__meta { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .topbar__meta::-webkit-scrollbar { display: none; }
  .chip { padding: 3px 9px; font-size: 11.5px; }

  /* 旅程带只剩图标。名字藏起来，位置还在，走到哪儿仍然看得见 */
  .journey { padding: 2px; }
  .journey__step { min-width: 32px; padding: 3px 2px 2px; gap: 0; }
  .journey__label { display: none; }
  .journey__icon { font-size: 14px; line-height: 1.15; }
  .journey__dot { width: 6px; height: 6px; }

  /* 手记回到右栏 */
  .stagewrap, .app[data-layout="doc"] .stagewrap { grid-template-columns: minmax(0, 1fr) 260px; flex: 1 1 auto; }
  .stage { padding: var(--s-2); }
  .side, .app[data-layout="doc"] .side {
    position: static; transform: none; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    max-height: none;
  }
  .side__grip, .app[data-layout="doc"] .side__grip { display: none; }
  .side__scroll, .app[data-layout="doc"] .side__scroll {
    max-height: var(--stage-h); overflow-y: auto; padding: 0 2px 0 0; gap: var(--s-2);
  }

  /* 底坞回到一行 */
  .dock, .app[data-layout="doc"] .dock {
    position: static; padding: 0; background: none;
    flex-wrap: nowrap; gap: var(--s-2);
  }
  .dock__hint { order: 0; flex: 1 1 auto; font-size: 11.5px; min-height: 0; line-height: 1.35; }
  .dock__acts { order: 1; width: auto; flex: none; gap: 5px; }
  .dock .btn--sm { padding: 5px 9px; font-size: 12px; }
  .dock .btn--icon { padding: 6px 9px; }
  .toasts, .app[data-layout="doc"] .toasts { bottom: 46px; }

  /* 横屏上卡片和方向键都得瘦一圈，不然一屏放不下两样东西 */
  .card { padding: var(--s-3); }
  .dpad { grid-template-columns: repeat(3, 42px); grid-auto-rows: 42px; gap: 5px; }
  .keyhint { display: none; }
  .speech { padding: var(--s-2) var(--s-3); }
  .speech__who { width: 32px; height: 32px; font-size: 17px; }
}

/* ── 装到桌面以后 ─────────────────────────────────
   独立窗口里没有浏览器的地址栏，顶上那一条是刘海和状态栏，
   得自己让开。全屏按钮在这里没有意义，由 main.js 判断后隐藏。
   ──────────────────────────────────────────── */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .app { padding-top: max(var(--s-3), env(safe-area-inset-top, 0px)); }
}
@media (display-mode: standalone) and (orientation: landscape) and (max-height: 560px) {
  .app { padding-top: max(4px, env(safe-area-inset-top, 0px)); }
}

/* ── 通用组件 ─────────────────────────────────────── */

/* SVG 图标（ui/icons.js）：跟着文字颜色走，和文字基线对齐 */
.icon { display: inline-block; vertical-align: -3px; flex: none; }
.btn .icon { vertical-align: -3.5px; margin-right: 1px; }

/* 按钮：木头按键的实体感，按下去真的会陷进去 */
.btn {
  --btn-face: var(--soil);
  --btn-lip: var(--soil-dark);
  --btn-text: #fff8ec;
  appearance: none; border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-face) 84%, #fff), var(--btn-face));
  color: var(--btn-text);
  font-weight: 800; letter-spacing: .02em;
  padding: 11px 17px;
  border-radius: var(--r-sm);
  box-shadow: 0 var(--lip) 0 var(--btn-lip), var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.05); } }
.btn:active:not(:disabled) { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--btn-lip), var(--sh-1); }
.btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: 0 var(--lip) 0 var(--btn-lip); filter: grayscale(.35); }
.btn:focus-visible { outline: 3px solid var(--gold-lit); outline-offset: 2px; }
/* 其余能点的东西也要能用键盘走到（V9） */
.tab:focus-visible, .dpad__b:focus-visible, .opt:focus-visible,
.knowcard:focus-visible, .exhibit:focus-visible, .side__grip:focus-visible {
  outline: 3px solid var(--gold-lit); outline-offset: 2px;
}
.tab:active { transform: scale(.97); }

.btn--go    { --btn-face: var(--green); --btn-lip: var(--green-dark); }
.btn--fire  { --btn-face: var(--fire); --btn-lip: var(--fire-deep); }
.btn--gold  { --btn-face: var(--gold); --btn-lip: var(--gold-deep); }
.btn--ghost {
  --btn-face: var(--paper-0); --btn-lip: var(--paper-3); --btn-text: var(--ink-0);
  border: 1.5px solid var(--hair);
}
.btn--icon { padding: 9px 11px; --btn-face: var(--paper-0); --btn-lip: var(--paper-3); --btn-text: var(--ink-0); border: 1.5px solid var(--hair); }
.btn--sm { padding: 7px 12px; font-size: 13px; --lip: 3px; }
.btn--block { width: 100%; }
.btn--on { box-shadow: 0 var(--lip) 0 var(--btn-lip), 0 0 0 3px var(--gold-lit); }

.btnrow { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.btnrow--end { justify-content: flex-end; }
.btnrow--center { justify-content: center; }

/* 卡片：手记里的一张张纸。四个角各歪一点点，纸面带纹理——
   不该有两张纸长得一模一样，但也不能歪到看着乱。 */
.card {
  background: var(--tex-paper), linear-gradient(0deg, var(--paper-0), var(--paper-0));
  border: 1.5px solid var(--hair);
  border-radius: 17px 20px 15px 19px;
  padding: var(--s-4);
  box-shadow: var(--sh-1);
}
.card:nth-child(2n) { border-radius: 20px 15px 18px 16px; }
.card:nth-child(3n) { border-radius: 15px 18px 20px 14px; }
.card--quiet { background: transparent; border-style: dashed; box-shadow: none; }
/* 要紧的话写在一张撕下来的便条上，一截纸胶带贴着——
   不再用左边一道橙色条（那个套路见得太多了） */
.card--note {
  background: var(--tex-paper), linear-gradient(180deg, #fdf5dd, var(--note-paper));
  border: 1px solid rgba(180, 150, 100, .35);
  border-radius: 4px 12px 6px 14px;
  position: relative;
  margin-top: 12px;
  transform: rotate(-.35deg);
  box-shadow: var(--sh-1);
}
.card--note::before {
  content: ""; position: absolute; top: -8px; left: 50%;
  width: 84px; height: 17px;
  transform: translateX(-50%) rotate(-2.2deg);
  background: var(--tape);
  border-left: 1px dashed rgba(120, 90, 50, .25);
  border-right: 1px dashed rgba(120, 90, 50, .25);
  border-radius: 2px;
}
.card--lore { background: var(--tex-paper), linear-gradient(180deg, #fdf6e6, var(--paper-0)); }
.card__title { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.card__title h2, .card__title h3 { margin: 0; }
/* 徽标从胶囊改成手写的小注：像在标题边上用小字标了一笔 */
.card__badge {
  font-size: 13px; font-weight: 400; letter-spacing: .12em;
  color: var(--ink-2);
  font-family: var(--font-hand);
  border-bottom: 1px dashed var(--hair);
  padding: 0 2px 1px;
}

.small { font-size: 13px; color: var(--ink-1); line-height: 1.65; }
.tiny  { font-size: 11.5px; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.strong-gold { color: var(--gold-deep); font-weight: 800; }

/* 数据行 */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); font-size: 13.5px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 700; text-align: right; }

/* 进度条 */
.bar { height: 13px; background: var(--paper-2); border-radius: 999px; overflow: hidden; box-shadow: var(--sh-in); }
.bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green-lit), var(--green));
  border-radius: 999px;
  transition: width var(--t-mid) var(--ease);
}
.bar--soil > i { background: linear-gradient(90deg, var(--soil-lit), var(--soil)); }
.bar--fire > i { background: linear-gradient(90deg, var(--fire-lit), var(--fire)); }
.barlabel { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.barlabel b { font-variant-numeric: tabular-nums; }

/* 计数徽记 */
.tally { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.tally__item { text-align: center; min-width: 60px; }
.tally__n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tally__n.is-full { color: var(--green-dark); }
.tally__k { font-size: 11.5px; color: var(--ink-2); }

/* 方向键：全场只有这一套 */
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 6px; justify-content: center; }
.dpad__b {
  border: 0; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--paper-0), var(--paper-2));
  box-shadow: 0 3px 0 var(--paper-3), var(--sh-1);
  font-size: 20px; color: var(--ink-0);
  display: grid; place-items: center;
  touch-action: none; user-select: none;
}
.dpad__b:active, .dpad__b.is-down { transform: translateY(3px); box-shadow: 0 0 0 var(--paper-3); background: var(--paper-2); }
.dpad__gap { visibility: hidden; }
.keyhint { text-align: center; font-size: 12px; color: var(--ink-2); margin-top: 7px; }

/* 弹窗 */
.modals { position: fixed; inset: 0; pointer-events: none; z-index: 120; }
.modal {
  position: absolute; inset: 0;
  background: rgba(42, 33, 26, .58);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--s-4);
  pointer-events: auto;
  animation: modalIn var(--t-mid) var(--ease);
  overflow-y: auto;
}
@keyframes modalIn { from { opacity: 0 } to { opacity: 1 } }
.modal__card {
  width: min(560px, 100%);
  max-height: min(86dvh, 900px);
  overflow-y: auto;
  background: var(--tex-paper), linear-gradient(0deg, var(--paper-1), var(--paper-1));
  border: 2px solid var(--hair);
  border-radius: 25px 29px 24px 28px;
  padding: var(--s-5);
  box-shadow: var(--sh-3);
  animation: cardIn var(--t-mid) var(--ease-out-back);
}
.modal__card--wide { width: min(880px, 100%); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
.modal__card h2 { font-size: 22px; }
.modal input[type="text"], .field {
  width: 100%; padding: 13px 15px;
  border: 2px solid var(--hair); border-radius: var(--r-sm);
  background: var(--paper-0); font-size: 17px;
  box-shadow: var(--sh-in);
}
.modal input[type="text"]:focus, .field:focus { outline: 3px solid var(--gold-lit); outline-offset: 1px; border-color: var(--gold); }

/* 吐司 */
.toast {
  background: rgba(58, 46, 36, .94);
  color: #fdf8ec;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px; font-weight: 700;
  box-shadow: var(--sh-3);
  animation: toastIn var(--t-mid) var(--ease-out-back);
  max-width: 100%;
  text-align: center;
}
.toast--ok   { background: rgba(78, 106, 61, .95); }
.toast--warn { background: rgba(160, 100, 30, .95); }
.toast--bad  { background: rgba(150, 60, 40, .95); }
.toast--gold { background: rgba(150, 112, 30, .96); }
.toast.is-out { animation: toastOut var(--t-mid) var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px) } }

/* 飘字：加分、加数量那种即时反馈 */
.floatnum {
  position: absolute; font-weight: 800; font-size: 17px;
  color: var(--paper-0); text-shadow: 0 2px 5px rgba(74,43,26,.6);
  pointer-events: none;
  animation: floatUp 900ms var(--ease) forwards;
}
@keyframes floatUp { to { transform: translate(var(--fx, 0), -54px); opacity: 0 } }

/* 展签：宋体，博物馆味 */
.plaque {
  font-family: var(--font-label);
  background: linear-gradient(180deg, #fffaf0, #f4e9d4);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-xs);
  padding: 10px 13px;
  box-shadow: var(--sh-1);
  text-align: left;
}
.plaque__name { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.plaque__line { font-size: 12px; color: var(--ink-1); margin-top: 3px; letter-spacing: .03em; }

/* 藏品格 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
}
.grid--tight { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.exhibit {
  background: var(--paper-0);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--s-3);
  text-align: center;
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  cursor: pointer;
}
@media (hover: hover) { .exhibit:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } }
.exhibit__frame {
  height: 156px; display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(74,43,26,.16), transparent 62%),
    linear-gradient(180deg, #f6ecd8, #ecdcc0);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-2);
  overflow: hidden;
  position: relative;
}
.exhibit__frame img { max-width: 92%; max-height: 138px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); }
.exhibit__frame img.is-locked { opacity: .17; filter: grayscale(1) brightness(.4); }
.exhibit h3 { font-size: 15px; margin: 0 0 3px; }
.exhibit p { font-size: 12px; color: var(--ink-1); margin: 0; line-height: 1.5; }
.exhibit--empty { border-style: dashed; background: transparent; box-shadow: none; cursor: default; }
@media (hover: hover) { .exhibit--empty:hover { transform: none; box-shadow: none; } }

/* 触屏上没有 hover。按下去总得有个回应，不然像点了个没反应的东西 */
.exhibit:not(.exhibit--empty):active, .friend:active, .opt:active { transform: scale(.972); }

/* 稀有描边 */
.rare-gold { box-shadow: 0 0 0 2px var(--gold-lit), var(--sh-2); border-color: var(--gold); }

/* 碎片槽 */
.slots { display: flex; gap: 5px; justify-content: center; width: 100%; padding: 0 6px; }
.slot {
  flex: 1; height: 118px;
  background: var(--paper-2);
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  box-shadow: var(--sh-in);
  overflow: hidden;
}
.slot img { max-width: 94%; max-height: 108px; object-fit: contain; }
.slot.is-empty img { opacity: .13; filter: grayscale(1); }

/* 选项题 */
.opt {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: 10px 13px; margin: 7px 0;
  background: var(--paper-0);
  border: 1.5px solid var(--hair);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
@media (hover: hover) { .opt:hover { border-color: var(--soil-lit); background: #fffdf6; } }
.opt input { margin-top: 4px; accent-color: var(--soil); flex: none; }
.opt.is-picked { border-color: var(--soil); background: #fdf2e2; box-shadow: 0 0 0 2px rgba(155,96,63,.18); }
.opt.is-right { border-color: var(--ok); background: #f0f6e8; }
.opt.is-wrong { border-color: var(--bad); background: #fbeee9; animation: optShake 420ms var(--ease); }
@keyframes optShake {
  0%, 100% { transform: none; }
  22% { transform: translateX(-5px); }
  46% { transform: translateX(4px); }
  68% { transform: translateX(-3px); }
  86% { transform: translateX(2px); }
}

/* 答对之后翻开的「为什么」：像在题边上补写的一段小注。
   纸带一点草色说明「这是答对的那张」，但不用色条喊出来。 */
.quizwhy {
  display: none;
  margin-top: 8px; padding: 9px 13px;
  border: 1px dashed rgba(111, 141, 88, .45);
  border-radius: 3px 10px 4px 11px;
  background: var(--tex-paper), linear-gradient(180deg, #f5f8ec, #eef3e0);
  font-size: 13.5px; line-height: 1.65; color: var(--ink-1);
}
.quizwhy.is-open { display: block; animation: whyIn 380ms var(--ease); }
@keyframes whyIn { from { opacity: 0; transform: translateY(-5px); } }

.feedback { font-weight: 800; min-height: 22px; font-size: 14px; }
.feedback--ok { color: var(--ok); }
.feedback--warn { color: var(--warn); }
.feedback--bad { color: var(--bad); }

/* 标签页 */
.tabs { display: flex; gap: 5px; background: var(--paper-2); padding: 5px; border-radius: 999px; }
.tab {
  flex: 1; border: 0; background: transparent; border-radius: 999px;
  padding: 9px 14px; font-weight: 800; font-size: 14px; color: var(--ink-1);
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.tab.is-on { background: var(--paper-0); color: var(--ink-0); box-shadow: var(--sh-1); }

/* ── 二维码 ───────────────────────────────────────
   全站关掉了长按菜单，这里必须单独开回来：
   微信的「长按识别图中二维码」走的就是那套原生菜单，
   关着它，这张码在微信里只是一张看得见摸不着的图。 */
.qrimg {
  -webkit-touch-callout: default;
  -webkit-user-select: auto; user-select: auto;
  image-rendering: pixelated;                 /* 放大时格子要硬边，不能糊 */
  border: 8px solid #fff;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--sh-2);
  max-width: 100%;
  height: auto;
}

/* 底栏按钮上的小红点：有没读过的知识卡 */
.btn.has-new { position: relative; }
.btn.has-new::after {
  content: attr(data-new);
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--fire); color: #fff8ec;
  font-size: 11px; font-weight: 800; line-height: 18px;
  box-shadow: 0 2px 5px rgba(140,52,24,.4);
  animation: badgePop 420ms var(--ease-out-back) both;
}
@keyframes badgePop { from { transform: scale(0) } to { transform: scale(1) } }

/* 要长按保存的图。全站关掉了长按菜单，这里单独开回来，
   不然「长按存到相册」这条路也断了。 */
.saveimg {
  -webkit-touch-callout: default;
  -webkit-user-select: auto; user-select: auto;
  max-width: 100%; max-height: 52vh;
  border-radius: 12px;
  box-shadow: var(--sh-2);
}

/* 一步一步：照着点的说明（装到桌面、分享给别人） */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 9px 0 9px 40px;
  border-bottom: 1px dashed var(--hair);
  font-size: 14px; line-height: 1.7;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 10px;
  width: 26px; height: 26px;
  border-radius: 47% 53% 50% 50%;      /* 手画的圈不会是正圆 */
  border: 2px solid var(--soil);
  color: var(--soil-dark); background: transparent;
  font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
}
.steps b { color: var(--soil-dark); }

/* 向导的话：一张微微歪着贴在页边的手写便签。
   不再是绿条卡片——它是这本手记里最私人的一种纸。 */
.speech {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--tex-paper), linear-gradient(178deg, #fcf6df, #f6ecce);
  border: 1px solid rgba(170, 142, 96, .32);
  border-radius: 3px 10px 4px 12px;
  padding: var(--s-4) var(--s-4) var(--s-3);
  position: relative;
  margin-top: 12px;
  transform: rotate(.5deg);
  box-shadow: 0 2px 6px rgba(74, 43, 26, .12);
}
.speech::before {
  content: ""; position: absolute; top: -8px; right: 26px;
  width: 66px; height: 16px;
  transform: rotate(3deg);
  background: var(--tape);
  border-left: 1px dashed rgba(120, 90, 50, .25);
  border-right: 1px dashed rgba(120, 90, 50, .25);
  border-radius: 2px;
}
.speech__who {
  width: 40px; height: 40px; border-radius: 46% 54% 50% 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, #fffdf2, var(--paper-2));
  border: 1.5px solid var(--hair);
  display: grid; place-items: center; font-size: 20px;
  color: var(--green-dark);
}
.speech__text { font-size: 15.5px; line-height: 1.75; font-family: var(--font-hand); }
.speech__text b { color: var(--soil-dark); font-weight: 700; }

/* ── 印章 ─────────────────────────────────────────
   一个自然名一枚。它是头像，也是签名。 */
.seal {
  display: block;
  border-radius: 3px;
  filter: drop-shadow(0 2px 3px rgba(120,40,25,.28));
  user-select: none;
  -webkit-user-drag: none;
}
.seal--big { filter: drop-shadow(0 4px 8px rgba(120,40,25,.3)); }

/* 盖章：收藏作品时那一下 */
@keyframes stampDown {
  0%   { transform: scale(2.4) rotate(-14deg); opacity: 0 }
  55%  { transform: scale(.92) rotate(3deg);  opacity: 1 }
  70%  { transform: scale(1.06) rotate(-1deg) }
  100% { transform: scale(1) rotate(0deg);    opacity: 1 }
}
.seal--stamping { animation: stampDown 620ms cubic-bezier(.3,1.5,.4,1) both; }

/* ── 小伙伴墙 ─────────────────────────────────── */
.sealwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-3);
}
.friend {
  border: 1.5px solid var(--hair);
  border-radius: var(--r-md);
  background: var(--paper-0);
  padding: var(--s-3) var(--s-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) { .friend:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } }
.friend__n { font-weight: 800; font-size: 14px; }
.friend__s { font-size: 11px; color: var(--ink-2); }

/* ── 串门的门厅 ───────────────────────────────── */
.visithead {
  display: flex; align-items: center; gap: var(--s-4);
  background: linear-gradient(180deg, #fdf6e6, var(--paper-0));
  border: 1.5px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--sh-1);
}
.visithead__seal { flex: none; }
@media (max-width: 560px) {
  .visithead { flex-direction: column; text-align: center; gap: var(--s-3); padding: var(--s-4) var(--s-3); }
}

/* ── 时刻：一辈子只演一次的那几下 ─────────────────
   画面暗下去，光从底下涌上来，一张纸浮起来。
   用得越省越有分量。 */
.moment {
  position: absolute; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: var(--s-4);
  background:
    radial-gradient(ellipse at 50% 118%, rgba(255,180,90,.30), transparent 62%),
    rgba(34, 26, 20, .84);
  backdrop-filter: blur(5px);
  animation: momentIn 520ms var(--ease) both;
  pointer-events: auto;
  cursor: pointer;
}
.moment.is-out { animation: momentOut 320ms var(--ease) forwards; }
@keyframes momentIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes momentOut { to { opacity: 0 } }

.moment__card {
  width: min(460px, 100%);
  text-align: center;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: 30px 38px 28px 36px;    /* 从光里浮起来的还是一张纸 */
  background:
    var(--tex-paper),
    radial-gradient(ellipse at 50% 0%, rgba(255,246,220,.9), transparent 60%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
  border: 2px solid var(--hair);
  box-shadow: 0 24px 60px rgba(20,10,4,.5), 0 0 0 1px rgba(255,240,205,.35) inset;
  animation: momentCard 760ms cubic-bezier(.2,1.15,.35,1) both 160ms;
}
@keyframes momentCard {
  from { opacity: 0; transform: translateY(44px) scale(.94) rotate(-1.2deg) }
  to   { opacity: 1; transform: none }
}

.moment__kicker {
  font-size: 15px; font-weight: 400;
  font-family: var(--font-hand);
  letter-spacing: .42em; text-indent: .42em;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}
.moment__art {
  display: grid; place-items: center;
  margin: 0 auto var(--s-4);
  min-height: 150px;
  animation: momentArt 900ms var(--ease-out-back) both 320ms;
}
@keyframes momentArt { from { opacity: 0; transform: scale(.7) } to { opacity: 1; transform: none } }
.moment__art img { max-height: 210px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(60,30,10,.32)); }

.moment__title {
  font-family: var(--font-label);
  font-size: 27px; font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: var(--s-3);
}
.moment__line { font-size: 14.5px; line-height: 1.85; color: var(--ink-1); }
.moment__hint {
  margin-top: var(--s-5);
  font-size: 11.5px; letter-spacing: .2em; color: var(--ink-2);
  animation: hintBlink 2.2s ease-in-out infinite 1.4s;
}
@keyframes hintBlink { 0%,100% { opacity: .35 } 50% { opacity: .9 } }

.moment--gold  { border-color: var(--gold); }
.moment--gold  .moment__kicker { color: var(--gold-deep); }
.moment--fire  { border-color: var(--fire); }
.moment--fire  .moment__kicker { color: var(--fire-deep); }
.moment--earth { border-color: var(--soil); }
.moment--earth .moment__kicker { color: var(--soil-dark); }

/* ── 开窑那一刻 ───────────────────────────────────
   捂着眼睛，从指缝里看。压在所有东西上面，
   这一下不该被任何界面打断。 */
.peek {
  position: fixed; inset: 0; z-index: 140;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  animation: peekIn 420ms var(--ease) both;
  overflow: hidden;
}
.peek.is-open { animation: peekOut 600ms var(--ease) forwards; }
@keyframes peekIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes peekOut { to { opacity: 0 } }
.peek__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.peek__say {
  position: absolute; left: 0; right: 0; top: max(28px, env(safe-area-inset-top, 0px));
  text-align: center;
  font-family: var(--font-label);
  font-size: 22px; font-weight: 700; letter-spacing: .24em;
  color: #ffe9c8; text-shadow: 0 2px 12px rgba(0,0,0,.7);
  pointer-events: none;
}
.peek__tip {
  position: absolute; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  text-align: center; padding: 0 24px;
  font-size: 14px; color: rgba(255,236,210,.86);
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  pointer-events: none;
  animation: hintBlink 2.6s ease-in-out infinite;
}
.peek__skip {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,240,214,.14);
  border: 1.5px solid rgba(255,236,206,.4);
  color: #ffeccd;
  border-radius: 999px; padding: 9px 20px;
  font-size: 13px; font-weight: 700;
}
@media (max-width: 560px) {
  .peek__say { font-size: 18px; }
}

/* ── 换场：一张纸盖过去 ───────────────────────── */
.wipe {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  background:
    repeating-linear-gradient(58deg, rgba(120,90,60,.05) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #f7eedd, #eadcc2);
  transform-origin: 50% 0;
  animation: wipeThrough 520ms cubic-bezier(.65,0,.35,1) both;
}
@keyframes wipeThrough {
  0%   { clip-path: inset(0 0 100% 0) }
  46%  { clip-path: inset(0 0 0 0) }
  54%  { clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(100% 0 0 0) }
}

/* 展签盖印：签名落在右下角 */
.plaque--sealed { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.plaque--sealed .seal { flex: none; }


/* ── 知识卡 ───────────────────────────────────────
   没解锁的也摆着，写清楚怎么才能遇到——
   跟博物馆的空展位一个道理。 */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.knowcard {
  text-align: left;
  border: 1.5px solid var(--hair);
  /* 手记里的纸片不该是机器切的：四个角各歪一点，隔一张换个歪法 */
  border-radius: 15px 19px 13px 17px;
  background:
    var(--tex-paper),
    linear-gradient(180deg, #fdf6e6, var(--paper-0));
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.cardgrid > .knowcard:nth-child(2n) { border-radius: 18px 14px 19px 13px; }
.cardgrid > .knowcard:nth-child(3n) { border-radius: 13px 17px 15px 20px; }
/* 分组不再用色带喊出来（那个套路太泛滥了）——
   只在图槽衬纸上留一点点色温，像标本盒里垫的纸各有各的旧 */
.knowcard__art {
  flex: none; width: 52px; height: 52px; margin-top: 2px;
  border: 1px solid var(--hair); border-radius: 46% 54% 48% 52%;
  background: radial-gradient(circle at 50% 38%, #fffdf4, var(--paper-1));
  display: grid; place-items: center;
  box-shadow: inset 0 1px 3px rgba(74, 43, 26, .08);
}
.knowcard--soil .knowcard__art   { background: radial-gradient(circle at 50% 38%, #fffdf4, #f2e2cc); }
.knowcard--water .knowcard__art  { background: radial-gradient(circle at 50% 38%, #fdfdf6, #e9ecdf); }
.knowcard--kiln .knowcard__art   { background: radial-gradient(circle at 50% 38%, #fffcf2, #f5e3cd); }
.knowcard--glaze .knowcard__art  { background: radial-gradient(circle at 50% 38%, #fffdf2, #f4ead0); }
.knowcard--people .knowcard__art { background: radial-gradient(circle at 50% 38%, #fcfdf4, #ecefdb); }
.knowcard__art svg { display: block; }
.knowcard__txt { flex: 1; min-width: 0; }
@media (hover: hover) { .knowcard:not(.is-locked):hover { transform: translateY(-3px); box-shadow: var(--sh-2); } }
.knowcard:not(.is-locked):active { transform: scale(.98); }
.knowcard__t { font-weight: 800; font-size: 15px; margin-bottom: 5px; }
.knowcard__o { font-size: 12.5px; color: var(--ink-1); line-height: 1.6; }
.knowcard.is-locked {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  cursor: default;
}
.knowcard.is-locked .knowcard__t { color: var(--ink-2); letter-spacing: .2em; }
.knowcard.is-locked .knowcard__o { color: var(--ink-2); }
.knowcard__lock {
  margin-top: 8px; font-size: 12px; color: var(--ink-2);
  font-family: var(--font-hand);
  border-bottom: 1px dashed var(--hair);
  padding: 0 1px 2px; display: inline-block;
}

/* 点开知识卡：大图 + 分组徽标，像图鉴摊开的一页 */
.knowmodal__art { display: flex; justify-content: center; margin: 2px 0 10px; }
.knowmodal__art svg {
  width: 160px; height: 160px; max-width: 60vw;
  padding: 10px; border-radius: var(--r-md);
  border: 1.5px dashed var(--hair);
  background: radial-gradient(circle at 50% 40%, #fffdf4, var(--paper-1));
}
.knowmodal__badge {
  width: max-content; margin: 0 auto 12px;
  font-size: 14px; color: var(--ink-1);
  font-family: var(--font-hand); letter-spacing: .2em;
  border-bottom: 1.5px solid var(--hair);
  padding: 0 6px 3px;
  display: flex; align-items: center; gap: 5px;
}

/* V10：知识卡摊开页的顶条。骨架和 .archhero 一样（负边距吃掉弹窗内边距），
   但这里不是深墙——是图鉴的纸，按分组染成那一组卡片同款的底色。 */
.knowhero {
  position: relative;
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0;
  padding: 26px 20px 18px;
  border-radius: 23px 27px 0 0;
  border-bottom: 1.5px dashed var(--hair);
  background: radial-gradient(ellipse at 50% 34%, #fffdf4, var(--paper-1) 85%);
  display: grid; place-items: center;
}
.knowhero svg { width: 200px; height: 200px; max-width: 62vw; display: block; }
.knowhero--soil   { background: radial-gradient(ellipse at 50% 34%, #fffdf4, #f2e2cc 88%); }
.knowhero--water  { background: radial-gradient(ellipse at 50% 34%, #fdfdf6, #e9ecdf 88%); }
.knowhero--kiln   { background: radial-gradient(ellipse at 50% 34%, #fffcf2, #f5e3cd 88%); }
.knowhero--glaze  { background: radial-gradient(ellipse at 50% 34%, #fffdf2, #f4ead0 88%); }
.knowhero--people { background: radial-gradient(ellipse at 50% 34%, #fcfdf4, #ecefdb 88%); }
.knowhead { text-align: center; padding: 16px 8px 2px; }
.knowhead h2 { margin: 0 0 8px; }
.knowhead__one { font-weight: 800; font-size: 15.5px; margin: 10px 0 12px; }

/* ── 博物馆 · 深色展厅（V9） ──────────────────────────
   随营手记翻到这一页，纸退场：博物馆是另一个世界——
   深墙、射灯、宋体展签、铜牌，和分享展签卡（game/sharecard.js）
   是同一间展厅。右栏（手记）不进来，只有 stage 里是展厅。
   全部作用域在 .museumhall 之下；上面已有的 .exhibit/.plaque
   等规则一条没动，只在这里覆盖。 */

/* 摊开的那页纸换成展墙。容器用负外边距把 stage 的内边距吃掉，
   多出来的部分被 stage 的 overflow:hidden 按圆角裁齐——
   小屏上 stage 内边距更小，多吃的那几像素也一样被裁掉，不用分档。 */
.stage:has(> .museumhall) {
  background: var(--wall-0);
  border-color: #453729;
}
.museumhall {
  position: relative;
  margin: calc(-1 * var(--s-4));
  padding: calc(var(--s-4) + 8px) var(--s-4) var(--s-5);
  background:
    var(--tex-paper),
    radial-gradient(ellipse 130% 46% at 50% -8%, rgba(126, 102, 76, .28), rgba(126, 102, 76, 0) 72%),
    linear-gradient(180deg, var(--wall-1), var(--wall-0) 74%);
  color: #e8ddc8;
  animation: hallLightsOn 600ms var(--ease);
}
/* 进馆那一下：展厅的灯亮起来 */
@keyframes hallLightsOn {
  from { filter: brightness(.22) saturate(.75); }
  to   { filter: brightness(1); }
}
/* 顶上一道细金线：挂画的横杆 */
.museumhall::before {
  content: ""; position: absolute; top: 9px; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wall-line) 14%, var(--wall-line) 86%, transparent);
  pointer-events: none;
}

/* 深底上的文字：一级 #e8ddc8、二级 #b9a98e，不用纯白 */
.museumhall h2, .museumhall h3 { color: #e8ddc8; }
.museumhall .hall h3 { font-family: var(--font-label); letter-spacing: .06em; }
.museumhall .small { color: #b9a98e; }
.museumhall .tiny, .museumhall .muted { color: #9c8d78; }

/* 馆名一行：宋体加字距，右边一块小铜牌 */
.museumhall .hall__head h2 {
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .14em;
}
.museumhall .hall__count {
  font-family: var(--font-label);
  font-size: 11.5px; letter-spacing: .1em;
  color: #241c12;
  background: linear-gradient(180deg, #cdb489, #a3875c);
  border: 1px solid rgba(58, 44, 26, .85);
  border-radius: 3px;
  padding: 3px 10px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .55), 0 1px 3px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
/* 小伙伴那页没串过门时这个数是空字符串，别留一块空铜牌钉在墙上 */
.museumhall .hall__count:empty { display: none; }

/* 标签页头进馆换装：凹进墙里的一条，点亮的那页是展签纸 */
.museumhall .tabs { background: rgba(0, 0, 0, .38); box-shadow: inset 0 1px 4px rgba(0, 0, 0, .5); }
.museumhall .tab { color: #b9a98e; }
.museumhall .tab.is-on { background: var(--plaque-paper); color: var(--plaque-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* 展位：射灯下的一格。上方一束光晕，底部一汪光池，影子沉下去。 */
.museumhall .exhibit {
  background: linear-gradient(180deg, #282017, #1b1510);
  border-color: rgba(199, 168, 114, .16);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 236, 205, .05);
}
@media (hover: hover) {
  .museumhall .exhibit:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
}
.museumhall .exhibit__frame {
  background:
    radial-gradient(ellipse 62% 50% at 50% 26%, rgba(150, 122, 90, .5), rgba(150, 122, 90, 0) 74%),
    radial-gradient(ellipse 74% 24% at 50% 96%, rgba(226, 190, 128, .26), rgba(226, 190, 128, 0) 72%),
    linear-gradient(180deg, #33291b, #161009);
}
.museumhall .exhibit__frame img { filter: drop-shadow(0 10px 13px rgba(0, 0, 0, .55)); }
.museumhall .exhibit p { color: var(--brass); font-variant-numeric: tabular-nums; }

/* 空展位与灰剪影（锁定规则 23）：深底上剪影要提亮才看得见 */
.museumhall .exhibit--empty { background: rgba(0, 0, 0, .25); border-color: rgba(199, 168, 114, .22); }
.museumhall .exhibit__frame img.is-locked { opacity: .32; filter: grayscale(1) brightness(1.9) contrast(.62); }

/* 展签：--plaque-paper 卡纸 + 细金边（宋体是它本来就有的） */
/* 展签：真展馆的标签是器物脚边一小片安静的卡纸，
   不是一块和展品抢眼的大白板。收小、压暗半档、居中，
   让深墙的调子稳稳接住它。 */
.museumhall .plaque {
  width: fit-content;
  max-width: 92%;
  margin: 10px auto 4px;
  padding: 7px 14px 8px;
  text-align: center;
  background: linear-gradient(180deg, #ece1cb, #e2d5b9);
  color: var(--plaque-ink);
  border: 1px solid rgba(176, 154, 116, .5);
  border-radius: 3px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .42);
}
.museumhall .plaque__name { font-size: 13.5px; letter-spacing: .04em; }
.museumhall .plaque__line { color: #6d6053; font-size: 11px; margin-top: 2px; letter-spacing: .04em; }

/* 稀有金边：全场唯一保留的颜色强调 */
.museumhall .rare-gold {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-lit), 0 12px 26px rgba(0, 0, 0, .5);
}
@media (hover: hover) {
  .museumhall .rare-gold:hover { box-shadow: 0 0 0 2px var(--gold-lit), 0 16px 32px rgba(0, 0, 0, .6); }
}
/* 「点这里去拼合」那行小注在深底上要用亮金。
   它在 museum.js 里带着深金的行内样式（浅底时代定的），只好加重。 */
.museumhall .card__badge { color: var(--gold-lit) !important; border-color: var(--gold) !important; }

/* 标本柜的格子：碎片槽换深色格衬 + 细边 */
.museumhall .slot {
  background: linear-gradient(180deg, #191309, #100c07);
  border: 1px solid rgba(199, 168, 114, .14);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .65);
}
.museumhall .slot.is-empty img { opacity: .22; filter: grayscale(1) brightness(1.9); }

/* 深底上的幽灵按钮（筛选那几枚）跟着换深色木 */
.museumhall .btn--ghost {
  --btn-face: #33291d; --btn-lip: #120d08; --btn-text: #e8ddc8;
  border-color: rgba(199, 168, 114, .3);
}
/* 纸卡里的幽灵按钮（去发出去 / 刷新）还是纸上的样子 */
.museumhall .card:not(.card--quiet) .btn--ghost {
  --btn-face: var(--paper-0); --btn-lip: var(--paper-3); --btn-text: var(--ink-0);
  border-color: var(--hair);
}

/* 浅底时代的搁板线（scenes.css 的 .shelf）在深墙上发红，
   换成一道沉下去的影，把展位搁稳 */
.museumhall .shelf {
  background: linear-gradient(180deg, transparent 74%, rgba(0, 0, 0, .28) 74%, rgba(0, 0, 0, .4) 78%, transparent 79%);
}

/* 虚线空态卡（这里还是空的 / 这面墙还是空的）：深底适配，文案照旧 */
.museumhall .card--quiet { border-color: rgba(199, 168, 114, .28); background: rgba(0, 0, 0, .22); }

/* 「我收到的」那类实心纸卡仍是手记的纸，字色收回墨色 */
.museumhall .card:not(.card--quiet) h2,
.museumhall .card:not(.card--quiet) h3 { color: var(--ink-0); font-family: var(--font-ui); letter-spacing: .01em; }
.museumhall .card:not(.card--quiet) .small { color: var(--ink-1); }
.museumhall .card:not(.card--quiet) .tiny { color: var(--ink-2); }
/* 纸卡里陈列的陶片格还是深柜，小字回到铜色（要压过上面那条回墨色的） */
.museumhall .card .exhibit p, .museumhall .card .exhibit .tiny { color: var(--brass); }

/* 小伙伴：印章墙在深底上 */
.museumhall .friend {
  background: linear-gradient(180deg, #282017, #1b1510);
  border-color: rgba(199, 168, 114, .18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
@media (hover: hover) { .museumhall .friend:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, .5); } }
.museumhall .friend__n { color: #e8ddc8; }
.museumhall .friend__s { color: #b9a98e; }

/* ── 作品实验档案（V10 重排） ─────────────────────────
   点开一件作品：顶上是深墙射灯的展位横幅（烧成的那件是主角），
   生坯是贴在角上的一张小拍立得，下面的档案分两栏。 */
.archhero {
  position: relative;
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0;
  padding: 30px 20px 34px;
  border-radius: 23px 27px 0 0;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255, 222, 156, .14), transparent 58%),
    radial-gradient(ellipse at 50% 96%, rgba(255, 200, 120, .10), transparent 55%),
    linear-gradient(180deg, var(--wall-1), var(--wall-0));
  display: grid;
  place-items: center;
  min-height: 220px;
}
.archhero::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 10px;
  border-top: 1px solid var(--wall-line);
}
.archhero__pot {
  max-height: 320px; max-width: 74%;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55));
}
/* 生坯：贴在横幅右上角的小拍立得，歪一点，像随手别上去的工作照 */
.archhero__raw {
  position: absolute; right: 18px; top: 20px;
  width: 104px;
  padding: 6px 6px 4px;
  background: #f6efdd;
  border-radius: 2px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
  transform: rotate(2.6deg);
}
.archhero__raw img { width: 100%; border-radius: 2px; background: #efe3cc; display: block; }
.archhero__rawk {
  font-family: var(--font-hand);
  font-size: 12px; text-align: center; color: #6d6053;
  margin-top: 3px;
}
.archhead { text-align: center; padding: 20px 10px 4px; }
.archhead h2 { font-family: var(--font-label); letter-spacing: .05em; }
.archhead__line { max-width: 560px; margin: 8px auto 0; }
/* 藏品的年代、出土地、编号：像展签下方那行小铅字 */
.archhead__no { color: var(--ink-2); letter-spacing: .06em; margin-top: 5px; }
.archgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  align-items: start;
  margin-top: 6px;
}
@media (max-width: 700px) {
  .archgrid { grid-template-columns: 1fr; }
  .archhero__raw { width: 78px; right: 12px; top: 14px; }
  .archhero__pot { max-height: 230px; }
}

/* 设置里的共创入口：沿用纸张与泥色，不占用游玩场景。 */
.creator-entry { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--hair); }
.creator-entry h3 { font-size: 14px; color: var(--ink-1); font-weight: 700; }
.creator-entry .btnrow { margin-top: 6px; gap: 6px 22px; }
.creator-entry a, .creator-contact a { text-decoration: none; }
.creator-contact { margin: 16px 0 12px; text-align: center; }
.creator-contact__name { font-weight: 700; }
.creator-contact__name span { display: block; margin-top: 3px; font-weight: 400; }
.creator-contact__frame { width: min(272px, 100%); margin: 14px auto; padding: 8px; background: #fff; border: 1px solid var(--hair); border-radius: 12px; }
.creator-contact__frame[hidden] { display: none; }
.creator-contact__qr { width: 100%; height: auto; -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; touch-action: auto; }
.creator-contact__links { justify-content: center; margin: 12px 0 8px; }
.creator-contact__site { color: var(--ink-1); text-underline-offset: 3px; }

/* 设置按使用频率排列，站外联系与重置操作各有自己的弱层级。 */
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-heading h2 { margin: 0; }
.settings-close.btn { padding: 0; width: 36px; height: 36px; font-size: 24px; font-weight: 400; color: var(--ink-1); background: none; box-shadow: none; border: 0; border-radius: 50%; }
.settings-close.btn:active { transform: none; }
.settings-profile { padding: 8px 0 16px; color: var(--ink-1); border-bottom: 1px solid var(--hair); }
.settings-profile b { color: var(--ink-0); }
.settings-tools { margin: 16px 0; }
.settings-label { font-size: 13px; color: var(--ink-1); margin-bottom: 10px; font-weight: 600; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-actions .btn { font-size: 14px; padding: 10px 8px; min-height: 44px; }
.settings-device-tools, .settings-device-tools>.btnrow { display: contents; }
.settings-mode { padding: 14px 0; border-top: 1px solid var(--hair); }
.settings-mode .opt { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.settings-mode .opt .small { color: var(--ink-1); font-size: 12px; }
.settings-reset { border-top: 1px solid var(--hair); padding-top: 4px; }
.settings-reset summary { cursor: pointer; padding: 10px 0; font-size: 13px; color: var(--ink-1); }
.settings-reset summary .tiny { margin-left: 10px; }
.settings-reset__actions { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.settings-reset__action.btn, .creator-entry__link { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 0; background: none; box-shadow: none; border: 0; border-radius: 3px; font-size: 13px; font-weight: 500; color: var(--ink-1); letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.settings-reset__action--clear.btn { color: var(--soil-dark); }
.settings-reset__action.btn:active, .creator-entry__link.btn:active { transform: none; box-shadow: none; }
.settings-reset>p { margin: 4px 0 10px; }
.creator-entry p { color: var(--ink-1); font-size: 12px; }
.creator-entry a.creator-entry__link { text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.creator-entry__link:focus-visible, .settings-reset summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) { .creator-entry__link:hover, .settings-reset__action:hover { color: var(--ink-0); text-decoration-color: currentColor; } }
.settings-done { margin-top: 14px; }
@media (max-width: 360px) { .settings-panel { padding: 16px; } .settings-actions .btn { font-size: 13px; } }

/* 玩家头像：方形照片圆形呈现，未选照片时沿用原来的名字印。 */
.player-avatar { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--paper-0); box-shadow: 0 0 0 2px var(--paper-0), 0 0 0 3px var(--hair); }
.chip--player { gap: 6px; }
.chip--player>img { flex: none; }
.settings-profile--avatar { display: flex; align-items: center; gap: 14px; }
.settings-profile__text { min-width: 0; }
.avatar-edit-trigger.btn { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; padding: 5px 2px; background: none; border: 0; box-shadow: none; color: var(--ink-1); font-size: 12px; font-weight: 500; }
.avatar-edit-trigger.btn:active { transform: none; }
.avatar-editor__preview { width: 240px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin: 18px auto 12px; }
.avatar-editor__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; background: #fff; box-shadow: 0 0 0 3px var(--hair); }
.avatar-editor__canvas:active { cursor: grabbing; }
.avatar-editor__canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.avatar-editor__crop[hidden] { display: none; }
.avatar-editor__crop p { text-align: center; }
.avatar-editor__zoom { display: flex; align-items: center; gap: 12px; max-width: 300px; margin: 10px auto 18px; }
.avatar-editor__zoom input { flex: 1; min-width: 0; accent-color: var(--soil); }
.avatar-editor__actions { justify-content: center; }
.avatar-editor__message { min-height: 28px; margin: 14px 0; color: var(--ink-1); }
.avatar-editor__footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.avatar-editor button[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .chip--player>img { width: 18px; height: 18px; }
}

/* ── 场景专属 ─────────────────────────────────────── */

/* 通用：整块画布舞台。
   画布按「两个上限一起管」缩放：宽不超过容器，高不超过舞台可用高度，
   比例由 canvas 自身的固有尺寸保证。这样大屏能吃满，小屏也不会溢出。 */
.canvasbox {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid #a8895f;
  box-shadow: var(--sh-in), var(--sh-1);
  background: #bcd6a1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}
.canvasbox canvas {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: var(--stage-h);
  outline: none;
  touch-action: none;
}
.canvasbox__over {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-3);
}
.overchip {
  align-self: flex-start;
  background: rgba(253, 248, 236, .93);
  border: 1.5px solid var(--hair);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 700;
  box-shadow: var(--sh-1);
}

/* ── 场景里的操作件 ───────────────────────────────
   不再是右栏一列按钮，而是压在画面上的实物：
   木牌、麻布标签、拉杆、料堆。都能点。
   ──────────────────────────────────────────── */
.inscene { position: absolute; z-index: 4; pointer-events: auto; }
.inscene--bl { left: var(--s-3); bottom: var(--s-3); }
.inscene--br { right: var(--s-3); bottom: var(--s-3); }
.inscene--tl { left: var(--s-3); top: var(--s-3); }
.inscene--tr { right: var(--s-3); top: var(--s-3); }
.inscene--bc { left: 50%; bottom: var(--s-3); transform: translateX(-50%); }

/* 木牌按钮：钉在场景里的一块小木片 */
.woodbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border: 0; border-radius: 10px;
  background:
    repeating-linear-gradient(92deg, rgba(120,86,54,.13) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #d8a869, #b9834c);
  color: #37220f; font-weight: 800; font-size: 14px;
  box-shadow: 0 3px 0 #8a5c33, 0 5px 12px rgba(58,30,14,.3);
  text-shadow: 0 1px 0 rgba(255,240,210,.4);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast);
  white-space: nowrap;
}
@media (hover: hover) { .woodbtn:hover:not(:disabled) { filter: brightness(1.06); } }
.woodbtn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #8a5c33, 0 2px 6px rgba(58,30,14,.3); }
.woodbtn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.woodbtn--go {
  background:
    repeating-linear-gradient(92deg, rgba(60,90,45,.14) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #8fb072, #6d8d55);
  color: #fdf8ec; box-shadow: 0 3px 0 #4c6a3d, 0 5px 12px rgba(40,60,26,.3);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.woodbtn--fire {
  background:
    repeating-linear-gradient(92deg, rgba(120,40,15,.16) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #e07a44, #c4552c);
  color: #fff3e2; box-shadow: 0 3px 0 #8c3418, 0 5px 12px rgba(90,30,10,.34);
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.woodbtn--lg { padding: 12px 22px; font-size: 16px; }
.woodbtn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* 麻布标签：贴在场景里的读数 */
.clothtag {
  background: var(--tex-cloth), linear-gradient(180deg, rgba(253,248,236,.96), rgba(244,233,212,.96));
  border: 1.5px dashed rgba(150, 122, 84, .55);   /* 布边是缝的，不是切的 */
  border-radius: 4px 11px 5px 12px;
  padding: 8px 13px;
  font-size: 13px; font-weight: 700; color: var(--ink-0);
  box-shadow: var(--sh-2);
  line-height: 1.5;
}
.clothtag b { font-variant-numeric: tabular-nums; }
.clothtag__k { color: var(--ink-2); font-weight: 600; font-size: 11.5px; letter-spacing: .06em; }

/* 一排场景里的物件（工具架、料堆） */
.rack {
  display: flex; gap: 7px; align-items: flex-end;
  background: var(--tex-cloth), linear-gradient(180deg, rgba(126,92,58,.9), rgba(98,68,40,.92));
  border-radius: 8px 13px 9px 14px;
  padding: 9px 10px;
  box-shadow: 0 5px 14px rgba(46,26,12,.34), inset 0 1px 0 rgba(255,225,180,.22);
}
.rack--v { flex-direction: column; align-items: stretch; }
.racktool {
  border: 0; border-radius: 9px;
  background: linear-gradient(180deg, #f3e5cb, #ddc7a4);
  padding: 7px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 700; color: #4a3a26;
  min-width: 58px; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(90,62,36,.5);
  transition: all var(--t-fast) var(--ease);
}
.racktool span:first-child { font-size: 19px; line-height: 1.1; }
@media (hover: hover) { .racktool:hover { background: linear-gradient(180deg, #fbf1de, #e7d3b3); } }
.racktool.is-on {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  color: #3b2a06;
  box-shadow: 0 0 0 2px #fff3d0, 0 2px 0 var(--gold-deep);
}

/* ── 断崖 ─────────────────────────────────────────── */
.cliff {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 3px solid #6d4e35;
  box-shadow: var(--sh-2);
  position: relative;
  height: clamp(var(--stage-min), var(--stage-h), 680px);
  display: flex; flex-direction: column;
}
.cliff__layer {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s-5);
  color: #fff8ec;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  transition: flex var(--t-mid) var(--ease), filter var(--t-fast);
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
  overflow: hidden;
}
.cliff__layer::after {
  /* 层与层之间的风化过渡，不要生硬直线 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px;
  background: inherit; filter: blur(4px); opacity: .8;
}
@media (hover: hover) { .cliff__layer:hover { filter: brightness(1.07); } }
.cliff__layer.is-picked { flex: 1.55; box-shadow: inset 0 0 0 4px var(--gold-lit); }
.cliff__layer.is-picked::before {
  content: "选中"; position: absolute; right: var(--s-5); top: 8px;
  font-size: 11px; letter-spacing: .2em; color: var(--gold-lit);
}
.cliff__depth { font-size: 12.5px; opacity: .85; font-weight: 600; letter-spacing: .04em; }
/* 最下面一层要给桶让出位置，否则文字被压住 */
.cliff__layer--last { padding-right: 128px; }
.cliff__l1 { background: linear-gradient(180deg, #6b5741, #55432f); }
.cliff__l2 { background: linear-gradient(180deg, #b0764c, #94603c); }
.cliff__l3 { background: linear-gradient(180deg, #c6a97e, #ac8d63); color: #4a3a26; text-shadow: none; }
.cliff__l4 { background: linear-gradient(180deg, #8a8681, #6c6864); }
.cliff__scar { position: absolute; pointer-events: none; }

.bucket {
  position: absolute; right: 18px; bottom: 16px;
  width: 76px; height: 88px;
  border: 5px solid #5b6a70; border-top-width: 9px;
  border-radius: 6px 6px 24px 24px;
  background: #e6ebe8;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.bucket__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--soil);
  transition: height var(--t-slow) var(--ease);
}
.bucket__n {
  position: absolute; inset: auto 0 6px; text-align: center;
  font-size: 13px; font-weight: 800; color: #2b2118;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ── 处理台 ───────────────────────────────────────── */
.workarea {
  position: relative;
  height: clamp(var(--stage-min), var(--stage-h), 680px);
  border-radius: var(--r-md);
  border: 3px solid #a8895f;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(140,105,70,.05) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #e9d7b9, #ddc7a2);
  touch-action: none;
  user-select: none;
}
.soilblob { position: absolute; border-radius: 50%; background: var(--soil); box-shadow: inset 0 -5px 0 rgba(0,0,0,.14); }

/* 压碎大土块留下的小土粒：物质守恒——碎了是变小成堆，不是消失 */
.soilbit {
  position: absolute;
  border-radius: 46% 54% 48% 52%;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.16), 0 1px 1px rgba(0,0,0,.10);
  animation: bitSettle 360ms var(--ease) backwards;
  pointer-events: none;
}
.soildust {
  position: absolute; border-radius: 50%; opacity: .8;
  animation: bitSettle 420ms var(--ease) backwards;
  pointer-events: none;
}
@keyframes bitSettle {
  from { transform: translateY(-16px) scale(1.4); opacity: 0; }
}
.junk {
  position: absolute; display: grid; place-items: center;
  font-size: 27px; cursor: pointer;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.22));
  transition: transform var(--t-fast) var(--ease);
}
@media (hover: hover) { .junk:hover { transform: scale(1.18) rotate(-6deg); } }
.junk.is-gone { animation: junkFly 420ms var(--ease) forwards; pointer-events: none; }
@keyframes junkFly { to { transform: translate(var(--tx), var(--ty)) scale(.3) rotate(220deg); opacity: 0 } }

.basin {
  position: absolute; right: 18px; bottom: 14px;
  width: 152px; height: 96px;
  border: 7px solid #64787d; border-radius: 12px 12px 72px 72px;
  background: linear-gradient(180deg, #cfe0e0, #9fbcbd);
  display: grid; place-items: end center;
  padding-bottom: 8px;
  font-size: 12px; font-weight: 800; color: #3d5054;
  box-shadow: var(--sh-2);
}
.basin.is-hit { animation: shake 300ms var(--ease); }

.clod { position: absolute; border-radius: 46% 54% 50% 50%; background: var(--soil); border: 2px solid var(--soil-dark); cursor: pointer; box-shadow: inset -6px -8px 0 rgba(0,0,0,.13); }
.roller {
  position: absolute; width: 148px; height: 40px;
  border-radius: 22px;
  background: linear-gradient(180deg, #c99a63, #a87c4c);
  border: 5px solid #7a5636;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--sh-2);
}
.roller::before, .roller::after {
  content: ""; position: absolute; top: 50%; width: 34px; height: 8px;
  background: #7a5636; border-radius: 6px; transform: translateY(-50%);
}
.roller::before { left: -34px; }
.roller::after { right: -34px; }

.sieve {
  position: absolute; left: 50%; top: 36%;
  width: 262px; height: 158px;
  transform: translate(-50%, -50%);
  border: 13px solid #7a5a3e; border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(126,102,79,.85) 9px 11px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(126,102,79,.85) 9px 11px);
  cursor: grab; touch-action: none;
  box-shadow: var(--sh-2);
}
.sieve:active { cursor: grabbing; }
.sieve__grit { position: absolute; border-radius: 40%; background: #8a6444; }
.pan {
  position: absolute; left: 50%; bottom: 22px;
  width: 292px; height: 118px; transform: translateX(-50%);
  border: 9px solid #6b7c7f; border-radius: 18px 18px 140px 140px;
  background: linear-gradient(180deg, #cfe0e0, #a8c3c3);
  overflow: hidden;
}
.pan__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #c08a5e, #9b603f);
  transition: height var(--t-mid) var(--ease);
  /* 细土落进盆里是一座中间高的小沙堆，不是一条水平线 */
  border-radius: 48% 52% 0 0 / 30px 24px 0 0;
  box-shadow: inset 0 5px 7px -4px rgba(255, 240, 214, .5), inset 0 -10px 16px rgba(0, 0, 0, .16);
}
.dustfall { position: absolute; width: 5px; height: 16px; background: #ae794d; border-radius: 4px; pointer-events: none; }

/* ── 和泥 ─────────────────────────────────────────── */
.mixstage { display: grid; place-items: center; position: relative; height: clamp(var(--stage-min), var(--stage-h), 660px); }
.mixbowl {
  width: min(360px, 74vw); aspect-ratio: 1.28;
  border: 14px solid #74625a;
  border-radius: 32px 32px 55% 55%;
  background: linear-gradient(180deg, #e2c9a4, #cdae86);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-2), inset 0 10px 18px rgba(74,43,26,.18);
}
.mixbowl__mud {
  position: absolute; left: 8%; right: 8%; bottom: 6%;
  border-radius: 46% 54% 42% 58% / 60% 55% 45% 40%;
  transition: all var(--t-slow) var(--ease);
}
.mixbowl__state {
  position: relative; z-index: 2;
  font-size: 20px; font-weight: 800;
  color: #fff8ec; text-shadow: 0 2px 6px rgba(58,46,36,.7);
  letter-spacing: .06em;
}
.droplet { position: absolute; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #8ec2d6; pointer-events: none; }

/* 干湿刻度尺 */
.wetscale { position: relative; height: 34px; border-radius: 999px; background: linear-gradient(90deg, #d9c39c, #b98c5c 42%, #6f9ac0 78%, #4f7fa8); box-shadow: var(--sh-in); }
.wetscale__zone { position: absolute; top: 0; bottom: 0; border-left: 2px dashed rgba(255,255,255,.8); border-right: 2px dashed rgba(255,255,255,.8); background: rgba(255,255,255,.18); }
.wetscale__pin {
  position: absolute; top: -7px; width: 4px; height: 48px; border-radius: 3px;
  background: var(--ink-0); box-shadow: 0 0 0 2px var(--paper-0);
  transition: left var(--t-mid) var(--ease);
}
.wetscale__tags { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2); margin-top: 9px; }

/* ── 制陶 ─────────────────────────────────────────── */
.claystage { display: grid; place-items: center; }
.clayboard {
  width: min(760px, 100%, calc(var(--stage-h) * 820 / 650));
  position: relative;
  background: linear-gradient(180deg, #e7d3b4, #d9c19c);
  border: 3px solid #a8845f;
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--sh-2);
}
#clayCanvas {
  display: block; width: 100%; aspect-ratio: 820/650;
  background: radial-gradient(ellipse at 50% 30%, #fbf1de, #e8d3b3 72%, #d9c19c);
  border-radius: var(--r-md);
  touch-action: none; cursor: crosshair;
}
.toolgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.tool {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: var(--paper-0); border: 1.5px solid var(--hair);
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 700;
  text-align: left;
  box-shadow: var(--sh-1);
  transition: all var(--t-fast) var(--ease);
}
.tool__ico { font-size: 19px; flex: none; }
@media (hover: hover) { .tool:hover { border-color: var(--soil-lit); } }
.tool.is-on { background: linear-gradient(180deg, var(--soil-lit), var(--soil)); color: #fff8ec; border-color: var(--soil-dark); box-shadow: 0 3px 0 var(--soil-dark); }
.turnbar { display: flex; align-items: center; gap: var(--s-2); }
.turnbar input[type="range"] { flex: 1; accent-color: var(--soil); }

/* ── 窑 ───────────────────────────────────────────── */
.kilnview { display: grid; gap: var(--s-3); }
.kilnview__diagram { background: var(--paper-0); border: 1.5px solid var(--hair); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sh-1); }
.kilnview__diagram svg { width: 100%; height: auto; display: block; }

.cones {
  display: flex; gap: 34px; justify-content: center; align-items: flex-end;
  height: 200px;
  background: radial-gradient(ellipse at 50% 120%, #7d2c10, #2a1710 62%);
  border-radius: var(--r-md);
  padding: 24px 24px 34px;      /* 底下要留出温度标签的位置 */
  box-shadow: var(--sh-in);
  position: relative; overflow: hidden;
}
.conewrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.cone {
  width: 34px; height: 128px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #eceae4;
  transform-origin: 50% 100%;
  transition: transform 900ms var(--ease), filter var(--t-slow);
}
.cone--red { background: #c0574a; }
.cone__t { margin-top: 7px; font-size: 11.5px; color: #f0d6ae; font-weight: 700; white-space: nowrap; }
.coneglow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity var(--t-slow); background: radial-gradient(ellipse at 50% 100%, rgba(255,150,50,.75), transparent 68%); }

.gauge { position: relative; height: 26px; border-radius: 999px; overflow: hidden; box-shadow: var(--sh-in); background: linear-gradient(90deg, #4b4b52 0%, #8c4a2a 34%, #d1642a 60%, #f2a83f 80%, #fff0c8 100%); }
.gauge__mask { position: absolute; top: 0; right: 0; bottom: 0; background: rgba(46,38,32,.82); transition: width 220ms linear; }
.gauge__mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.75); }
.gauge__mark span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; margin-top: 3px; }
.gaugewrap { padding-bottom: 18px; }
.tempnow { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tempnow small { font-size: 14px; font-weight: 700; color: var(--ink-2); }

.stoke { position: relative; overflow: hidden; }
.stoke.is-hot { animation: shake 260ms var(--ease); }

/* ── 开窑 / 展示 ──────────────────────────────────── */
.reveal { display: grid; place-items: center; gap: var(--s-4); padding: var(--s-4) 0; }
/* 揭晓有先后：「开窑」两个字先落，作品再上台，最后那句话浮起来。
   刚从指缝里看过一眼，现在整件端出来——这一幕值得走慢一点。 */
.reveal > :nth-child(1) { animation: revealRise 640ms var(--ease) 60ms backwards; }
.reveal > :nth-child(3) { animation: revealRise 720ms var(--ease) 1150ms backwards; }
@keyframes revealRise { from { opacity: 0; transform: translateY(14px); } }
.reveal__pot {
  width: min(430px, 84%); aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 50% 88%, rgba(74,43,26,.2), transparent 60%), linear-gradient(180deg, #f6ecd8, #ead7b8);
  border: 2px solid var(--hair);
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  animation: potIn 900ms var(--ease-out-back) 420ms backwards;
  overflow: hidden;
}
@keyframes potIn { from { opacity: 0; transform: translateY(22px) scale(.9) } to { opacity: 1; transform: none } }
.reveal__pot img { width: 100%; height: 100%; object-fit: contain; }

/* 分享展签卡 */
.sharecard { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-2); border: 1.5px solid var(--hair); }
.sharecard img { width: 100%; display: block; }

/* ── 博物馆 ───────────────────────────────────────── */
.hall { display: grid; gap: var(--s-4); }
.hall__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.hall__count { font-size: 13px; color: var(--ink-2); }
.shelf {
  background:
    linear-gradient(180deg, transparent 74%, rgba(74,43,26,.10) 74%, rgba(74,43,26,.18) 78%, transparent 79%),
    transparent;
}

/* 拼合工作台 */
.assembly {
  position: relative;
  height: clamp(330px, 48vh, 470px);
  border-radius: var(--r-md);
  border: 2px dashed var(--hair);
  background: repeating-linear-gradient(45deg, rgba(155,96,63,.035) 0 10px, transparent 10px 20px), var(--paper-1);
  overflow: hidden;
  touch-action: none;
}
.assembly__ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .13; max-height: 78%; pointer-events: none; filter: grayscale(1); }
.piece { position: absolute; cursor: grab; touch-action: none; filter: drop-shadow(0 5px 6px rgba(0,0,0,.28)); transition: filter var(--t-fast); }
.piece.is-drag { cursor: grabbing; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); z-index: 5; }
.piece.is-set { pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }

/* 清理发现物 */
.digspot {
  position: relative; height: 250px;
  border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #a97551, #7e5334 70%, #5e3d26);
  cursor: pointer;
  box-shadow: var(--sh-in);
  touch-action: none;    /* 连点清土时不能触发双击放大 */
}
.digspot__find { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; object-fit: contain; transform: translate(-50%, -50%); }
.digspot__crumb { position: absolute; border-radius: 44%; background: #8b5f3e; box-shadow: inset -3px -4px 0 rgba(0,0,0,.18); pointer-events: none; }

/* 笔记 / 图鉴 */
.notegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
.notecell {
  border: 1.5px solid var(--hair); border-radius: var(--r-md);
  padding: var(--s-3); background: var(--paper-0);
  box-shadow: var(--sh-1);
}
.notecell.is-locked { background: transparent; border-style: dashed; color: var(--ink-2); box-shadow: none; }
.notecell__swatch { height: 44px; border-radius: var(--r-xs); margin-bottom: var(--s-2); box-shadow: var(--sh-in); }
.notecell h4 { margin: 0 0 3px; font-size: 14.5px; }

@media (max-width: 1000px) {
  .cliff, .workarea { height: clamp(var(--stage-min), var(--stage-h), 520px); }
  .toolgrid { grid-template-columns: repeat(3, 1fr); }
  .cones { gap: 20px; height: 172px; }
}
@media (max-width: 560px) {
  .toolgrid { grid-template-columns: repeat(2, 1fr); }
  .basin { width: 116px; height: 76px; }
  .sieve { width: 200px; height: 122px; }
  .pan { width: 230px; height: 96px; }
}

/* 铲子：跟着手走，点下去会挥一下 */
.shovel {
  position: absolute; left: 50%; top: 50%;
  font-size: 40px; line-height: 1;
  transform: translate(-50%, -70%) rotate(-38deg);
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-fast);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
  z-index: 5;
}

/* ── 台面上的道具：水壶、干土袋 ─────────────────── */
.mixstage { position: relative; }
.propbtn {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px; border-radius: 16px;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast);
  transform-origin: 50% 80%;
}
.propbtn--jug { left: 2%; }
.propbtn--bag { right: 2%; }
@media (hover: hover) { .propbtn:hover { filter: brightness(1.08) drop-shadow(0 4px 8px rgba(74,43,26,.25)); } }
.propbtn:active { transform: translateY(calc(-50% + 3px)); }
.propbtn__ico { font-size: clamp(38px, 6vw, 62px); line-height: 1; filter: drop-shadow(0 4px 5px rgba(74,43,26,.3)); }
.propbtn__name { font-size: 14px; font-weight: 800; color: var(--ink-0); }
.propbtn__hint { font-size: 11px; color: var(--ink-2); }

/* 盆里被手指带出来的旋涡 */
.mixbowl__swirl {
  position: absolute; left: 50%; top: 62%;
  width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,240,210,0) 0deg, rgba(255,240,210,.5) 60deg, rgba(120,80,45,.35) 150deg, rgba(255,240,210,0) 260deg);
  opacity: 0; transition: opacity var(--t-fast);
  pointer-events: none; z-index: 2;
}
.mixbowl { cursor: grab; touch-action: none; }
.mixbowl:active { cursor: grabbing; }

@media (max-width: 900px) {
  .propbtn--jug { left: -2%; }
  .propbtn--bag { right: -2%; }
  .propbtn__hint { display: none; }
}

/* ── 烧窑：操作全部长在窑上 ─────────────────────── */
.kilnscene { position: relative; }
.kilnscene .inscene { z-index: 6; }

/* 观察口：窑壁上的一个小窗 */
.peep {
  background: linear-gradient(180deg, #6b4130, #4a2a1c);
  border: 3px solid #352014;
  border-radius: 16px;
  padding: 8px 10px 10px;
  box-shadow: 0 8px 22px rgba(20,10,5,.55), inset 0 1px 0 rgba(255,200,150,.25);
  transition: box-shadow var(--t-slow);
}
.peep.is-ready { box-shadow: 0 0 0 3px var(--gold-lit), 0 8px 22px rgba(20,10,5,.55); }
.peep__lip {
  font-size: 11px; letter-spacing: .22em; color: #e8c08c;
  text-align: center; margin-bottom: 6px; font-weight: 700;
}
.peep .cones { padding: 16px 18px 26px; border-radius: 11px; }
.peep .cone { width: 26px; height: 96px; }
.peep .cones { gap: 20px; height: auto; }
.peep__read {
  margin-top: 7px; font-size: 12px; font-weight: 700;
  color: #f0d6ae; text-align: center; max-width: 230px; line-height: 1.45;
}
.peep__read--ok { color: #b9e08e; }
.peep__read--warn { color: #f3c27a; }
.peep__read--bad { color: #f09a86; }

/* 窑边的三堆柴 */
.woodrack {
  background: linear-gradient(180deg, rgba(60,38,22,.82), rgba(38,23,13,.88));
  border-radius: 14px; padding: 8px 10px 10px;
  box-shadow: 0 6px 18px rgba(20,10,5,.5);
}
.woodrack__k { font-size: 11px; letter-spacing: .2em; color: #d8ab7c; margin-bottom: 6px; text-align: center; font-weight: 700; }
.woodrack__row { display: flex; gap: 8px; }
.woodpile {
  border: 0; border-radius: 11px;
  background: linear-gradient(180deg, #b98a58, #8d6236);
  padding: 7px 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: #2f1c0c; font-weight: 800; font-size: 11.5px;
  min-width: 62px;
  box-shadow: 0 3px 0 #5f3f21;
  transition: all var(--t-fast) var(--ease);
}
@media (hover: hover) { .woodpile:hover:not(:disabled) { filter: brightness(1.09); } }
.woodpile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #5f3f21; }
.woodpile:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }
/* 火箱正在吞上一把柴：压暗一下，吞完自己亮回来 */
.woodpile.is-chewing { opacity: .55; filter: saturate(.7); transition: opacity 160ms; }
.woodpile__art { font-size: 21px; line-height: 1.1; }
.woodpile__name { font-size: 11px; line-height: 1.2; }
.woodpile__n { font-size: 13px; font-variant-numeric: tabular-nums; color: #40260f; }

/* 风门 + 停火 */
.damper {
  background: linear-gradient(180deg, rgba(60,38,22,.82), rgba(38,23,13,.88));
  border-radius: 14px; padding: 8px 10px 10px;
  box-shadow: 0 6px 18px rgba(20,10,5,.5);
  width: min(268px, 40vw);
}
.damper__k { font-size: 11px; letter-spacing: .2em; color: #d8ab7c; margin-bottom: 6px; text-align: center; font-weight: 700; }
.damper__row { display: flex; gap: 6px; }
.damper__stop {
  flex: 1; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, #e6d5b8, #c9b18c);
  padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 11px; font-weight: 800; color: #3f2c15;
  box-shadow: 0 2px 0 rgba(60,40,20,.55);
  transition: all var(--t-fast) var(--ease);
}
.damper__stop span:first-child { font-size: 15px; }
.damper__stop.is-on { background: linear-gradient(180deg, var(--gold-lit), var(--gold)); box-shadow: 0 0 0 2px #fff3d0, 0 2px 0 var(--gold-deep); }
.damper__note { font-size: 11px; color: #e2c49c; line-height: 1.45; margin-top: 6px; }
.damper__stopfire { width: 100%; margin-top: 8px; justify-content: center; }

@media (max-width: 900px) {
  .peep .cone { width: 19px; height: 66px; }
  .peep .cones { gap: 12px; padding: 12px 12px 24px; }
  .peep__read { font-size: 11px; max-width: 150px; }
  .woodpile { min-width: 48px; padding: 5px 6px; font-size: 10.5px; }
  .damper { width: min(210px, 46vw); }
  .damper__note { display: none; }
}

/* ── 制陶：工具架和转台压在工作台上 ─────────────── */
.claystage { position: relative; }
.claytools { max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.claytools::-webkit-scrollbar { display: none; }
.claybtns { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.clayturn {
  display: flex; align-items: center; gap: 9px;
  background: rgba(253,248,236,.92);
  border: 1.5px solid var(--hair);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: var(--sh-1);
  width: min(230px, 40%);
}
.clayturn__k { font-size: 11.5px; color: var(--ink-2); font-weight: 700; letter-spacing: .1em; flex: none; }
.clayturn input[type="range"] { flex: 1; accent-color: var(--soil); min-width: 0; }

@media (max-width: 900px) {
  .racktool { min-width: 44px; padding: 5px 5px; font-size: 10px; }
  .racktool span:first-child { font-size: 16px; }
  .clayturn { width: min(160px, 46%); padding: 5px 10px; }
}

/* ── 开窑：先捂住脸，再从指缝里偷看 ─────────────── */
.peekveil { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.peekveil__hand {
  position: absolute; top: -6%; height: 112%; width: 56%;
  background: linear-gradient(180deg, #f3b98c, #e29e6f);
  box-shadow: inset 0 0 60px rgba(120,70,40,.35);
  transition: transform 900ms cubic-bezier(.3,.9,.3,1), opacity 380ms;
}
.peekveil__hand--l { left: 0;  border-radius: 0 40% 40% 0 / 0 50% 50% 0; transform: translateX(0); }
.peekveil__hand--r { right: 0; border-radius: 40% 0 0 40% / 50% 0 0 50%; transform: translateX(0); }
/* 指缝：手掌上几道深色的分界 */
.peekveil__hand::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(96deg, rgba(150,90,55,.22) 0 3px, transparent 3px 46px);
}
.peekveil.is-peeking .peekveil__hand--l { transform: translateX(-14%); }
.peekveil.is-peeking .peekveil__hand--r { transform: translateX(14%); }
.peekveil.is-gone .peekveil__hand--l { transform: translateX(-104%); }
.peekveil.is-gone .peekveil__hand--r { transform: translateX(104%); }
.peekveil.is-gone .peekveil__say { opacity: 0; }
.peekveil__say {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  background: rgba(58,46,36,.9); color: #fdf8ec;
  border-radius: 999px; padding: 8px 18px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  transition: opacity 300ms;
}

/* ── 选做法：手捏 / 拉坯 ─────────────────────────── */
.modechoose { display: grid; place-content: center; gap: var(--s-2); min-height: clamp(var(--stage-min), var(--stage-h), 640px); padding: var(--s-4) 0; }
.modechoose__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.modepick {
  border: 2px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--paper-0), var(--paper-1));
  padding: var(--s-5) var(--s-4);
  text-align: center; cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast);
  width: min(300px, 42vw);
}
@media (hover: hover) { .modepick:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--soil-lit); } }
.modepick__ico { font-size: 54px; line-height: 1; margin-bottom: var(--s-2); }
.modepick__t { font-size: 22px; font-weight: 800; }
.modepick__s { font-size: 13px; color: var(--ink-2); margin-bottom: var(--s-3); }
.modepick__l { text-align: left; margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-1); line-height: 1.75; }

@media (max-width: 700px) {
  .modechoose__row { grid-template-columns: 1fr; }
  .modepick { width: min(340px, 84vw); padding: var(--s-4); }
  .modepick__ico { font-size: 40px; }
}


/* ── 拉坯的水碗 ───────────────────────────────────
   钉在工作台右下角。水位跟着手上的水一起掉，
   干了整只碗会闪——不用低头去看进度条。 */
.waterbowl {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 50% 50% 46% 46%;
  border: 3px solid #a8895f;
  background: linear-gradient(180deg, #efe3cc, #ddcbaa);
  box-shadow: var(--sh-in), var(--sh-1);
  overflow: hidden;
  display: grid; place-items: center;
  padding: 0;
}
.waterbowl__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(150,200,220,.92), rgba(110,165,195,.95));
  transition: height .25s var(--ease);
  pointer-events: none;
}
.waterbowl__ico { position: relative; font-size: 22px; line-height: 1; }
.waterbowl__k {
  position: relative;
  font-size: 11px; font-weight: 800; color: var(--ink-0);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.waterbowl.is-dry {
  border-color: var(--fire);
  animation: bowlDry 1s ease-in-out infinite;
}
@keyframes bowlDry {
  0%, 100% { box-shadow: var(--sh-in), 0 0 0 0 rgba(202,92,50,.5); }
  50%      { box-shadow: var(--sh-in), 0 0 0 8px rgba(202,92,50,0); }
}

/* ── 可及性与触摸热区（V9） ─────────────────────────
   场景里的操作件也要能用键盘走到；小个子按钮用透明热区
   扩到手指的大小——只扩命中范围，不动布局，
   顶栏/底坞量好的 --chrome 常数不受影响。 */
.woodbtn:focus-visible, .woodpile:focus-visible, .damper__stop:focus-visible,
.racktool:focus-visible, .tool:focus-visible, .shovel:focus-visible, .propbtn:focus-visible {
  outline: 3px solid var(--gold-lit); outline-offset: 2px;
}
.woodbtn { position: relative; }
.woodbtn::after { content: ""; position: absolute; inset: -8px -6px; border-radius: inherit; }


/* ── 泥土笔记 · 田野手记（V9） ───────────────────────
   「我见过的」那一页从清单升级成随营手记：
   泥样页（canvas 抹痕）、天气速写、烧成记录、手写账本。
   只加不改：这条线以上已有的规则一条没动。
   类名一律 .fieldnote 开头。 */

.fieldnote-sec { margin-top: var(--s-2); }
.fieldnote-sec .hall__head h3 {
  font-family: var(--font-hand);
  font-size: 20px; font-weight: 700; letter-spacing: 1.5px;
  border-bottom: 1.5px dashed var(--hair);
  padding-bottom: 3px;
}

/* ── ① 泥样页：一种土一张小纸，胶带贴在本子上 ────── */
.fieldnote-soils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s-4);
  padding-top: 8px;                    /* 给探出头的纸胶带留地方 */
}
.fieldnote-soil {
  position: relative;
  background: var(--note-paper);
  background-image: var(--tex-paper);
  border: 1px solid var(--paper-3);
  border-radius: 14px 9px 16px 8px / 9px 15px 8px 14px;   /* 四角微歪 */
  box-shadow: var(--sh-1);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.fieldnote-soil:nth-child(odd)  { transform: rotate(-.45deg); }
.fieldnote-soil:nth-child(even) {
  transform: rotate(.4deg);
  border-radius: 9px 15px 8px 14px / 15px 8px 14px 9px;
}
.fieldnote-soil::before {              /* 顶上一条纸胶带 */
  content: ""; position: absolute; left: 50%; top: -7px;
  width: 64px; height: 15px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--tape);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(74, 43, 26, .10);
}
.fieldnote-soil__head {
  display: flex; align-items: baseline; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: var(--s-1);
}
.fieldnote-soil__name {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 21px; font-weight: 700; line-height: 1.2;
  border-bottom: 1.5px dashed var(--hair);
}
.fieldnote-soil__meta { font-size: 11.5px; color: var(--ink-2); }
.fieldnote-soil__smear {
  display: block; width: 100%; height: auto;
  margin: 2px 0 4px;
  filter: drop-shadow(0 1px 1px rgba(74, 43, 26, .16));
}
.fieldnote-soil__feel {
  margin: 0 0 3px;
  font-family: var(--font-hand);
  font-size: 14.5px; color: var(--ink-1); line-height: 1.6;
}
.fieldnote-soil__desc { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.65; }
.fieldnote-soil__firing {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-top: var(--s-2);
}
.fieldnote-soil__arrow { color: var(--ink-2); font-size: 12px; }
.fieldnote-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-1); }
.fieldnote-chip__c {
  width: 17px; height: 17px; flex: none;
  border-radius: 5px 4px 6px 4px;      /* 小色卡也别太方正 */
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18), 0 0 0 1px rgba(74, 43, 26, .12);
}

/* 还没遇到的土：一页留白，只有一个问号 */
.fieldnote-soil.is-empty {
  background: transparent; background-image: none;
  border: 1.5px dashed var(--hair);
  box-shadow: none; transform: none;
  min-height: 168px;
  display: grid; place-content: center; justify-items: center; gap: var(--s-2);
}
.fieldnote-soil.is-empty::before { display: none; }
.fieldnote-q { font-family: var(--font-hand); font-size: 30px; color: var(--ink-2); letter-spacing: 4px; }
.fieldnote-wait { font-family: var(--font-hand); font-size: 13px; color: var(--ink-2); }

/* ── ② 天气速写：钢笔图标 + 那天的一句话 ─────────── */
.fieldnote-wxgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: var(--s-3);
}
.fieldnote-wx {
  background: var(--paper-0);
  background-image: var(--tex-paper);
  border: 1px solid var(--paper-3);
  border-radius: 11px 15px 9px 14px / 14px 9px 15px 10px;
  box-shadow: var(--sh-1);
  padding: var(--s-3);
}
.fieldnote-wx__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 4px; }
.fieldnote-wx__ico { color: var(--ink-1); flex: none; }
.fieldnote-wx__name {
  font-family: var(--font-hand);
  font-size: 18px; font-weight: 700;
  border-bottom: 1.5px dashed var(--hair);
}
.fieldnote-wx__count { margin-left: auto; font-family: var(--font-hand); font-size: 12px; color: var(--ink-2); }
.fieldnote-wx__line { margin: 0; font-size: 12.5px; color: var(--ink-1); line-height: 1.65; }

/* ── ③ 烧成记录 ─────────────────────────────────── */
.fieldnote-resgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s-3);
}
.fieldnote-res {
  background: var(--paper-0);
  background-image: var(--tex-paper);
  border: 1px solid var(--paper-3);
  border-radius: 10px 14px 9px 15px / 15px 9px 14px 10px;
  box-shadow: var(--sh-1);
  padding: var(--s-3);
}
.fieldnote-res__head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fieldnote-res__name {
  font-family: var(--font-hand);
  font-size: 18px; font-weight: 700;
  border-bottom: 1.5px dashed var(--hair);
}
.fieldnote-res__stars { color: var(--gold); font-size: 11px; letter-spacing: 2px; }
.fieldnote-res__count { margin-left: auto; font-family: var(--font-hand); font-size: 12px; color: var(--ink-2); }
.fieldnote-res__line {
  margin: 4px 0 0;
  font-size: 12.5px; color: var(--ink-1); line-height: 1.65;
  white-space: pre-line;               /* 「炸了」那条正文带换行 */
}

/* 天气和结果里还没遇到的：灰虚线框 */
.fieldnote-wx.is-empty, .fieldnote-res.is-empty {
  background: transparent; background-image: none;
  border: 1.5px dashed var(--hair);
  box-shadow: none;
  min-height: 88px;
  display: grid; place-content: center; justify-items: center; gap: 3px;
}
.fieldnote-wx.is-empty .fieldnote-q, .fieldnote-res.is-empty .fieldnote-q { font-size: 22px; letter-spacing: 3px; }

/* ── ④ 手写账本：名目小、数字大、虚线打底 ────────── */
.fieldnote-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 0 var(--s-6);
  background: var(--note-paper);
  background-image: var(--tex-paper);
  border: 1px solid var(--paper-3);
  border-radius: 12px 16px 10px 15px / 15px 10px 16px 11px;
  box-shadow: var(--sh-1);
  padding: var(--s-2) var(--s-4);
}
.fieldnote-row {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: 7px 0 5px;
  border-bottom: 1.5px dashed var(--hair);
}
.fieldnote-row__k { font-family: var(--font-hand); font-size: 14px; color: var(--ink-1); white-space: nowrap; }
.fieldnote-row__dots { flex: 1; border-bottom: 1.5px dotted var(--hair); transform: translateY(-4px); }
.fieldnote-row__v { white-space: nowrap; }
.fieldnote-row__v b { font-family: var(--font-hand); font-size: 23px; font-weight: 700; color: var(--ink-0); line-height: 1; }
.fieldnote-row__u { font-family: var(--font-hand); font-size: 12px; color: var(--ink-2); margin-left: 3px; }

@media (max-width: 560px) {
  .fieldnote-soils, .fieldnote-wxgrid, .fieldnote-resgrid { grid-template-columns: 1fr 1fr; }
  .fieldnote-soils { grid-template-columns: 1fr; }
  .fieldnote-ledger { grid-template-columns: 1fr; }
}


/* ── 装窑：图上的三个落点（V10） ─────────────────────
   选中的位置由图里的金圈来说话；另外两个是虚线的空位，
   看得出「这儿也能放」。 */
.kilnspot {
  position: absolute;
  width: 58px; height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 47% 53% 50% 50%;
  border: 2.5px dashed rgba(111, 59, 44, .5);
  background: rgba(249, 241, 222, .38);
  color: #6f3b2c; font-weight: 800; font-size: 16px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
@media (hover: hover) { .kilnspot:hover { background: rgba(249, 241, 222, .7); transform: translate(-50%, -50%) scale(1.08); } }
.kilnspot:focus-visible { outline: 3px solid var(--gold-lit); outline-offset: 2px; }
.kilnspot.is-on { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .kilnspot { width: 46px; height: 46px; font-size: 14px; } }