/* ========== 基础重置 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== 右上角音乐开关 ========== */
#music-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 2px;
  color: #e8d6ad;
  background: rgba(40, 20, 12, 0.7);
  border: 1px solid #8a6d3b;
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

#music-toggle:hover {
  color: #f5e6c0;
  border-color: #d4af37;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(212, 175, 55, 0.4);
}

#music-toggle:active {
  transform: translateY(1px);
}

#music-toggle.muted {
  opacity: 0.55;
}

/* ========== 全局加载层：青铜罗盘 ========== */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;                   /* 极高，挡住所有内容 */
  background: #1a1512;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.9s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loading-compass {
  width: 200px;
  height: auto;
  animation: compass-rotate 3s linear infinite;
}

#loading-text {
  margin-top: 28px;
  font-family: "SimSun", "宋体", serif;
  font-size: 20px;
  letter-spacing: 6px;
  color: #b89b5e;
  animation: loading-breathe 1.9s ease-in-out infinite;
}

@keyframes compass-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes loading-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;            /* 禁止页面出现滚动条 */
  background: #0a0906;         /* 地图之外的区域为深黑色 */
}

/* 全局统一：所有弹窗背景图的“暗调古风/水墨羊皮纸”滤镜 */
:root {
  --scene-filter: sepia(0.3) contrast(1.1) brightness(0.85);
}

body {
  font-family: "KaiTi", "STKaiti", "楷体", "SimSun", "宋体", serif;
}

/* ========== 地图区域：全屏铺满 ========== */
#map-container {
  position: fixed;
  inset: 0;                    /* 等同于 top/right/bottom/left: 0 */
  overflow: hidden;            /* 放大后超出屏幕的部分裁掉 */
  cursor: grab;                /* 抓手光标，提示可以拖拽 */
}

#map-container.dragging {
  cursor: grabbing;            /* 按下拖拽时切换为“抓住”状态 */
}

/* 地图舞台：尺寸由 JS 按 cover 规则计算，与图片同比例铺满容器。
 * 缩放/拖拽的 transform 施加在舞台上，上面的点位会一起移动。 */
#map-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;       /* 缩放原点设在左上角，方便 JS 计算 */
  will-change: transform;      /* 提示浏览器优化缩放/拖拽性能 */
}

#map-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 等比缩放并铺满舞台 */

  /* 暗色调古风滤镜（题目指定） */
  filter: sepia(0.4) contrast(1.1) brightness(0.85);

  user-select: none;
  -webkit-user-drag: none;     /* 禁止浏览器把图片当成可拖拽文件 */
  pointer-events: none;        /* 让图片本身不拦截事件，点位/拖拽更顺畅 */
}

/* ========== 地图上的历史事件点位 ========== */
.map-marker {
  position: absolute;           /* left/top 在 HTML 中按地图百分比给出 */
  z-index: 6;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: inherit;
  /* JS 会动态设置 transform: translate(-50%,-50%) scale(1/地图缩放)，
     使红点始终以坐标为中心，且不随地图放大而变大 */
}

/* “栎阳”文字标签 */
.marker-label {
  margin-bottom: 5px;
  padding: 1px 8px;
  font-size: 15px;
  letter-spacing: 2px;
  color: #f3d488;
  background: rgba(35, 18, 8, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 3px;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  pointer-events: none;         /* 标签不挡点击，红点整体仍可点 */
}

/* 闪烁红点 */
.marker-dot {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a6b, #d42b2b 60%, #9e1414);
  border: 2px solid #ffd9a0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  animation: dot-blink 1.4s ease-in-out infinite;
  pointer-events: none;
}

/* 红点本体的明暗呼吸 */
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* 向外扩散的脉冲光环 */
.marker-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(232, 74, 61, 0.9);
  animation: marker-pulse 1.6s ease-out infinite;
}

@keyframes marker-pulse {
  0%   { transform: scale(0.5);  opacity: 1; }
  100% { transform: scale(2.4);  opacity: 0; }
}

/* 鼠标悬停时红点变亮，提示可点击 */
.map-marker:hover .marker-dot {
  animation: none;
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 120, 90, 0.95);
}

/* ========== 暗角遮罩：四周略微压暗，营造氛围 ========== */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;        /* 让鼠标事件“穿透”遮罩，不影响拖拽 */
  background: radial-gradient(ellipse at center,
              transparent 55%,
              rgba(0, 0, 0, 0.55) 100%);
}

/* ========== 顶部标题（金箔流光 + 水墨晕染 + 轻浮动） ========== */
#game-title {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  margin: 0;
  white-space: nowrap;
  pointer-events: none;        /* 标题不拦截鼠标，方便拖拽标题下方的地图 */
}

/* 水墨晕染圆：垫在文字后方，缓慢呼吸旋转 */
.title-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 260%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(245, 240, 228, 0.55) 0%,
    rgba(220, 214, 200, 0.28) 45%,
    rgba(200, 195, 180, 0) 72%);
  filter: blur(20px);
  opacity: 0.2;
  pointer-events: none;
  animation: title-halo-breathe 7s ease-in-out infinite;
}

@keyframes title-halo-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.92);
    opacity: 0.14;
  }
  50% {
    transform: translate(-50%, -50%) rotate(5deg) scale(1.08);
    opacity: 0.26;
  }
}

/* 金箔流光文字 */
.title-text {
  position: relative;
  z-index: 1;
  display: inline-block;

  font-family: "KaiTi", "STKaiti", "楷体", "SimSun", "宋体", serif;
  font-size: 44px;
  font-weight: normal;
  letter-spacing: 8px;         /* 字距拉开，更显古朴 */
  text-indent: 8px;            /* 视觉补偿末字字距，保持居中 */

  color: #d4af37;              /* 不支持背景裁剪时的兜底暗金色 */
  background: linear-gradient(90deg,
    #d4af37 0%, #f5e6c8 50%, #d4af37 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 16px rgba(212, 175, 55, 0.3));

  /* 流光扫字面 + 整体轻浮动（两个动画作用于不同属性，互不冲突） */
  animation:
    title-shimmer 3s linear infinite,
    title-float 4s ease-in-out infinite;
}

/* 金箔光从左向右扫过 */
@keyframes title-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 轻微上下浮动 */
@keyframes title-float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}

/* ========== 底部操作提示 ========== */
#hint {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  font-size: 16px;
  letter-spacing: 3px;
  color: rgba(201, 165, 92, 0.85);
  text-shadow: 0 1px 3px #000;

  pointer-events: none;
}

/* ========== 小屏适配（例如手机） ========== */
@media (max-width: 600px) {
  .title-text {
    font-size: 24px;
    letter-spacing: 3px;
    text-indent: 3px;
  }

  #hint {
    font-size: 13px;
  }
}

/* =========================================================
 * 徙木立信 · 古风弹窗
 * ========================================================= */

