/* =========================================================
   Mahjong Radar Version 98 — mobile keyboard-safe forms.
   Registration becomes a true full-screen, independently scrollable form.
   Host-table editing temporarily uses the full visible viewport while typing.
   ========================================================= */
:root{
  --mr-visual-viewport-height:100dvh;
  --mr-visual-viewport-top:0px;
  --mr-keyboard-inset:0px;
}

@media (max-width:760px){
  /* The authentication form follows the visual viewport, not the larger layout
     viewport hidden behind the mobile keyboard. */
  body.auth-active #auth.form-mode{
    position:fixed!important;
    inset:auto 0 auto 0!important;
    top:var(--mr-visual-viewport-top,0px)!important;
    width:100%!important;
    height:var(--mr-visual-viewport-height,var(--mr-auth-viewport-height,100dvh))!important;
    min-height:0!important;
    max-height:var(--mr-visual-viewport-height,var(--mr-auth-viewport-height,100dvh))!important;
    overflow:hidden!important;
    background:#f8f4ec!important;
    overscroll-behavior:none!important;
  }
  body.auth-active #auth.form-mode .public-shell,
  body.auth-active #auth.form-mode .public-main{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.auth-active #auth.form-mode .public-topbar,
  body.auth-active #auth.form-mode .public-hero,
  body.auth-active #auth.form-mode .public-values,
  body.auth-active #auth.form-mode .seo-public-links,
  body.auth-active #auth.form-mode .mobile-onboarding,
  body.auth-active #auth.form-mode .auth-emblem,
  body.auth-active #auth.form-mode .au-inner>h1,
  body.auth-active #auth.form-mode .brand-domain,
  body.auth-active #auth.form-mode .au-inner>.sub{
    display:none!important;
  }
  body.auth-active #auth.form-mode .auth-card{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:linear-gradient(180deg,#fffdf8,#f8f2e7)!important;
  }
  body.auth-active #auth.form-mode .au-inner{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Registration and verification have a compact fixed heading and one clear
     scroll surface underneath it. Every field can move above the keyboard. */
  body.auth-active #auth.form-mode #au-register:not(.hidden),
  body.auth-active #auth.form-mode #au-verify:not(.hidden){
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    touch-action:pan-y!important;
  }
  body.auth-active #auth.form-mode .registration-heading,
  body.auth-active #auth.form-mode .verification-heading{
    position:relative!important;
    z-index:5!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:calc(12px + env(safe-area-inset-top)) 58px 11px 16px!important;
    text-align:left!important;
    background:rgba(255,253,248,.97)!important;
    border-bottom:1px solid rgba(181,138,59,.30)!important;
    box-shadow:0 5px 15px rgba(23,59,99,.06)!important;
    backdrop-filter:blur(12px)!important;
  }
  body.auth-active #auth.form-mode .registration-heading p,
  body.auth-active #auth.form-mode .verification-heading p{
    margin:0 0 2px!important;
    font-size:9px!important;
    line-height:1.15!important;
    letter-spacing:.16em!important;
  }
  body.auth-active #auth.form-mode .registration-heading h2,
  body.auth-active #auth.form-mode .verification-heading h2{
    margin:0!important;
    font-size:23px!important;
    line-height:1.05!important;
  }
  body.auth-active #auth.form-mode .registration-heading span,
  body.auth-active #auth.form-mode .verification-heading span{
    display:block!important;
    margin-top:3px!important;
    font-size:11.5px!important;
    line-height:1.3!important;
  }
  body.auth-active #auth.form-mode .auth-close{
    position:absolute!important;
    z-index:30!important;
    top:calc(9px + env(safe-area-inset-top))!important;
    right:11px!important;
    width:40px!important;
    height:40px!important;
    margin:0!important;
    border-radius:50%!important;
  }
  body.auth-active #auth.form-mode #register-errors{
    flex:0 0 auto!important;
    margin:8px 14px 0!important;
    max-height:64px!important;
    overflow:auto!important;
  }
  body.auth-active #auth.form-mode #register-errors:not(.show){
    display:none!important;
  }
  body.auth-active #auth.form-mode #au-register .registration-scroll,
  body.auth-active #auth.form-mode #au-verify .verification-scroll{
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:14px 14px max(38px,calc(24px + env(safe-area-inset-bottom)))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-behavior:smooth!important;
    scroll-padding-block:14px 132px!important;
    box-sizing:border-box!important;
  }
  body.auth-active #auth.form-mode .registration-form-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  body.auth-active #auth.form-mode #au-register .field,
  body.auth-active #auth.form-mode #au-verify .field{
    scroll-margin-block:78px 145px!important;
  }
  body.auth-active #auth.form-mode #au-register input,
  body.auth-active #auth.form-mode #au-register select,
  body.auth-active #auth.form-mode #au-register textarea,
  body.auth-active #auth.form-mode #au-verify input,
  body.auth-active #auth.form-mode #au-verify select,
  body.auth-active #auth.form-mode #au-verify textarea{
    font-size:16px!important;
    scroll-margin-block:84px 150px!important;
  }
  body.auth-active #auth.form-mode .phone-registration-field{
    padding:12px 10px!important;
  }
  body.auth-active #auth.form-mode .registration-submit{
    min-height:55px!important;
  }

  /* While the keyboard is open, preserve only the useful one-line heading and
     devote the rest of the visible screen to the current fields. */
  body.mr-auth-keyboard-open #auth.form-mode .registration-heading,
  body.mr-auth-keyboard-open #auth.form-mode .verification-heading{
    padding:7px 52px 7px 13px!important;
  }
  body.mr-auth-keyboard-open #auth.form-mode .registration-heading p,
  body.mr-auth-keyboard-open #auth.form-mode .registration-heading span,
  body.mr-auth-keyboard-open #auth.form-mode .verification-heading p,
  body.mr-auth-keyboard-open #auth.form-mode .verification-heading span{
    display:none!important;
  }
  body.mr-auth-keyboard-open #auth.form-mode .registration-heading h2,
  body.mr-auth-keyboard-open #auth.form-mode .verification-heading h2{
    font-size:18px!important;
    line-height:1.15!important;
  }
  body.mr-auth-keyboard-open #auth.form-mode .auth-close{
    top:5px!important;
    right:7px!important;
    width:34px!important;
    height:34px!important;
    font-size:22px!important;
  }
  body.mr-auth-keyboard-open #auth.form-mode #au-register .registration-scroll,
  body.mr-auth-keyboard-open #auth.form-mode #au-verify .verification-scroll{
    padding-top:9px!important;
    padding-bottom:130px!important;
    scroll-padding-block:10px 155px!important;
  }
  body.mr-auth-keyboard-open #auth.form-mode #register-errors.show{
    max-height:44px!important;
    margin-top:5px!important;
    font-size:11px!important;
  }

  /* Login/recovery panels also remain scrollable when the keyboard reduces the
     viewport, rather than vertically centring content behind the keys. */
  body.auth-active #auth.form-mode #au-login:not(.hidden),
  body.auth-active #auth.form-mode #au-forgot:not(.hidden),
  body.auth-active #auth.form-mode #au-reset:not(.hidden),
  body.auth-active #auth.form-mode #au-closed:not(.hidden){
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:center!important;
    width:100%!important;
    max-width:520px!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0 auto!important;
    padding:58px 18px 34px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-block:70px 120px!important;
  }
  body.mr-auth-keyboard-open #auth.form-mode #au-login:not(.hidden),
  body.mr-auth-keyboard-open #auth.form-mode #au-forgot:not(.hidden),
  body.mr-auth-keyboard-open #auth.form-mode #au-reset:not(.hidden){
    justify-content:flex-start!important;
    padding-top:48px!important;
    padding-bottom:120px!important;
  }

  /* Host-table form improvement: when a field has the mobile keyboard, remove
     the header and bottom navigation and let the form use the full visible
     viewport. The normal app chrome returns as soon as typing ends. */
  body.app-active.mr-host-keyboard-open header.app,
  body.app-active.mr-host-keyboard-open nav.tabbar{
    display:none!important;
  }
  body.app-active.mr-host-keyboard-open main{
    position:fixed!important;
    inset:auto 0 auto 0!important;
    top:var(--mr-visual-viewport-top,0px)!important;
    bottom:auto!important;
    width:100%!important;
    height:var(--mr-visual-viewport-height,100dvh)!important;
    min-height:0!important;
    max-height:var(--mr-visual-viewport-height,100dvh)!important;
    padding:8px 11px 125px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-block:12px 155px!important;
  }
  body.app-active.mr-host-keyboard-open #screen-host{
    padding-top:0!important;
  }
  body.app-active.mr-host-keyboard-open #screen-host>.eyebrow,
  body.app-active.mr-host-keyboard-open #screen-host>.section-title,
  body.app-active.mr-host-keyboard-open #screen-host>.host-intro,
  body.app-active.mr-host-keyboard-open #host-command-center{
    display:none!important;
  }
  body.app-active.mr-host-keyboard-open #host-form{
    margin:0!important;
    padding:13px!important;
    border-radius:17px!important;
  }
  body.app-active #host-form input,
  body.app-active #host-form select,
  body.app-active #host-form textarea,
  body.app-active #host-form button{
    scroll-margin-block:70px 165px!important;
  }
}