/* 仅样片加载。普通桌面和首页保持原有布局。 */
.mobile-experience-entry,.mobile-experience-toolbar,.mobile-orientation-hint{display:none}
.jyg-mobile .mobile-experience-entry{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0}
.mobile-experience-entry span{font-family:var(--font-kai);font-size:13px;color:var(--paper-dim)}
.jyg-mobile .dialog-overlay,.jyg-mobile .ending-overlay{padding:60px 8px 8px;align-items:flex-start;overflow:auto}
.jyg-mobile .dialog,.jyg-mobile .ending-card{max-height:calc(100vh - 76px);overflow:auto}
.jyg-mobile .ending-card::before{top:0;left:0}
.jyg-mobile .ending-card::after{bottom:0;right:0}
@supports(height:100dvh){.jyg-mobile .dialog,.jyg-mobile .ending-card{max-height:calc(100dvh - 76px)}}
body.mobile-experience-open .page-nav,body.mobile-experience-open .side-deco{visibility:hidden}
.mobile-experience-host{z-index:1600 !important}

.mobile-experience-active{
  --experience-height:100vh;
  --experience-top:0px;
  box-sizing:border-box;
  position:fixed;inset:auto 0 auto 0;top:var(--experience-top);
  z-index:1600;width:100%;height:var(--experience-height);
  max-width:none !important;margin:0 !important;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at 50% 40%,#26120d,#090403);
  overflow:auto;overscroll-behavior:contain;
}
@supports(height:100dvh){.mobile-experience-active{--experience-height:100dvh}}
.mobile-experience-active .mobile-experience-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;flex:0 0 auto;font-family:var(--font-kai);color:var(--gold-bright);
}
.mobile-experience-active .btn{font-size:14px;padding:8px 12px;min-height:44px;letter-spacing:.08em}
.mobile-experience-active.experience-portrait .mobile-orientation-hint{
  display:block;flex:0 0 auto;font-size:14px;line-height:1.6;color:var(--gold-bright);
  margin:0;padding:6px 10px;border:1px solid var(--line-strong);
}
.craft-experience.mobile-experience-active{display:flex;flex-direction:column;gap:6px;overflow:hidden}
.craft-experience.mobile-experience-active .demo-layout{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px;
  flex:1;min-height:0;margin:0;
}
.craft-experience.mobile-experience-active .demo-stage{
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  gap:4px;min-height:0;background:transparent;box-shadow:none;overflow:visible;
}
.craft-experience.mobile-experience-active .screen{
  width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;
  border-bottom:1px solid var(--line);overflow:hidden;
}
.craft-experience.mobile-experience-active .demo-progress{min-width:0;padding:4px 0;justify-content:space-between;min-height:0}
.craft-experience.mobile-experience-active .demo-progress .dot .ball{width:28px;height:28px;font-size:13px}
.craft-experience.mobile-experience-active .demo-progress .dot .lbl{display:none}
.craft-experience.mobile-experience-active .demo-progress .seg{height:4px;flex:0 1 4px}
.craft-experience.mobile-experience-active .stage-caption{
  position:static;display:flex;align-items:center;gap:10px;margin:0;
  padding:3px 8px;max-width:100%;text-align:left;min-height:24px;
}
.craft-experience.mobile-experience-active .cap-row{justify-content:flex-start;gap:6px}
.craft-experience.mobile-experience-active .stage-caption .cn{font-size:14px;letter-spacing:.08em}
.craft-experience.mobile-experience-active .stage-caption .en{display:none}
.craft-experience.mobile-experience-active .prog-bar{flex:1;width:auto;margin:0}
.craft-experience.mobile-experience-active .prog-txt{min-width:36px;font-size:11px;white-space:nowrap}
.craft-experience.mobile-experience-active .demo-narr{display:none}
.craft-experience.mobile-experience-active .demo-ctrl{margin:0;padding:0 4px 4px;gap:6px;flex-wrap:nowrap}
.craft-experience.mobile-experience-active .demo-ctrl .btn{min-width:0;font-size:12px;padding:6px 10px}
.craft-experience.mobile-experience-active .tool-hint{
  top:8px;left:8px;right:auto;max-width:170px;max-height:calc(100% - 16px);
  padding:6px 8px;gap:4px;flex-direction:row;align-items:flex-start;
}
.craft-experience.mobile-experience-active .tool-hint::after{display:none}
.craft-experience.mobile-experience-active .tool-hint .th-cn{writing-mode:horizontal-tb;font-size:12px;line-height:1.5;letter-spacing:.03em;max-height:none}
.craft-experience.mobile-experience-active .tool-hint .th-icon{font-size:12px;flex:0 0 auto}
.craft-experience.mobile-experience-active .palette{
  top:auto;bottom:8px;right:8px;left:auto;transform:none;min-width:0;
  width:190px;flex-direction:row;flex-wrap:wrap;gap:5px;padding:6px;
}
.craft-experience.mobile-experience-active .paint-guide{flex:0 0 100%;width:100%;padding:0 0 4px}
.craft-experience.mobile-experience-active .paint-guide b,.craft-experience.mobile-experience-active .paint-guide span{font-size:11px}
.craft-experience.mobile-experience-active .palette .dish{width:44px;height:44px}
.craft-experience.mobile-experience-active .palette .dish .sw{width:16px;height:16px}
.craft-experience.mobile-experience-active .palette .dish .lb{font-size:10px}
.craft-experience.mobile-experience-active .craft-ref-img{max-width:54px;max-height:62px;top:8px;right:8px;left:auto;bottom:auto}
.craft-experience.mobile-experience-active .drag-banner{bottom:6px;font-size:9px;padding:3px 6px;white-space:nowrap}
.craft-experience.mobile-experience-active.experience-portrait .demo-ctrl{flex-wrap:wrap}

