/* Scroll belongs to the dialog, not the locked page behind it. */
.modal-shell{
  top:var(--ktyx-modal-top,0px);
  bottom:auto;
  height:var(--ktyx-modal-vh,100vh);
  height:var(--ktyx-modal-vh,100dvh);
  min-height:0;
  overflow:hidden;
  --ktyx-modal-gap:18px;
}
.modal-shell>.modal{
  max-height:min(820px,calc(var(--ktyx-modal-vh,100vh) - 2 * var(--ktyx-modal-gap)));
  max-height:min(820px,calc(var(--ktyx-modal-vh,100dvh) - 2 * var(--ktyx-modal-gap)));
  min-height:0;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
#auth-shell>.auth-modal{
  overflow-x:hidden;
  overflow-y:auto;
  scroll-padding-block:18px;
}
#auth-shell input{scroll-margin-block:18px}
#auth-shell .auth-main{min-width:0}
/* Game introductions keep both exits outside the independently scrolling content. */
#detail-shell>.modal{display:flex;flex-direction:column;overflow:hidden}
#detail-shell .detail-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #e2e8f2}
#detail-shell .detail-toolbar-title{font-size:15px;font-weight:850;color:#10203d}
#detail-shell .detail-close{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:108px;min-height:44px;padding:0 12px;border:1px solid #cbd7e8;border-radius:12px;background:#f3f6fb;color:#18355d;font:inherit;font-size:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
#detail-shell .detail-close span[aria-hidden]{font-size:23px;line-height:1}
#detail-shell .detail-close:focus-visible,#detail-shell .detail-back:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
#detail-shell .detail-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
#detail-shell .detail-footer{flex:0 0 auto;padding:12px 16px;background:#fff;border-top:1px solid #e2e8f2}
#detail-shell .detail-back{width:100%;min-height:44px;justify-content:center;touch-action:manipulation}
#word-shell>.utility-modal{
  max-height:calc(var(--ktyx-modal-vh,100vh) - 24px);
  max-height:calc(var(--ktyx-modal-vh,100dvh) - 24px);
}
@media(max-width:640px),(max-height:500px){
  .modal-shell{--ktyx-modal-gap:8px;padding:8px}
  #auth-shell input:not([type=checkbox]){font-size:16px}
  #detail-shell .detail-toolbar,#detail-shell .detail-footer{padding:8px 12px}
}

/* Freeze the background page; only the current dialog can scroll. */
body.modal-open{position:fixed;top:var(--ktyx-page-offset,0px);left:0;right:0;width:100%}
@media(max-width:950px){
  #auth-shell>.auth-modal{display:flex;flex-direction:column;overflow:hidden}
  #auth-shell .auth-side{flex:0 0 auto;min-height:0;padding:10px 18px;border-bottom:1px solid #e7edf8}
  #auth-shell .auth-side .ux-brand{width:168px}
  #auth-shell .auth-side .ux-brand img{height:49px}
  #auth-shell .auth-side .mascot-stage{display:none}
  #auth-shell .auth-main{flex:1 1 auto;align-self:stretch;min-height:0;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding-block:18px;padding:18px 18px 22px}
  #auth-shell .auth-heading{font-size:22px;letter-spacing:-.5px}
  #auth-shell .auth-subheading{margin-bottom:12px}
  #auth-shell .auth-status{margin-bottom:13px}
  #auth-shell .auth-tabs{margin:0 0 16px}
  #auth-shell .modal-close{right:13px;top:14px;z-index:5}
  #auth-shell input:not([type=checkbox]){font-size:16px;transform:none}
}