/* 全屏遮罩：压暗背景、居中弹窗 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  background: rgba(8, 6, 3, 0.72);
  backdrop-filter: blur(2px);
  animation: overlay-fade 0.25s ease-out;
}

.modal-overlay.hidden {
  display: none;
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 弹窗主体：绢帛木框质感 */
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow-y: auto;

  background:
    linear-gradient(180deg, #f4e7c6 0%, #ecd9aa 55%, #e2cb94 100%);
  border: 3px solid #6b4a18;
  outline: 1px solid #c9a24b;          /* 内描金边 */
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.8),
    inset 0 0 24px rgba(120, 80, 20, 0.18);

  animation: modal-pop 0.3s ease-out;
}

@keyframes modal-pop {
  from { transform: scale(0.92) translateY(12px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* 右上角关闭钮 */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;

  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #8a6a2c;
  background: rgba(60, 38, 12, 0.85);
  color: #f0d9a0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  transition: background 0.2s, transform 0.15s;
}

.modal-close:hover {
  background: #8b1a1a;
  transform: scale(1.08);
}

/* 弹窗标题 */
.modal-title {
  padding: 18px 40px 14px;
  text-align: center;

  font-size: 27px;
  font-weight: normal;
  letter-spacing: 5px;
  color: #7a1410;                   /* 古朱红 */
  text-shadow: 0 1px 0 rgba(255, 240, 210, 0.8);

  border-bottom: 3px double #8b6914; /* 双线分隔，仿古纹饰 */
}

/* 舞台层：场景区 + 交互区的定位上下文，文物结局层整体叠加其上 */
.modal-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* 结局态：交互区已淡出不可见，把它的高度让给竹简，
   使竖排文字排得从容，且弹窗整体不出现滚动条 */
.modal-stage.ending .modal-body {
  min-height: 322px;
}

/* 弹窗上半部分：城门背景图 */
.modal-scene {
  position: relative;           /* 作为文物叠层的定位父级 */
  width: 100%;
  height: 230px;
  overflow: hidden;
  border-bottom: 2px solid #8b6914;
  /* 深灰底：与商鞅方升文物图自身的深灰背景接近，
     文物图 contain 完整显示时两侧留白自然融入 */
  background: #33312d;
}

.modal-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 城门背景图：结局时独立、缓慢淡出（文物图在其上方原位弹开） */
.gate-img {
  position: relative;
  z-index: 1;
  transition: opacity 0.65s ease;
  filter: var(--scene-filter);
}

.gate-img.faded {
  opacity: 0;
  pointer-events: none;
}

/* 弹窗下半部分：交互区 */
.modal-body {
  padding: 22px 30px 28px;
}

/* ---- 赏金滑动条 ---- */
.reward-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reward-end {
  font-size: 16px;
  letter-spacing: 2px;
  color: #5a3a12;
  white-space: nowrap;
}

#reward-range {
  flex: 1;
  height: 6px;
  cursor: pointer;
  accent-color: #8b1a1a;
}

/* webkit 内核（Chrome/Edge）下的古风滑动条外观 */
#reward-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8860b, #8b1a1a);
  border: 1px solid #5a3a12;
}

#reward-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9b0, #d4af37 60%, #8a6a2c);
  border: 1px solid #5a3a12;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Firefox 下的滑块 */
#reward-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8860b, #8b1a1a);
  border: 1px solid #5a3a12;
}

#reward-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9b0, #d4af37 60%, #8a6a2c);
  border: 1px solid #5a3a12;
}

.reward-current {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  color: #6b4a18;
}

#reward-num {
  color: #8b1a1a;
  font-size: 20px;
  font-weight: bold;
}

/* ---- 实时反馈文字区（仿古绢笺小条） ---- */
.reward-feedback {
  margin-top: 16px;
  min-height: 52px;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 18px;
  letter-spacing: 1px;
  color: #3a2708;

  background: rgba(255, 250, 232, 0.65);
  border-left: 4px solid #8b1a1a;
  border-right: 4px solid #8b1a1a;
  border-radius: 2px;
  box-shadow: inset 0 0 10px rgba(120, 80, 20, 0.12);

  transition: color 0.2s;
}

/* ---- 底部古风按钮：暗金令牌质感 ---- */
.ancient-btn {
  display: block;
  margin: 22px auto 0;
  padding: 11px 42px;

  font-family: inherit;
  font-size: 20px;
  letter-spacing: 6px;
  color: #e8d6ad;

  /* 半透明暗红令牌底 + 暗金细边框 + 内阴影厚度 */
  background: rgba(74, 16, 14, 0.66);
  border: 1px solid #8a6d3b;
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;

  transition: all 0.2s ease;
}

/* 悬停：亮金边框 + 微发光 + 上浮 */
.ancient-btn:hover {
  color: #f5e6c0;
  background: rgba(98, 22, 18, 0.74);
  border-color: #d4af37;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

/* 按下：下沉 1px，外发光消失，模拟物理按压 */
.ancient-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

.ancient-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* 禁用态不响应悬停反馈 */
.ancient-btn:disabled:hover {
  color: #e8d6ad;
  background: rgba(74, 16, 14, 0.66);
  border-color: #8a6d3b;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  transform: none;
}

/* 弹窗在窄屏上的微调 */
@media (max-width: 600px) {
  .modal-title {
    font-size: 21px;
    letter-spacing: 3px;
  }

  .modal-scene {
    height: 180px;
  }

  /* 窄屏结局：文物图与场景区同高，让出的高度归竹简 */
  #artifact-img {
    flex-basis: 180px;
    height: 180px;
  }

  .reward-feedback {
    font-size: 16px;
  }
}

/* =========================================================
 * 徙木立信 · 失败提示 / 金币动画 / 文物展示
 * ========================================================= */

/* 通用隐藏类（弹窗内所有元素复用） */
.hidden {
  display: none !important;
}

/* ---- 失败提示框：半透明暗红绢帖 ---- */
.fail-tip {
  margin-top: 16px;
  padding: 16px 18px;
  text-align: center;

  color: #ffffff;             /* 白色文字（容器与段落共用，避免继承黑色） */
  background: rgba(86, 12, 12, 0.86);
  border: 1px solid #d4af37;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);

  animation: fail-in 0.3s ease-out;
}