.theatre.mobile-experience-active{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px}
.theatre.mobile-experience-active .fs-header{display:flex;position:relative;z-index:1800;min-height:44px;padding:0 8px;flex-shrink:0}
.theatre.mobile-experience-active .fs-logo{width:32px;height:32px}
.theatre.mobile-experience-active .fs-proj{font-size:14px;letter-spacing:.08em}
.theatre.mobile-experience-active .fs-play{font-size:11px}
.theatre.mobile-experience-active .fs-brand{gap:8px}
.theatre.mobile-experience-active .puppet-stage{
  aspect-ratio:16/7;width:min(100%,calc((var(--experience-height) - 116px) * 16 / 7));
  min-height:0;max-height:none;flex:0 0 auto;margin:0 auto;
}
.theatre.mobile-experience-active.experience-portrait .puppet-stage{width:100%;aspect-ratio:16/7}
.theatre.mobile-experience-active .stage-baihua-bar,
.theatre.mobile-experience-active .stage-baihua-mobile,
.theatre.mobile-experience-active .bangwen-slot,
.theatre.mobile-experience-active .act-hint,
.theatre.mobile-experience-active .scene-info{display:none !important}
.theatre.mobile-experience-active .stage-actions{margin:0;justify-content:space-between;flex:0 0 auto;gap:6px}
.theatre.mobile-experience-active .stage-actions #btnZoomStage{display:none !important}
.theatre.mobile-experience-active .stage-actions #btnRespond,
.theatre.mobile-experience-active .stage-actions #btnReplayStage,
.theatre.mobile-experience-active .stage-actions #btnSkipIntro{font-size:12px;min-width:0;flex:0 1 auto}
.theatre.mobile-experience-active .stage-actions #btnSound{min-width:44px;min-height:44px;flex:0 0 auto}
.theatre.mobile-experience-active .choice-panel{padding:8px;margin:0;flex:0 0 auto}
.theatre.mobile-experience-active .choice-timer{margin-bottom:6px}
.theatre.mobile-experience-active .choice-opts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.theatre.mobile-experience-active .choice-btn{min-height:44px;padding:8px;font-size:14px}
.theatre.mobile-experience-active .dialog-overlay,
.theatre.mobile-experience-active .ending-overlay{position:absolute;inset:60px 0 0;z-index:1700;padding:8px;overflow:auto;align-items:flex-start}
.theatre.mobile-experience-active .dialog{box-sizing:border-box;max-height:calc(var(--experience-height) - 76px);overflow:auto;margin:auto;padding:28px 16px 14px}
.theatre.mobile-experience-active .ending-card{box-sizing:border-box;max-height:calc(var(--experience-height) - 76px);overflow:auto;padding:24px 16px}
.theatre.mobile-experience-active .ending-card::before{top:0;left:0}
.theatre.mobile-experience-active .ending-card::after{bottom:0;right:0}
.theatre.mobile-experience-active .end-share{flex-wrap:wrap}
.theatre.mobile-experience-active .actor-wusong{width:auto;height:56%;max-width:none}
.theatre.mobile-experience-active .actor-wusong .ws{height:100%;width:auto}
.theatre.mobile-experience-active .puppet-stage.scene-tavern .actor-wusong{height:43%}
.theatre.mobile-experience-active .actor-tiger{width:auto;height:55%;max-width:none}
.theatre.mobile-experience-active .actor-tiger .tg{height:100%;width:auto}
.theatre.mobile-experience-active .actor-shopkeeper{width:auto;height:39%;max-width:none}
.theatre.mobile-experience-active .actor-shopkeeper img{height:100%;width:auto}
.theatre.mobile-experience-active .stage-subtitle{bottom:6px;font-size:14px;padding:5px 10px;max-width:90%}
.theatre.mobile-experience-active .stage-subtitle .sub-text{font-size:14px;line-height:1.45}
.theatre.mobile-experience-active .status-hud{top:6px;right:6px;padding:5px 7px;min-width:100px;gap:3px}
.theatre.mobile-experience-active .hud-label{font-size:12px}
.theatre.mobile-experience-active .reply-box{font-size:11px;max-width:180px;bottom:46px}
.theatre.mobile-experience-active .reply-text{font-size:11px}

