/* 顶层模态：阅读器（羊皮纸）/ 特写图 */

.modal {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  visibility: hidden;
}
.modal[data-open="true"] { visibility: visible; }

.modal__mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(8, 6, 4, .72), rgba(4, 3, 2, .92));
  opacity: 0;
  transition: opacity var(--dur) var(--ease-in-out);
  backdrop-filter: blur(1.5px);
}
.modal[data-open="true"] .modal__mask { opacity: 1; }

.modal__panel {
  position: relative;
  width: 64cqw;
  max-height: 84cqh;
  display: flex;
  flex-direction: column;
  transform: scale(.94) translateY(2cqh);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.modal[data-open="true"] .modal__panel { transform: none; opacity: 1; }

/**
 * 模态打开时的提示条：默认的 z-index 60 会被模态（80）压住，
 * 这里抬到最上层，并让到纸页下沿（纸页下方是暗色遮罩，字看得清）。
 * 提示条本身 pointer-events: none，压到翻页条也不会挡住点击。
 */
.stage:has(.modal[data-open="true"]) .toast-wrap {
  z-index: 120;
  bottom: 1.4cqh;
}
/* 纸页本来就占满视口，提示条放宽一点，尽量单行，少压内容 */
.stage:has(.modal[data-open="true"]) .toast { max-width: 86cqw; }

/* ---------- 阅读器 ---------- */
.sheet {
  position: relative;
  flex: 0 0 auto;
  /* 固定纸页高度：翻页时版心不跳动，分页也按这个高度测量 */
  height: 78cqh;
  display: flex;
  flex-direction: column;
  padding: 2.8cqh 3.4cqw 1.8cqh;
  color: #2a2016;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 252, 240, .96), rgba(226, 208, 172, .98) 60%, rgba(198, 176, 138, 1)),
    #e2d0ac;
  box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, .7), 0 0 0 1px rgba(120, 96, 60, .5) inset;
  /* 毛边：内阴影 + 轻微不规则裁切，避免死板的矩形 */
  clip-path: polygon(.6% 1.4%, 99.2% .3%, 100% 98.6%, 1.2% 99.4%);
}
/* 单页文书（便条 / 信件 / 线索详情）：纸张缩到内容高度，不留长空白 */
.sheet[data-single="true"] {
  height: auto;
  max-height: 84cqh;
}
.sheet[data-single="true"] .sheet__body {
  flex: 0 0 auto;
  overflow: visible;
}

/* 纸张纤维质感（纯 CSS，无图片） */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(94deg, rgba(120, 96, 60, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(120, 96, 60, .04) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 18% 22%, rgba(120, 80, 40, .12), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(120, 80, 40, .1), transparent 42%);
}

.sheet__title {
  position: relative;
  flex: 0 0 auto;
  margin: 0 0 .6cqh;
  font-size: 1.7cqw;
  letter-spacing: .28em;
  font-weight: 600;
  color: #3b2a16;
  text-align: center;
}
.sheet__rule {
  flex: 0 0 auto;
  height: 1px;
  margin: 1.2cqh .5cqw 1.8cqh;
  background: linear-gradient(90deg, transparent, rgba(80, 58, 30, .5), transparent);
}
.sheet__body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 0 1.2cqw;
  font-size: 1.12cqw;
  line-height: 1.92;
  letter-spacing: .04em;
  text-align: justify;
  overscroll-behavior: contain;
}
/* 拼豆 / 翻检自带排版：正文层只当滚动容器，不继承阅读器的缩进与字号 */
.sheet--lock .sheet__body,
.sheet--inspect .sheet__body {
  padding: 0;
  font: inherit;
  line-height: normal;
  text-align: initial;
}
.sheet__body::-webkit-scrollbar { width: 5px; }
.sheet__body::-webkit-scrollbar-thumb { background: rgba(80, 58, 30, .35); border-radius: 3px; }
.sheet__body p { margin: 0 0 1.1em; }
.sheet__body p.is-cont { text-indent: 0; }
.sheet__body p.date {
  margin: 1.6em 0 .6em;
  font-size: .95cqw;
  letter-spacing: .16em;
  color: #6b5231;
  border-left: 2px solid rgba(140, 42, 30, .45);
  padding-left: .8em;
}
.sheet__body p.rule {
  text-align: center;
  letter-spacing: .6em;
  color: rgba(80, 58, 30, .5);
  margin: 1.4em 0;
}
.sheet__body s { color: rgba(70, 52, 28, .55); }

/* 密信一的夹层：燎过之后从字缝里浮出来的一行，紧贴上一段 */
.sheet__body p.ghost {
  /* 藏字的地方原本就空着一两行，夹层要跟原文拉开距离 */
  margin: 1.5em 0 1.25em;
  padding: .15em 0 .15em .85em;
  font-size: 1.02cqw;
  line-height: 1.8;
  letter-spacing: .06em;
  color: #5a3c20;
  border-left: 2px solid rgba(140, 42, 30, .38);
  background: linear-gradient(90deg, rgba(140, 42, 30, .08), transparent 72%);
  transform: rotate(-.3deg);
  transform-origin: left center;
}
/* 还没燎过的夹层：位置和行高都留在纸上，只是看不见字 */
.sheet__body p.ghost.is-hidden { visibility: hidden; }

/* 刚燎过的那一次：纸先受热，夹层再一行行浮出来 */
.sheet[data-revealing="1"] { animation: paper-warm 1.1s var(--ease-out); }
.sheet[data-revealing="1"] .sheet__body p.ghost {
  animation: ghost-in .9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * .22s);
}
@keyframes paper-warm {
  0%   { filter: none; }
  35%  { filter: brightness(1.07) sepia(.22) saturate(1.05); }
  100% { filter: none; }
}
@keyframes ghost-in {
  from { opacity: 0; filter: blur(2.5px); letter-spacing: .34em; }
  to   { opacity: 1; filter: none; letter-spacing: .06em; }
}

