/* ===================================================================
 * act-all.css · 五幕主线沉浸式皮影剧场
 * 影戏千秋 · 景阳冈重演（初赛 MVP）
 *
 * 布局：单个大戏台（视觉主角）
 *       白话解释浮在戏台内部左侧（半透明）
 *       字幕条叠在戏台内部底部（半透明深色 + 金边）
 *       场景说明放在戏台下方（横向辅助）
 *       第四幕三选项 + 倒计时面板
 *       第五幕结局卡（状态数值 + 关键选择）
 * =================================================================== */

/* 第一幕：满屏沉浸 */
.act1{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%,rgba(140,28,24,.32),transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(243,210,122,.06),transparent 70%),
    linear-gradient(180deg,#170908,#0c0606);
}
section.act1{
  padding:28px 28px 32px;
  justify-content:flex-start;
}
.act1 .wrap{width:min(1720px,calc(100vw - 56px),calc((100vh - 200px) * 16 / 7))}
.act1 .chap-mark{margin-bottom:4px}
.act1 .chap-title{
  font-size:clamp(32px,3vw,48px);
  margin-bottom:4px;
}
.act1 .chap-en{margin-bottom:10px}

/* 剧场主布局：单列大戏台 */
.theatre{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
  align-items:stretch;
  /* 约束最大宽度：由 viewport 高度反推，确保戏台+操作区在首屏可见 */
  max-width:min(1720px,calc((100vh - 200px) * 16 / 7));
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

/* 皮影戏台（视觉主角，16:7 比例，限高让 1280x720 可见下方操作区） */
.puppet-stage{
  position:relative;
  aspect-ratio:16/7;
  width:100%;
  min-height:auto;
  max-height:calc(100vh - 200px);
  border:1px solid var(--gold);
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(255,224,150,.34),rgba(236,180,90,.08) 55%,transparent 75%),
    linear-gradient(160deg,#1a0c0a,#0a0504);
  box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 0 120px rgba(0,0,0,.55);
  transition:filter .8s ease;
}
.puppet-stage::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,220,140,.04) 0 2px,transparent 2px 6px);
  pointer-events:none;
}
.puppet-stage::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,235,170,.2),transparent 60%);
  animation:flicker 7s ease-in-out infinite;
  pointer-events:none;
}
.puppet-stage.drunk::after{background:radial-gradient(ellipse at 50% 45%,rgba(255,120,80,.3),transparent 65%)}
.puppet-stage.fallen{filter:brightness(.5) saturate(.8)}
.puppet-stage.playing::after{animation:flicker 2.4s ease-in-out infinite}
.puppet-stage.responding{
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 34px rgba(243,210,122,.22),
    inset 0 0 120px rgba(0,0,0,.55);
}
.puppet-stage.responding::after{
  animation:responseGlow .9s ease both;
}
@keyframes responseGlow{
  0%{background:radial-gradient(ellipse at 50% 45%,rgba(255,235,170,.12),transparent 60%)}
  35%{background:radial-gradient(ellipse at 50% 45%,rgba(255,235,170,.34),transparent 66%)}
  100%{background:radial-gradient(ellipse at 50% 45%,rgba(255,235,170,.2),transparent 60%)}
}

/* 戏台边角装饰 */
.puppet-stage .corner{position:absolute;width:22px;height:22px;border:2px solid var(--gold);z-index:4;pointer-events:none}
.puppet-stage .corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.puppet-stage .corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.puppet-stage .corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.puppet-stage .corner.br{bottom:8px;right:8px;border-left:none;border-top:none}