@keyframes fail-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fail-tip p {
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 1.6;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* 小号古风按钮（再试一次） */
.ancient-btn-sm {
  margin-top: 14px;
  padding: 7px 26px;
  font-size: 16px;
  letter-spacing: 4px;
}

/* ---- 交互区淡出（滑动条/反馈/按钮，五十金结局过渡） ---- */
.modal-body {
  transition: opacity 0.45s ease;
}

.modal-body.faded {
  opacity: 0;
  pointer-events: none;   /* 淡出后不再拦截点击 */
}

/* ---- 金币散落动画 ---- */
.coin {
  position: absolute;
  z-index: 5;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(circle at 35% 30%, #fff3b8, #f5c531 55%, #a9760a);
  border: 1px solid #8a5e08;
  box-shadow: 0 0 8px rgba(245, 197, 49, 0.9);

  /* --dx / --dy 由 JS 按每枚金币随机给出 */
  animation: coin-burst 0.8s ease-in forwards;
}

@keyframes coin-burst {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    /* 先向斜上方轻微弹起，模拟脱手 */
    transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.15 - 14px))
               scale(1.05) rotate(140deg);
    opacity: 1;
  }
  100% {
    /* 再向下掉落并向四周散开 */
    transform: translate(var(--dx), var(--dy))
               scale(0.55) rotate(360deg);
    opacity: 0;
  }
}

/* 金币掉落期间禁止弹窗滚动，避免出现滚动条挤动布局 */
.modal.coin-bursting {
  overflow: hidden;
}

/* ---- 文物结局层：铺满整个舞台，上图下文，整体叠加 ---- */
.artifact-area {
  position: absolute;
  inset: 0;                  /* 获得与舞台一致的确定高度 */
  z-index: 2;                /* 浮在正在淡出的背景图与交互区之上 */

  display: flex;
  flex-direction: column;
}

#artifact-img {
  flex: 0 0 230px;           /* 与城门背景图同高，原位对齐 */
  width: 100%;
  height: 230px;
  object-fit: contain;       /* 完整显示整幅文物图，不裁剪、不变形 */
  object-position: center;
  border-bottom: 2px solid #8b6914;
  background: #33312d;       /* 与文物图自身深灰背景接近，铺满留白 */

  /* 从缩小到放大的弹开动画（与之前要求一致） */
  animation: artifact-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---- 竹简文字卷：竖排印刷，从右向左阅读 ---- */
/* flex:1 + min-height:0 占据文物图下方的全部剩余高度；
   竖排必须有确定的物理高度，文字才能向下排满、再向左续栏 */
.bamboo-panel {
  flex: 1 1 auto;
  min-height: 0;
  margin: 16px 18px 18px;
  padding: 14px 16px;
  overflow-x: auto;          /* 极窄屏下的兜底：横向展卷 */
  overflow-y: hidden;

  /* 竹简黄 / 羊皮纸色，两侧略加深模拟卷边 */
  background:
    linear-gradient(90deg,
      rgba(120, 80, 20, 0.14) 0%,
      rgba(255, 250, 235, 0.28) 7%,
      rgba(255, 250, 235, 0.28) 93%,
      rgba(120, 80, 20, 0.16) 100%),
    #f5e6c8;
  border: 2px solid #a9802b;   /* 暗金边框 */
  border-radius: 8px;
  box-shadow: inset 0 0 18px rgba(120, 80, 20, 0.22);

  writing-mode: vertical-rl;  /* 竖排：字自上而下，栏自右而左 */
  -webkit-writing-mode: vertical-rl;

  font-family: "LiSu", "STLiti", "华文隶书", "隶书", "KaiTi", "楷体", serif;
  font-size: 15px;
  /* 竖排中 line-height 作用于字与字的纵向间距，宜紧凑；
     栏与栏的间距由此属性的行距自然形成 */
  line-height: 1.3;
  color: #3d2c10;
}

/* 每一节占满竹简高度，超长文字自动在节内向左续栏 */
.bamboo-section {
  height: 100%;
}

/* 相邻两节之间以竖虚线相隔（后一节排在前一节左侧） */
.bamboo-section + .bamboo-section {
  margin-right: 6px;
  padding-right: 12px;
  border-right: 1px dashed rgba(122, 20, 16, 0.4);
}

/* 小标题：独占一栏，朱红底纹仿印章签条 */
.bamboo-title {
  margin: 0 0 0 12px;
  padding: 10px 5px;
  border-radius: 3px;
  background: rgba(122, 20, 16, 0.08);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #7a1410;
}

.bamboo-section p {
  margin: 0;
}

/* 知识点高亮：加粗 + 古朱红 */
.bamboo-hl {
  color: #8b1a1a;
  font-weight: bold;
}

@keyframes artifact-pop {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* =========================================================
 * 完璧归赵 · 剧情引入全屏遮罩
 * ========================================================= */

/* 全屏遮罩：铺满窗口，固定层级 */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #0a0806;
  cursor: pointer;
  user-select: none;
}

.intro-overlay.hidden {
  display: none;
}

/* 幕次图片：全屏铺满，object-fit:cover 沉浸感 */
.intro-scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.6s ease;
  opacity: 1;
  filter: var(--scene-filter);
}

/* 半透明暗调遮罩：默认透明，.dimmed 时覆盖 */
.intro-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.intro-dim.dimmed {
  opacity: 1;
}

/* 文字容器：底部居中 */
.intro-caption {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  width: min(720px, 88vw);
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
  z-index: 2;
}

.intro-caption.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 剧情文字：宋体，米白色 */
#intro-text {
  margin: 0 0 18px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 22px;
  line-height: 1.9;
  color: #f0e6d2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* 点击提示：右下角闪烁 */
.intro-hint {
  display: inline-block;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 15px;
  color: rgba(240, 230, 210, 0.65);
  animation: hint-blink 1.4s ease-in-out infinite;
}

@keyframes hint-blink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* 跳过按钮：右上角 */
.intro-skip {
  position: absolute;
  top: 56px;              /* 下移避开右上角全局音乐按钮（其下沿约 46px） */
  right: 22px;
  z-index: 10;

  padding: 6px 14px;
  border: 1px solid rgba(240, 230, 210, 0.35);
  border-radius: 3px;
  background: rgba(20, 16, 10, 0.55);
  color: rgba(240, 230, 210, 0.7);
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

.intro-skip:hover {
  background: rgba(60, 45, 20, 0.7);
  color: #f0e6d2;
}

/* "步入咸阳宫"按钮 */
.intro-enter-btn {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;

  padding: 14px 48px;
  border: 2px solid #a9802b;
  border-radius: 4px;
  background: linear-gradient(180deg, #7a1410 0%, #5a0e0c 100%);
  color: #f0d9a0;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 20px;
  letter-spacing: 6px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s, box-shadow 0.2s;
}

.intro-enter-btn:hover {
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
}

/* =========================================================
 * 完璧归赵 · 阶段一：识破陷阱
 * ========================================================= */

.stage-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #0a0806;
}

.stage-overlay.hidden { display: none; }

/* 背景图：全屏铺满，支持滤镜过渡 */
.stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.5s ease;
  filter: var(--scene-filter);
}

/* 决策2（侍卫逼近）：在统一古风色调基础上进一步压暗，营造危机压迫感 */
.stage-bg.threatened {
  filter: sepia(0.3) contrast(1.25) brightness(0.5);
}

