/* r56: one immutable 9:16 logical stage with a real portrait composition.
   Existing mother art and UI keep their proportions. The tall scene mothers
   use their full vertical source range; controls are distributed in bands. */
:root{
  --stage-width:780px;
  --stage-height:1386.6666667px;
}
/* Recovery controls must stay readable while their decorative fonts load. */
@font-face{font-family:PaperCJK;src:url('../assets/fonts/noto-serif-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PaperCJK;src:url('../assets/fonts/noto-serif-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:PaperFallback;src:url('../assets/fonts/ui-cjk.ttf') format('truetype');font-display:swap}
@font-face{font-family:PaperBrush;src:url('../assets/fonts/ma-shan-zheng.ttf') format('truetype');font-weight:400;font-display:swap}

#stage{
  width:var(--stage-width);
  height:var(--stage-height);
  background-color:var(--paper);
  background-image:url('../assets/images/paper-texture.png');
  background-position:center top;
  background-size:780px 1080px;
  background-repeat:repeat-y;
}
#stage[data-tall=true]::after{display:none}
#stage #scenery,
#stage[data-tall=true] #scenery{
  inset:0;
  width:var(--stage-width);
  height:var(--stage-height);
  bottom:auto;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
}
#screen,#overlay,#feedback{height:var(--stage-height)}
#feedback{width:var(--stage-width)}

/* Home and map now use the complete portrait stage instead of centring the
   legacy 1080-high composition inside it. */
#stage[data-mode=home] #screen,
#stage[data-mode=map] #screen{
  inset:0 auto auto 0;
  width:780px;
  height:var(--stage-height);
  transform:none;
}
#stage[data-mode=home] #scenery{background-position:center center!important}
#stage[data-mode=map] #scenery,
#stage[data-mode=playing] #scenery,
#stage[data-mode=result] #scenery{
  background-position:center center!important;
  background-size:cover!important;
}

/* A single regenerated 9:16 mother places the landscape at mid-screen and
   naturally continues into the lower action area. No composited paper bands. */
#stage[data-mode=home] .home-mother-art{left:0;top:0;width:780px;height:var(--stage-height);object-fit:cover;mask-image:none}
#stage[data-mode=home] #screen::after{display:none}
#stage[data-mode=home] .home-mother-art,
#stage[data-mode=home] .continue-badge,
#stage[data-mode=home] .home-actions{z-index:1}
#stage[data-mode=home] .continue-badge{top:1032px;background:transparent;text-shadow:0 1px 3px #fff5da,0 0 4px #fff5da}
#stage[data-mode=home] .home-actions{top:1050px}
#stage[data-mode=home] .home-tools{margin-top:14px;gap:40px}

/* Map: nodes follow the same mountain route but use the full vertical source
   range. The detail scroll and both actions own the lower third. */
#stage[data-mode=map] #scenery{background-image:url('../assets/images/map-portrait-r56.png')!important}
#stage[data-mode=map] .map-mother-heading>img{
  mask-image:linear-gradient(to right,transparent 155px,#000 180px,#000 565px,transparent 590px),linear-gradient(to bottom,#000 170px,transparent 190px);
  mask-composite:intersect;
}
#stage[data-mode=map] .map-detail{top:1005px}
#stage[data-mode=map] .map-enter{top:1250px}
#stage[data-mode=map] .mother-map-back{top:1257px}

/* Result: distribute title, scroll, and actions across the three portrait
   bands. Individual artwork is never stretched. */
#stage[data-mode=result] .result-mother-heading,
#stage[data-mode=result] .result-title,
#stage[data-mode=result] .result-sub,
#stage[data-mode=result] .result-scroll,
#stage[data-mode=result] .result-buttons{
  transform:none;
}
#stage[data-tall=true][data-mode=result] .result-mother-heading,
#stage[data-tall=true][data-mode=result] .result-title,
#stage[data-tall=true][data-mode=result] .result-sub,
#stage[data-tall=true][data-mode=result] .result-scroll,
#stage[data-tall=true][data-mode=result] .result-buttons{transform:none}
#stage[data-mode=result] .result-scroll{top:300px}
#stage[data-mode=result] .result-buttons{top:1015px}
#stage[data-mode=result] #screen::after{display:none}
#stage[data-mode=result] .result-mother-heading,
#stage[data-mode=result] .result-title,
#stage[data-mode=result] .result-sub,
#stage[data-mode=result] .result-scroll,
#stage[data-mode=result] .result-buttons{z-index:1}

