/* =========================================================================
   复刻页面的补充样式（原站由 JS 内联/动效承担的部分）
   ========================================================================= */

/* 语言菜单 */
.locale-toggle-wrap { position: relative; display: inline-flex; }
.pm-locale-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 132px; padding: 6px;
  background: #f7f6f2; border: 1px solid #19231f1f; border-radius: 12px;
  box-shadow: 0 14px 34px #18251e24;
  display: grid; gap: 2px;
}
.pm-locale-menu[hidden] { display: none; }
.pm-locale-menu button {
  font: 400 13px/1.4 var(--sans, "PingFang SC", system-ui, sans-serif);
  color: var(--ink, #19231f); background: 0 0; border: 0; border-radius: 8px;
  padding: 8px 12px; text-align: left; cursor: pointer;
}
.pm-locale-menu button:hover { background: #0000000a; }
.pm-locale-menu button[aria-pressed="true"] { background: #8d723e1a; font-weight: 600; }

/* 声波图标切换 */
.site-bgm-toggle .icon-sound-on,
.experience-mobile-sound .icon-sound-on { display: none; }
.site-bgm-toggle[data-bgm-muted="false"] .icon-sound-on,
.experience-mobile-sound[data-bgm-muted="false"] .icon-sound-on { display: inline; }
.site-bgm-toggle[data-bgm-muted="false"] .icon-sound-off,
.experience-mobile-sound[data-bgm-muted="false"] .icon-sound-off { display: none; }

/* 介绍页资料列表 */
.pm-source-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px; margin-top: 10px;
}
.pm-source-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--hairline, #19231f2b); border-radius: 10px;
  text-decoration: none; font-size: 12px; line-height: 1.45; transition: border-color .2s, background .2s;
}
.pm-source-links a:hover { border-color: #a48b56; background: #ffffff66; }
.pm-source-links a b { font-weight: 400; }
.pm-source-links a svg { flex: none; opacity: .55; }

/* 问答面板补充 */
.ask-world-conversation { overflow-y: auto; padding: 4px 2px 12px; }
.ask-world-answer {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px;
  background: #ffffff8c; border: 1px solid var(--hairline, #19231f2b);
  font-size: 13px; line-height: 1.7;
}
.ask-world-answer b { font-weight: 600; }
.ask-world-answer small { color: var(--muted, #69716a); }
.ask-world-suggestions { display: grid; gap: 8px; margin: 14px 0 0; }
.ask-world-suggestions button {
  text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hairline, #19231f2b); background: #ffffff7a;
  font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s;
}
.ask-world-suggestions button:hover { border-color: #a48b56; background: #fff; }

/* 档案：合成反应与方程 */
.pm-reaction-record { margin-top: 18px; }
.pm-reaction-equation,
.pm-lab-equation {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px; letter-spacing: .02em;
  background: #ffffff8c; border: 1px solid var(--hairline, #19231f2b);
  border-radius: 8px; padding: 8px 12px; display: inline-block; margin: 6px 0 10px;
}
.pm-lab-equation { display: block; }
/* 方程式的抬头：说明这一条到底是化学方程式、物态变化式还是核衰变方程。
   没有抬头时三类变化共用同一个灰底代码块，读者会默认它们都是化学方程式。 */
.pm-lab-equation small {
  display: block;
  font-family: var(--sans, "PingFang SC", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #8a9a8f;
  margin-bottom: 5px;
}

/* 实验室：结果来源链接 */
.pm-lab-result a { font-size: 11px; text-decoration: underline; color: #52694f; display: inline-flex; align-items: center; gap: 3px; }

/* 照片浮层 */
.pm-photo-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: #1a211ccc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: 4vh 4vw;
}
.pm-photo-overlay[hidden] { display: none; }
.pm-photo-overlay figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: min(90vw, 900px); max-height: 92vh; }
.pm-photo-overlay img {
  max-width: 100%; max-height: 78vh; border-radius: 14px; background: #f7f6f2;
  box-shadow: 0 30px 90px #00000059; object-fit: contain;
}
.pm-photo-overlay figcaption { color: #f0ece1; font-size: 12.5px; line-height: 1.7; text-align: center; max-width: 720px; }
.pm-photo-overlay-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #ffffff1f; border: 1px solid #ffffff3d; color: #f4f1e7; cursor: pointer;
}
.pm-photo-overlay-close:hover { background: #ffffff30; }

/* 轻量提示 */
.pm-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 130; padding: 10px 16px; border-radius: 999px;
  background: #19231feb; color: #f4f1e7; font-size: 12.5px; letter-spacing: .01em;
  box-shadow: 0 12px 30px #00000033; pointer-events: none;
}
.pm-toast[hidden] { display: none; }

/* 周期表：滚动容器在“放大表格”时铺满 */
.pm-table-scroll { scrollbar-gutter: stable; }

/* 档案左栏照片：AI 展示图与真实照片切换时的过渡 */
.pm-hero-image img { transition: opacity .25s ease; }
.pm-hero[data-original="true"] .pm-hero-image img { mix-blend-mode: normal; object-fit: cover; border-radius: 10px; }

/* 原子工作室：云模式下的说明 */
.pm-atom-studio[data-mode="cloud"] .pm-atom-rings,
.pm-atom-studio[data-mode="cloud"] .pm-atom-particles { display: none; }
.pm-atom-studio .pm-atom-shell-picker { display: flex; flex-wrap: wrap; gap: 6px; }

/* 卡册网格中的卡片动作文案：与原站一致，常显 */
.pm-album-grid .pm-card-action { opacity: 1; }

/* 小屏下元素名与序号的补充 */
@media (max-width: 720px) {
  .pm-source-links { grid-template-columns: 1fr; }
  .pm-photo-overlay { padding: 3vh 3vw; }
}

/* 移动端工具栏：品牌标识靠左，图标按钮靠右 */
.experience-mobile-toolbar .experience-brand--compact {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: auto;
  color: inherit; text-decoration: none;
}
.experience-mobile-toolbar .experience-brand--compact .brand-mark { display: inline-flex; }
.experience-mobile-toolbar .locale-toggle-wrap { display: inline-flex; }

/* 原子工作室：两套控件都渲染，按 data-mode 显隐（避免切模式时重渲染整个面板） */
.pm-atom-studio:not([data-mode="cloud"]) .pm-cloud-selection,
.pm-atom-studio:not([data-mode="cloud"]) .pm-cloud-tools,
.pm-atom-studio:not([data-mode="cloud"]) .pm-cloud-model,
.pm-atom-studio:not([data-mode="cloud"]) .pm-atom-note-cloud { display: none; }
.pm-atom-studio[data-mode="cloud"] .pm-atom-shell-picker,
.pm-atom-studio[data-mode="cloud"] .pm-atom-ledger,
.pm-atom-studio[data-mode="cloud"] .pm-atom-note-shells,
.pm-atom-studio[data-mode="cloud"] .pm-atom-controls [data-pause] { display: none; }

/* 深色系统偏好不做反转：本页固定浅色展厅基调 */
:root { color-scheme: light; }
body { background: #f7f6f2; }

/* =========================================================================
   元素侦探
   ========================================================================= */
.pm-world:not([data-capture=true]) .pm-detective {
  flex: 1; width: 100%; min-height: 0; overflow: auto;
  max-width: 1060px; margin: 0 auto; padding: 14px 20px 28px;
  display: block; color: #2e463b;
}
.pm-detective > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: #667561;
}
.pm-detective > header > span { display: flex; align-items: center; gap: 8px; }
.pm-detective > header small { font-size: 10px; color: #667561; }

.pm-mystery-question { margin: 18px 0 22px; text-align: center; }
.pm-mystery-meta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pm-mystery-meta > span {
  font: 400 12px Georgia, serif; color: #9a8056; letter-spacing: .18em;
}
.pm-mystery-tag {
  display: inline-flex; align-items: center; padding: 3px 11px;
  font: 400 11px/1.7 inherit; letter-spacing: .05em;
  color: #7a6330; background: #f5efdc; border: 1px solid #e0d4b4; border-radius: 999px;
}
.pm-mystery-question h2 {
  margin: 10px 0; font: 500 38px/1.4 Georgia, "Songti SC", serif; color: #2e463b;
  text-align: center;
}
.pm-mystery-question p { margin: 0; font-size: 12px; color: #73806f; text-align: center; }

.pm-mystery-specimens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pm-mystery-specimens > button {
  position: relative; overflow: hidden; padding: 18px; display: block; text-align: center;
  border: 1px solid #b5b99f; border-radius: 15px; cursor: pointer;
  /* 显式给 color，避免 button[disabled] 被浏览器换成 GrayText（那正是"变灰"的来源） */
  color: #2e463b;
  background: radial-gradient(at 50% 35%, #f8f8e9, #dfe6d5 80%);
  box-shadow: 0 8px 25px #263c3010;
  transition: transform .35s, box-shadow .35s, opacity .35s, border-color .35s;
}
.pm-mystery-specimens > button:hover:not([data-locked="true"]),
.pm-mystery-specimens > button:focus-visible { transform: translateY(-3px); }
.pm-mystery-number {
  position: absolute; top: 10px; left: 13px;
  font: 400 12px Georgia, serif; color: #78816d;
}
.pm-mystery-image {
  position: relative; display: block; width: 100%; height: 198px;
  padding: 8px; margin: 0 0 10px;
}
.pm-mystery-image img {
  /* 绝对定位脱离流内布局：img 在 grid/flex 里用百分比约束会形成循环依赖
     （父级行高由内容决定），max-height/height:100% 都会失效导致图片溢出。 */
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  object-fit: contain; filter: drop-shadow(0 9px 6px #2c453020);
}
.pm-mystery-name {
  display: flex; align-items: baseline; justify-content: center; gap: 9px; font-size: 13px;
}
.pm-mystery-name b { font: 400 30px/1.1 Georgia, serif; color: #2e463b; }
.pm-mystery-pick { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 0; font-size: 11px; color: #768361; }

/* 已试过 / 已揭晓：只锁交互，绝不灰化。
   标本照必须保留原本的色彩与对比度——学生回头对答案时还要看清它长什么样。 */
.pm-mystery-specimens > button[data-locked="true"] { cursor: default; }
.pm-mystery-specimens > button[data-locked="true"]:hover { transform: none; }
.pm-mystery-specimens > button[data-miss="true"] {
  border-color: #cdb894;
  background: radial-gradient(at 50% 35%, #fbf7ec, #e3e1d1 80%);
}
.pm-mystery-specimens > button[data-miss="true"] .pm-mystery-pick { color: #a97c4c; }
.pm-mystery-specimens > button[data-miss="true"] .pm-mystery-pick::before { content: '×'; font-size: 12px; line-height: 1; }
.pm-mystery-specimens > button[data-correct="true"] {
  border-color: #9d803c;
  background: radial-gradient(at 50% 35%, #fff7d9, #dce5cf 80%);
  box-shadow: 0 15px 30px #263c3025;
}
.pm-mystery-specimens > button[data-correct="true"] .pm-mystery-pick { color: #9d803c; }

.pm-mystery-feedback {
  max-width: 680px; margin: 20px auto 12px; text-align: center;
  font-size: 14px; line-height: 1.8;
}
.pm-mystery-feedback p { margin: 5px 0; font-size: 14px; color: #5d6f5c; }
.pm-mystery-feedback strong {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 4px; font: 500 17px Georgia, "Songti SC", serif; color: #6d5a26;
}

/* 线索索引：二十四条线索一条一行滑过去，按考点直接点名 */
.pm-mystery-index {
  display: flex; gap: 8px; max-width: 680px; margin: 16px auto 0; padding: 4px 2px 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #c4ccb4 transparent;
}
.pm-mystery-index::-webkit-scrollbar { height: 6px; }
.pm-mystery-index::-webkit-scrollbar-thumb { background: #c4ccb4; border-radius: 3px; }
.pm-mystery-index > button {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px;
  padding: 6px 12px; font-size: 11px; color: #4a5d4e; cursor: pointer;
  background: #0000; border: 1px solid #ccd3bd; border-radius: 999px;
  transition: background .2s, border-color .2s, color .2s;
}
.pm-mystery-index > button > span { font: 400 11px Georgia, serif; color: #8d7f5c; letter-spacing: .08em; }
.pm-mystery-index > button > i { font-style: normal; white-space: nowrap; }
.pm-mystery-index > button:hover { background: #ffffffaa; border-color: #9daa89; }
.pm-mystery-index > button[data-done="true"] { border-color: #cbb877; background: #fbf5e2; color: #6d5a26; }
.pm-mystery-index > button[data-done="true"] > span { color: #9d803c; }
.pm-mystery-index > button[data-done="true"] > span::after { content: ' ✓'; }
.pm-mystery-index > button[data-current="true"] {
  border-color: #7d8f6a; background: #ffffffcc; color: #2e463b; box-shadow: 0 3px 10px #263c3014;
}
.pm-mystery-index > button[data-current="true"] > span { color: #2e463b; }

.pm-detective > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 680px; margin: 0 auto;
}
.pm-detective > footer button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; font-size: 12px; color: #3c5742; cursor: pointer;
  background: 0 0; border: 1px solid #b7c1aa; border-radius: 25px;
  transition: background .2s, border-color .2s;
}
.pm-detective > footer button:hover { background: #fff7; border-color: #8fa07c; }
.pm-detective > footer button[data-next][aria-pressed="true"] {
  color: #fff6d8; background: #435b43; border-color: #435b43;
}

@media (max-width: 720px) {
  .pm-mystery-specimens { grid-template-columns: 1fr; }
  .pm-mystery-question h2 { font-size: 27px; }
  .pm-mystery-image { height: 170px; }
  .pm-mystery-index { margin-top: 12px; }
  .pm-mystery-index > button > i { display: none; }
}

/* =========================================================================
   全息镭射卡 (Holographic Laser Foil & 3D Tilt) 与 卡册开箱动效增强
   ========================================================================= */

/* 3D 容器与变换基座。
   注意这里**故意不写 transition**：角度由 holo-foil.js 每帧用指数阻尼写入，
   再加一层定时 transition 只会让指针跟随时一顿一顿的。 */
.pm-holo-card {
  --rx: 0deg;
  --ry: 0deg;
  --pointer-x: 0.5;
  --pointer-y: 0.5;
  --holo-angle: 135deg;
  --foil-opacity: 0.72;
  --face-x: 0px;
  --face-y: 0px;
  --near-x: 0px;
  --near-y: 0px;
  --lift: 0;
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) scale(calc(1 + var(--lift)));
  transform-style: preserve-3d;
  /* 抬升只过渡阴影：卡片朝指针那侧压下去时，投影跟着加深，才有"离开桌面"的感觉 */
  transition: box-shadow 0.3s ease;
  box-shadow:
    0 calc(6px + var(--lift, 0) * 420px) calc(14px + var(--lift, 0) * 460px) rgba(18, 30, 22, calc(0.10 + var(--lift, 0) * 6)),
    0 2px 6px rgba(18, 30, 22, 0.06);
  position: relative;
  overflow: hidden;
}

/* 衍射彩虹折射层 (Prism Diffraction Foil) */
.pm-holo-foil {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 4;
  mix-blend-mode: color-dodge;
  opacity: var(--foil-opacity, 0.72);
  background:
    /* 全息彩虹流光环带 */
    linear-gradient(
      var(--holo-angle, 135deg),
      rgba(255, 0, 128, 0.45) 0%,
      rgba(255, 140, 0, 0.5) 15%,
      rgba(255, 230, 0, 0.55) 30%,
      rgba(0, 255, 136, 0.5) 50%,
      rgba(0, 212, 255, 0.52) 70%,
      rgba(121, 40, 202, 0.55) 85%,
      rgba(255, 0, 128, 0.45) 100%
    ),
    /* 物理全息微棱镜斜光栅 (Micro-groove diffraction grating) */
    repeating-linear-gradient(
      calc(var(--holo-angle, 135deg) + 45deg),
      rgba(255, 255, 255, 0.25) 0px,
      rgba(255, 255, 255, 0.25) 1.5px,
      transparent 1.5px,
      transparent 4px
    );
  transition: opacity 0.3s ease;
}

/* 动态光追高光镜面 (Specular Glare) */
.pm-holo-glare {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 5;
  mix-blend-mode: overlay;
  opacity: 0.85;
  background: radial-gradient(
    circle at calc(var(--pointer-x, 0.5) * 100%) calc(var(--pointer-y, 0.5) * 100%),
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.35) 22%,
    transparent 65%
  );
}

/* 卡册网格中的卡片增强 */
.pm-album-grid > button {
  --face-x: 0px;
  --face-y: 0px;
  --near-x: 0px;
  --near-y: 0px;
  --lift: 0;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(calc(1 + var(--lift)));
  transform-style: preserve-3d;
  transition: box-shadow 0.25s ease;
}
/* 近景层：符号与卡名朝与照片相反的方向让开一点，卡面就有厚度了 */
.pm-album-grid > button > b,
.pm-album-grid > button > .pm-album-name,
.pm-album-grid > button > .pm-album-number,
.pm-album-grid > button > .pm-card-rating {
  transform: translate3d(var(--near-x, 0px), var(--near-y, 0px), 0);
  will-change: transform;
}
.pm-album-grid > button .pm-holo-foil,
.pm-album-grid > button .pm-holo-glare {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pm-album-grid > button:hover .pm-holo-foil {
  opacity: var(--foil-opacity, 0.65);
}
.pm-album-grid > button:hover .pm-holo-glare {
  opacity: 0.85;
}

/* 5星神话级黄金镭射 */
:is(.pm-album-grid > button, .pm-reveal-card)[data-stars="5"] .pm-holo-foil {
  background:
    linear-gradient(
      var(--holo-angle, 135deg),
      rgba(255, 215, 0, 0.65) 0%,
      rgba(255, 100, 150, 0.55) 25%,
      rgba(0, 255, 200, 0.55) 50%,
      rgba(255, 230, 100, 0.75) 75%,
      rgba(255, 180, 0, 0.65) 100%
    ),
    repeating-linear-gradient(
      calc(var(--holo-angle, 135deg) + 45deg),
      rgba(255, 245, 180, 0.4) 0px,
      rgba(255, 245, 180, 0.4) 2px,
      transparent 2px,
      transparent 5px
    );
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.35);
}

/* 4星紫晶炫彩 */
:is(.pm-album-grid > button, .pm-reveal-card)[data-stars="4"] .pm-holo-foil {
  background:
    linear-gradient(
      var(--holo-angle, 135deg),
      rgba(147, 112, 219, 0.6) 0%,
      rgba(255, 105, 180, 0.55) 30%,
      rgba(0, 191, 255, 0.55) 70%,
      rgba(147, 112, 219, 0.6) 100%
    ),
    repeating-linear-gradient(
      calc(var(--holo-angle, 135deg) + 45deg),
      rgba(230, 210, 255, 0.35) 0px,
      rgba(230, 210, 255, 0.35) 2px,
      transparent 2px,
      transparent 5px
    );
}

/* 开箱播放剧场（Reveal Modal）互动与外观 */
.pm-reveal {
  pointer-events: auto !important;
  cursor: default;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-reveal.is-closing {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-reveal-veil {
  pointer-events: auto;
  cursor: pointer;
}
.pm-reveal-card {
  pointer-events: auto;
  cursor: pointer;
  width: min(88vw, 320px);
  height: min(72vh, 460px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pm-reveal-frame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  display: block;
}
.pm-reveal-card:hover .pm-reveal-frame {
  box-shadow: inset 3px 0 3px #ffffffe0, inset -4px 0 4px #375c4440, 0 32px 80px rgba(0, 0, 0, 0.55);
}
.pm-reveal-dock {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
  white-space: nowrap;
}
.pm-reveal-dock button {
  border-radius: 22px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.pm-reveal-act-view {
  color: #fff6de;
  background: #344e40;
  border: 1px solid #789c83;
  box-shadow: 0 4px 16px rgba(18, 38, 25, 0.4);
}
.pm-reveal-act-view:hover {
  background: #416352;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(18, 38, 25, 0.5);
}
.pm-reveal-act-close {
  color: #d6e2d4;
  background: rgba(25, 42, 33, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}
.pm-reveal-act-close:hover {
  background: rgba(35, 58, 46, 0.9);
  color: #fff;
}
@media (max-width: 700px) {
  .pm-reveal-card {
    width: 260px;
    height: 370px;
  }
  .pm-reveal-dock {
    bottom: -52px;
    gap: 8px;
  }
  .pm-reveal-dock button {
    padding: 7px 14px;
    font-size: 12px;
  }
}

/* =======================================================================
   化学实验室与物理反应仿真台深度视觉强化
   ======================================================================= */
.pm-lab-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 62%, #1c2b23 0%, #121c17 60%, #0c130f 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -16px 32px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(10, 20, 15, 0.25);
  border: 1px solid rgba(80, 110, 95, 0.28);
}

.pm-lab-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.pm-lab-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  transition: opacity 0.12s ease-out;
}

.pm-lab[data-effect="burn"] .pm-lab-flash {
  background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 210, 130, 0.3) 38%, transparent 75%);
  opacity: calc(var(--reaction-progress, 0) * 0.95);
  mix-blend-mode: screen;
}

.pm-lab[data-effect="glow"] .pm-lab-flash {
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 130, 60, 0.32) 0%, rgba(255, 90, 30, 0.12) 55%, transparent 80%);
  opacity: calc(var(--reaction-progress, 0) * 0.9);
  mix-blend-mode: screen;
}

.pm-lab[data-effect="bubbles"] .pm-lab-flash {
  background: radial-gradient(circle at 50% 60%, rgba(180, 245, 255, 0.2) 0%, transparent 65%);
  opacity: calc(var(--reaction-progress, 0) * 0.6);
  mix-blend-mode: screen;
}

.pm-lab-cue {
  background: rgba(14, 24, 19, 0.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 14px;
  color: #eaf2eb !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.pm-lab-combination {
  background: rgba(16, 26, 21, 0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px 8px;
}

/* -----------------------------------------------------------------------
   变化实验台 · 底部字幕带（舞台大字不再压住实验装置）

   几何原来是互相打架的：画布 inset 是 20px / 28px，
   而舞台大字 .pm-lab-cue 固定在 bottom:20px、高约 46px。
   于是字幕占据“距舞台底 20–66px”那一条，画布却一直画到“距舞台底 28px”，
   两者必然重叠 38px —— 台面、接触影和容器下沿正好被那行大字盖住。

   这里把画布下沿抬到字幕带之上，并把舞台补高同样的高度：
   画布的宽高完全没变（仍是 stage 宽 × 170px），
   所以实验本体的显示尺寸与清晰度一点都没有损失，
   多出来的那条底部净空正好留给字幕和进度条。
   ----------------------------------------------------------------------- */
.pm-lab .pm-lab-stage {
  --lab-caption-band: 52px;                 /* 底部留给字幕的净空 */
}
.pm-lab .pm-lab-stage canvas {
  /* 画布下沿抬到字幕带之上：底边距 = 28px + 字幕带。
     原样式把高度写死成 calc(100% - 48px)，只改 inset 不会生效
     （绝对定位里 top / bottom / height 同时存在时 bottom 会被忽略），
     所以这里必须把高度一起减掉字幕带。 */
  inset: 20px 0 calc(28px + var(--lab-caption-band));
  height: calc(100% - 48px - var(--lab-caption-band));
}
.pm-folio .pm-lab .pm-lab-stage {
  /* 补高同一条字幕带，画布因此保持原尺寸 */
  height: calc(220px + var(--lab-caption-band));
  min-height: calc(220px + var(--lab-caption-band));
}

.pm-lab-playback input[type="range"] {
  accent-color: #60a876;
  cursor: grab;
}
.pm-lab-playback input[type="range"]:active {
  cursor: grabbing;
}

/* 档案卡标本展柜浮动徽章「✨ 3D 赏卡」：典藏磨砂玻璃徽标，右上角轻盈悬浮，绝不突兀 */
.pm-photo-zoom {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
/* 档案卡标本底栏入口「✨ 3D 赏卡」：精巧胶囊微标，置于「真实参考照片」右侧 */
.pm-hero-holo-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 25px;
  padding: 2px 9px;
  margin-left: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #72561e;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(212, 175, 105, 0.65);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(212, 175, 105, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.02em;
  font-family: inherit;
  line-height: 1;
}
.pm-hero-holo-badge .pm-holo-spark-icon {
  font-size: 11px;
  line-height: 1;
  color: #c4953a;
  filter: drop-shadow(0 0 3px rgba(212, 175, 105, 0.5));
}
.pm-hero-holo-badge:hover {
  background: #ffffff;
  border-color: rgba(212, 175, 105, 0.95);
  color: #523c10;
  box-shadow: 0 2px 10px rgba(212, 175, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}
.pm-hero-holo-badge:active {
  transform: scale(0.96);
}
[data-theme="dark"] .pm-hero-holo-badge {
  background: rgba(30, 40, 34, 0.92);
  color: #ffe29b;
  border-color: rgba(255, 226, 155, 0.5);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .pm-hero-holo-badge:hover {
  background: rgba(38, 50, 42, 0.98);
  border-color: rgba(255, 226, 155, 0.85);
  box-shadow: 0 2px 12px rgba(212, 175, 105, 0.35);
}



/* =========================================================================
   备案号 · 固定在视口底缘的正中
   页面是满屏应用（.experience-page overflow:hidden，文档不滚动），
   所以不能用常规文档流页脚。底部 12px 高的空条正好放这一行小字：
   桌面与手机上 .pm-footer 的中央都是空的，不会压到"点击展柜/点亮同族"等文案，
   也不和 toast（bottom≈866，z-index 130）重叠。
   ========================================================================= */
.site-beian {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 6px 12px calc(3px + env(safe-area-inset-bottom, 0px));
  font: 400 10px/1.5 inherit; letter-spacing: .05em;
  color: #9a917d; text-align: center;
  /* 侦探页等内容超出一屏时会在 .pm-world 里滚动，加一层纸色渐变，
     滚到最底的内容从这行字底下淡出，字始终可读 */
  background: linear-gradient(to top, #f1ecdf 45%, #f1ecdf00);
  pointer-events: none;
}
.site-beian a {
  color: inherit; text-decoration: none; pointer-events: auto;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.site-beian a:hover,
.site-beian a:focus-visible { color: #6f6653; border-bottom-color: #6f665366; }