/* 状态HUD：浮在戏台右上角 */
.status-hud{
  position:absolute;top:14px;right:14px;
  z-index:5;
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;
  background:linear-gradient(160deg,rgba(10,5,4,.82),rgba(10,5,4,.6));
  border:1px solid rgba(217,177,90,.4);
  backdrop-filter:blur(4px);
  min-width:130px;
}
.hud-item{display:grid;grid-template-columns:22px 1fr 26px;align-items:center;gap:8px}
.hud-label{
  font-family:var(--font-kai);font-size:15px;color:var(--gold-bright);
  text-align:center;letter-spacing:.05em;
}
.hud-bar{
  height:5px;background:rgba(217,177,90,.16);
  border:1px solid rgba(217,177,90,.3);
  overflow:hidden;border-radius:3px;
}
.hud-bar i{display:block;height:100%;width:10%;border-radius:3px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.hud-val{
  font-family:var(--font-en-cap);font-size:14px;color:var(--gold);
  text-align:right;
}
/* 状态变化闪烁动画 */
.hud-item.flash-up .hud-val{color:#7ee68a;animation:statFlash 1.2s ease}
.hud-item.flash-down .hud-val{color:#ff8a6e;animation:statFlash 1.2s ease}
.hud-item.flash-up .hud-bar i{box-shadow:0 0 12px rgba(126,230,138,.7)}
.hud-item.flash-down .hud-bar i{box-shadow:0 0 12px rgba(255,138,110,.7)}
@keyframes statFlash{
  0%{transform:scale(1)}
  20%{transform:scale(1.4);text-shadow:0 0 8px currentColor}
  100%{transform:scale(1)}
}
#barZui{background:linear-gradient(90deg,#8e1c18,#c8332a)}
#barDan{background:linear-gradient(90deg,#8a6a22,#f3d27a)}
#barLi{background:linear-gradient(90deg,#2c4a3c,#5e8c72)}

/* 酒旗 */
.jiuqi{
  position:absolute;top:16px;left:16px;
  writing-mode:vertical-rl;
  font-family:var(--font-kai);font-size:18px;color:var(--gold-bright);
  letter-spacing:.3em;
  text-shadow:0 0 14px rgba(200,51,42,.6);
  background:linear-gradient(160deg,rgba(200,51,42,.5),rgba(140,28,24,.3));
  padding:10px 6px;border:1px solid var(--gold);
  z-index:3;
}

/* ===== 场景背景层 ===== */
/* 改用 contain + 场景 CSS 变量定位，避免 cover+scale 把客店/桌子/旗子放得过大。
   变量：--scene-scale 缩放、--scene-x/--scene-y 平移、--ground-y 地平线高度。
   默认变量在 .puppet-stage 上给出，各场景类覆盖。 */
.stage-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.puppet-stage{
  --scene-scale:1;
  --scene-x:0;
  --scene-y:0;
  --ground-y:14%;   /* 统一地面基准线：高于字幕区，避免脚压字幕 */
}
.stage-bg .scene-img{
  position:absolute;
  left:50%;top:50%;
  width:auto;height:auto;
  max-width:96%;max-height:96%;
  object-fit:contain;
  object-position:center center;
  /* 背景更暗、更低饱和，避免与人物抢视觉；人物保持高亮清晰 */
  opacity:.45;
  filter:saturate(.5) contrast(.92) brightness(.65);
  /* 用变量统一控制位置/缩放，不再 scale 呼吸动画 */
  transform:translate(-50%,-50%) translate(var(--scene-x),var(--scene-y)) scale(var(--scene-scale));
  pointer-events:none;
}
/* 客店场景：背景完整显示，不裁剪 */
.puppet-stage.scene-tavern{
  --scene-scale:.88;
  --scene-x:0%;
  --scene-y:-8%;
  --ground-y:16%;
}
.puppet-stage.scene-tavern .scene-img{
  clip-path:none;
  -webkit-clip-path:none;
  mask-image:none;
  -webkit-mask-image:none;
  object-fit:contain;
  max-width:96%;
  max-height:96%;
  opacity:.86;
  filter:saturate(.7) contrast(.95) brightness(.78);
}
/* 山路：缩到 0.85，居中略上，留出人物站位 */
.puppet-stage.scene-mountain{
  --scene-scale:.85;
  --scene-y:0;
  --ground-y:14%;
}
/* 留宿改写结局：回客店背景，与客店场景一致 */
.puppet-stage.end-stay{
  --scene-scale:.88;
  --scene-x:0%;
  --scene-y:-8%;
  --ground-y:16%;
}
.puppet-stage.end-stay .scene-img{
  clip-path:none;
  -webkit-clip-path:none;
  mask-image:none;
  -webkit-mask-image:none;
  object-fit:contain;
  max-width:96%;
  max-height:96%;
  opacity:.86;
  filter:saturate(.7) contrast(.95) brightness(.78);
}

/* 酒旗装饰（背景装饰，不压人物） */
.prop-banner{
  position:absolute;top:0;left:13%;
  width:6.5%;max-width:64px;z-index:2;
  pointer-events:none;
  animation:bannerSway 7s ease-in-out infinite;
  transform-origin:50% 0%;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
@keyframes bannerSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* ===== 客店场景专属构图覆写（第一幕/第二幕） ===== */
/* 店家：左 26%（视觉中心 ~29-31%），高 39%，脚底在 ground-y(16%) */
.puppet-stage.scene-tavern .actor-shopkeeper{
  left:26%;
  bottom:var(--ground-y);
  width:auto;
  height:39%;
  max-width:none;
}
.puppet-stage.scene-tavern .actor-shopkeeper img{
  width:auto;
  height:100%;
}
/* 武松：左 47%（视觉中心 ~58-60%），高 43%，脚底在 ground-y(16%) */
.puppet-stage.scene-tavern .actor-wusong{
  left:47%;
  bottom:var(--ground-y);
  width:auto;
  height:43%;
}
/* 酒旗：左 5%，顶部 1%，宽 4.3% */
.puppet-stage.scene-tavern .prop-banner{
  display:none;
}
.puppet-stage.end-stay .prop-banner{
  display:none;
}
/* 店家说话时向右前倾（朝武松方向），不向左退 */
.puppet-stage.scene-tavern .actor-shopkeeper.speaking img{
  animation:skSpeakTavern 240ms ease-out;
}
@keyframes skSpeakTavern{
  0%{transform:scaleX(-1) translateY(0) rotate(0)}
  35%{transform:scaleX(-1) translateY(-2px) rotate(3deg)}
  70%{transform:scaleX(-1) translateY(0) rotate(-1deg)}
  100%{transform:scaleX(-1) translateY(0) rotate(0)}
}

/* ===== 店家皮影（左侧偏中，统一地面线；朝向右侧武松） ===== */
/* 右移约 10% 让店家不贴最左边，与武松形成对话关系。
   bottom 使用 --ground-y 与武松同一地面基准线。 */
.actor-shopkeeper{
  position:absolute;left:16%;bottom:var(--ground-y);
  width:13%;max-width:160px;z-index:2;
  pointer-events:none;
  animation:skSway 6s ease-in-out infinite;
  transform-origin:50% 100%;
}
.actor-shopkeeper img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.65));
  transform:scaleX(-1);   /* 原图朝左，翻转向右，面向武松 */
}
@keyframes skSway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
/* 店家说话：轻微前倾点头（皮影式快速摆姿态） */
.actor-shopkeeper.speaking img{
  animation:skSpeak 240ms ease-out;
}
@keyframes skSpeak{
  0%{transform:scaleX(-1) translateY(0) rotate(0)}
  35%{transform:scaleX(-1) translateY(-3px) rotate(-3deg)}
  70%{transform:scaleX(-1) translateY(0) rotate(1deg)}
  100%{transform:scaleX(-1) translateY(0) rotate(0)}
}

/* ===== 武松皮影：多状态 PNG 切换（统一 bottom 定位，脚踩地面） ===== */
/* 缩小约 15%，左移让武松更接近店家/店门，但仍保持右侧主角站位。
   bottom 使用 --ground-y 统一地面基准线，高于字幕区避免脚压字幕。 */
.actor-wusong{
  position:absolute;left:50%;bottom:var(--ground-y);
  height:40%;width:auto;z-index:3;
  pointer-events:none;
  animation:wsSway 5s ease-in-out infinite;
  transform-origin:50% 5%;
}
.actor-wusong .ws{
  height:100%;width:auto;display:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.72));
  animation:wsPop .12s ease-out;
}
@keyframes wsPop{
  from{opacity:0;transform:scale(.95) rotate(-2deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes wsSway{
  0%,100%{transform:rotate(-1deg)}
  50%{transform:rotate(1deg)}
}
/* 武松回应/动作：轻微抬身转向（皮影式快速摆姿态，不破坏 sway） */
.actor-wusong.acting{
  animation:wsAct 220ms ease-out;
}
@keyframes wsAct{
  0%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(-4px) rotate(-2deg)}
  100%{transform:translateY(0) rotate(0)}
}
/* 第四幕战斗动作：dodge 侧闪 / strike 挥棒 / observe 凝神 / retreat 后撤 / flail 乱打 / freeze 停滞。
   动作时长 600-900ms，让观众看清。retreat 改为后撤动画，不再套用 flail。 */
.puppet-stage.act4 .actor-wusong.act-dodge{animation:wsDodge 700ms ease-out}
.puppet-stage.act4 .actor-wusong.act-strike{animation:wsStrike 800ms ease-out}
.puppet-stage.act4 .actor-wusong.act-observe{animation:wsObserve 600ms ease-out}
.puppet-stage.act4 .actor-wusong.act-retreat{animation:wsRetreat 700ms ease-out}
.puppet-stage.act4 .actor-wusong.act-flail{animation:wsFlail 800ms ease-out}
.puppet-stage.act4 .actor-wusong.act-freeze{animation:wsFreeze 600ms ease-out}
@keyframes wsDodge{0%{transform:translateX(0)}40%{transform:translateX(18px) rotate(4deg)}100%{transform:translateX(0)}}
@keyframes wsStrike{0%{transform:translateX(0)}35%{transform:translateX(-12px) rotate(-5deg)}100%{transform:translateX(0)}}
@keyframes wsObserve{0%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-1deg)}100%{transform:translateY(0)}}
@keyframes wsRetreat{0%{transform:translateX(0)}45%{transform:translateX(16px) rotate(3deg)}100%{transform:translateX(0)}}
@keyframes wsFlail{0%{transform:rotate(0)}20%{transform:rotate(6deg)}40%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes wsFreeze{0%{transform:translateY(0)}50%{transform:translateY(1px)}100%{transform:translateY(0)}}

/* 默认：行走/出场 */
.puppet-stage .ws-walk{display:block}

/* drink → 举碗饮酒 */
.puppet-stage.drink .ws{display:none}
.puppet-stage.drink .ws-drink{display:block}

/* force → 挥棒 */
.puppet-stage.force .ws{display:none}
.puppet-stage.force .ws-swing{display:block}

/* drunk → 醉步 */
.puppet-stage.drunk .ws{display:none}
.puppet-stage.drunk .ws-drunk{display:block}

/* fallen → 倒地 */
.puppet-stage.fallen .ws{display:none}
.puppet-stage.fallen .ws-fallen{display:block}

/* dodge → 闪避（第四幕选择 dodge 后切换真实闪避图，不再走 force） */
.puppet-stage.dodge .ws{display:none}
.puppet-stage.dodge .ws-dodge{display:block}

/* ask / stay / idle → 行走 */
.puppet-stage.ask .ws{display:none}
.puppet-stage.ask .ws-walk{display:block}
.puppet-stage.stay .ws{display:none}
.puppet-stage.stay .ws-walk{display:block}

/* drunk 摇晃加剧 */
.puppet-stage.drunk .actor-wusong{animation:wsWobble 1.4s ease-in-out infinite}
@keyframes wsWobble{
  0%,100%{transform:rotate(-5deg) translateX(-3px)}
  50%{transform:rotate(5deg) translateX(3px)}
}

/* fallen 终态：横向图改回 width 基准并左移，避免倒地溢出戏台右边 */
.puppet-stage.fallen .actor-wusong{
  animation:none;
  height:auto;
  width:40%;        /* 横躺占 stage 宽 40% */
  left:30%;         /* 往左移，让倒地身体居中偏左、头朝左脚朝右 */
  bottom:8%;
}

/* intro 开演亮相：短促 drop-in */
.puppet-stage.intro .actor-wusong{animation:wsIntro .15s ease-out}
@keyframes wsIntro{
  0%{opacity:0;transform:translateY(-30px) scale(.9)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== 老虎皮影（默认隐藏，统一 bottom 定位；朝向左侧武松） ===== */
/* 高度基准缩放：与武松统一缩放策略，act4 单独放大到匹配体型。
   bottom 使用 --ground-y 统一地面基准线。 */
.actor-tiger{
  position:absolute;right:8%;bottom:var(--ground-y);
  height:30%;width:auto;z-index:3;
  pointer-events:none;display:none;
}
.actor-tiger.show{display:block}
.actor-tiger .tg{
  height:100%;width:auto;display:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.72));
  animation:tgPop .12s ease-out;
  transform:scaleX(-1);   /* 老虎置于左侧时翻转向右，面向右侧武松 */
}
.actor-tiger .tg-crouch{display:block}
@keyframes tgPop{
  from{opacity:0;transform:scaleX(-1) scale(.92)}
  to{opacity:1;transform:scaleX(-1) scale(1)}
}
/* 老虎姿态：通过 tiger-* 类切换真实 PNG，不再只靠位移。
   - tiger-roar：咆哮（出场/观察回合）
   - tiger-pounce：扑击（dodge/retreat/flail/freeze 时虎扑）
   - tiger-low：低扑（决胜回合）
   - tiger-fallen：倒地（结局） */
.puppet-stage.tiger-roar .actor-tiger .tg{display:none}
.puppet-stage.tiger-roar .actor-tiger .tg-roar{display:block}
.puppet-stage.tiger-pounce .actor-tiger .tg{display:none}
.puppet-stage.tiger-pounce .actor-tiger .tg-pounce{display:block}
.puppet-stage.tiger-low .actor-tiger .tg{display:none}
.puppet-stage.tiger-low .actor-tiger .tg-pounce-low{display:block}
.puppet-stage.tiger-fallen .actor-tiger .tg{display:none}
.puppet-stage.tiger-fallen .actor-tiger .tg-fallen{display:block}
/* 老虎扑击：短促前扑回弹（皮影式） */
.puppet-stage.act4 .actor-tiger.act-pounce{animation:tgPounce 700ms ease-out}
.puppet-stage.act4 .actor-tiger.act-hit{animation:tgHit 600ms ease-out}
.puppet-stage.act4 .actor-tiger.act-roar{animation:tgRoar 700ms ease-out}
@keyframes tgPounce{0%{transform:translateX(0)}45%{transform:translateX(20px)}100%{transform:translateX(0)}}
@keyframes tgHit{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(-12px) rotate(-4deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes tgRoar{0%{transform:translateY(0)}40%{transform:translateY(-4px) rotate(-2deg)}100%{transform:translateY(0)}}

/* ===== Flash 时间轴动画模式：JS 完全控制 transform，暂停 sway ===== */
/* tl-animating 类加在人物元素上时，暂停 sway/acting 等 CSS 动画，
   JS 通过 style.transform 控制位移/旋转/缩放做补间 */
.actor-wusong.tl-animating,
.actor-tiger.tl-animating,
.actor-shopkeeper.tl-animating{
  animation:none !important;
}
/* tl-animating 模式下，子 img 的 wsPop 动画也要暂停，避免干扰 */
.actor-wusong.tl-animating .ws,
.actor-tiger.tl-animating .tg{
  animation:none !important;
}
/* 戏台整体抖动（被虎扑/挥棒命中时） */
.puppet-stage.tl-shake{
  animation:tlShake 400ms ease-out;
}
@keyframes tlShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,2px)}
  40%{transform:translate(5px,-2px)}
  60%{transform:translate(-4px,3px)}
  80%{transform:translate(3px,-1px)}
}
/* 闪白（命中/虎扑瞬间） */
.puppet-stage.tl-flash::after{
  animation:tlFlash 300ms ease-out !important;
}
@keyframes tlFlash{
  0%{background:radial-gradient(ellipse at 50% 45%,rgba(255,240,200,.95),transparent 50%)}
  100%{background:radial-gradient(ellipse at 50% 45%,rgba(255,235,170,.2),transparent 60%)}
}
/* Canvas 光效层（火花/冲击波/碎屑） */
.fx-canvas{
  position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:6;pointer-events:none;
}