/* Gameplay keeps its square board and top HUD at their approved geometry.
   The added portrait area is used for the live contract and tool controls. */
#stage[data-mode=playing] #scenery{background-position:center center!important}
#stage[data-tall=true][data-mode=playing] .hud-pause{left:680px;top:12px}
#stage[data-tall=true][data-mode=playing] .fold-console{
  left:122px;
  top:880px;
  width:536px;
  height:84px;
  display:grid;
  grid-template-columns:120px 90px 72px 1fr;
  align-items:center;
  gap:12px;
  transform:none;
}
#stage[data-mode=playing] .fold-ribbon{display:none}
#stage[data-mode=playing] .fold-sequence{height:60px;flex-direction:row;padding:0;gap:3px}
#stage[data-mode=playing] .fold-cast,#stage[data-mode=playing] .fold-axis{margin:0}
#stage[data-mode=playing] .fold-console>p{width:100%;margin:0;white-space:normal;font-size:19px;line-height:23px;text-align:left}
#stage[data-tall=true][data-mode=playing] .contract-path{
  left:52px;
  top:972px;
  width:676px;
  height:232px;
  padding:16px 28px 14px;
  display:block;
  border:0;
  border-radius:26px;
  background:linear-gradient(#f8eedeee,#efe0c6f2);
  box-shadow:inset 0 0 0 3px #376d57,inset 0 0 0 9px #d9c79f,0 12px 26px #243a2f29;
  overflow:visible;
}
#stage[data-tall=true][data-mode=playing] .contract-path::before,
#stage[data-tall=true][data-mode=playing] .contract-path::after{
  content:'';
  position:absolute;
  top:-10px;
  bottom:-10px;
  width:30px;
  border:4px solid #9b7040;
  border-radius:16px;
  background:#2f7056;
  box-shadow:inset 0 0 0 5px #d7c08a;
}
#stage[data-tall=true][data-mode=playing] .contract-path::before{left:-16px}
#stage[data-tall=true][data-mode=playing] .contract-path::after{right:-16px}
#stage[data-mode=playing] .contract-path>h3{
  width:100%;
  margin:0 0 8px;
  justify-content:space-between;
  font-size:26px;
  line-height:1.15;
}
#stage[data-mode=playing] .contract-path>h3 em{font-size:19px}
#stage[data-mode=playing] .contract-route{height:76px;gap:7px}
#stage[data-mode=playing] .contract-stage{
  grid-template-columns:28px 38px minmax(112px,1fr) 43px;
  gap:5px;
  min-width:0;
  height:72px;
  padding:6px 8px;
  border:1px solid #aa9064;
  border-radius:14px;
  background:#fbf0dc;
}
#stage[data-mode=playing] .contract-stage.active{
  border:3px solid #2c7759;
  box-shadow:0 0 0 3px #e4d4a9,0 0 14px #376f5260;
}
#stage[data-mode=playing] .contract-stage b{display:block;font-size:19px;line-height:1.1;white-space:nowrap}
#stage[data-mode=playing] .contract-stage small{font-size:16px;line-height:1.2}
#stage[data-mode=playing] .contract-seal{width:27px;height:27px;font-size:17px}
#stage[data-mode=playing] .contract-stage .contract-gem{width:36px;height:36px}
#stage[data-mode=playing] .contract-stage .sigil-icon{width:42px;height:42px;transform:scale(.7)}
#stage[data-mode=playing] .contract-thread{font-size:16px}
#stage[data-mode=playing] .mobile-task-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:9px;
}
#stage[data-mode=playing] .mobile-task-summary p{
  min-width:0;
  margin:0;
  padding:6px 10px 0;
  border-top:1px solid #af9468;
  font-size:16px;
  line-height:1.2;
  text-align:left;
}
#stage[data-mode=playing] .mobile-task-summary b{display:block;font-size:19px;line-height:1.15}
#stage[data-mode=playing] .mobile-task-summary span{display:block;margin-top:2px;white-space:nowrap}