/* 暗调遮罩：确保文字清晰，支持颜色过渡 */
.stage-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: background 0.5s ease;
}

/* 决策2（侍卫逼近）：暗红半透明遮罩，增强危机氛围 */
.stage-dim.threatened {
  background: rgba(100, 0, 0, 0.3);
}

/* 中央内容区 */
.stage-content {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  width: min(640px, 90vw);
  text-align: center;
  z-index: 2;
}

.stage-desc {
  margin: 0 0 28px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 22px;
  line-height: 1.9;
  color: #f0e6d2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* 选项按钮纵向排列 */
.stage-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.stage-options .ancient-btn {
  width: min(420px, 80vw);
  text-align: left;
  padding: 13px 24px;
  font-size: 17px;
  letter-spacing: 1px;
}

/* 失败提示：暗红绢帖。初始即居中，用透明度+缩放隐藏，避免从侧边飞入 */
.stage-fail {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;        /* 隐藏时不拦截点击 */
  z-index: 2;
  text-align: center;
  padding: 28px 36px;
  background: rgba(86, 12, 12, 0.88);
  border: 2px solid #d4af37;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 显示时从中心平滑放大 */
.stage-fail.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.stage-fail-text {
  margin: 0 0 18px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 19px;
  color: #ffffff;
  letter-spacing: 1px;
}

/* 阶段二：文字与选项的淡入淡出过渡（opacity 保留 0.4s，交互反馈仍为 0.2s） */
.stage-desc {
  transition: opacity 0.4s ease;
}

.stage-options .ancient-btn {
  transition:
    opacity 0.4s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

/* 失败框按钮横排 */
.fail-btn-row {
  display: flex;
  gap: 14px;
  justify-content: center;
}

/* ---- 阶段三：文物展示卡片。初始即居中，透明度+缩放隐藏 ---- */
.artifact-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  width: min(480px, 90vw);
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
  padding: 26px 28px 30px;

  /* 深色宣纸底（兜底色，纹理加载前） */
  background: #171009;
  border: 3px solid #6b4a18;
  outline: 1px solid #c9a24b;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8);

  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 宣纸纹理层：压暗 + 做旧褐色 */
.artifact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 1px;
  background-image: url('../assets/images/paper_texture.jpg');
  background-size: 420px;
  background-repeat: repeat;
  filter: brightness(0.65) sepia(0.5);
  pointer-events: none;
}

/* 半透明深色遮罩：保证米黄文字清晰 */
.artifact-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 1px;
  background: rgba(20, 15, 10, 0.6);
  pointer-events: none;
}

/* 内容浮于纹理与遮罩之上 */
.artifact-card > * {
  position: relative;
  z-index: 1;
}

/* 显示时从中心平滑放大 */
.artifact-card.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* 玉璧图片；缺失时显示占位框 */
/* 所有文物卡片图片共用尺寸约束（玉璧 / 汉画像石等） */
#yubi-img,
.artifact-card img {
  width: 240px;
  max-width: 80%;
  height: 220px;
  object-fit: contain;
  border: 2px solid #c9a24b;
  border-radius: 3px;
  background: #33312d;
}

#yubi-img.img-missing,
.artifact-card img.img-missing {
  /* 占位框：保留尺寸，深色底提示图片待放入 */
  background:
    repeating-linear-gradient(45deg, #3a342c 0 12px, #2e2922 12px 24px);
}

.artifact-card-info {
  margin: 18px 0 20px;
  text-align: left;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 16px;
  line-height: 1.9;
  color: #e8d9b0;
}

.artifact-card-info p { margin: 0 0 10px; }

/* 小标签（文物简介/历史回响/知识点）暗金色 */
.artifact-card-info strong {
  color: #d4af37;
}

/* 知识点高亮：深底宣纸上的亮朱砂 */
.artifact-card-info .bamboo-hl {
  color: #e07a5f;
}

.artifact-card-title {
  margin: 0 0 10px;
  text-align: center;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 24px;
  letter-spacing: 6px;
  color: #e0c078;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

/* =========================================================
 * 荆轲刺秦王 · 剧情字幕（宋体、白色，比完璧归赵 intro 略大）
 * ========================================================= */

#jk-text {
  margin: 0 0 18px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 24px;
  line-height: 1.9;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* =========================================================
 * 荆轲刺秦王 · 阶段二：咸阳献图（卷轴交互层）
 * ========================================================= */

.jk-stage2-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.jk-stage2-overlay.hidden { display: none; }

/* 背景图：咸阳宫全屏铺满 */
.jk-stage2-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--scene-filter);
}

/* 暗调遮罩：比剧情层更深，突出中央卷轴 */
.jk-stage2-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

/* 危机晕影：屏幕边缘暗红，透明度由 JS 按展开进度控制（0~0.85） */
.jk-danger-vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0) 42%,
      rgba(90, 0, 0, 0.45) 78%,
      rgba(120, 0, 0, 0.8) 100%);
  z-index: 1;
  transition: opacity 0.15s linear;
}

/* 卷轴居中舞台 */
.jk-stage2-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* 卷轴视口：固定尺寸 + overflow hidden，地图在内部被 clip-path 裁剪 */
.jk-scroll-viewport {
  position: relative;
  width: min(760px, 88vw);
  height: min(340px, 42vh);
  overflow: hidden;
  cursor: grab;
  touch-action: none;            /* 阻止手机端滚动/缩放，交给拖拽逻辑 */
  border-radius: 4px;
  border: 1px solid rgba(169, 128, 43, 0.55);
  /* 外阴影（卷轴投影）+ 内发光（卷轴内壁光泽） */
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.85),
    inset 0 0 26px rgba(0, 0, 0, 0.65),
    inset 0 0 10px rgba(212, 175, 55, 0.35);
  background: #17120b;
}

.jk-scroll-viewport.dragging { cursor: grabbing; }

/* 地图图片：铺满视口，初始卷起（只露左侧 10%）；拖拽中不加过渡 */
.jk-scroll {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  clip-path: inset(0 90% 0 0);
}