/* 翻页：纸页被推过去的一点错觉 */
.sheet__body.is-turn-next { animation: page-next .34s var(--ease-out); }
.sheet__body.is-turn-prev { animation: page-prev .34s var(--ease-out); }
@keyframes page-next {
  from { opacity: 0; transform: translateX(2.4cqw); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-prev {
  from { opacity: 0; transform: translateX(-2.4cqw); }
  to   { opacity: 1; transform: none; }
}

/* 文书动作条（燎一下 / 对着对照表译读） */
.sheet__acts {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 1cqw;
  margin-top: 1cqh;
  padding-top: .8cqh;
  border-top: 1px solid rgba(80, 58, 30, .22);
}
.sheet__acts .btn {
  padding: .45cqh 1.3cqw;
  font-size: .9cqw;
  letter-spacing: .14em;
  color: #4a3a22;
  border: 1px solid rgba(80, 58, 30, .35);
  background: rgba(255, 250, 235, .4);
  clip-path: none;
}
.sheet__acts .btn:hover {
  color: #8c2a1e;
  border-color: rgba(140, 42, 30, .6);
  background: rgba(255, 250, 235, .82);
}

/* 页码与翻页按钮 */
.sheet__pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  margin-top: .9cqh;
  padding-top: .8cqh;
  border-top: 1px solid rgba(80, 58, 30, .22);
}
.sheet__nav {
  min-height: 32px;
  padding: .34cqw 1.05cqw;
  font-size: .88cqw;
  letter-spacing: .14em;
  color: #4a3a22;
  border: 1px solid rgba(80, 58, 30, .35);
  background: rgba(255, 250, 235, .35);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.sheet__nav:hover:not(:disabled) {
  color: #8c2a1e;
  border-color: rgba(140, 42, 30, .6);
  background: rgba(255, 250, 235, .72);
}
.sheet__nav:disabled { opacity: .28; cursor: default; }
.sheet__count {
  min-width: 4.4cqw;
  font-size: .8cqw;
  letter-spacing: .16em;
  text-align: center;
  color: rgba(80, 58, 30, .62);
}

/* 可点击关键词：加粗标红，未收集时轻微脉动 */
.kw {
  display: inline;
  padding: 0 .15em .05em;
  font: inherit;
  font-weight: 700;
  color: #8c2a1e;
  background: linear-gradient(transparent 62%, rgba(140, 42, 30, .16) 62%);
  border: 0;
  border-bottom: 1px dotted rgba(140, 42, 30, .5);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.kw::before {
  content: "✦";
  margin-right: .1em;
  font-size: .62em;
  color: rgba(140, 42, 30, .55);
}
.kw:hover { background: rgba(140, 42, 30, .14); }
.kw.is-elsewhere {
  color: #746b60;
  background: none;
  border-bottom-color: transparent;
  border-bottom: 1px dashed rgba(91, 83, 72, .4);
  cursor: help;
}
.kw.is-elsewhere::before {
  content: "…";
  color: rgba(91, 83, 72, .5);
}
.kw.is-elsewhere:hover { background: rgba(91, 83, 72, .08); }
.kw.is-taken {
  color: #5b5348;
  background: none;
  border-bottom-color: transparent;
  cursor: default;
}
.kw.is-taken::before { content: "✓"; color: rgba(61, 82, 38, .6); }
.kw.is-taken::after {
  content: "·已录";
  font-size: .62em;
  letter-spacing: .1em;
  color: rgba(91, 83, 72, .7);
}
/* 文书内就地解开的黑话：保留原词，金色划线 + 词后小释义 */
.kw.is-solved {
  color: #a97b32;
  background: none;
  border-bottom-color: rgba(200, 163, 90, .8);
  cursor: pointer;
}
.kw.is-solved::before { content: "✓"; color: rgba(169, 123, 50, .9); }
.kw__gloss {
  font-weight: 400;
  font-size: .92em;
  color: rgba(169, 123, 50, .92);
  white-space: normal;
}
.kw.is-wrong { animation: kw-shake .32s var(--ease-out); }
@keyframes kw-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-.18em); }
  40% { transform: translateX(.15em); }
  60% { transform: translateX(-.1em); }
  80% { transform: translateX(.06em); }
}

/* 关闭按钮 */
.sheet__close {
  position: absolute;
  top: 1.2cqh;
  right: 1.4cqw;
  z-index: 3;     /* 标题是定位元素且 DOM 在后，不加这层会被标题盖住点击区 */
  width: 2.9cqw; height: 2.9cqw;
  font-size: 0;   /* 叉用两条线画，避免字体基线导致偏心 */
  color: rgba(59, 42, 22, .65);
  border: 1px solid rgba(59, 42, 22, .28);
  border-radius: 50%;
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.sheet__close::before,
.sheet__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  height: 1px;
  background: currentColor;
}
.sheet__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sheet__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet__close:hover { color: #8c2a1e; border-color: #8c2a1e; transform: rotate(90deg); }

/* ---------- 翻检物件（包裹、抽屉） ---------- */
.inspect__hint {
  margin: 0 0 1.4cqh;
  font-size: .9cqw;
  line-height: 1.85;
  letter-spacing: .04em;
  color: rgba(70, 52, 28, .72);
}
.inspect__tip {
  margin: -.4cqh 0 1.2cqh;
  font-size: .84cqw;
  letter-spacing: .06em;
  color: rgba(140, 42, 30, .8);
}
.inspect__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 54cqh;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 58, 30, .3) transparent;
}
/* 有说明文案时，列表让出高度，整张纸不超出视口 */
.sheet:has(.inspect__note:not([hidden])) .inspect__list { max-height: 42cqh; }
/* 只看不拿的物件（连枷、木念珠）：文案直接铺在纸页下方，不弹会被框盖住的 toast */
.inspect__note {
  margin: 1.2cqh 0 0;
  padding: .8cqh 1cqw;
  font-size: .94cqw;
  line-height: 1.9;
  letter-spacing: .04em;
  color: #2a2016;
  background: rgba(255, 250, 235, .55);
  border-left: 2px solid rgba(140, 42, 30, .5);
  animation: info-in .22s var(--ease-out);
}
.inspect__row {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.1cqh .6cqw;
  border-bottom: 1px dashed rgba(80, 58, 30, .2);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.inspect__row:hover { background: rgba(140, 42, 30, .07); }
.inspect__icon {
  flex: 0 0 auto;
  width: 2.6cqw; height: 2.6cqw;
  color: #6b4f2a;
}
.inspect__icon svg { width: 100%; height: 100%; }
.inspect__name {
  flex: 1;
  font-size: 1.02cqw;
  letter-spacing: .06em;
  color: #2a2016;
}
.inspect__state {
  flex: 0 0 auto;
  font-size: .78cqw;
  letter-spacing: .14em;
  color: rgba(140, 42, 30, .7);
}
.inspect__row.is-taken { opacity: .45; cursor: default; }
.inspect__row.is-taken .inspect__state { color: rgba(80, 58, 30, .55); }

/* ---------- 炼金（完整的炼金套装） ---------- */
/* 台面比阅读用的纸页窄一截，器物才不至于缩在中间一小片 */
.sheet[data-kind="alchemy"] {
  width: min(60cqw, 47cqw);
  margin: 0 auto;
}
.alchemy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8cqh;
  flex: 1;
  min-height: 0;
}
/* 隐藏用属性，别被组件自己的 display 覆盖 */
.alchemy [hidden] { display: none !important; }