/* 手机真正横放时，普通舞台也恢复宽幅；人物继续按舞台高度取比例。 */
@media(orientation:landscape){
  .jyg-mobile #actStage .wrap,.jyg-mobile #actStage .theatre{width:100%;max-width:none}
  .jyg-mobile #actStage .puppet-stage{aspect-ratio:16/7;min-height:0;max-height:none}
  .jyg-mobile #actStage .theatre.mobile-experience-active .puppet-stage{width:min(100%,calc((var(--experience-height) - 116px) * 16 / 7))}
  .jyg-mobile .puppet-stage .actor-wusong{width:auto;height:56%;max-width:none}
  .jyg-mobile .puppet-stage .actor-wusong .ws{height:100%;width:auto}
  .jyg-mobile .puppet-stage.scene-tavern .actor-wusong{width:auto;height:43%}
  .jyg-mobile .puppet-stage .actor-tiger{width:auto;height:55%;max-width:none}
  .jyg-mobile .puppet-stage .actor-tiger .tg{height:100%;width:auto}
  .jyg-mobile .puppet-stage .actor-shopkeeper{width:auto;height:39%;max-width:none}
  .jyg-mobile .puppet-stage .actor-shopkeeper img{height:100%;width:auto}
  .jyg-mobile .stage-subtitle{bottom:6px;font-size:14px;padding:5px 10px;max-width:90%}
  .jyg-mobile .stage-subtitle .sub-text{font-size:14px;line-height:1.45}
  .jyg-mobile .status-hud{top:6px;right:6px;padding:5px 7px;min-width:100px;gap:3px}
  .jyg-mobile .hud-label{font-size:12px}
  .jyg-mobile .reply-box{font-size:11px;max-width:180px;bottom:46px}
  .jyg-mobile .reply-text{font-size:11px}
  .jyg-mobile #actStage .theatre.mobile-experience-active.experience-choice .puppet-stage{width:min(100%,calc((var(--experience-height) - 240px) * 16 / 7))}
}
@media(max-width:360px){
  .mobile-experience-entry{flex-direction:column}
  .theatre.mobile-experience-active .fs-proj{font-size:12px}
  .theatre.mobile-experience-active .fs-logo{display:none}
}