/* =========================================================
   Mahjong Radar Version 85 — tablet/iPad responsive guard.
   Scope: authentication layout and duplicate tablet navigation.
   ========================================================= */

/* A compact-width desktop window and a touch tablet must use one coherent
   navigation system. The previous 760px/960px breakpoint overlap displayed
   both the desktop menu and the fixed bottom navigation on iPad portrait. */
@media (min-width:761px) and (max-width:959px),
       (hover:none) and (pointer:coarse) and (min-width:960px) and (max-width:1180px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.app-active{
    padding-bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom))!important;
  }

  header.app .desktop-nav{
    display:none!important;
  }
  header.app .header-inner::before,
  header.app .header-inner::after{
    display:none!important;
    content:none!important;
  }
  nav.tabbar{
    display:block!important;
  }
  nav.tabbar .tabbar-inner{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    max-width:760px!important;
  }

  header.app .header-inner{
    width:100%!important;
    max-width:100%!important;
    min-height:76px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    padding:8px 18px!important;
  }
  header.app .wordmark{
    justify-self:start!important;
    min-width:0!important;
    max-width:100%!important;
  }
  header.app .wordmark img{
    width:48px!important;
    height:48px!important;
  }
  header.app .wordmark>div{
    min-width:0!important;
  }
  header.app .wordmark .name{
    max-width:340px!important;
    font-size:19px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  header.app .wordmark .tag{
    display:block!important;
    font-size:7.5px!important;
  }
  header.app .header-actions{
    display:flex!important;
    justify-self:end!important;
    gap:7px!important;
    min-width:0!important;
  }
  header.app .header-install,
  header.app .online-pill{
    min-height:36px!important;
    padding:0 10px!important;
    font-size:12px!important;
  }

  main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:20px 18px calc(110px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
  }
  main .screen,
  main .screen>*{
    min-width:0;
    max-width:100%;
  }

  /* Tablet public welcome: keep one readable column rather than allowing the
     marketing hero and auth card to compete for the same narrow viewport. */
  body.auth-active #auth:not(.form-mode) .public-main{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    min-height:calc(100dvh - 88px)!important;
    padding:24px 16px 34px!important;
  }
  body.auth-active #auth:not(.form-mode) .public-hero,
  body.auth-active #auth:not(.form-mode) .public-values{
    display:none!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-card{
    position:relative!important;
    top:auto!important;
    width:min(620px,calc(100vw - 32px))!important;
    max-width:620px!important;
    margin:0 auto!important;
  }

  /* iPad/tablet authentication: one centred full-height card with its own
     vertical scroll. Fixed grid tracks from the desktop layout are removed. */
  body.auth-active #auth.form-mode{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:var(--mr-auth-viewport-height,100dvh)!important;
    min-height:var(--mr-auth-viewport-height,100dvh)!important;
    max-height:var(--mr-auth-viewport-height,100dvh)!important;
    overflow:hidden!important;
  }
  body.auth-active #auth.form-mode .public-shell{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin: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 .mobile-onboarding{
    display:none!important;
  }
  body.auth-active #auth.form-mode .public-main{
    position:fixed!important;
    inset:0!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    width:100%!important;
    height:var(--mr-auth-viewport-height,100dvh)!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  body.auth-active #auth.form-mode .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-login"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-forgot"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-reset"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-closed"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-verify"] .auth-card{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-self:stretch!important;
    width:min(720px,calc(100vw - 24px))!important;
    min-width:0!important;
    max-width:720px!important;
    height:calc(var(--mr-auth-viewport-height,100dvh) - 24px)!important;
    min-height:0!important;
    max-height:calc(var(--mr-auth-viewport-height,100dvh) - 24px)!important;
    margin:0 auto!important;
    padding:10px!important;
    overflow:hidden!important;
    border-radius:24px!important;
    box-sizing:border-box!important;
  }
  body.auth-active #auth.form-mode[data-auth-panel="au-login"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-forgot"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-reset"] .auth-card,
  body.auth-active #auth.form-mode[data-auth-panel="au-closed"] .auth-card{
    width:min(560px,calc(100vw - 24px))!important;
    max-width:560px!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-width:0!important;
    min-height:0!important;
    max-height:100%!important;
    padding:16px 18px 18px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body.auth-active #auth.form-mode .au-inner>*{
    min-width:0!important;
    max-width:100%!important;
  }
  body.auth-active #auth.form-mode .auth-close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    z-index:40!important;
  }
  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:460px!important;
    height:auto!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0 auto!important;
    padding:54px 6px 30px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    box-sizing:border-box!important;
  }
  body.auth-active #auth.form-mode #au-register:not(.hidden),
  body.auth-active #auth.form-mode #au-verify:not(.hidden){
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:48px 8px 100px 4px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-gutter:stable!important;
    scroll-padding-block:12px 110px!important;
    box-sizing:border-box!important;
  }
  body.auth-active #auth.form-mode #au-register .registration-scroll,
  body.auth-active #auth.form-mode #au-verify .verification-scroll{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.auth-active #auth.form-mode .registration-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.auth-active #auth.form-mode .registration-form-grid>*,
  body.auth-active #auth.form-mode .verification-option-grid>*{
    min-width:0!important;
  }
  body.auth-active #auth.form-mode input,
  body.auth-active #auth.form-mode select,
  body.auth-active #auth.form-mode textarea,
  body.auth-active #auth.form-mode button{
    max-width:100%!important;
  }

  /* General tablet overflow guards for modal forms and sheets. */
  .sheet-backdrop{
    padding:14px!important;
    align-items:center!important;
  }
  .sheet{
    width:min(720px,calc(100vw - 28px))!important;
    max-width:720px!important;
    max-height:calc(100dvh - 28px)!important;
    border-radius:22px!important;
    border-bottom:1px solid var(--gold)!important;
  }
}

@media (min-width:761px) and (max-width:820px){
  body.auth-active #auth.form-mode .registration-form-grid{
    grid-template-columns:1fr!important;
  }
  header.app .wordmark .name{
    max-width:250px!important;
    font-size:17px!important;
  }
  header.app .header-install span{
    display:none!important;
  }
  header.app .header-install{
    width:36px!important;
    padding:0!important;
    justify-content:center!important;
  }
}