/* 兜底用的跳过：先隐身；3 次失败或开台 90 秒后才淡入 */
.alchemy__skip {
  position: absolute;
  right: 0;
  top: -.9cqh;
  padding: .38cqh .9cqw;
  font: inherit;
  font-size: max(.84cqw, 12px);
  opacity: 0;
  pointer-events: none;
  transition: color .2s, border-color .2s, background .2s, opacity .6s;
  letter-spacing: .14em;
  color: #6b5535;
  border: 1px solid rgba(150, 126, 88, .55);
  border-radius: 2px;
  background: rgba(255, 252, 244, .7);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.alchemy__skip.is-ready {
  opacity: 1;
  pointer-events: auto;
}
.alchemy__skip:hover {
  color: #5c4a30;
  border-color: rgba(150, 126, 88, .8);
  background: rgba(255, 252, 244, .9);
}

.alchemy__steps {
  display: flex;
  gap: 1.6cqw;
  list-style: none;
  margin: 0;
  padding: 0 0 .7cqh;
  border-bottom: 1px dashed rgba(80, 58, 30, .22);
  font-size: .9cqw;
  letter-spacing: .12em;
  color: rgba(80, 58, 30, .42);
}
.alchemy__steps li[data-state="now"] { color: #8c2a1e; }
.alchemy__steps li[data-state="now"]::before { content: "▸ "; }
.alchemy__steps li[data-state="done"] { color: #6b5231; }
.alchemy__steps li[data-state="done"]::before { content: "✓ "; }

/* 每一步的目标说明：手稿口吻，摆在步骤条下面 */
.alchemy__goal {
  margin: 0;
  font-size: .92cqw;
  line-height: 1.7;
  color: rgba(70, 52, 28, .72);
}

/* 台面：一块嵌在纸页里的木工台，器物真的"放在上面" */
.alchemy__stage {
  position: relative;
  flex: 1;
  min-height: 37cqh;
  margin-top: .4cqh;
  padding: 2cqh 1.6cqw 1.2cqh;
  overflow: hidden;
  border-radius: .45cqw;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255, 220, 165, .28), rgba(0, 0, 0, 0) 56%),
    repeating-linear-gradient(92deg,
      #5b3f28 0 2px, #4a3220 2px 5px, #553a24 5px 9px, #452e1c 9px 13px),
    #4a3220;
  box-shadow:
    inset 0 .55cqh 1.8cqh rgba(0, 0, 0, .55),
    inset 0 0 0 2px rgba(0, 0, 0, .42),
    0 .35cqh .9cqh rgba(0, 0, 0, .26);
}
/* 台面：器物底下的一层暖影，让东西看着是放在桌上而不是浮着 */
.alchemy__stage::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 1.5%;
  height: 7cqh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(86, 64, 36, .18), rgba(86, 64, 36, .06) 58%, transparent 76%);
}

/* ---- 软管：外管、内孔、流动的液滴 ---- */
.alchemy__hose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.hose__outer {
  fill: none;
  stroke: #6d5a44;
  stroke-width: 9.5;
  stroke-linecap: round;
}
.hose__inner {
  fill: none;
  stroke: #a8916f;
  stroke-width: 5.4;
  stroke-linecap: round;
  opacity: .9;
}
.hose__drop {
  fill: #a8d6bd;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(150, 220, 190, .95));
  transition: opacity .16s;
}
.hose__drop[data-on="1"] { opacity: 1; }

/* ---- 台面三列 ---- */
.alchemy__bench {
  position: absolute;
  inset: 2cqh 1.6cqw 1.2cqh;
  z-index: 2;
  display: grid;
  grid-template-columns: .92fr 1.2fr 1fr;
  gap: .8cqw;
}
.alchemy__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .6cqh 0 .8cqh;
}
.alchemy__col--mats { justify-content: center; gap: 1.4cqh; }

.alchemy__col--center {
  /* 碗与火盆都沉到台面底部，上方整片留给白雾 */
  justify-content: flex-end;
  align-items: center;
  gap: .9cqh;
  padding-bottom: 1.2cqh;
}
/* 右列：温度计在收集瓶上方，像一组连在一起的装置 */
.alchemy__col--right {
  justify-content: flex-end;
  align-items: center;
  gap: 2.6cqh;
}