/* 松手后的回弹/停留过渡（拖拽时此类会被移除） */
.jk-scroll.settling {
  transition: clip-path 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 卷轴图片缺失时的占位底 */
.jk-scroll.img-missing {
  background: repeating-linear-gradient(45deg, #3a342c 0 14px, #2e2922 14px 28px);
}

/* 卷轴右杆：仿木轴，跟随展开边缘 */
.jk-scroll-rod {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 10%;                       /* 初始停在露出 10% 的边缘，JS 按进度更新 */
  width: 22px;
  transform: translateX(-50%);
  border-radius: 11px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      #4a2e10 0%, #8a5f26 22%, #e3bd6a 50%, #8a5f26 78%, #4a2e10 100%);
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.8),
    inset 0 0 6px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.jk-scroll-rod.settling {
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 匕首：藏在地图右侧末尾，初始完全隐藏并缩小 */
.jk-dagger {
  position: absolute;
  right: 7%;
  top: 50%;
  height: 62%;
  width: auto;
  z-index: 3;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 0 14px rgba(255, 40, 20, 0.55));
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
}

/* 图穷匕见：0.5s 淡入放大 */
.jk-dagger.revealed {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* 红色晕影强烈闪烁：瞬间加深，再缓慢褪回到进度对应值 */
.jk-danger-vignette.flash {
  animation: jk-danger-flash 1.1s ease-out forwards;
}

@keyframes jk-danger-flash {
  0%   { opacity: 1; }
  100% { opacity: 0.85; }
}

/* 提示文字隐藏 */
.jk-scroll-hint.hidden { display: none; }

/* 防呆：未完全展开松手时的急迫红色提示，微弱闪烁 */
.jk-scroll-hint.urgent {
  color: #c23b22;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 14px rgba(194, 59, 34, 0.45);
  animation: jk-hint-urgent 1.1s ease-in-out infinite;
}

@keyframes jk-hint-urgent {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* =========================================================
 * 荆轲刺秦王 · QTE：3秒倒计时
 * ========================================================= */

.jk-qte {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12vh;
  cursor: pointer;
  user-select: none;
}

.jk-qte.hidden { display: none; }

/* 红色倒计时大数字：居中上方，紧迫闪烁 */
.jk-qte-count {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-weight: bold;
  font-size: clamp(96px, 18vh, 170px);
  line-height: 1;
  color: #d42a18;
  text-shadow:
    0 0 18px rgba(255, 40, 20, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.9);
  animation: jk-qte-pulse 0.9s ease-in-out infinite;
}

/* 数字每次切换时的强烈一跳（由 JS 重新触发） */
.jk-qte-count.pop {
  animation: jk-qte-pop 0.5s ease-out;
}

@keyframes jk-qte-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

@keyframes jk-qte-pop {
  0%   { transform: scale(1.7); opacity: 0.2; }
  100% { transform: scale(1);   opacity: 1; }
}

/* 可点击匕首：居中偏下 */
.jk-qte-dagger {
  margin-top: 5vh;
  height: 26vh;
  width: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 22px rgba(255, 45, 20, 0.8));
  animation: jk-dagger-shake 0.45s ease-in-out infinite;
  transition: transform 0.12s ease;
}

.jk-qte-dagger:hover { transform: scale(1.07); }
.jk-qte-dagger:active { transform: scale(0.92); }

@keyframes jk-dagger-shake {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* QTE 底部提示 */
.jk-qte-tip {
  margin: 3.5vh 0 0;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: #ffd9c9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 12px rgba(212, 42, 24, 0.5);
  animation: jk-hint-urgent 0.9s ease-in-out infinite;
}

/* 提示文字：宋体，米白，轻微呼吸闪烁 */
.jk-scroll-hint {
  margin: 0;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 19px;
  letter-spacing: 3px;
  color: #f0e6d2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  animation: jk-hint-breathe 2s ease-in-out infinite;
  transition: color 0.4s ease;
}

/* =========================================================
 * 一字千金 · 阶段一城门悬书字幕（宋体白字，复用 intro 布局）
 * ========================================================= */

#yzqj-text {
  margin: 0 0 18px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 24px;
  line-height: 1.9;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* =========================================================
 * 一字千金 · 阶段二：竹简找错别字
 * ========================================================= */

.yzqj-stage2-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 4vh 4vw;
}

/* 顶部宋体提示 */
.yzqj-tip {
  margin: 0;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 19px;
  letter-spacing: 2px;
  color: #f0e6d2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* 竹简容器：尺寸跟随图片，文字绝对定位叠在书页区域 */
.yzqj-scroll-wrap {
  position: relative;
  width: min(1080px, 94vw);
}

.yzqj-bamboo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.8));
}

.yzqj-bamboo.img-missing {
  height: 300px;
  border: 2px dashed #a9802b;
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #3a342c 0 14px, #2e2922 14px 28px);
}

/* 竖排文字：落在米色书页内、两根麻绳之间。
   参照徙木立信古籍版式：vertical-rl 下文字自上而下、列自右而左，
   一列排满正常换行即向左续列，无需多列布局 */
.yzqj-bamboo-text {
  position: absolute;
  left: 17%;
  right: 16.5%;
  top: 25%;
  bottom: 32%;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  line-height: 1.3;
  overflow: hidden;
}

/* 每一段为一"节"，占满书页高度，节内超长自动向左续列 */
.yzqj-section {
  height: 100%;
}

/* 相邻节之间以竖虚线相隔（后一节排在前一节左侧） */
.yzqj-section + .yzqj-section {
  margin-right: 4px;
  padding-right: 12px;
  border-right: 1px dashed rgba(122, 20, 16, 0.4);
}

/* 每个字：宋体、墨黑、5px 内边距方便点按 */
.yzqj-char {
  display: inline-block;
  padding: 5px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(18px, 1.5vh + 0.7vw, 24px);
  line-height: 1.25;
  color: #2b1d0e;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.yzqj-char:hover {
  background: rgba(122, 20, 16, 0.16);
  color: #7a1410;
}

/* 已点击过的字：灰暗 + 删除线，表示"改不了" */
.yzqj-char.clicked {
  color: #8a7f6d;
  text-decoration: line-through;
  text-decoration-color: rgba(122, 20, 16, 0.65);
  cursor: default;
  background: transparent;
}

/* 点击反馈文字：宋体米白，竹简下方 */
.yzqj-feedback {
  margin: 0;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: 19px;
  letter-spacing: 2px;
  color: #f0d9c9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 12px rgba(194, 59, 34, 0.4);
  animation: jk-hint-breathe 1.6s ease-in-out infinite;
}

/* =========================================================
 * 邯郸救援 · 诸侯路线沙盘
 * ========================================================= */

/* 背景图再压暗一层（仅作用于本弹窗，不改全局 .jk-stage2-dim） */
#handan-overlay .jk-stage2-dim {
  background: rgba(8, 5, 2, 0.62);
}

.handan-sandbox {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* 容器不挡地图，仅按钮可点 */
}

/* 标题：画面正中央上方，宋体金字 */
.handan-title {
  position: absolute;
  top: 11vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: bold;
  letter-spacing: 6px;
  color: #f3e2b3;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95), 0 0 22px rgba(160, 120, 40, 0.55);
}

/* 标题下方居中引导文字 */
.handan-guide {
  position: absolute;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(16px, 1.7vw, 21px);
  letter-spacing: 3px;
  color: #e8d6ad;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  animation: jk-hint-breathe 1.8s ease-in-out infinite;
}