/* ===== 镜头虚拟层：JS 通过 transform 控制推拉摇移 ===== */
.camera-inner{
  position:absolute;inset:0;
  transform-origin:center center;
  will-change:transform;
  z-index:1;
}
/* 镜头层内的背景和人物保持原有 z-index 关系 */
.camera-inner .stage-bg{z-index:1}
.camera-inner .prop-banner{z-index:2}
.camera-inner .actor-shopkeeper{z-index:2}
.camera-inner .actor-wusong{z-index:3}
.camera-inner .actor-tiger{z-index:3}

/* ===== 增强震屏（武打片级 6px 抖动） ===== */
.puppet-stage.tl-shake{
  animation:tlShakeHard 400ms ease-out;
}
@keyframes tlShakeHard{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,3px)}
  25%{transform:translate(7px,-4px)}
  40%{transform:translate(-6px,5px)}
  55%{transform:translate(5px,-3px)}
  70%{transform:translate(-4px,2px)}
  85%{transform:translate(3px,-1px)}
}
/* 原始温和抖动保留为 tl-shake-soft */
.puppet-stage.tl-shake-soft{
  animation:tlShake 400ms ease-out;
}

/* ===== 幕布软切（分镜间换景用） ===== */
.puppet-stage.curtain-softcut .camera-inner{
  transition:opacity .3s ease;
  opacity:0;
}
.puppet-stage.curtain-softcut-open .camera-inner{
  opacity:1;
}

/* ===== 字幕打字机光标 ===== */
.sub-text .tw-cursor{
  display:inline-block;
  width:.6em;
  color:var(--gold-bright);
  animation:twBlink .6s steps(1) infinite;
  margin-left:1px;
}
@keyframes twBlink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