/* ---- 材料罐：粗陶、木塞、罐口一小堆晶体 ---- */
.alchemy__jar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .55cqw;
  width: 100%;
  padding: .2cqh .2cqw;
  font: inherit;
  text-align: left;
  color: inherit;
  border: none;
  background: none;
  cursor: grab;
  touch-action: none;
  transition: transform .26s var(--ease-out);
}
.alchemy__jar svg {
  grid-row: 1 / 3;
  width: 4.6cqw;
  height: auto;
  display: block;
  transform-origin: 72% 24%;
  transition: transform .26s var(--ease-out), filter var(--dur-fast);
  filter: drop-shadow(0 .3cqh .3cqh rgba(0, 0, 0, .22));
}
.alchemy__jar:hover svg { filter: drop-shadow(0 .4cqh .5cqh rgba(0, 0, 0, .3)); }
.alchemy__jar-name {
  font-size: .82cqw;
  font-weight: 400;
  letter-spacing: .08em;
  color: #f0e0bc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
.alchemy__jar-count {
  font-size: .72cqw;
  color: #cdb488;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
.alchemy__jar[data-picked="1"] svg { transform: translateY(-.5cqh) rotate(-4deg); }
.alchemy__jar[data-picked="1"] .alchemy__jar-name { color: #8c2a1e; }
.alchemy__jar[data-left="0"] { opacity: .62; }

/* 倒料：罐子朝碗那边倾一下 */
.alchemy__jar.is-pouring svg { animation: alchemy-pour .44s var(--ease-out); }
@keyframes alchemy-pour {
  0% { transform: none; }
  34% { transform: translate(8%, -6%) rotate(-26deg); }
  62% { transform: translate(6%, -4%) rotate(-20deg); }
  100% { transform: none; }
}

.jar__body { stroke: rgba(60, 46, 30, .35); stroke-width: .8; }
.jar__cork { fill: #8a6a44; stroke: rgba(50, 36, 22, .4); stroke-width: .7; }
.jar__mouth { fill: #8d7c62; stroke: rgba(50, 36, 22, .35); stroke-width: .7; }
.jar__hole { fill: #3c3223; }
.jar__shine { fill: none; stroke: rgba(255, 248, 228, .45); stroke-width: 2.4; stroke-linecap: round; }
.jar__band { fill: none; stroke: rgba(70, 54, 34, .35); stroke-width: 1.2; }
.jar__load circle { transition: opacity .3s; }
.alchemy__jar[data-mat="salt"] .jar__load { fill: #efe7d2; }
.alchemy__jar[data-mat="vitriol"] .jar__load { fill: #7f9a6b; }
.alchemy__jar[data-left="2"] .jar__load > *:nth-child(n+5) { opacity: .12; }
.alchemy__jar[data-left="1"] .jar__load > *:nth-child(n+3) { opacity: .12; }
.alchemy__jar[data-left="0"] .jar__load > * { opacity: .08; }

/* ---- 陶碗与碗里的碎晶 ---- */
.alchemy__bowl-slot {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.alchemy__bowl {
  position: relative;
  width: 9cqw;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: grab;
  touch-action: none;
  transition: transform .26s var(--ease-out), filter .26s;
}
.alchemy__bowl svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 .5cqh .45cqh rgba(0, 0, 0, .26));
}
.alchemy__bowl[data-empty="1"] svg { filter: drop-shadow(0 .5cqh .45cqh rgba(0, 0, 0, .26)) saturate(.7); }
.alchemy__bowl[data-picked="1"] { transform: translateY(-.8cqh); }
.alchemy__bowl[data-on-fire="1"] {
  transform: translateY(4cqh) scale(.94);
  cursor: default;
}
.alchemy__bowl.is-hot svg {
  filter: drop-shadow(0 .5cqh .6cqh rgba(0, 0, 0, .26)) drop-shadow(0 0 1.6cqw rgba(240, 140, 70, .55));
}
.alchemy__bowl.is-shake { animation: alchemy-shake .26s var(--ease-out); }
.alchemy__bowl.is-dragging { cursor: grabbing; }

.bowl__body { stroke: rgba(50, 38, 24, .35); stroke-width: .9; }
.bowl__mouth { fill: #9c8a6c; stroke: rgba(50, 38, 24, .4); stroke-width: 1; }
.bowl__glaze { fill: none; stroke: rgba(255, 246, 222, .35); stroke-width: 2.6; stroke-linecap: round; }
.bowl__shadow { fill: none; stroke: rgba(40, 28, 16, .28); stroke-width: 2; }

.alchemy__dots {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 14%;
  bottom: 34%;
  pointer-events: none;
}
.alchemy__dots i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  transform: rotate(var(--r, 0deg)) scale(calc(1 - var(--grind, 0) * .42));
  transition: transform .2s var(--ease-out);
}
/* 反应区：碗口发琥珀光；超温发红。温度状态由 paintHeat 写到 data-heat */
.alchemy__bowl::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: 20%;
  height: 17%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(.15cqh);
  transition: opacity .3s var(--ease-out);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 186, 92, .8), rgba(255, 150, 60, 0) 72%);
}
.alchemy__bowl[data-heat="good"]::after { opacity: 1; }
.alchemy__bowl[data-heat="over"]::after {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(214, 70, 44, .85), rgba(180, 40, 30, 0) 72%);
}

/* 拖拽时高亮该放的地方：拖料罐亮碗，拖碗亮火盆 */
.alchemy__stage[data-drag="jar"] .alchemy__bowl svg {
  filter: drop-shadow(0 .5cqh .45cqh rgba(0, 0, 0, .26)) drop-shadow(0 0 1.4cqw rgba(240, 178, 74, .75));
}
.alchemy__stage[data-drag="bowl"] .alchemy__fire svg {
  filter: drop-shadow(0 0 1.6cqw rgba(240, 178, 74, .7));
}

/* ---- 石杵 ---- */
.alchemy__pestle {
  /* 斜插在碗口右内侧：杵头压进碗里，手柄探出碗沿 */
  --lift: 0px;
  --tilt: 13deg;
  position: absolute;
  left: calc(50% + .45cqw);
  bottom: 62%;
  width: 1.95cqw;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 .3cqh .35cqh rgba(0, 0, 0, .3));
  transform: translateY(var(--lift)) rotate(var(--tilt));
  transform-origin: 50% 92%;
  transition: transform .2s var(--ease-out);
  z-index: 5;
}
/* 按钮盒贴着杵本身，命中区再均匀外扩一圈：看见哪儿就能点哪儿 */
.alchemy__pestle svg { display: block; width: 100%; height: auto; }
.alchemy__pestle::after {
  content: "";
  position: absolute;
  inset: -.5cqh -.9cqw;
}
@media (hover: hover) {
  .alchemy__pestle:hover { --lift: -.3cqh; }
}
.alchemy__pestle.is-pound svg { animation: alchemy-pound .26s var(--ease-out); }
@keyframes alchemy-pound {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(26%) rotate(-3deg); }
  100% { transform: translateY(0) rotate(0); }
}
.pestle__handle { fill: #a78a5f; stroke: rgba(60, 44, 26, .4); stroke-width: .9; }
.pestle__band { fill: none; stroke: #8a6a34; stroke-width: 1.6; }
.pestle__head { fill: #9d8258; stroke: rgba(60, 44, 26, .45); stroke-width: .9; }
.pestle__shine { fill: none; stroke: rgba(255, 246, 222, .4); stroke-width: 2; }

/* ---- 皮囊风箱 ---- */
/* 风箱挂在火盆左边、不进布局，好让火盆和碗保持同一根竖轴 */
.alchemy__fire-slot {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
}
.alchemy__bellows {
  --squeeze: 0;
  position: absolute;
  right: calc(100% - .2cqw);
  bottom: 2.2cqh;
  z-index: 1;
  width: max(7.6cqw, 68px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 .35cqh .4cqh rgba(0, 0, 0, .28));
  transition: transform .12s var(--ease-out);
}
.alchemy__bellows svg { display: block; width: 100%; height: auto; overflow: visible; }
.alchemy__bellows .bel__body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleY(calc(1 - var(--squeeze) * .32)) scaleX(calc(1 + var(--squeeze) * .05));
}
.bel__board { fill: #6f5638; stroke: rgba(44, 30, 18, .55); stroke-width: 1.2; }
.bel__leather { fill: url(#alch-bel); stroke: rgba(58, 42, 24, .45); stroke-width: 1.2; }
.bel__crease { fill: none; stroke: rgba(64, 46, 28, .28); stroke-width: 1.8; stroke-linecap: round; }
.bel__stitch { fill: none; stroke: rgba(255, 240, 214, .5); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; }
.bel__grain { fill: none; stroke: rgba(255, 238, 208, .2); stroke-width: 1; }
.bel__hinge { fill: #6f5637; stroke: rgba(40, 28, 16, .5); }
.bel__nozzle { fill: #7c6240; stroke: rgba(40, 28, 16, .5); }
.bel__nozzle-ring { fill: #a8813f; stroke: rgba(60, 42, 20, .55); }
/* 该鼓风了：风箱自己轻轻"喘"，提示玩家去捏它 */
.alchemy__bellows[data-ready="1"] { animation: alchemy-ready 2.2s ease-in-out infinite; }
@keyframes alchemy-ready {
  50% { filter: drop-shadow(0 0 .9cqw rgba(238, 158, 78, .6)); }
}
.alchemy__bellows[data-on="1"] { transform: translateY(.15cqh); }
.alchemy__bellows-hint {
  position: absolute;
  left: 50%;
  top: -1.1cqh;
  transform: translateX(-50%);
  font-size: .76cqw;
  letter-spacing: .12em;
  color: #f0a05c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.alchemy__bellows[data-ready="1"] .alchemy__bellows-hint,
.alchemy__bellows[data-on="1"] .alchemy__bellows-hint { opacity: 1; }

/* ---- 火盆 ---- */
.alchemy__fire {
  --fan: 0;
  position: relative;
  width: 9.2cqw;
  padding: 0;
  border: none;
  background: none;
  cursor: default;
  touch-action: none;
}
.alchemy__fire svg { display: block; width: 100%; height: auto; }
.fire__pan { fill: #5a4a35; stroke: rgba(30, 22, 14, .5); stroke-width: 1; }
.fire__rim { fill: #6d5a40; stroke: rgba(30, 22, 14, .45); stroke-width: 1; }
.fire__legs { fill: none; stroke: #4a3b29; stroke-width: 4; stroke-linecap: round; }
.fire__coals ellipse {
  fill: #4a3a29;
  transition: fill .5s;
}
.fire__flames {
  opacity: 0;
  transform: scale(.25);
  transform-origin: 66px 64px;
  transition: opacity .32s, transform .36s var(--ease-out);
}
.fire__flame--a { fill: #e8963f; }
.fire__flame--b,
.fire__flame--c { fill: #f4c674; opacity: .88; }
/* 火苗高度跟着风量（--fan）走，捏得越狠烧得越高 */
.alchemy__fire.is-lit .fire__flames {
  opacity: 1;
  transform: scale(calc(.62 + var(--fan) * .58));
  animation: alchemy-flame 1.7s ease-in-out infinite;
}
.alchemy__fire.is-lit .fire__coals ellipse { fill: #8a4526; }
.alchemy__fire[data-embers="1"] .fire__coals ellipse { fill: #6b3f28; }
.alchemy__fire[data-embers="1"] .fire__flames { opacity: .16; transform: scale(.42); animation: none; }
@keyframes alchemy-flame {
  50% { transform: scale(calc(.7 + var(--fan) * .58)) translateY(-1px); }
}

/* ---- 温度盘：黄铜表 + 持温条 ---- */
.alchemy__gauges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7cqh;
}
.alchemy__thermo {
  --heat: 14;
  position: relative;
  width: 5.8cqw;
  height: 5.8cqw;
  border-radius: 50%;
  background: conic-gradient(from 225deg,
    #6f5024 0 102.6deg,
    #f0b24a 102.6deg 243deg,
    #c2402e 243deg 270deg,
    rgba(0, 0, 0, 0) 270deg 360deg);
  box-shadow:
    0 .35cqh .7cqh rgba(0, 0, 0, .4),
    inset 0 0 0 1px rgba(30, 20, 10, .55);
}
/* 表盘面：盖住中央，只留一圈色带 */
.alchemy__thermo-bulb {
  position: absolute;
  inset: 15%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #d9c08a, #a5823f 55%, #6b4a1a);
  border: 1px solid rgba(60, 42, 20, .55);
  box-shadow:
    inset 0 .2cqh .4cqh rgba(255, 255, 255, .22),
    inset 0 -.3cqh .6cqh rgba(0, 0, 0, .35);
}
/* 外圈刻度 */
.alchemy__thermo-good {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  background: repeating-conic-gradient(from 225deg,
    rgba(40, 26, 10, .6) 0 .7deg, rgba(0, 0, 0, 0) .7deg 9deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 86%, #000 87% 96%, rgba(0, 0, 0, 0) 97%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 0) 86%, #000 87% 96%, rgba(0, 0, 0, 0) 97%);
  opacity: .85;
}
/* 指针 */
.alchemy__thermo-mercury {
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 2;
  width: .14cqw;
  height: 41%;
  margin-left: -.07cqw;
  border-radius: 99px;
  background: linear-gradient(#2f1d0d, #7a3a1c);
  transform-origin: 50% 100%;
  transform: rotate(calc(-135deg + var(--heat) * 2.7deg));
  transition: transform .1s linear;
  box-shadow: 0 0 .4cqw rgba(0, 0, 0, .4);
}
/* 表心的黄铜轴 */
.alchemy__thermo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: .9cqw;
  height: .9cqw;
  margin: -.45cqw 0 0 -.45cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f0dcb0, #8a6528 72%);
  border: 1px solid rgba(40, 26, 10, .6);
}
.alchemy__hold {
  --hold: 0;
  position: relative;
  width: 5.6cqw;
  height: .62cqh;
  border: 1px solid rgba(120, 96, 60, .5);
  border-radius: 99px;
  background: rgba(16, 10, 6, .45);
  overflow: hidden;
}
/* 持温条的小标签：贴在条子下面，别让人不知道它在量什么 */
.alchemy__hold::after {
  content: "持温";
  position: absolute;
  left: 50%;
  top: 115%;
  transform: translateX(-50%);
  font-size: .56cqw;
  letter-spacing: .22em;
  color: #cdb488;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.alchemy__hold i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--hold) * 1%);
  border-radius: 99px;
  background: linear-gradient(90deg, #c8a35a, #f0b24a);
  transition: width 120ms linear;
}

/* ---- 收集瓶：磨口、玻璃身、三格刻度、液面 ---- */
.alchemy__bottle {
  --fill: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 6cqw;
  cursor: default;
}
.alchemy__bottle-mouth {
  position: relative;
  z-index: 2;
  width: 1.45cqw;
  height: 1.3cqh;
  margin-bottom: -1px;
  border: 1px solid rgba(140, 168, 158, .8);
  border-bottom: none;
  border-radius: .25cqw .25cqw 0 0;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(206, 224, 216, .4));
}
.alchemy__bottle-body {
  position: relative;
  width: 4.7cqw;
  height: 9.2cqh;
  border: 1px solid rgba(140, 168, 158, .8);
  border-radius: 44% 44% 48% 48% / 16% 16% 56% 56%;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .5), rgba(214, 230, 222, .22) 42%, rgba(160, 186, 176, .3));
  box-shadow: inset -2px -3px 6px rgba(60, 84, 74, .16), 0 .25cqh .5cqh rgba(0, 0, 0, .14);
  overflow: hidden;
}
.alchemy__bottle-liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fill) * 100%);
  background: linear-gradient(rgba(160, 202, 178, .9), rgba(96, 148, 124, .95));
  transition: height .5s var(--ease-out);
}
.alchemy__bottle-ticks {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(60, 92, 82, .35), rgba(60, 92, 82, .35)) 62% 25% / 32% 1px no-repeat,
    linear-gradient(rgba(60, 92, 82, .35), rgba(60, 92, 82, .35)) 62% 50% / 32% 1px no-repeat,
    linear-gradient(rgba(60, 92, 82, .35), rgba(60, 92, 82, .35)) 62% 75% / 32% 1px no-repeat;
  opacity: .8;
}
.alchemy__bottle-name {
  margin-top: .3cqh;
  font-size: .72cqw;
  font-weight: 400;
  letter-spacing: .14em;
  color: #d8c39c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
/* 瓶肩上的铜钩：罩子平时挂这儿 */
.alchemy__hook {
  position: absolute;
  left: -.9cqw;
  top: 1.2cqh;
  width: .85cqw;
  height: .85cqw;
  border: 2px solid #8a6a34;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
  opacity: .85;
}
/* 瓶背后的备用软管 */
.alchemy__coil {
  position: absolute;
  left: -2.9cqw;
  bottom: 18%;
  width: 4.6cqw;
  z-index: 0;
  opacity: .85;
  transition: transform .3s var(--ease-out), opacity .3s;
  pointer-events: none;
}
.alchemy__coil svg { display: block; width: 100%; height: auto; }
.alchemy__coil[data-tight="1"] { transform: scale(.8); opacity: .6; }
.coil__rings ellipse {
  fill: none;
  stroke: #6d5a44;
  stroke-width: 3.2;
  opacity: .55;
}

/* ---- 收集罩 ---- */
.alchemy__hood {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 7.6cqw;
  padding: 0;
  border: none;
  background: none;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 .45cqh .55cqh rgba(0, 0, 0, .3));
  transition: filter var(--dur-fast);
}
.alchemy__hood svg { display: block; width: 100%; height: auto; }
.alchemy__hood:hover { filter: drop-shadow(0 .6cqh .8cqh rgba(0, 0, 0, .36)); }
.alchemy__hood.is-grabbed {
  cursor: grabbing;
  filter: drop-shadow(0 1cqh 1.2cqh rgba(0, 0, 0, .4));
}
.alchemy__hood[data-trapped="1"] .hood__glass { animation: alchemy-hood-glow .5s var(--ease-out); }
@keyframes alchemy-hood-glow {
  50% { fill: rgba(232, 248, 240, .8); }
}
.hood__glass { stroke: rgba(108, 136, 128, .7); stroke-width: 1.2; }
.hood__shine { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2.4; stroke-linecap: round; }
.hood__band { fill: #a8813f; stroke: rgba(60, 42, 20, .55); stroke-width: 1; }
.hood__port { fill: #9a7538; stroke: rgba(60, 42, 20, .5); stroke-width: .9; }
.hood__knob { fill: #b98a3c; stroke: rgba(60, 42, 20, .55); stroke-width: 1; }

/* ---- 粒子层：白雾、火星、火光都画在这张 canvas 上 ---- */
.alchemy__fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- 白雾 ---- */
.alchemy__mist {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
/* 雾本身在 canvas 上；这里只是跟着雾走的透明命中盒，供点一下兜底 */
.alchemy__puff {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.4cqw;
  height: 4.4cqw;
  padding: 0;
  font: inherit;
  color: transparent;
  border: none;
  background: none;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}
.alchemy__puff[data-trapped="1"] { cursor: default; }

.alchemy__tip {
  margin: 0;
  min-height: 2.1cqh;
  font-size: .88cqw;
  letter-spacing: .04em;
  color: #8c2a1e;
}
@keyframes alchemy-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-.3cqw) rotate(-1.4deg); }
  75% { transform: translateX(.3cqw) rotate(1.4deg); }
}

/* 矮屏（横向手机）：台面按高度收，器物按比例缩小，别顶到纸页外 */
@media (max-height: 640px) {
  /* 矮屏：纸页撑满可用高度，把高度都让给台面 */
  .sheet[data-kind="alchemy"] { width: 66cqw; height: 84cqh; }
  .alchemy__stage { min-height: 30cqh; padding: 1.4cqh 1.2cqw 1cqh; }
  .alchemy__bench { inset: 1.4cqh 1.2cqw 1cqh; }
  .alchemy__jar svg { width: 4.2cqw; }
  .alchemy__bowl { width: 7.4cqw; }
  .alchemy__fire { width: 7.6cqw; }
  .alchemy__bellows { width: max(6.2cqw, 52px); }
  .alchemy__bellows-hint { font-size: max(.68cqw, 10px); }
  .alchemy__bottle { width: 5cqw; }
  .alchemy__bottle-body { width: 4cqw; height: 7.4cqh; }
  .alchemy__bottle-name { font-size: max(.7cqw, 10px); }
  .alchemy__hood { width: 6.2cqw; }
  .alchemy__thermo { width: 5.2cqw; height: 5.2cqw; }
  .alchemy__hold { width: 4.8cqw; height: .8cqh; }
  .alchemy__hold::after { font-size: max(.56cqw, 9px); }
}


/* ---------- 特写图 ---------- */
.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqh;
  /* 收缩到图片宽度，关闭按钮才会贴着图片右上角，而不是飘在面板边缘 */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.shot__img {
  max-width: 100%;
  max-height: 76cqh;
  border: 1px solid rgba(200, 163, 90, .4);
  box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, .8);
  animation: shot-in .5s var(--ease-out);
}
.shot__cap {
  font-size: .95cqw;
  letter-spacing: .18em;
  color: rgba(200, 163, 90, .6);
}
.shot__close {
  position: absolute;
  top: -1.2cqh;
  right: -2.2cqw;
  z-index: 3;
  width: 2.6cqw; height: 2.6cqw;
  font-size: 0;   /* 叉用两条线画，和阅读器保持一致 */
  color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(10, 8, 6, .8);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.shot__close::before,
.shot__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  height: 1px;
  background: currentColor;
}
.shot__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.shot__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.shot__close:hover { color: var(--amber); transform: rotate(90deg); }
@keyframes shot-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; } }

/* ---------- 线索小标签 / 黑话三选一 ---------- */
.sheet__tag {
  margin: 0 0 1.1em;
  text-align: center;
  letter-spacing: .18em;
  color: #6b5231;
}

.quiz__ask {
  margin: 0 0 1.4em;
  font-weight: 600;
  color: #3b2a16;
}

.quiz__opts {
  display: flex;
  flex-direction: column;
  gap: .9cqh;
  margin: 0 0 1.2em;
}

.quiz__opt {
  display: flex;
  align-items: center;
  gap: .9cqw;
  width: 100%;
  min-height: 46px;
  padding: .8cqh 1.1cqw;
  font-size: 1.02cqw;
  letter-spacing: .06em;
  text-align: left;
  color: #2a2016;
  border: 1px solid rgba(80, 58, 30, .35);
  background: rgba(255, 250, 235, .42);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.quiz__opt:hover:not(:disabled) {
  border-color: rgba(140, 42, 30, .6);
  background: rgba(255, 250, 235, .82);
}
.quiz__opt b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.9cqw;
  height: 1.9cqw;
  font-size: .82cqw;
  font-weight: 400;
  color: #6b5231;
  border: 1px solid rgba(80, 58, 30, .4);
  border-radius: 50%;
}
.quiz__opt.is-wrong {
  color: #8c2a1e;
  border-color: rgba(140, 42, 30, .75);
  background: rgba(140, 42, 30, .1);
  animation: quiz-shake .32s var(--ease-out);
}
.quiz__opt.is-right {
  color: #3d5226;
  border-color: rgba(107, 138, 74, .8);
  background: rgba(140, 170, 90, .22);
}
.quiz__opt.is-picked {
  color: #4a3517;
  border-color: rgba(169, 123, 50, .8);
  background: rgba(200, 163, 90, .18);
  box-shadow: inset 0 0 0 1px rgba(200, 163, 90, .18);
}
@keyframes quiz-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-.5cqw); }
  60% { transform: translateX(.4cqw); }
}

.quiz__tip {
  margin: 0;
  font-size: .92cqw;
  letter-spacing: .04em;
  color: #8a6a2e;
}
.quiz__tip.is-right { color: #3d5226; }

/* 对照表：可点的词条 / 假说 / 整表状态 */
.slang-table__status {
  margin: 0;
  font-family: var(--font-serif);
  font-size: max(.9cqw, 13px);
  letter-spacing: .12em;
  white-space: nowrap;
  color: #8c2a1e;
}
.slang-table {
  display: flex;
  flex-direction: column;
  gap: .55cqh;
  margin: 0 0 1em;
}

/* 对照表：纸页固定高度，九条词条单独滚动，底部通读按钮固定留在纸页内 */
.sheet[data-single="true"].sheet--slang-table {
  height: 84cqh;
  max-height: 84cqh;
}
.sheet[data-single="true"].sheet--slang-table .sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sheet--slang-table .slang-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: .8em;
  padding-right: .45em;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 58, 30, .3) transparent;
  overscroll-behavior: contain;
}
.sheet--slang-table .slang-table__row {
  flex: 0 0 auto;
}
.sheet--slang-table .sheet__tag,
.sheet--slang-table .slang-table__status,
.sheet--slang-table .slang-table__hint,
.sheet--slang-table .sheet__acts {
  flex: 0 0 auto;
}
.sheet--slang-table .sheet__acts {
  margin-top: .8em;
  /* 状态和按钮同一行：状态在左，动作在右 */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6em;
}
.slang-table__row {
  display: grid;
  grid-template-columns: minmax(6.5em, .8fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: .35em .8cqw;
  width: 100%;
  padding: .6cqh .7cqw;
  font: inherit;
  font-size: max(.9cqw, 13px);
  text-align: left;
  color: #3b2a16;
  background: rgba(255, 250, 235, .38);
  border: 1px solid rgba(80, 58, 30, .22);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.slang-table__row:hover:not(:disabled) {
  border-color: rgba(140, 42, 30, .55);
  background: rgba(255, 250, 235, .7);
}
.slang-table__row b {
  font-weight: 600;
  letter-spacing: .08em;
}
.slang-table__row span {
  min-width: 0;
  color: #5b4526;
}
.slang-table__row em {
  font-style: normal;
  font-size: .82em;
  letter-spacing: .08em;
  color: #8a6a2e;
}
.slang-table__row.is-filled {
  background: rgba(200, 163, 90, .12);
}
.slang-table__row.is-unknown {
  color: rgba(70, 52, 28, .72);
  border-style: dashed;
}
.slang-table__row.is-unknown b {
  color: #8a6a2e;
  letter-spacing: 0;
}
.slang-table__row:disabled {
  cursor: default;
  opacity: .8;
}
.slang-table__hint {
  margin: 0;
  font-size: max(.8cqw, 12px);
  line-height: 1.75;
  color: rgba(70, 52, 28, .7);
}

.slang-editor__source,
.slang-editor__context {
  margin: 0 0 .65em;
  font-size: max(.82cqw, 12px);
  line-height: 1.7;
  color: rgba(70, 52, 28, .65);
}
.slang-editor__context {
  padding-left: .8em;
  border-left: 2px solid rgba(200, 163, 90, .45);
  color: #4a3a22;
}
.quiz__open {
  margin-top: .4em;
  padding: .4cqh 1.2cqw;
  min-height: 40px;
  font-size: .92cqw;
  letter-spacing: .16em;
  color: #8c2a1e;
  border: 1px solid rgba(140, 42, 30, .5);
  background: rgba(140, 42, 30, .07);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.quiz__open:hover { color: #f6e8d2; background: #8c2a1e; }

.quiz__tip.is-right { color: #3d5226; }

/* 关键词飞入线索栏的弧线提示（阶段 3 会接真正的飞行轨迹） */
.kw-fly {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blood-lit);
  text-shadow: 0 0 12px rgba(196, 68, 47, .8);
  transition: left .55s var(--ease-in-out), top .55s var(--ease-in-out), opacity .55s, transform .55s;
}

/* ---------- 离开营帐前的确认 ---------- */
.confirm__text {
  margin: 0;
  font-size: max(1.04cqw, 15px);
  line-height: 1.95;
  color: #4a3418;
}
.confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.2em;
  margin-top: 2.4em;
}
.confirm__actions .btn { min-width: 8cqw; }

/* ---------- 文书内黑话三选一小气泡 ---------- */
.slang-pop {
  position: fixed;
  z-index: 260;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 14px;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(38, 29, 19, .98), rgba(12, 9, 6, .99));
  border: 1px solid rgba(200, 163, 90, .72);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .6), 0 0 24px rgba(200, 163, 90, .12);
  font-family: var(--font-serif);
  line-height: 1.65;
}
.slang-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.slang-pop__word {
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--gold);
}
.slang-pop__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: rgba(232, 214, 172, .7);
  background: none;
  border: 1px solid rgba(200, 163, 90, .28);
  border-radius: 50%;
}
.slang-pop__close:hover { color: var(--amber); border-color: var(--gold); }
.slang-pop__ask {
  margin: 0 0 9px;
  font-size: 13px;
  color: rgba(232, 214, 172, .7);
}
.slang-pop__opts {
  display: grid;
  gap: 7px;
}
.slang-pop__opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: rgba(242, 230, 205, .94);
  background: rgba(86, 62, 34, .18);
  border: 1px solid rgba(200, 163, 90, .22);
  transition: background .16s, border-color .16s, color .16s;
}
.slang-pop__opt:hover {
  color: #fff3d0;
  background: rgba(200, 163, 90, .14);
  border-color: rgba(200, 163, 90, .55);
}
.slang-pop__opt b {
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(200, 163, 90, .65);
}
.slang-pop__opt span { min-width: 0; }
.slang-pop__opt.is-wrong {
  color: #ffb2a3;
  border-color: rgba(180, 64, 44, .7);
  animation: kw-shake .32s var(--ease-out);
}
.slang-pop__opt.is-right {
  color: #d9e3b0;
  border-color: rgba(126, 158, 78, .7);
  background: rgba(89, 110, 48, .2);
}
.slang-pop__opt.is-picked {
  color: #ffe7b4;
  border-color: rgba(200, 163, 90, .8);
  background: rgba(200, 163, 90, .16);
}
.slang-pop__opt:disabled { cursor: default; }
.slang-pop__tip {
  margin: 9px 0 0;
  font-size: 12px;
  color: #c8a35a;
}
.slang-pop__answer {
  margin: 2px 0 6px;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--gold);
}
.slang-pop__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(232, 214, 172, .68);
}
.slang-pop__done {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: .2em;
  text-align: right;
  color: rgba(200, 163, 90, .7);
}
.slang-pop.is-done { border-color: rgba(200, 163, 90, .95); }

@media (max-width: 700px) {
  .slang-pop {
    width: calc(100vw - 24px);
    max-height: min(62vh, 430px);
    padding: 12px;
  }
  .slang-pop__opt {
    min-height: 46px;
    font-size: 15px;
    padding: 10px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw.is-wrong,
  .slang-pop__opt.is-wrong { animation: none; }
}

/* 舞台矮（约 360px 高以下）：标题 / 说明 / 按钮都是固定高度，
   会把表格挤到 0 高，按钮还会掉出纸页。这里改成整页滚动，
   宁可多滑一下，也不把内容藏起来。
   用 @container 而不是 @media：窄窗口里 16:9 舞台会比视口矮很多，
   只有按舞台高度判断才准。 */
@container (max-height: 360px) {
  .sheet[data-single="true"].sheet--slang-table .sheet__body {
    display: block;
    overflow-y: auto;
  }

  .sheet--slang-table .slang-table {
    flex: 0 0 auto;
    overflow: visible;
  }

  .sheet--slang-table .sheet__tag { display: none; }
}

/* 黑话问答：单页纸页默认不滚，选项多时最后一个会被纸页下沿裁掉 */
.sheet[data-single="true"].sheet--slang-quiz .sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: .8em;
}

@container (max-height: 420px) {
  .sheet[data-single="true"].sheet--slang-quiz {
    height: 92cqh;
    max-height: 92cqh;
  }

  .sheet--slang-quiz .sheet__tag { display: none; }
  .sheet--slang-quiz .quiz__ask { margin-bottom: .9em; }
  .sheet--slang-quiz .quiz__opts { gap: .5cqh; margin-bottom: .8em; }
  .sheet--slang-quiz .quiz__opt {
    min-height: 40px;
    padding: .6cqh .9cqw;
  }
}