/* 两个行军路线按钮：城池左右两侧，深棕通透，融进沙盘 */
.handan-zone {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24vw;
  max-width: 320px;
  min-height: 110px;
  border: 1.5px solid rgba(214, 178, 110, 0.55);
  border-radius: 8px;
  /* 调深、调通透：沙盘地形隐约透出 */
  background: rgba(40, 20, 9, 0.42);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  animation: handan-zone-glow 1.5s ease-in-out infinite;
  transition: background 0.2s ease, transform 0.2s ease;
}

.handan-zone-left  { left: 6vw; }
.handan-zone-right { right: 6vw; }

/* 两个按钮相位错开，光晕明暗不同步，更有行军感 */
.handan-zone-right { animation-delay: 0.75s; }

/* 呼吸闪烁：光晕在 1.5s 内来回明暗变化 */
@keyframes handan-zone-glow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.22);
    border-color: rgba(214, 178, 110, 0.45);
  }
  50% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    border-color: rgba(240, 220, 160, 0.85);
  }
}

.handan-zone:hover,
.handan-zone:focus-visible {
  background: rgba(70, 32, 12, 0.6);
  outline: none;
}

/* 悬停时暂停呼吸，整体轻微放大，给明确按压反馈 */
.handan-zone:hover {
  animation-play-state: paused;
  transform: translateY(-50%) scale(1.04);
}

/* 路线名称：常驻可见 */
.handan-zone-label {
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 2px;
  line-height: 1.5;
  color: #f6ead0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ---- 朱红行军轨迹：虚线 + 三角箭头，均为纯 CSS 伪元素 ---- */

/* 公共：虚线轨迹（::before）与三角箭头（::after）垂直居中 */
.handan-zone::before,
.handan-zone::after {
  content: "";
  position: absolute;
  top: 50%;
}

/* 虚线轨迹：贴在按钮朝向邯郸（画面中央）的一侧 */
.handan-zone-left::before {
  left: 100%;
  width: 64px;
  margin-left: 8px;
  border-top: 2px dashed #c23b22;
  transform: translateY(-50%);
  animation: handan-trail 1.3s ease-in-out infinite;
}
.handan-zone-right::before {
  right: 100%;
  width: 64px;
  margin-right: 8px;
  border-top: 2px dashed #c23b22;
  transform: translateY(-50%);
  animation: handan-trail 1.3s ease-in-out infinite;
}

/* 三角箭头：左侧按钮箭头向右（魏军赴赵） */
.handan-zone-left::after {
  left: 100%;
  margin-left: 74px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid #c23b22;
  filter: drop-shadow(0 0 5px rgba(194, 59, 34, 0.8));
  transform: translateY(-50%);
  animation: handan-arrow-right 1.1s ease-in-out infinite;
}

/* 三角箭头：右侧按钮箭头向左（齐军直指大梁） */
.handan-zone-right::after {
  right: 100%;
  margin-right: 74px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 16px solid #c23b22;
  filter: drop-shadow(0 0 5px rgba(194, 59, 34, 0.8));
  transform: translateY(-50%);
  animation: handan-arrow-left 1.1s ease-in-out infinite;
}

/* 虚线明灭，像行军路线在沙盘上脉动 */
@keyframes handan-trail {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* 箭头沿进军方向轻微推进 + 闪烁 */
@keyframes handan-arrow-right {
  0%, 100% { opacity: 0.65; transform: translateY(-50%) translateX(0); }
  50%      { opacity: 1;    transform: translateY(-50%) translateX(7px); }
}
@keyframes handan-arrow-left {
  0%, 100% { opacity: 0.65; transform: translateY(-50%) translateX(0); }
  50%      { opacity: 1;    transform: translateY(-50%) translateX(-7px); }
}

/* 阶段二：大梁奇袭热点——透明底 + 朱红呼吸圈，便于玩家发现 */
.handan-hotspot {
  position: absolute;
  left: 30%;
  top: 66%;
  z-index: 3;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

/* 呼吸红圈 */
.handan-hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(194, 59, 34, 0.9);
  box-shadow: 0 0 14px rgba(194, 59, 34, 0.7),
              inset 0 0 10px rgba(194, 59, 34, 0.35);
  animation: handan-hotspot-pulse 1.4s ease-in-out infinite;
}

@keyframes handan-hotspot-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.handan-hotspot:hover::before {
  border-color: #e85a3c;
}

/* 热点标签：大梁 */
.handan-hotspot-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  white-space: nowrap;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffd9c9;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 10px rgba(194, 59, 34, 0.7);
}

/* =========================================================
 * 围魏救赵 · 阶段三：桂陵伏击 QTE（倒计时样式复用 .jk-qte-count）
 * ========================================================= */

/* 桂陵热点：位于邯郸与大梁之间 */
.handan-hotspot-guiling {
  left: 37%;
  top: 51%;
}

/* 倒计时数字容器：引导语下方水平居中 */
.wwjz-qte {
  position: absolute;
  top: 26vh;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* =========================================================
 * 窃符救赵 · 阶段二：密室寻物热点
 * ========================================================= */

/* 上方提示文字 */
.qfjz-tip {
  position: absolute;
  top: 9vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  max-width: 86vw;
  text-align: center;
  white-space: nowrap;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(18px, 1.9vw, 24px);
  letter-spacing: 3px;
  color: #f2e8d2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}

/* 寻物热点：透明底 + 朱红呼吸圈（样式同沙盘热点） */
.qfjz-hotspot {
  position: absolute;
  z-index: 3;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.qfjz-hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(194, 59, 34, 0.9);
  box-shadow: 0 0 14px rgba(194, 59, 34, 0.7),
              inset 0 0 10px rgba(194, 59, 34, 0.35);
  animation: handan-hotspot-pulse 1.4s ease-in-out infinite;
}

.qfjz-hotspot:hover::before {
  border-color: #e85a3c;
}

/* 三处热点呼吸相位错开 */
#qfjz-spot-scrolls::before { animation-delay: 0.45s; }
#qfjz-spot-censer::before  { animation-delay: 0.9s; }

/* 点错时短暂红闪（伪元素先红后恢复透明呼吸） */
.qfjz-hotspot.wrong-flash::before {
  border-color: none;
  box-shadow: none;
  animation: none;
}

@keyframes qfjz-wrong-flash {
  0%   { opacity: 1;   transform: scale(1); }
  40%  { opacity: 1;   transform: scale(1.18); }
  100% { opacity: 0.6; transform: scale(1); border-color: rgba(194, 59, 34, 0.9); }
}

/* 嵌入文本的大号朱红倒计时数字 */
#qfjz-timer {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  color: #c23b22;
  text-shadow: 0 0 18px rgba(194, 59, 34, 0.8), 0 3px 10px rgba(0, 0, 0, 0.9);
  transition: opacity 0.2s ease;
}

/* 点错时数字抖动 */
#qfjz-timer.shake {
  animation: qfjz-timer-shake 0.4s ease;
}

@keyframes qfjz-timer-shake {
  0%, 100% { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  75%  { transform: translateX(4px); }
}

/* 全屏暗红警告层 */
#danger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(120, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 999;
}

/* 画面抖动动画（应用在寻物容器上） */
@keyframes shake {
  0%   { transform: translate(2px, 0); }
  25%  { transform: translate(-2px, 0); }
  50%  { transform: translate(2px, 0); }
  75%  { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}

.shake-active {
  animation: shake 0.3s ease-in-out;
}

/* 错误提示框：居中古风样式 */
#error-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  padding: 22px 32px;
  background: rgba(30, 18, 8, 0.88);
  border: 2px solid #d4af37;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: 2px;
  color: #f2e8d2;
  text-align: center;
  line-height: 1.7;
  max-width: 85vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#error-toast.show {
  opacity: 1;
}

/* =========================================================
 * 围魏救赵 · 阶段一：齐军大帐战前抉择
 * ========================================================= */

.wwjz-camp-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

/* 大帐中央决策绢帖：深色通透底，不挡背景 */
.wwjz-camp-card {
  width: min(680px, 92vw);
  padding: 38px 42px 34px;
  border: 1.5px solid rgba(214, 178, 110, 0.6);
  border-radius: 10px;
  background: rgba(24, 14, 6, 0.72);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 175, 55, 0.18);
}

