/* Zenkai Idle R7.10.196 — Recruitment visual correction
   Presentation-only patch over R195.
   Scope intentionally restricted to the three items marked in the field screenshot:
   (1) readable banner copy, (2) ? / X header placement, (3) portrait centered in
   the actual portal of each current recruitment background.
   No recruitment logic, RNG, pity, wallet, server authority, combat or persistence. */

/* --------------------------------------------------------------------------
   HEADER CONTROLS
   The help and close controls belong together on the right side of the header.
   R195 incorrectly moved ? to the left of the title.
   -------------------------------------------------------------------------- */
#infoModal.recruit-mode .modal-head{
  padding-left:16px!important;
  padding-right:94px!important;
}
#infoModal.recruit-mode #forgeHelpBtn,
#infoModal.recruit-mode .modal-head>.x{
  top:4px!important;
  transform:none!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#infoModal.recruit-mode #forgeHelpBtn{
  left:auto!important;
  right:44px!important;
}
#infoModal.recruit-mode .modal-head>.x{
  left:auto!important;
  right:6px!important;
}

/* --------------------------------------------------------------------------
   BANNER TEXT
   R195 reduced the copy. Restore the R191/R193 readability intent: more width,
   larger body copy and comfortable spacing while remaining inside the dark safe
   area at the left of the approved panoramic banners.
   -------------------------------------------------------------------------- */
#infoModal.recruit-mode .r183-banner-copy{
  width:47%!important;
  padding:17px 18px 15px 22px!important;
}
#infoModal.recruit-mode .r183-banner-copy h1{
  max-width:100%!important;
  margin:0 0 8px!important;
  font-size:37px!important;
  line-height:.98!important;
  letter-spacing:0!important;
}
#infoModal.recruit-mode .r183-banner-copy p{
  width:min(98%,510px)!important;
  max-width:510px!important;
  margin:0 0 12px!important;
  font-size:12px!important;
  line-height:1.34!important;
  -webkit-line-clamp:3!important;
}
#infoModal.recruit-mode .r183-featured-meta{
  width:100%!important;
  max-width:450px!important;
  gap:9px!important;
}

/* --------------------------------------------------------------------------
   ACTUAL PORTAL CENTERS
   The current 2098x750 approved backgrounds do not all place the circular portal
   at the same source coordinate. Therefore one universal X/Y anchor cannot keep
   every portrait centered. Each current portrait is anchored to the geometric
   center of the circle in its own approved background. The portrait crop itself
   remains symmetric; no per-character visual nudge is applied inside the box.
   -------------------------------------------------------------------------- */
#infoModal.recruit-mode .r183-featured-portrait{
  left:var(--r196-portal-x,80.22%)!important;
  top:var(--r196-portal-y,49.20%)!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;
}

/* Broly is the canonical fallback geometry. */
#infoModal.recruit-mode .r183-featured-portrait[src*="/broly.png"]{
  --r196-portal-x:80.22%;
  --r196-portal-y:49.20%;
}
#infoModal.recruit-mode .r183-featured-portrait[src*="/goku.png"]{
  --r196-portal-x:80.22%;
  --r196-portal-y:48.88%;
}
#infoModal.recruit-mode .r183-featured-portrait[src*="/vegeta.png"]{
  --r196-portal-x:80.16%;
  --r196-portal-y:49.36%;
}
#infoModal.recruit-mode .r183-featured-portrait[src*="/gohan.png"]{
  --r196-portal-x:80.96%;
  --r196-portal-y:46.64%;
}
#infoModal.recruit-mode .r183-featured-portrait[src*="/trunks.png"]{
  --r196-portal-x:81.99%;
  --r196-portal-y:47.60%;
}
#infoModal.recruit-mode .r183-featured-portrait[src*="/dende.png"]{
  --r196-portal-x:80.28%;
  --r196-portal-y:49.20%;
}
#infoModal.recruit-mode .r183-featured-portrait[src*="/majin_boo.png"]{
  --r196-portal-x:85.25%;
  --r196-portal-y:47.76%;
}

/* Upcoming portrait stays centered in its own card. */
#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:16px!important;
    padding-right:86px!important;
  }
  #infoModal.recruit-mode #forgeHelpBtn,
  #infoModal.recruit-mode .modal-head>.x{
    top:5px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    background-size:contain!important;
  }
  #infoModal.recruit-mode #forgeHelpBtn{right:41px!important}
  #infoModal.recruit-mode .modal-head>.x{right:5px!important}

  #infoModal.recruit-mode .r183-banner-copy{
    width:47%!important;
    padding:11px 14px 10px 18px!important;
  }
  #infoModal.recruit-mode .r183-banner-copy h1{
    max-width:100%!important;
    margin-bottom:6px!important;
    font-size:31px!important;
  }
  #infoModal.recruit-mode .r183-banner-copy p{
    width:min(98%,430px)!important;
    max-width:430px!important;
    margin-bottom:8px!important;
    font-size:10.4px!important;
    line-height:1.28!important;
    -webkit-line-clamp:3!important;
  }
  #infoModal.recruit-mode .r183-featured-meta{
    max-width:390px!important;
    gap:8px!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:49%!important}
  #infoModal.recruit-mode .r183-banner-copy h1{font-size:30px!important}
  #infoModal.recruit-mode .r183-banner-copy p{
    width:min(98%,385px)!important;
    max-width:385px!important;
    font-size:10px!important;
    line-height:1.28!important;
  }
  #infoModal.recruit-mode .r183-featured-meta{max-width:365px!important}
  #infoModal.recruit-mode .r183-featured-portrait{
    width:205px!important;
    height:205px!important;
    max-width:205px!important;
    max-height:205px!important;
  }
}