/* V0.26.1 mobile safe layout, order-card clarity and settlement controls. */
#stage .settlement-close{
  position:absolute;right:0;top:0;width:62px;height:62px;padding:0;
  display:grid;place-items:center;border:4px solid #824125;border-radius:17px;
  background:linear-gradient(180deg,#fff0bd,#d88d49);color:#6c2a1b;
  box-shadow:inset 0 0 0 2px #fff8d5,0 6px 10px #32140c55;
  font-size:39px;line-height:1;font-weight:950
}
#stage .settlement-close:active{transform:translateY(2px)}
#stage .management-heading{position:relative;padding-right:84px}
#stage .management-heading #settlementResult{margin-left:auto;margin-right:22px}

/* Keep the two HUD actions aligned after the mobile-safe padding is applied. */
#stage[data-stall-level="1"] .hud>.start,
#stage[data-stall-level="1"] #pauseButton{align-self:center;height:82px!important}

/* Phones have far less usable vertical room after the stage is scaled.  Keep the
   order card compact enough that the secondary controls can never cover it. */
@media (max-height:520px),(max-width:980px){
  #stage .guest-slot .bubble{top:20px!important;height:86px!important;padding:7px 10px 10px!important}
  #stage .guest-slot .order-item{width:65px!important;height:63px!important;flex-basis:65px!important}
  #stage .guest-slot .order-item img{width:63px!important;height:60px!important}
  #stage .guest-slot .order-plus{flex-basis:14px!important;font-size:21px!important}
  #stage .guest-slot .patience{top:109px!important}
  #stage .wallet-badge{top:188px!important}
  #stage .journal-button,#stage .recipe-button,#stage .help-button,#stage .sound-button{top:188px!important}
}

/* Forced portrait-to-landscape mode leaves the physical status bar on the
   rotated leading edge.  Reserve it symmetrically and center the stage inside
   the remaining safe rectangle. */
html[data-force-landscape="true"] #viewport{
  padding-top:max(18px,var(--pwa-safe-right));
  padding-right:max(26px,var(--pwa-safe-bottom));
  padding-bottom:max(18px,var(--pwa-safe-left));
  padding-left:max(26px,var(--pwa-safe-top))
}
html[data-force-landscape="true"] #stage{transform-origin:center center}

#stage[data-closing="true"] .clock b{color:#9a3d26!important}
#stage[data-closing="true"] .clock small::after{content:" · 주문 마감";color:#9a3d26}

/* iPhone 16/17 landscape preview: protect the system status strip and keep
   every live order readable without desktop-only overlap. */
html[data-mobile-layout="true"] #viewport{
  padding-top:max(18px,var(--pwa-safe-top))!important;
  padding-right:max(42px,var(--pwa-safe-right))!important;
  padding-bottom:max(18px,var(--pwa-safe-bottom))!important;
  padding-left:max(42px,var(--pwa-safe-left))!important
}
html[data-mobile-layout="true"] #stage{transform-origin:center center!important}
html[data-mobile-layout="true"] #stage .guest-slot .bubble{top:20px!important;height:86px!important;padding:7px 10px 10px!important}
html[data-mobile-layout="true"] #stage .guest-slot .order-item{width:65px!important;height:63px!important;flex-basis:65px!important}
html[data-mobile-layout="true"] #stage .guest-slot .order-item img{width:63px!important;height:60px!important}
html[data-mobile-layout="true"] #stage .guest-slot .patience{top:109px!important}
html[data-mobile-layout="true"] #stage .wallet-badge{
  top:132px!important;right:24px!important;width:245px;min-height:54px;font-size:17px
}
html[data-mobile-layout="true"] #stage .recipe-button{top:194px!important;right:170px!important}
html[data-mobile-layout="true"] #stage .journal-button{top:194px!important;right:70px!important}
html[data-mobile-layout="true"] #stage .help-button{top:256px!important;right:132px!important}
html[data-mobile-layout="true"] #stage .sound-button{top:256px!important;right:70px!important}
html[data-force-landscape="true"][data-mobile-layout="true"] #viewport{
  padding-top:max(18px,var(--pwa-safe-right))!important;
  padding-right:max(42px,var(--pwa-safe-bottom))!important;
  padding-bottom:max(18px,var(--pwa-safe-left))!important;
  padding-left:max(42px,var(--pwa-safe-top))!important
}