.wwjz-camp-title {
  margin: 0 0 20px;
  text-align: center;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: bold;
  letter-spacing: 8px;
  color: #f3e2b3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.wwjz-camp-text {
  margin: 0 0 30px;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 2;
  letter-spacing: 1px;
  color: #f2e8d2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* 两个抉择按钮纵向排列 */
.wwjz-choices {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.wwjz-choices .ancient-btn {
  width: min(460px, 88%);
  padding: 12px 20px;
  font-size: 18px;
  letter-spacing: 2px;
}

/* 右上角返回按钮 */
.handan-back {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 5;
  padding: 8px 20px;
  border: 1px solid rgba(214, 178, 110, 0.75);
  border-radius: 4px;
  background: rgba(30, 20, 10, 0.55);
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 17px;
  letter-spacing: 3px;
  color: #e8d6ad;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.handan-back:hover {
  background: rgba(70, 48, 20, 0.75);
  border-color: #e0c078;
}

/* stage-overlay（完璧归赵）中的返回按钮需要更高的 z-index，确保不被内容遮挡 */
.stage-overlay .handan-back {
  z-index: 10;
}

/* modal-overlay（徙木立信）中的返回按钮移到左侧，避免与 × 关闭按钮重叠 */
.modal-overlay .handan-back {
  left: 22px;
  right: auto;
  z-index: 110;
}

/* intro-overlay 中的"返回地图"按钮移到左侧，避免与"跳过"按钮重叠 */
.intro-overlay .handan-back {
  left: 22px;
  right: auto;
}

@keyframes jk-hint-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* =========================================================
 * 卧薪尝胆 · 阶段二：长按蓄力
 * ========================================================= */

.wxcd-charge {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.wxcd-hint {
  margin: 0;
  font-family: "SimSun", "STSong", "宋体", serif;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: 3px;
  color: #f2e8d2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}

.wxcd-bile {
  width: 180px;
  height: auto;
  mix-blend-mode: screen;
  cursor: pointer;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.wxcd-bile:hover {
  transform: scale(1.06);
}

.wxcd-bile:active {
  transform: scale(0.95);
}

.wxcd-progress-track {
  width: min(420px, 70vw);
  height: 18px;
  background: rgba(20, 12, 6, 0.75);
  border: 1px solid rgba(214, 178, 110, 0.55);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.wxcd-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #8a1c1c, #c23b22, #d4af37);
  border-radius: 9px;
  transition: width 0.1s linear;
}

/* =========================================================
 * 全局文物图鉴面板
 * ========================================================= */

/* 触发按钮：固定在底部提示上方 */
.gallery-trigger {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  z-index: 10;
  padding: 8px 28px;
  font-size: 16px;
  letter-spacing: 4px;
}

/* ========== 历史时间轴面板 ========== */
#timeline-panel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  background: rgba(20, 14, 8, 0.75);
  border: 1px solid rgba(214, 178, 110, 0.4);
  border-radius: 8px;
  padding: 16px 12px;
  backdrop-filter: blur(4px);
}

.timeline-title {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 18px;
  color: #e8d6ad;
  text-align: center;
  letter-spacing: 4px;
  margin: 0 0 14px 0;
}

.timeline-track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  padding-left: 24px;
}

.timeline-track::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(214, 178, 110, 0.35);
  border-radius: 1px;
}

.timeline-node {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 4px 0;
  cursor: default;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(214, 178, 110, 0.6);
  background: #555;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.timeline-node.unlocked .timeline-dot {
  background: #d4af37;
  border-color: #e8d6ad;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.timeline-label {
  font-family: "SimSun", "宋体", serif;
  font-size: 14px;
  color: #888;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.timeline-node.unlocked .timeline-label {
  color: #e8d6ad;
  text-shadow: 0 0 4px rgba(212, 175, 55, 0.4);
}

/* 存档/清空按钮组：图鉴按钮右侧 */
.save-actions {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  gap: 16px;
  z-index: 10;
}

/* 图鉴弹窗主体 */
.gallery-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 94vw);
  max-height: 92vh;
  overflow-y: auto;

  /* 深色宣纸底（兜底色，纹理加载前） */
  background: #171009;
  border: 3px solid #6b4a18;
  outline: 1px solid #c9a24b;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.8),
    inset 0 0 24px rgba(0, 0, 0, 0.4);

  padding: 22px 24px 28px;
  animation: modal-pop 0.3s ease-out;
}

/* 宣纸纹理层：压暗 + 做旧褐色 */
.gallery-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 1px;
  background-image: url('../assets/images/paper_texture.jpg');
  background-size: 420px;
  background-repeat: repeat;
  filter: brightness(0.65) sepia(0.5);
  pointer-events: none;
}

/* 半透明深色遮罩：保证米黄文字清晰 */
.gallery-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 1px;
  background: rgba(20, 15, 10, 0.6);
  pointer-events: none;
}

/* 内容浮于纹理与遮罩之上 */
.gallery-modal > * {
  position: relative;
  z-index: 1;
}

/* 深底宣纸上的标题/副标题/进度 */
.gallery-modal .modal-title {
  color: #e0c078;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.gallery-modal .modal-close {
  color: #e8d9b0;
}

.gallery-subtitle {
  text-align: center;
  margin: 0 0 18px;
  font-size: 15px;
  color: #cbb98a;
  letter-spacing: 2px;
}

/* 网格：3列，最后一格居中 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 4px;
}

/* 7个格子，最后一格居中 */
.gallery-item:last-child {
  grid-column: 2;
}

