/* =========================================================
   Mahjong Radar Version 82 — registration scroll ownership
   and complete country-name display.

   Requested scope only:
   1. Keep MAHJONG RADAR / MAHJONGRADAR.COM fixed.
   2. Scroll the complete registration content beneath it,
      including the Join/Create-profile introduction.
   3. Display the selected country flag and full country name
      on desktop and mobile while retaining the native select.
   ========================================================= */

/* The visible country control is custom-rendered, while the native select
   remains over it for keyboard, touch and screen-reader interaction. */
#rg-phone-control .phone-country-control{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  padding:0 43px 0 14px!important;
  border:1.4px solid var(--gold-line,rgba(181,138,59,.48))!important;
  border-radius:13px!important;
  background:#fffdf8!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#rg-phone-control .phone-country-control:focus-within{
  border-color:#b58a3b!important;
  box-shadow:0 0 0 3px rgba(181,138,59,.13)!important;
}
#rg-phone-control .phone-selected-flag{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  z-index:1!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:27px!important;
  justify-content:center!important;
  font-size:21px!important;
  line-height:1!important;
  pointer-events:none!important;
}
#rg-phone-control .phone-selected-country{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#173b63!important;
  font-size:15px!important;
  font-weight:750!important;
  line-height:1.2!important;
  pointer-events:none!important;
}
#rg-phone-control .phone-country-caret{
  position:absolute!important;
  z-index:1!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#173b63!important;
  font-size:16px!important;
  pointer-events:none!important;
}
#rg-phone-control .phone-country-control select{
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  color:transparent!important;
  opacity:0!important;
  cursor:pointer!important;
  appearance:auto!important;
  -webkit-appearance:menulist!important;
}

/* Registration card: the brand lockup remains stationary. The entire
   registration panel below it owns one scrollbar, so the heading, guidance,
   fields, final button and bottom note all move together. */
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .auth-card{
  overflow:hidden!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>#au-appname,
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>.brand-domain{
  display:block!important;
  flex:0 0 auto!important;
  text-align:center!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>#au-appname{
  margin:2px 52px 3px!important;
  font-size:22px!important;
  line-height:1.08!important;
  letter-spacing:.15em!important;
  white-space:nowrap!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>.brand-domain{
  margin:0 48px 12px!important;
  color:#a87524!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.18em!important;
  white-space:nowrap!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>.sub{
  display:none!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register:not(.hidden){
  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:2px 10px 72px 3px!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;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(181,138,59,.58) rgba(181,138,59,.08)!important;
  scroll-padding-top:8px!important;
  scroll-padding-bottom:96px!important;
  box-sizing:border-box!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register::-webkit-scrollbar{
  width:8px!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register::-webkit-scrollbar-track{
  background:rgba(181,138,59,.08)!important;
  border-radius:999px!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register::-webkit-scrollbar-thumb{
  background:rgba(181,138,59,.58)!important;
  border:2px solid transparent!important;
  background-clip:padding-box!important;
  border-radius:999px!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register .registration-heading,
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register #register-errors{
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  flex:none!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register .registration-heading{
  margin:4px auto 16px!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register .registration-scroll{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0 0 32px!important;
  overflow:visible!important;
  touch-action:auto!important;
  scrollbar-gutter:auto!important;
  box-sizing:border-box!important;
}
body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register .registration-scroll::after{
  content:""!important;
  display:block!important;
  height:34px!important;
}

@media (min-width:761px){
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] .auth-card{
    display:flex!important;
    flex-direction:column!important;
    height:calc(100dvh - 142px)!important;
    min-height:500px!important;
    max-height:calc(100dvh - 142px)!important;
  }
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner{
    flex:1 1 auto!important;
    height:100%!important;
    max-height:100%!important;
    padding:17px 22px 14px!important;
  }
}

@media (max-width:760px){
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner{
    padding:7px 10px max(7px,env(safe-area-inset-bottom))!important;
  }
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>#au-appname{
    margin:6px 48px 2px!important;
    font-size:clamp(18px,5vw,22px)!important;
  }
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] .au-inner>.brand-domain{
    display:block!important;
    margin:0 48px 8px!important;
    font-size:9px!important;
  }
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register:not(.hidden){
    padding:2px 6px max(88px,calc(68px + env(safe-area-inset-bottom))) 2px!important;
    scroll-padding-bottom:max(112px,calc(88px + env(safe-area-inset-bottom)))!important;
  }
  body.auth-active #auth.form-mode[data-auth-panel="au-register"] #au-register .registration-heading{
    margin:5px 0 14px!important;
    padding:0 44px 0 2px!important;
    text-align:left!important;
  }
  #rg-phone-control .phone-country-control{
    min-height:49px!important;
  }
  #rg-phone-control .phone-selected-country{
    font-size:16px!important;
  }
}