/* Independent mobile authentication dialog for Shatranj Al Arab.
   The modal is a direct child of body, never a row inside the chessboard grid. */
@media(max-width:900px){
  html body.mfw-auth-open{
    overflow:hidden!important;
  }
  #mobileFixedWorkspace #mfwLoginButton:not([hidden]){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:102px!important;
    height:38px!important;
    padding:6px 10px!important;
    border:1px solid #efca72!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#efca72,#d9aa4f)!important;
    color:#173536!important;
    box-shadow:none!important;
    font:900 12px/1.2 Arial,sans-serif!important;
    white-space:nowrap!important;
  }
  #mobileFixedWorkspace #mfwLoginButton[hidden]{display:none!important}
  html body > #mfwAuthOverlay[hidden]{display:none!important}
  html body > #mfwAuthOverlay{
    position:fixed!important;
    z-index:999999!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:rgba(0,20,23,.88)!important;
    color:#f4efe6!important;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    direction:rtl!important;
    box-sizing:border-box!important;
    font-family:Arial,sans-serif!important;
  }
  #mfwAuthOverlay, #mfwAuthOverlay *{box-sizing:border-box!important}
  #mfwAuthOverlay .mfw-auth-dialog{
    display:flex!important;
    flex-direction:column!important;
    width:min(100%,440px)!important;
    height:auto!important;
    max-height:100%!important;
    margin:auto!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(224,181,103,.60)!important;
    border-radius:17px!important;
    background:linear-gradient(155deg,#073a40,#022f33)!important;
    box-shadow:0 22px 55px rgba(0,0,0,.50)!important;
    color:#f4efe6!important;
  }
  #mfwAuthOverlay .mfw-auth-head{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    flex:0 0 auto!important;
    min-height:54px!important;
    margin:0!important;
    padding:9px 13px!important;
    border-bottom:1px solid rgba(224,181,103,.27)!important;
    background:#073a40!important;
  }
  #mfwAuthOverlay .mfw-auth-head h2{
    margin:0!important;
    padding:0!important;
    color:#f4efe6!important;
    font:900 17px/1.25 Arial,sans-serif!important;
    text-align:right!important;
  }
  #mfwAuthOverlay #mfwAuthClose{
    flex:0 0 36px!important;
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(224,181,103,.35)!important;
    border-radius:9px!important;
    background:#052f34!important;
    color:#f4efe6!important;
    font-size:22px!important;
    font-weight:400!important;
    cursor:pointer!important;
  }
  #mfwAuthOverlay .mfw-auth-host{
    flex:0 1 auto!important;
    width:100%!important;
    min-height:0!important;
    max-height:calc(100dvh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:15px 14px 18px!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain!important;
    background:transparent!important;
  }
  #mfwAuthOverlay #guestAuth{
    width:100%!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    color:#f4efe6!important;
  }
  #mfwAuthOverlay #guestAuth[hidden],
  #mfwAuthOverlay #signupForm[hidden],
  #mfwAuthOverlay #loginForm[hidden],
  #mfwAuthOverlay #recoveryForm[hidden]{display:none!important}
  #mfwAuthOverlay .auth-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0 0 15px!important;
  }
  #mfwAuthOverlay .auth-tabs .auth-tab{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    padding:6px 9px!important;
    border:1px solid rgba(224,181,103,.35)!important;
    border-radius:10px!important;
    background:#052f34!important;
    color:#f4efe6!important;
    font:900 12px/1.2 Arial,sans-serif!important;
    box-shadow:none!important;
  }
  #mfwAuthOverlay .auth-tabs .auth-tab.active{
    background:linear-gradient(135deg,#efca72,#d9aa4f)!important;
    border-color:#efca72!important;
    color:#173536!important;
  }
  #mfwAuthOverlay .auth-form:not([hidden]){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }
  #mfwAuthOverlay .auth-form label{
    display:block!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:#f4efe6!important;
    font:800 12px/1.45 Arial,sans-serif!important;
    text-align:right!important;
  }
  #mfwAuthOverlay .auth-form label>span{
    display:block!important;
    margin:0 0 5px!important;
    color:#e5e5dc!important;
  }
  #mfwAuthOverlay .auth-form input:not([type="checkbox"]){
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    margin:0!important;
    padding:8px 12px!important;
    border:1px solid rgba(224,181,103,.34)!important;
    border-radius:9px!important;
    background:#052f34!important;
    color:#fff!important;
    font:500 14px/1.3 Arial,sans-serif!important;
    outline-offset:2px!important;
  }
  #mfwAuthOverlay .auth-form input::placeholder{color:#aabdb9!important;opacity:1!important}
  #mfwAuthOverlay .auth-form input:focus{
    border-color:#efca72!important;
    outline:2px solid rgba(239,202,114,.30)!important;
  }
  #mfwAuthOverlay .auth-form .password-wrap{position:relative!important}
  #mfwAuthOverlay .auth-form .password-wrap input{padding-left:73px!important}
  #mfwAuthOverlay .auth-form .show-pass{
    position:absolute!important;
    top:28px!important;
    left:6px!important;
    width:60px!important;
    height:33px!important;
    padding:3px!important;
    border:0!important;
    border-radius:7px!important;
    background:rgba(224,181,103,.13)!important;
    color:#efcf7c!important;
    font-size:11px!important;
    font-weight:800!important;
  }
  #mfwAuthOverlay .auth-form .full{
    width:100%!important;
    grid-column:auto!important;
  }
  #mfwAuthOverlay #loginBtn,
  #mfwAuthOverlay #signupBtn,
  #mfwAuthOverlay #recoveryBtn{
    width:100%!important;
    min-height:46px!important;
    margin:4px 0 0!important;
    padding:9px!important;
    border:1px solid #efca72!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#efca72,#d9aa4f)!important;
    color:#173536!important;
    font:900 14px/1.2 Arial,sans-serif!important;
  }
  #mfwAuthOverlay .login-help{
    display:flex!important;
    justify-content:flex-start!important;
    margin:0!important;
  }
  #mfwAuthOverlay .text-link{color:#efcf7c!important;font-size:12px!important}
  #mfwAuthOverlay .auth-note,
  #mfwAuthOverlay .username-status{
    color:#bfc9c5!important;
    font-size:11px!important;
    line-height:1.55!important;
    margin-top:8px!important;
  }
  #mfwAuthOverlay #authMsg{
    min-height:0!important;
    margin:8px 0 0!important;
    font-size:12px!important;
  }
  #mfwAuthOverlay .check{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:#d2dbd7!important;
  }
  #mfwAuthOverlay .check input{width:18px!important;height:18px!important;accent-color:#e0b567!important}
}