/* 每个格子：深底宣纸上用半透明深底 + 暗金描边 */
.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  background: rgba(10, 7, 4, 0.45);
  border: 2px solid rgba(201, 162, 75, 0.35);
  border-radius: 4px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.gallery-item.unlocked {
  border-color: #c9a24b;
  box-shadow: 0 0 14px rgba(201, 162, 75, 0.35);
  background: rgba(201, 162, 75, 0.12);
}

/* 图片容器 */
.gallery-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, #3a342c 0 12px, #2e2922 12px 24px);
  border: 2px solid #a8862f;
  border-radius: 3px;
  overflow: hidden;
}

.gallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.4s ease;
}

/* 锁定状态：暗色 + 模糊 */
.gallery-item:not(.unlocked) .gallery-img-wrap img {
  filter: brightness(0.5) grayscale(1) blur(2px);
}

/* 锁图标 */
.gallery-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  transition: opacity 0.35s;
}

/* 解锁后隐藏锁图标 */
.gallery-item.unlocked .gallery-lock {
  opacity: 0;
  pointer-events: none;
}

/* 文物名称：未解锁灰米，解锁暗金 */
.gallery-name {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: #9a8a66;
  text-align: center;
}

.gallery-item.unlocked .gallery-name {
  color: #e0c078;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.35);
}

/* 已解锁的格子可点击 */
.gallery-item.unlocked {
  cursor: zoom-in;
}

/* 大图查看层 */
#gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  padding: 20px;
}

.gallery-viewer-content {
  position: relative;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.gallery-viewer-content img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border: 3px solid #c9a24b;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(201, 162, 75, 0.4);
}

.gallery-viewer-name {
  margin: 0;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 18px;
  letter-spacing: 3px;
  color: #e8d9b0;
}

.gallery-viewer-close {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;
}

/* 底部进度 */
.gallery-progress {
  text-align: center;
  margin: 18px 0 0;
  font-size: 16px;
  letter-spacing: 2px;
  color: #cbb98a;
}

/* 窄屏适配 */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gallery-item:last-child {
    grid-column: auto;
  }
  .gallery-modal {
    padding: 16px 14px 22px;
  }
  .gallery-name {
    font-size: 13px;
  }
}

/* ========== 存档/清空按钮组 ========== */
.save-actions {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  gap: 16px;
  z-index: 10;
}

.save-actions .ancient-btn {
  padding: 7px 22px;
  font-size: 14px;
  letter-spacing: 3px;
}

/* 存档成功 toast（复用 modal-overlay 居中逻辑） */
#save-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;

  padding: 14px 32px;
  background: rgba(26, 19, 14, 0.95);
  border: 2px solid #c9a24b;
  border-radius: 6px;

  font-family: "SimSun", "宋体", serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #e8d9b0;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#save-toast.show {
  opacity: 1;
}

/* 清空确认弹窗 */
.save-confirm-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  width: min(400px, 90vw);
  padding: 32px 28px 28px;

  background: linear-gradient(180deg, #f4e7c6 0%, #ecd9aa 55%, #e2cb94 100%);
  border: 3px solid #6b4a18;
  outline: 1px solid #c9a24b;
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8);
  animation: modal-pop 0.3s ease-out;
}

.save-confirm-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #4a2e10;
  text-align: center;
  letter-spacing: 1px;
}

.save-confirm-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.save-confirm-btns .ancient-btn {
  padding: 8px 24px;
  font-size: 15px;
  letter-spacing: 3px;
}

/* ========== 终极结局：战国百晓生金卷轴 ========== */
#ending-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5, 3, 2, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ending-fade-in 0.8s ease;
}

@keyframes ending-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 卷轴整体 */
.ending-scroll {
  position: relative;
  width: min(560px, 86vw);
  animation: ending-unfurl 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ending-unfurl {
  0%  { transform: scaleY(0.05); opacity: 0; }
  60% { opacity: 1; }
  100%{ transform: scaleY(1); opacity: 1; }
}

/* 卷轴上下轴杆 */
.ending-scroll-rod {
  height: 26px;
  border-radius: 13px;
  background: linear-gradient(to bottom, #f0d98a 0%, #c9a13f 45%, #8a6a20 55%, #d9bd63 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,0.6), inset 0 0 6px rgba(80,50,0,0.5);
  position: relative;
  z-index: 2;
}
.ending-scroll-rod::before,
.ending-scroll-rod::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #7a5a22, #3d2c0f);
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.ending-scroll-rod::before { left: -8px; }
.ending-scroll-rod::after  { right: -8px; }

/* 卷轴纸面 */
.ending-scroll-body {
  position: relative;
  margin: -4px 0;
  padding: 56px 44px 44px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,244,210,0.5), transparent 70%),
    linear-gradient(to bottom, #f3e3b4 0%, #e9d396 50%, #ddc281 100%);
  border-left: 2px solid rgba(150,110,30,0.55);
  border-right: 2px solid rgba(150,110,30,0.55);
  box-shadow: inset 0 0 40px rgba(140,100,20,0.25);
}

/* 红色印章 */
.ending-seal {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 20px;
  line-height: 1.25;
  color: #fff;
  background: rgba(180, 30, 24, 0.92);
  border: 3px solid #a51f18;
  border-radius: 8px;
  letter-spacing: 2px;
  transform: rotate(-8deg);
  box-shadow: 0 2px 10px rgba(120,20,10,0.5);
  animation: ending-seal-stamp 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.9s both;
  user-select: none;
}

@keyframes ending-seal-stamp {
  0%  { transform: rotate(-8deg) scale(2.4); opacity: 0; }
  100%{ transform: rotate(-8deg) scale(1); opacity: 1; }
}

.ending-title {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 44px;
  letter-spacing: 12px;
  text-indent: 12px;
  color: #6e4d12;
  margin-bottom: 22px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.ending-quote {
  font-family: "SimSun", "宋体", serif;
  font-size: 19px;
  color: #4a3508;
  letter-spacing: 3px;
  line-height: 1.9;
}

.ending-sub {
  font-family: "SimSun", "宋体", serif;
  font-size: 14px;
  color: rgba(74,53,8,0.72);
  letter-spacing: 2px;
  margin-top: 10px;
}

.ending-name-row {
  margin: 28px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ending-name-label {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 17px;
  color: #5a4110;
  letter-spacing: 2px;
}

.ending-name-input {
  width: 170px;
  padding: 7px 12px;
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 17px;
  color: #3d2c0f;
  background: rgba(255,250,230,0.75);
  border: 1px solid #a8862f;
  border-radius: 4px;
  outline: none;
  text-align: center;
  letter-spacing: 2px;
}
.ending-name-input:focus {
  border-color: #7a5a22;
  box-shadow: 0 0 6px rgba(168,134,47,0.5);
}

.ending-btns {
  display: flex;
  gap: 18px;
  justify-content: center;
}
.ending-btns .ancient-btn {
  padding: 8px 22px;
  font-size: 15px;
  letter-spacing: 3px;
}