/* =========================================================
   Mahjong Radar Version 101 — adaptive desktop welcome card
   and clearer host contact copy for seat requests.
   ========================================================= */

/* The desktop welcome page is a two-row viewport: the adaptable hero/card
   area and the public information links. The authentication card always stays
   inside the first row with real top and bottom breathing room. */
@media (min-width:1081px){
  body.auth-active #auth:not(.form-mode){
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  body.auth-active #auth:not(.form-mode) .public-shell{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  body.auth-active #auth:not(.form-mode) .public-main{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-items:center!important;
    padding:clamp(20px,2.7dvh,30px) clamp(24px,4vw,58px)!important;
    overflow:visible!important;
  }
  body.auth-active #auth:not(.form-mode) .seo-public-links{
    position:relative!important;
    z-index:4!important;
    flex:0 0 auto!important;
    min-height:48px!important;
    padding:12px 18px 14px!important;
    line-height:1.2!important;
    background:rgba(255,253,248,.88)!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-card{
    position:relative!important;
    top:auto!important;
    align-self:center!important;
    justify-self:end!important;
    width:100%!important;
    max-width:400px!important;
    max-height:calc(100dvh - 96px)!important;
    margin:0!important;
    padding:7px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-card::-webkit-scrollbar{width:7px}
  body.auth-active #auth:not(.form-mode) .auth-card::-webkit-scrollbar-thumb{background:rgba(181,138,59,.38);border-radius:999px}
  body.auth-active #auth:not(.form-mode) .au-inner{
    height:auto!important;
    max-height:none!important;
    padding:clamp(13px,1.7dvh,18px) 17px clamp(13px,1.7dvh,18px)!important;
    overflow:visible!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-emblem.mr-radar-logo{
    width:clamp(58px,7.5dvh,72px)!important;
    height:clamp(58px,7.5dvh,72px)!important;
    margin:0 auto 3px!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-card h1{
    font-size:clamp(21px,2.45dvh,25px)!important;
    line-height:1!important;
    margin:0!important;
  }
  body.auth-active #auth:not(.form-mode) .brand-domain{
    margin-top:4px!important;
    font-size:8px!important;
    line-height:1.2!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-card .sub{
    margin:3px 0 clamp(6px,.9dvh,9px)!important;
    font-size:8px!important;
    line-height:1.2!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-welcome h2{
    max-width:300px!important;
    margin:clamp(7px,1dvh,10px) auto 4px!important;
    font-size:clamp(21px,2.65dvh,25px)!important;
    line-height:1.08!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-welcome>p{
    max-width:345px!important;
    font-size:clamp(11px,1.35dvh,12.5px)!important;
    line-height:1.35!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-feature-grid{
    gap:7px!important;
    margin:clamp(7px,1dvh,10px) 0!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-feature{
    min-height:clamp(63px,8.2dvh,76px)!important;
    padding:6px 4px!important;
    border-radius:13px!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-feature b{
    margin-bottom:3px!important;
    font-size:19px!important;
  }
  body.auth-active #auth:not(.form-mode) #au-livestats{
    margin:clamp(5px,.8dvh,8px) 0!important;
    padding:clamp(5px,.75dvh,7px) 0!important;
  }
  body.auth-active #auth:not(.form-mode) #au-livestats b{font-size:18px!important;line-height:1!important}
  body.auth-active #auth:not(.form-mode) #au-livestats small{font-size:7.5px!important;line-height:1.15!important}
  body.auth-active #auth:not(.form-mode) #au-livestats:not(.hidden){display:grid!important}
  body.auth-active #auth:not(.form-mode) #au-preview:not(.hidden){display:block!important}
  body.auth-active #auth:not(.form-mode) #au-preview{margin-top:clamp(5px,.8dvh,8px)!important}
  body.auth-active #auth:not(.form-mode) .public-preview-card{padding:7px 9px!important;border-radius:14px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-banner{margin-bottom:5px!important;padding:3px 11px!important;font-size:9px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-shell{grid-template-columns:42px minmax(0,1fr) 29px!important;gap:7px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-avatar{width:42px!important;height:42px!important;font-size:15px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-copy>b{font-size:14px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-host,
  body.auth-active #auth:not(.form-mode) .public-preview-meta{font-size:9px!important;line-height:1.2!important}
  body.auth-active #auth:not(.form-mode) .public-preview-arrow{width:29px!important;height:29px!important;font-size:14px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-nav{gap:5px!important;margin-top:6px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-nav .btn{min-height:31px!important;padding:4px 7px!important;font-size:9px!important}
  body.auth-active #auth:not(.form-mode) .public-preview-note{margin-top:4px!important;font-size:9px!important;line-height:1.2!important}
  body.auth-active #auth:not(.form-mode) .auth-choice{
    gap:7px!important;
    margin:clamp(6px,.9dvh,9px) 0 3px!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-choice .btn{
    min-height:39px!important;
    padding:7px 12px!important;
    font-size:13px!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-choice .btn-primary{font-size:16px!important}
  body.auth-active #auth:not(.form-mode) .auth-welcome>.hint{
    margin:5px 4px 0!important;
    font-size:7.5px!important;
    line-height:1.25!important;
  }
}

/* Short desktop windows retain every control. The card itself remains inside
   the viewport and becomes the scroll surface only as a last-resort fallback. */
@media (min-width:1081px) and (max-height:760px){
  body.auth-active #auth:not(.form-mode) .public-main{padding-top:14px!important;padding-bottom:14px!important}
  body.auth-active #auth:not(.form-mode) .auth-card{max-height:calc(100dvh - 76px)!important;max-width:380px!important}
  body.auth-active #auth:not(.form-mode) .auth-emblem.mr-radar-logo{width:52px!important;height:52px!important}
  body.auth-active #auth:not(.form-mode) .auth-welcome h2{font-size:20px!important}
  body.auth-active #auth:not(.form-mode) .auth-feature{min-height:56px!important}
  body.auth-active #auth:not(.form-mode) .auth-welcome>.hint{display:none!important}
}

/* Tablet/compact desktop fallback: never clip the bottom of the welcome card. */
@media (min-width:761px) and (max-width:1080px){
  body.auth-active #auth:not(.form-mode),
  body.auth-active #auth:not(.form-mode) .public-shell{
    max-height:none!important;
    overflow-y:auto!important;
  }
  body.auth-active #auth:not(.form-mode) .public-main{
    min-height:100dvh!important;
    padding-top:24px!important;
    padding-bottom:72px!important;
    overflow:visible!important;
  }
  body.auth-active #auth:not(.form-mode) .auth-card{
    max-height:none!important;
    overflow:visible!important;
    margin:20px auto!important;
  }
}

/* Shared phone is a clear contact prompt, not a data-field label. */
.seat-request-phone,
.request-phone-shared{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  padding:8px 10px!important;
  background:linear-gradient(90deg,#edf3fa,#e5eff9)!important;
  border:1px solid rgba(23,59,99,.10)!important;
  border-radius:9px!important;
  color:#173b63!important;
}
.seat-request-phone::before,
.request-phone-shared::before{
  content:"☎";
  flex:0 0 auto;
  color:#173b63;
  font-size:14px;
  line-height:1;
}
.seat-request-phone b,
.request-phone-shared b{font-weight:800!important}
.seat-request-phone a,
.request-phone-shared a{white-space:nowrap!important}

@media (max-width:560px){
  .seat-request-phone,.request-phone-shared{align-items:flex-start!important;flex-wrap:wrap!important;line-height:1.35!important}
}