/* ===== 待机微动画（皮影活物感） ===== */
.actor-wusong.idle-breathe{
  animation:idleBreathe 3s ease-in-out infinite;
}
.actor-shopkeeper.idle-breathe{
  animation:idleBreatheShop 4s ease-in-out infinite;
}
.puppet-stage.act4 .actor-wusong.idle-breathe{
  animation:wsBattleReady 2.8s cubic-bezier(.65,0,.35,1) infinite;
}
.puppet-stage.act4 .actor-tiger.show:not(.tl-animating) .tg{
  animation:tigerStalk 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes idleBreathe{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  33%{transform:translateY(-1.5px) rotate(.4deg) scale(1.005)}
  66%{transform:translateY(0) rotate(-.3deg) scale(1)}
}
@keyframes idleBreatheShop{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-1px) rotate(.5deg)}
}
@keyframes wsBattleReady{
  0%,100%{transform:translate(0,0) rotate(0)}
  45%{transform:translate(-2px,-2px) rotate(-.6deg)}
  70%{transform:translate(0,-1px) rotate(.35deg)}
}
@keyframes tigerStalk{
  0%,100%{transform:scaleX(-1) translate(0,0) rotate(0)}
  45%{transform:scaleX(-1) translate(-2px,-2px) rotate(.6deg)}
  70%{transform:scaleX(-1) translate(0,-1px) rotate(-.35deg)}
}

/* ===== 黑场闪切（老虎出场电光效果） ===== */
.puppet-stage.tl-blackout::after{
  background:#000 !important;
  animation:tlBlackout 120ms ease-out !important;
}
@keyframes tlBlackout{
  0%{background:#000;opacity:1}
  100%{background:#000;opacity:0}
}

/* ===== 分段视频层（AI 影戏模式：预渲染 MP4，当前不用，保留架构） ===== */
/* 有预渲染 MP4 时显示，覆盖背景和人物层；无视频时 hidden 隐藏，走原 PNG 动画。
   z-index:4 在人物(3)之上、字幕/HUD(5)之下，让字幕和 HUD 仍可见。 */
.stage-video{
  position:absolute;
  left:0;top:0;width:100%;height:100%;
  object-fit:contain;
  z-index:4;
  background:transparent;
  pointer-events:none;
}
.stage-video[hidden]{display:none}
/* 视频播放时隐藏人物 PNG 层（避免穿帮） */
.puppet-stage.video-mode .actor-wusong,
.puppet-stage.video-mode .actor-tiger,
.puppet-stage.video-mode .actor-shopkeeper,
.puppet-stage.video-mode .stage-bg,
.puppet-stage.video-mode .prop-banner{
  opacity:0;
  transition:opacity .3s ease;
}

/* 舞台字幕条（戏台内部底部，承载所有剧情台词，自动换行） */
.stage-subtitle{
  position:absolute;left:50%;bottom:14px;
  transform:translateX(-50%);
  width:min(92%,760px);
  z-index:7;
  border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(10,5,4,.82),rgba(10,5,4,.92));
  backdrop-filter:blur(4px);
  padding:8px 18px;
  min-height:42px;
  max-height:38%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.stage-subtitle::before,.stage-subtitle::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--gold);
}
.stage-subtitle::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.stage-subtitle::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.sub-text{
  font-family:var(--font-kai);font-size:16px;color:var(--gold-bright);
  letter-spacing:.06em;text-align:center;line-height:1.55;
  text-shadow:0 0 10px rgba(243,210,122,.3);
  transition:opacity .3s;
  word-break:break-word;
  display:block;
  width:100%;
}
.stage-subtitle .sub-text{opacity:1}
.stage-subtitle.flash .sub-text{animation:subFlash .4s ease}
@keyframes subFlash{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

/* 店家/AI 识别框（戏台内部底部上方，半透明）：只显示短 AI 识别/状态提示，不承载剧情台词 */
.reply-box{
  position:absolute;left:14px;bottom:60px;
  z-index:6;
  max-width:min(42%,300px);
  border-left:3px solid var(--vermillion);
  padding:6px 12px;
  background:linear-gradient(90deg,rgba(200,51,42,.22),rgba(10,5,4,.55));
  backdrop-filter:blur(3px);
  min-height:30px;
}
.reply-label{
  font-family:var(--font-kai);font-size:13px;color:var(--vermillion);
  letter-spacing:.2em;margin-bottom:2px;
}
.reply-text{
  font-family:var(--font-kai);
  font-size:14px;color:var(--paper-dim);line-height:1.5;
  min-height:16px;transition:opacity .3s;
}

/* 识别倾向标签 */
.match-label{
  font-family:var(--font-kai);font-size:14px;letter-spacing:.08em;
  color:var(--paper-dim);margin-bottom:8px;padding-bottom:8px;
  border-bottom:1px dashed rgba(217,177,90,.22);
}
.match-label .ml-tag{
  display:inline-block;font-size:13px;letter-spacing:.12em;
  color:var(--gold-bright);
  background:rgba(200,51,42,.15);
  border:1px solid rgba(200,51,42,.35);
  padding:2px 9px;margin-right:6px;border-radius:2px;
}

/* 操作按钮区（戏台下方） */
.stage-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;align-items:center}
.stage-actions .btn{flex:1;min-width:140px}
/* 声音开关图标按钮 */
.stage-actions .icon-btn{
  flex:0 0 auto;min-width:auto;
  width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;
  border:1px solid var(--line);
  background:rgba(10,5,4,.5);
  transition:all .25s ease;
}
.stage-actions .icon-btn:hover{
  border-color:var(--gold);
  background:rgba(200,51,42,.25);
}
.stage-actions .icon-btn.muted{
  border-color:rgba(140,140,140,.5);
  opacity:.6;
}

/* ===== 白话解释（戏台外部信息条，桌面/移动端统一显示，不遮挡画面） ===== */
.stage-baihua-bar{
  border:1px solid rgba(217,177,90,.4);
  padding:12px 16px;
  background:linear-gradient(160deg,rgba(28,13,11,.7),rgba(10,5,4,.5));
  position:relative;
  margin-top:6px;
}
.stage-baihua-bar::before,.stage-baihua-bar::after{
  content:"";position:absolute;width:10px;height:10px;border:1px solid var(--gold);
}
.stage-baihua-bar::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.stage-baihua-bar::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.sbb-title{
  font-family:var(--font-kai);font-size:13px;color:var(--gold-bright);
  letter-spacing:.18em;margin-bottom:6px;
  padding-bottom:5px;border-bottom:1px dashed rgba(217,177,90,.3);
}
.sbb-body{
  font-family:var(--font-kai);
  font-size:14px;color:var(--paper);line-height:1.75;
  letter-spacing:.02em;
  word-break:break-all;
}

/* ===== 移动端白话解释（戏台下方信息条，桌面端隐藏） ===== */
.stage-baihua-mobile{
  display:none; /* 桌面端不显示，移动端由媒体查询开启 */
}

/* ===== 场景说明（戏台下方，横向辅助） ===== */
.scene-info{
  border:1px solid var(--line-strong);
  padding:16px 22px;
  background:linear-gradient(160deg,rgba(28,13,11,.7),rgba(10,5,4,.5));
  position:relative;
  margin-top:4px;
}
.scene-info .scene-label{
  font-family:var(--font-en-cap);font-size:11px;letter-spacing:.4em;
  color:var(--gold);margin-bottom:10px;
}
.scene-info p{
  font-family:var(--font-kai);
  font-size:15.5px;color:var(--paper);line-height:1.9;
  letter-spacing:.03em;
}
.scene-info::before,.scene-info::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--gold);
}
.scene-info::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.scene-info::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* 榜文情报卡 */
.flag-info{
  border:1px solid var(--vermillion);
  background:linear-gradient(160deg,rgba(200,51,42,.16),rgba(10,5,4,.5));
  padding:13px 18px;
}
.flag-info .fi-t{
  font-family:var(--font-kai);color:var(--vermillion);
  letter-spacing:.2em;margin-bottom:6px;font-size:15px;
}
.flag-info p{font-size:14.5px;color:var(--paper);line-height:1.85}