#stage[data-mode=playing] .hud-helper,
#stage[data-mode=playing] .hud-helper.tool-instruction{
  left:112px;
  top:1205px;
  width:556px;
  height:27px;
  font-size:20px;
  line-height:25px;
  white-space:nowrap;
}
#stage[data-mode=playing] .tool-bar,
#stage[data-mode=playing] .tool-bar.with-rites{
  top:1234px;
  transform:scale(.8);
  transform-origin:top center;
}
#stage[data-mode=playing] .tool-bar{left:145px;gap:18px}
#stage[data-mode=playing] .tool-bar.with-rites{left:98px;gap:20px}
#stage[data-mode=playing] #toast,
#stage[data-mode=playing] #toast.save-warning{
  top:1205px;
  left:112px;
  width:556px;
  height:27px;
  font-size:20px;
  line-height:25px;
}

/* Dialogs use the full portrait stage, retain their fixed-width frames and
   scroll their body when content is longer than the safe region. */
#stage[data-tall=true] .scrim{align-items:center;padding-top:0}
#stage[data-tall=true] .modal{max-height:calc(var(--stage-height) - 180px)}
#stage[data-tall=true] .modal.settings{top:calc((var(--stage-height) - 914px)/2)}
#stage[data-tall=true] .modal.settings .modal-actions{top:620px}
#stage[data-tall=true] .modal.help,
#stage[data-tall=true] .modal.rites-guide{
  width:700px;
  max-height:calc(var(--stage-height) - 100px);
  padding:62px 52px 48px;
}
#stage[data-tall=true] .modal.help .modal-body>p,
#stage[data-tall=true] .modal.help .modal-body>ul,
#stage[data-tall=true] .modal.rites-guide .modal-body>p{
  font-size:26px;
  line-height:1.38;
}
#stage[data-tall=true] .modal.help .modal-body .tip-note,
#stage[data-tall=true] .modal.rites-guide .modal-body .tip-note{font-size:26px!important;line-height:1.38}
#stage[data-tall=true] .modal.intro{
  width:700px;
  min-height:0;
  padding:60px 52px 48px;
}
#stage[data-tall=true] .modal.intro .commission-picker{margin:0 0 4px;padding:10px 14px}
#stage[data-tall=true] .modal.intro .commission-picker h3{font-size:29px;margin-bottom:8px}
#stage[data-tall=true] .modal.intro .commission-picker>div{grid-template-columns:1fr;gap:8px}
#stage[data-tall=true] .modal.intro .commission-choice{
  min-height:98px;
  padding:7px 11px;
  grid-template-columns:42px 1fr 52px;
  gap:8px;
}
#stage[data-tall=true] .modal.intro .commission-choice b{font-size:24px}
#stage[data-tall=true] .modal.intro .commission-choice small{font-size:20px;line-height:1.24}
#stage[data-tall=true] .modal.intro .commission-choice em{font-size:18px;margin-top:2px}
#stage[data-tall=true] .modal.intro .route-knot{width:39px;height:39px;font-size:22px}
#stage[data-tall=true] .modal.intro .choice-rewards .sigil-icon{width:44px;height:44px;transform:scale(.76)}
#stage[data-tall=true] .modal.intro .commission-explainer{font-size:21px!important;line-height:1.25!important;margin:4px 0!important}
#stage[data-tall=true] .modal.intro .intro-world{
  grid-template-columns:176px 1fr;
  gap:16px;
  margin-top:5px;
}
#stage[data-tall=true] .modal.intro .intro-world .intro-hero{width:176px;height:92px}
#stage[data-tall=true] .modal.intro .intro-world>div>p{font-size:22px!important;line-height:1.25}
#stage[data-tall=true] .modal.intro .intro-world ul{font-size:20px;line-height:1.3;margin:2px 0}
#stage[data-tall=true] .modal.intro .tip-note{font-size:22px!important;line-height:1.3;margin:6px 0 0}
#stage[data-tall=true] .modal.intro .modal-actions{margin-top:10px}
.loading-screen{height:var(--stage-height);background:url('../assets/images/play-scene-mother.png') center/cover no-repeat}
#stage[data-tall=true] .modal.error{min-height:0}