/* Zenkai Idle R7.10.195 — Recruitment text / controls / portal centering
   Presentation-only patch over R194.
   Scope intentionally limited to Recruitment: text fit, ? / X placement,
   and deterministic character centering inside the fixed portal geometry. */

/* --------------------------------------------------------------------------
   Header controls
   - ? stays inside the upper-left corner.
   - X stays inside the upper-right corner.
   - visual art is kept smaller than the clickable hitbox so neither competes
     with the title.
   -------------------------------------------------------------------------- */
#infoModal.recruit-mode .modal-head{
  padding-left:52px!important;
  padding-right:52px!important;
}
#infoModal.recruit-mode #forgeHelpBtn,
#infoModal.recruit-mode .modal-head>.x{
  top:50%!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  transform:translateY(-50%)!important;
  background-size:31px auto!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  z-index:8!important;
  cursor:pointer!important;
}
#infoModal.recruit-mode #forgeHelpBtn{
  left:6px!important;
  right:auto!important;
}
#infoModal.recruit-mode .modal-head>.x{
  left:auto!important;
  right:6px!important;
}
#infoModal.recruit-mode #forgeHelpBtn:hover,
#infoModal.recruit-mode .modal-head>.x:hover,
#infoModal.recruit-mode #forgeHelpBtn:focus-visible,
#infoModal.recruit-mode .modal-head>.x:focus-visible{
  filter:brightness(1.12) drop-shadow(0 0 4px #3cc8ff66)!important;
  outline:none!important;
}

/* --------------------------------------------------------------------------
   Featured copy
   Keep all copy in the dark safe area of the banner. The previous text block
   was a little too wide and visually collided with the character artwork on
   some names/descriptions. No content or recruitment data is changed here.
   -------------------------------------------------------------------------- */
#infoModal.recruit-mode .r183-banner-copy{
  width:45%!important;
  padding:16px 18px 15px 22px!important;
}
#infoModal.recruit-mode .r183-banner-copy h1{
  max-width:430px!important;
  margin:0 0 8px!important;
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-.01em!important;
}
#infoModal.recruit-mode .r183-banner-copy p{
  width:min(96%,455px)!important;
  max-width:455px!important;
  margin:0 0 11px!important;
  font-size:10.8px!important;
  line-height:1.3!important;
  -webkit-line-clamp:3!important;
}
#infoModal.recruit-mode .r183-featured-meta{
  width:100%!important;
  max-width:420px!important;
  gap:8px!important;
}

/* --------------------------------------------------------------------------
   Portal character centering
   All approved recruitment backgrounds share the same 2098x750 portal
   geometry. Its geometric center is x=1684, y=370 => 80.267% / 49.333%.
   The r192 portrait crops are symmetric around their alpha bounds, so using a
   square contain box at that anchor keeps every character centered without
   per-character offsets.
   -------------------------------------------------------------------------- */
#infoModal.recruit-mode .r183-featured-portrait{
  left:80.267%!important;
  top:49.333%!important;
  width:255px!important;
  height:255px!important;
  max-width:255px!important;
  max-height:255px!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  image-rendering:pixelated!important;
}

/* Keep the upcoming portrait centered in its own frame as well. */
#infoModal.recruit-mode .r183-next-featured img{
  left:50%!important;
  transform:translateX(-50%)!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
}
#infoModal.recruit-mode .r183-next-featured span{
  text-align:center!important;
  justify-content:center!important;
}

@media (max-height:740px){
  #infoModal.recruit-mode .modal-head{
    padding-left:47px!important;
    padding-right:47px!important;
  }
  #infoModal.recruit-mode #forgeHelpBtn,
  #infoModal.recruit-mode .modal-head>.x{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    background-size:28px auto!important;
  }
  #infoModal.recruit-mode #forgeHelpBtn{left:5px!important}
  #infoModal.recruit-mode .modal-head>.x{right:5px!important}

  #infoModal.recruit-mode .r183-banner-copy{
    width:45%!important;
    padding:10px 13px 9px 18px!important;
  }
  #infoModal.recruit-mode .r183-banner-copy h1{
    max-width:370px!important;
    margin-bottom:6px!important;
    font-size:29px!important;
  }
  #infoModal.recruit-mode .r183-banner-copy p{
    width:min(96%,390px)!important;
    max-width:390px!important;
    margin-bottom:7px!important;
    font-size:9.4px!important;
    line-height:1.24!important;
    -webkit-line-clamp:2!important;
  }
  #infoModal.recruit-mode .r183-featured-meta{max-width:370px!important;gap:7px!important}
  #infoModal.recruit-mode .r183-featured-portrait{
    width:218px!important;
    height:218px!important;
    max-width:218px!important;
    max-height:218px!important;
  }
}

@media (max-width:1030px){
  #infoModal.recruit-mode .r183-banner-copy{
    width:47%!important;
  }
  #infoModal.recruit-mode .r183-banner-copy h1{
    max-width:350px!important;
    font-size:28px!important;
  }
  #infoModal.recruit-mode .r183-banner-copy p{
    width:min(96%,360px)!important;
    max-width:360px!important;
    font-size:9.2px!important;
    line-height:1.24!important;
  }
  #infoModal.recruit-mode .r183-featured-meta{max-width:345px!important}
  #infoModal.recruit-mode .r183-featured-portrait{
    width:205px!important;
    height:205px!important;
    max-width:205px!important;
    max-height:205px!important;
  }
}