/* 提示文字 */
.act-hint{
  font-family:var(--font-kai);
  font-size:14px;color:var(--paper-dim);
  letter-spacing:.04em;line-height:1.8;
  padding:10px 14px;
  border-top:1px dashed rgba(217,177,90,.2);
}

/* ===== 用户回应弹窗 ===== */
.dialog-overlay{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,2,2,.82);
  backdrop-filter:blur(6px);
  padding:24px;
  animation:fadeIn .3s ease;
}
.dialog-overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.dialog{
  position:relative;
  max-width:480px;width:100%;
  border:2px solid var(--gold);
  background:radial-gradient(ellipse at 50% 0%,rgba(243,210,122,.14),transparent 60%),linear-gradient(160deg,#1c0d0b,#0a0504);
  padding:32px 28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.75),inset 0 0 60px rgba(0,0,0,.4);
  animation:dialogIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes dialogIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.dialog::before,.dialog::after{
  content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold);
}
.dialog::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.dialog::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.dialog-close{
  position:absolute;top:10px;right:14px;
  background:transparent;border:none;
  font-size:28px;line-height:1;color:var(--paper-dim);
  cursor:pointer;transition:color .2s;
  font-family:var(--font-kai);
}
.dialog-close:hover{color:var(--gold-bright)}
.dialog-title{
  font-family:var(--font-kai);font-size:22px;color:var(--gold-bright);
  letter-spacing:.14em;text-align:center;margin-bottom:8px;
  text-shadow:0 0 16px rgba(243,210,122,.3);
}
.dialog-hint{
  font-family:var(--font-kai);
  font-size:15px;color:var(--paper-dim);text-align:center;
  letter-spacing:.05em;margin-bottom:18px;line-height:1.7;
}
#userInput{
  width:100%;
  font-family:var(--font-song);font-size:16px;color:var(--paper);
  background:rgba(10,5,4,.6);
  border:1px solid var(--line-strong);
  padding:13px 16px;outline:none;
  transition:border .3s,box-shadow .3s;
}
#userInput:focus{border-color:var(--gold);box-shadow:0 0 16px rgba(243,210,122,.18)}
#userInput::placeholder{color:var(--paper-dim);opacity:.7}
/* 快捷示例按钮 */
.quick-examples{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qe-btn{
  font-family:var(--font-kai);font-size:14px;
  color:var(--gold-bright);
  background:rgba(200,51,42,.18);
  border:1px solid rgba(217,177,90,.4);
  padding:7px 14px;border-radius:20px;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.qe-btn:hover{
  background:rgba(200,51,42,.4);
  border-color:var(--gold-bright);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(200,51,42,.3);
}
.qe-btn:active{transform:translateY(0)}
.qe-btn:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(243,210,122,.22),0 4px 14px rgba(200,51,42,.35);
}
.inspire-box{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.inspire-box .chip{
  font-family:var(--font-kai);font-size:14px;color:var(--gold-bright);
  background:rgba(200,51,42,.12);
  border:1px dashed var(--gold);
  padding:7px 12px;cursor:pointer;transition:all .25s;
}
.inspire-box .chip:hover{background:rgba(200,51,42,.25);transform:translateY(-2px)}
.dialog-btns{display:flex;gap:12px;margin-top:16px}
.dialog-btns .btn{flex:1}

/* ===== 结局浮层 ===== */
.ending-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;background:rgba(5,2,2,.86);backdrop-filter:blur(6px);padding:24px;animation:fadeIn .5s ease}
.ending-overlay[hidden]{display:none}
.ending-card{max-width:560px;width:100%;border:2px solid var(--gold);background:radial-gradient(ellipse at 50% 0%,rgba(243,210,122,.16),transparent 60%),linear-gradient(160deg,#1c0d0b,#0a0504);padding:42px 38px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.4);position:relative}
.ending-card::before,.ending-card::after{content:"";position:absolute;width:30px;height:30px;border:2px solid var(--gold)}
.ending-card::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.ending-card::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.end-seal{width:70px;height:70px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#c8332a,#8e1c18);color:#f7e3b8;font-family:var(--font-kai);font-size:30px;border:2px solid rgba(247,227,184,.4);border-radius:6px;transform:rotate(5deg)}
.ending-card h3{font-family:var(--font-kai);font-size:32px;color:var(--gold-bright);letter-spacing:.14em;margin-bottom:14px}
.ending-card p{font-size:16px;color:var(--paper);line-height:2;margin-bottom:8px}
.ending-card .end-tip{margin-top:18px;font-family:var(--font-kai);font-size:15px;color:var(--vermillion);border-top:1px dashed var(--line);padding-top:16px}
.end-tip-label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:var(--gold);
  letter-spacing:.2em;
}
.end-routes{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}
.end-routes span{
  font-family:var(--font-kai);
  font-size:13.5px;
  color:var(--paper);
  background:rgba(217,177,90,.1);
  border:1px solid rgba(217,177,90,.28);
  padding:4px 10px;
}
.end-routes .er-label{
  color:var(--gold-bright);
  background:rgba(200,51,42,.16);
  border-color:rgba(200,51,42,.36);
}
.ending-card .btn{margin-top:24px}
/* 结局分享按钮组 */
.end-share{display:flex;gap:12px;margin-top:20px;justify-content:center;flex-wrap:wrap}
.end-share .btn{margin-top:0;font-size:14px;padding:10px 20px;flex:0 1 auto;min-width:auto}

/* toast */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);z-index:1400;background:rgba(10,5,4,.95);border:1px solid var(--gold);color:var(--gold-bright);font-family:var(--font-kai);font-size:15px;letter-spacing:.08em;padding:14px 24px;opacity:0;transition:all .4s;pointer-events:none;text-align:center;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 滚动入场动画 ===== */
.scene-info,.puppet-stage,.reply-box,.stage-subtitle,.stage-baihua-bar{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s ease,transform .9s ease;
}
.scene-info.in,.puppet-stage.in,.reply-box.in,.stage-subtitle.in,.stage-baihua-bar.in{
  opacity:1;transform:translateY(0);
}
/* .stage-subtitle 用 translateX(-50%) 居中，需单独写 transform 覆盖通用入场动画 */
.stage-subtitle{transform:translateX(-50%) translateY(20px)}
.stage-subtitle.in{transform:translateX(-50%) translateY(0)}
.stage-baihua-bar{transition-delay:.1s}
.reply-box{transition-delay:.1s}
.stage-subtitle{transition-delay:.05s}

/* ===== 响应式 ===== */
@media(max-width:1200px){
  .puppet-stage{min-height:auto}
  .actor-shopkeeper{max-width:200px}
}
@media(max-width:900px){
  section.act1{padding:80px 20px}
  .act1 .wrap{width:100%}
  .puppet-stage{aspect-ratio:4/3;min-height:auto}
  /* 4:3 竖屏改回 width 基准，避免高度过大 */
  .actor-wusong{left:48%;width:36%;height:auto}
  .actor-wusong .ws{width:100%;height:auto}
  .actor-tiger{width:28%;height:auto}
  .actor-tiger .tg{width:100%;height:auto}
  .actor-shopkeeper{width:22%}
  /* act4 / scene-mountain 也回退 width 基准 */
  .puppet-stage.scene-mountain .actor-wusong{left:34%;width:32%;height:auto}
  .puppet-stage.act4 .actor-wusong{left:54%;width:28%;height:auto}
  .puppet-stage.act4 .actor-tiger{left:10%;right:auto;width:30%;height:auto}
  .status-hud{top:10px;right:10px;padding:8px 10px;min-width:110px}
  .hud-label{font-size:14px}
  .sub-text{font-size:16px}
}
@media(max-width:560px){
  .puppet-stage{aspect-ratio:3/4}
  .actor-wusong{left:50%;width:46%;height:auto}
  .actor-shopkeeper{width:26%;left:12%}
  .prop-banner{width:18%}
  .status-hud{
    top:8px;right:8px;padding:6px 8px;min-width:96px;
    flex-direction:row;flex-wrap:wrap;gap:6px 10px;
  }
  .hud-item{grid-template-columns:18px 1fr 22px;gap:5px}
  .hud-label{font-size:14px}
  .hud-val{font-size:12px}
  .jiuqi{font-size:15px;padding:7px 5px;top:10px;left:10px}
  .sub-text{font-size:16px;letter-spacing:.06em}
  .reply-text{font-size:15px}
  .dialog{padding:28px 20px 22px}
  .dialog-title{font-size:20px}
  .dialog-hint{font-size:14px}
  #userInput{font-size:16px;padding:11px 14px}
  .qe-btn{font-size:13px;padding:6px 11px}
  .dialog-btns{flex-direction:row}
  .dialog-btns .btn{font-size:14px;padding:11px 14px}
  .ending-card{padding:32px 22px}
  .ending-card h3{font-size:26px}
  .stage-actions .btn{font-size:14px;padding:10px 14px}
}

/* ===================================================================
 * 多幕扩展样式（第二~五幕 + 命灯 + 三选项 + 结局卡）
 * =================================================================== */

/* ===== 跳转后首屏优化：压缩 actStage 标题区，让戏台主体进入第一屏 ===== */
#actStage{padding-top:36px;padding-bottom:36px}
#actStage .chap-mark{margin-bottom:6px}
#actStage .chap-title{font-size:clamp(24px,2.8vw,36px);margin-bottom:4px;letter-spacing:.12em}
#actStage .chap-en{font-size:13px;margin-bottom:12px;letter-spacing:.12em}
/* 桌面端：戏台+按钮尽量同屏可见 */
@media(min-width:961px){
  #actStage .theatre{margin-top:0}
  #actStage .puppet-stage{min-height:auto;max-height:calc(100vh - 200px)}
  #actStage .stage-actions{margin-top:8px}
}

/* ===== 红色幕布（开演前覆盖戏台，开演时左右拉开） ===== */
.stage-curtain{
  position:absolute;inset:0;z-index:10;
  pointer-events:auto;
  display:flex;
}
.stage-curtain .curtain-l,
.stage-curtain .curtain-r{
  position:absolute;top:0;bottom:0;
  width:50.5%;
  background:
    repeating-linear-gradient(180deg,
      rgba(120,20,18,.96) 0 8px,
      rgba(160,30,28,.96) 8px 16px,
      rgba(100,15,13,.96) 16px 24px),
    linear-gradient(90deg,#5a0e0c,#a01e1c,#5a0e0c);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.stage-curtain .curtain-l{left:0;transform:translateX(0)}
.stage-curtain .curtain-r{right:0;transform:translateX(0)}
.stage-curtain .curtain-tassel{
  position:absolute;left:50%;top:0;bottom:0;
  width:6px;transform:translateX(-50%);
  background:linear-gradient(180deg,#f3d27a,#8a6a22);
  box-shadow:0 0 12px rgba(243,210,122,.5);
  opacity:1;transition:opacity .4s ease;
}
/* 开演：幕布左右拉开 + 流苏淡出 + 按钮淡出 */
.puppet-stage.curtain-open .curtain-l{transform:translateX(-101%)}
.puppet-stage.curtain-open .curtain-r{transform:translateX(101%)}
.puppet-stage.curtain-open .curtain-tassel{opacity:0}
.puppet-stage.curtain-open .curtain-btn{opacity:0;pointer-events:none}
.puppet-stage.curtain-open .stage-curtain{pointer-events:none}
/* 合幕（再开一遍时） */
.puppet-stage.curtain-close .curtain-l{transform:translateX(0)}
.puppet-stage.curtain-close .curtain-r{transform:translateX(0)}
.puppet-stage.curtain-close .curtain-tassel{opacity:1}
.puppet-stage.curtain-close .curtain-btn{opacity:0;pointer-events:none}

/* 幕布正中的开演按钮（移到幕布下方，背景半透明，文字正常显示） */
.curtain-btn{
  position:absolute;left:50%;bottom:16%;
  transform:translateX(-50%);
  z-index:11;
  pointer-events:auto;
  font-size:20px!important;
  letter-spacing:.3em;
  padding:14px 38px;
  background:rgba(10,5,4,.55)!important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(243,210,122,.7);
  box-shadow:0 0 24px rgba(243,210,122,.35),0 6px 20px rgba(0,0,0,.5);
  transition:opacity .4s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
/* hover/active 必须保留 translateX(-50%)，否则会覆盖居中导致按钮乱跳 */
.curtain-btn:hover{
  background:rgba(200,51,42,.45)!important;
  border-color:var(--gold-bright);
  transform:translateX(-50%) translateY(-2px);
}
.curtain-btn:active{
  transform:translateX(-50%) translateY(0);
}

/* ===== 命灯 HUD ===== */
.hud-life{margin-top:6px;padding-top:8px;border-top:1px dashed rgba(217,177,90,.3)}
.hud-life[hidden]{display:none}
.hud-life .hud-label{grid-column:1}
.hud-life-dots{
  grid-column:2 / span 2;
  display:flex;gap:6px;align-items:center;
}
.hud-life-dots .life{
  width:12px;height:12px;border-radius:50%;
  background:rgba(80,40,30,.4);
  border:1px solid rgba(217,177,90,.4);
  transition:all .3s;
}
.hud-life-dots .life.on{
  background:radial-gradient(circle,#f3d27a,#c8332a);
  border-color:#f3d27a;
  box-shadow:0 0 8px rgba(243,210,122,.6);
}
.hud-life-dots .life.off{
  background:rgba(40,20,15,.5);
  border-color:rgba(100,60,40,.3);
  box-shadow:none;
}

/* 第四幕选择面板：在 1280×720 等较小视口下压缩间距，确保三按钮完整露出 */
@media (max-height: 800px) and (min-width: 961px){
  #actStage{padding-top:20px;padding-bottom:20px}
  #actStage .chap-mark{margin-bottom:4px}
  #actStage .chap-title{font-size:clamp(20px,2.4vw,30px);margin-bottom:2px}
  #actStage .chap-en{margin-bottom:6px}
  #actStage .puppet-stage{min-height:clamp(200px,24vh,300px)}
  #actStage .stage-actions{margin-top:4px;gap:8px}
  #actStage .stage-actions .btn{font-size:13px;padding:8px 12px}
  .choice-panel{margin-top:4px;padding:10px 14px}
  .choice-timer{margin-bottom:8px}
  .timer-txt{font-size:16px}
  .choice-btn{font-size:14px;padding:12px 10px}
  .scene-info{margin-top:6px;padding:8px 12px}
  .scene-info p{font-size:13px;line-height:1.5}
  .act-hint{margin-top:6px;font-size:12px}
}
@media (max-height: 720px) and (min-width: 961px){
  #actStage .puppet-stage{min-height:clamp(180px,22vh,260px)}
  .choice-btn{padding:10px 8px}
}
.choice-panel{
  border:1px solid var(--vermillion);
  background:linear-gradient(160deg,rgba(200,51,42,.14),rgba(10,5,4,.6));
  padding:14px 18px;
  margin-top:8px;
  animation:choiceIn .3s ease;
}
.choice-panel[hidden]{display:none}
@keyframes choiceIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 等待状态：开场字幕期间，隐藏倒计时与旧按钮，只显示提示文字 */
.choice-waiting{
  display:none;
  font-family:var(--font-kai);font-size:15px;letter-spacing:.15em;
  color:var(--gold-bright);text-align:center;
  padding:14px 8px;
  animation:choiceWaitPulse 1.8s ease-in-out infinite;
}
@keyframes choiceWaitPulse{0%,100%{opacity:.55}50%{opacity:1}}
.choice-panel.waiting .choice-timer,
.choice-panel.waiting .choice-opts{display:none}
.choice-panel.waiting .choice-waiting{display:block}

.choice-timer{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;
}
.timer-bar{
  flex:1;height:6px;
  background:rgba(217,177,90,.16);
  border:1px solid rgba(217,177,90,.3);
  overflow:hidden;border-radius:3px;
}
.timer-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#c8332a,#f3d27a);
  transition:width .1s linear;
}
.timer-txt{
  font-family:var(--font-en-cap);font-size:18px;
  color:var(--gold-bright);min-width:28px;text-align:right;
}
.choice-panel.urgent .timer-txt{color:var(--vermillion);animation:urgentPulse .3s ease infinite alternate}
@keyframes urgentPulse{from{opacity:.7}to{opacity:1}}

.choice-opts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.choice-btn{
  font-family:var(--font-kai);font-size:16px;letter-spacing:.1em;
  color:var(--gold-bright);
  background:linear-gradient(160deg,rgba(28,13,11,.8),rgba(10,5,4,.6));
  border:1px solid var(--gold);
  padding:16px 12px;cursor:pointer;
  transition:all .2s;
  position:relative;overflow:hidden;
}
.choice-btn:hover{
  background:linear-gradient(160deg,rgba(200,51,42,.2),rgba(28,13,11,.8));
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(200,51,42,.3);
}
.choice-btn:active{transform:translateY(0)}
.choice-btn:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(243,210,122,.22),0 6px 18px rgba(200,51,42,.35);
}
.choice-btn.picked{
  background:linear-gradient(160deg,rgba(200,51,42,.3),rgba(140,28,24,.5));
  border-color:var(--vermillion);
}
.choice-btn.disabled{
  opacity:.4;pointer-events:none;
}

/* ===== 结局卡：状态数值 + 关键选择 ===== */
.end-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:18px 0 14px;
  padding:14px 0;
  border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
}
.es-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.es-k{
  font-family:var(--font-kai);font-size:13px;color:var(--gold);
  letter-spacing:.1em;
}
.es-v{
  font-family:var(--font-en-cap);font-size:22px;color:var(--gold-bright);
}
.end-choices{
  margin:12px 0 8px;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.end-choices .ec-tag{
  font-family:var(--font-kai);font-size:12px;
  color:var(--paper);background:rgba(217,177,90,.12);
  border:1px solid rgba(217,177,90,.3);
  padding:4px 10px;border-radius:2px;
  letter-spacing:.05em;
}

/* ===== 多幕场景切换：隐藏/显示元素 ===== */
/* 山冈场景：隐藏店家、酒旗；显示山路/山林背景 */
.puppet-stage.scene-mountain .actor-shopkeeper,
.puppet-stage.scene-mountain .prop-banner{display:none}
.puppet-stage.scene-mountain .actor-wusong{left:38%;bottom:6%;height:50%}

/* 第四幕：老虎在左、武松在右，使用原素材朝向自然形成面对面对峙。 */
.puppet-stage.act4 .actor-tiger{display:block}
.puppet-stage.act4 .actor-wusong{left:56%;bottom:6%;height:50%}
.puppet-stage.act4 .actor-tiger{left:17%;right:auto;bottom:5%;height:38%}

@media(max-width:900px) and (min-width:561px){
  .puppet-stage.act4 .actor-wusong{left:54%;width:28%;height:auto}
  .puppet-stage.act4 .actor-tiger{left:10%;right:auto;width:30%;height:auto}
}

/* 第五幕结局：老虎按结局 key 切换姿态（hero/wise/rash 虎倒 fallen；drunk_down 虎仍站立 roar；stay_rewrite 虎不显示）
   武松姿态由 finalCls 控制（force/dodge/ask/fallen/stay） */
.puppet-stage.act5 .actor-tiger .tg{display:none}
.puppet-stage.act5.tiger-down .actor-tiger .tg-fallen{display:block}
.puppet-stage.act5.tiger-roar .actor-tiger .tg-roar{display:block}
.puppet-stage.act5 .actor-tiger{display:block}
/* 留宿改写：回客店，隐藏老虎 */
.puppet-stage.end-stay .actor-tiger{display:none}

/* 响应式：三选项面板 + 移动端标题压缩 + 白话解释改横条 */
@media(max-width:560px){
  .choice-opts{grid-template-columns:1fr;gap:8px}
  .choice-btn{padding:13px 10px;font-size:15px}
  .end-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .es-v{font-size:18px}
  /* 移动端压缩第一幕标题，避免占满一屏 */
  #actStage{padding-top:40px;padding-bottom:40px}
  #actStage .chap-mark{margin-bottom:6px;gap:10px}
  #actStage .chap-mark .num{font-size:36px}
  #actStage .chap-mark .ord{font-size:10px;letter-spacing:.4em}
  #actStage .chap-title{font-size:22px;line-height:1.2;margin-bottom:4px;letter-spacing:.08em}
  #actStage .chap-en{font-size:12px;margin-bottom:16px;letter-spacing:.08em}
  /* 移动端隐藏酒旗装饰 */
  .jiuqi{display:none}
  /* 戏台内白话解释已移至戏台外部 bar，移动端也用外部 bar 显示，旧的 mobile 版本隐藏避免重复 */
  .stage-baihua-mobile{display:none}
  /* 字幕条保持底部居中 */
  .stage-subtitle{width:92%;font-size:14px;padding:7px 12px;bottom:10px}
  .sub-text{font-size:14px}
  /* 店家回应在字幕条上方右侧，不与字幕重叠 */
  .reply-box{
    left:auto;right:8px;bottom:62px;
    max-width:min(46%,170px);
    padding:6px 10px;
  }
  .reply-label{font-size:10px;letter-spacing:.15em;margin-bottom:2px}
  .reply-text{font-size:11.5px;line-height:1.5}
  /* 状态 HUD 留在右上角并缩小 */
  .status-hud{top:8px;right:8px;min-width:104px;padding:7px 9px;gap:5px}
  .hud-label{font-size:13px}
  .hud-val{font-size:11px}
  .hud-item{gap:6px}
  /* 移动端皮影人物进一步缩小（width 基准 + height:auto 覆盖桌面端高度基准） */
  .actor-wusong{width:34%;max-width:240px;height:auto}
  .actor-shopkeeper{width:24%;max-width:180px}
  .actor-tiger{width:30%;max-width:200px;height:auto}
  /* act4 / scene-mountain 移动端也用 width 基准 */
  .puppet-stage.scene-mountain .actor-wusong{width:36%;height:auto}
  .puppet-stage.act4 .actor-wusong{left:52%;width:32%;height:auto}
  .puppet-stage.act4 .actor-tiger{left:8%;right:auto;width:34%;height:auto}
  /* 移动端全屏 header 压缩 */
  .fs-header{padding:8px 12px;gap:10px}
  .fs-logo{width:38px;height:38px}
  .fs-proj{font-size:15px;letter-spacing:.16em}
  .fs-play{font-size:11px}
  .fs-exit{font-size:12px;padding:7px 12px;letter-spacing:.12em}
  .theatre:fullscreen,.theatre:-webkit-full-screen,.theatre.zoomed{padding:12px 14px}
  .theatre:fullscreen .puppet-stage,.theatre:-webkit-full-screen .puppet-stage,.theatre.zoomed .puppet-stage{min-height:50vh}
}

/* ===== 全屏放大模式 ===== */
/* 全屏顶部 header：含 logo + 项目名 + 剧目名 + 退出按钮（默认隐藏，全屏时显示） */
.fs-header{
  display:none;
  align-items:center;justify-content:space-between;
  gap:18px;
  padding:10px 18px;
  background:linear-gradient(180deg,rgba(10,5,4,.88),rgba(10,5,4,.6));
  border:1px solid var(--line-strong);
  border-radius:2px;
  flex:0 0 auto;
}
.fs-header.show{display:flex}
.fs-brand{display:flex;align-items:center;gap:14px;min-width:0}
.fs-logo{
  width:48px;height:48px;object-fit:cover;
  border-radius:50%;
  border:1px solid var(--gold);
  box-shadow:0 0 0 2px rgba(0,0,0,.4);
  flex:0 0 auto;
}
.fs-brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.fs-proj{
  font-family:var(--font-kai);font-size:18px;color:var(--gold-bright);
  letter-spacing:.22em;
}
.fs-play{
  font-family:var(--font-kai);font-size:13px;color:var(--paper);
  letter-spacing:.14em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fs-exit{flex:0 0 auto;font-size:14px;padding:9px 16px;letter-spacing:.18em}

/* 1) 浏览器原生 Fullscreen API（theatreEl.requestFullscreen） */
.theatre:fullscreen,
.theatre:-webkit-full-screen{
  background:radial-gradient(ellipse at 50% 40%,rgba(30,14,12,.98),rgba(5,2,2,.99));
  padding:18px 24px 20px;
  overflow:auto;
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:12px;
  width:100vw;height:100vh;
}
.theatre:fullscreen .puppet-stage,
.theatre:-webkit-full-screen .puppet-stage{
  min-height:56vh;aspect-ratio:16/9;max-width:1400px;margin:0 auto;width:100%;flex:0 1 auto;
}
/* 全屏模式：隐藏白话解释、榜文、提示等非舞台元素，
   保留舞台、字幕（在舞台内部）、fs-header 退出按钮、声音按钮、场景说明、第四幕决策面板 */
.theatre:fullscreen .stage-baihua-bar,
.theatre:fullscreen .stage-baihua-mobile,
.theatre:fullscreen .bangwen-slot,
.theatre:fullscreen .act-hint,
.theatre:-webkit-full-screen .stage-baihua-bar,
.theatre:-webkit-full-screen .stage-baihua-mobile,
.theatre:-webkit-full-screen .bangwen-slot,
.theatre:-webkit-full-screen .act-hint{
  display:none !important;
}
/* 全屏时 stage-actions 只保留声音按钮，其余控制按钮隐藏 */
.theatre:fullscreen .stage-actions .btn:not(#btnSound),
.theatre:-webkit-full-screen .stage-actions .btn:not(#btnSound){
  display:none !important;
}
.theatre:fullscreen .stage-actions,
.theatre:-webkit-full-screen .stage-actions{
  justify-content:flex-end;margin-top:4px;
}
/* 全屏模式下场景说明与戏台同宽对齐 */
.theatre:fullscreen .scene-info,
.theatre:-webkit-full-screen .scene-info{
  max-width:1400px;margin-left:auto;margin-right:auto;width:100%;
}
/* 全屏模式下第四幕决策面板与戏台同宽对齐 */
.theatre:fullscreen .choice-panel,
.theatre:-webkit-full-screen .choice-panel{
  max-width:1400px;margin-left:auto;margin-right:auto;width:100%;
}
/* 2) 降级：旧 CSS 伪全屏（Fullscreen API 不可用时） */
.theatre.zoomed{
  position:fixed;inset:0;z-index:1500;
  background:radial-gradient(ellipse at 50% 40%,rgba(30,14,12,.98),rgba(5,2,2,.99));
  padding:18px 24px 20px;
  overflow:auto;
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:12px;
  animation:zoomIn .35s ease;
}
@keyframes zoomIn{from{opacity:0}to{opacity:1}}
.theatre.zoomed .puppet-stage{
  min-height:56vh;
  aspect-ratio:16/9;
  max-width:1400px;
  margin:0 auto;
  width:100%;
  flex:0 1 auto;
}
/* 伪全屏同样：只保留舞台、字幕、退出全屏、声音按钮、场景说明、第四幕决策面板 */
.theatre.zoomed .stage-baihua-bar,
.theatre.zoomed .stage-baihua-mobile,
.theatre.zoomed .bangwen-slot,
.theatre.zoomed .act-hint{
  display:none !important;
}
.theatre.zoomed .stage-actions .btn:not(#btnSound){
  display:none !important;
}
.theatre.zoomed .stage-actions{
  justify-content:flex-end;margin-top:4px;
}
/* 伪全屏模式下场景说明与戏台同宽对齐 */
.theatre.zoomed .scene-info{
  max-width:1400px;margin-left:auto;margin-right:auto;width:100%;
}
/* 伪全屏模式下第四幕决策面板与戏台同宽对齐 */
.theatre.zoomed .choice-panel{
  max-width:1400px;margin-left:auto;margin-right:auto;width:100%;
}
/* 全屏/伪全屏时隐藏舞台外部的"全屏放大"按钮，避免与 fs-header 退出按钮重复 */
.theatre:fullscreen ~ .stage-actions #btnZoomStage,
.theatre:-webkit-full-screen ~ .stage-actions #btnZoomStage,
.theatre.zoomed ~ .stage-actions #btnZoomStage,
.theatre:fullscreen #btnZoomStage,
.theatre:-webkit-full-screen #btnZoomStage,
.theatre.zoomed #btnZoomStage{
  display:none !important;
}

/* ===== 无障碍：尊重 prefers-reduced-motion，关闭皮影装饰动画与短动作 ===== */
@media (prefers-reduced-motion: reduce){
  .actor-shopkeeper,
  .actor-wusong,
  .actor-tiger .tg,
  .puppet-stage.drunk .actor-wusong,
  .puppet-stage.intro .actor-wusong,
  .actor-wusong.acting,
  .puppet-stage.act4 .actor-wusong.act-dodge,
  .puppet-stage.act4 .actor-wusong.act-strike,
  .puppet-stage.act4 .actor-wusong.act-observe,
  .puppet-stage.act4 .actor-wusong.act-retreat,
  .puppet-stage.act4 .actor-wusong.act-flail,
  .puppet-stage.act4 .actor-wusong.act-freeze,
  .puppet-stage.act4 .actor-tiger.act-pounce,
  .puppet-stage.act4 .actor-tiger.act-hit,
  .puppet-stage.act4 .actor-tiger.act-roar,
  .actor-shopkeeper.speaking img{
    animation:none !important;
  }
  .stage-bg .scene-img{animation:none !important}
  .puppet-stage::after{animation:none !important}
}