/* BAO result mascot v12 — larger mascot with the live grade centered inside the blank sign. */

#baoIntelligence .bao-grade-presenter{
  min-height:620px!important;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
}

/*
 * Make the mascot substantially larger. The embedded blank-sign artwork is square,
 * so giving this stage enough height lets background-size:contain render the art
 * at a much larger true size instead of constraining it to the old short box.
 */
#baoIntelligence .bao-grade-presenter>.bao-result-mascot{
  display:block!important;
  position:relative!important;
  width:650px!important;
  height:560px!important;
  max-width:100%!important;
  margin:0 auto!important;
  align-self:auto!important;
  justify-self:auto!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:1!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  filter:none!important;
}

/*
 * The grade-sign node is only a transparent positioning frame. The visible sign
 * is part of the mascot artwork. Coordinates are based on the actual square art,
 * not the outer stage width, so the number sits in the white sign area.
 */
#baoIntelligence .bao-grade-presenter>.bao-grade-sign{
  display:block!important;
  position:absolute!important;
  left:calc(50% + 74px)!important;
  top:180px!important;
  transform:translate(-50%,-50%)!important;
  width:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  min-height:86px!important;
  height:86px!important;
  box-sizing:border-box!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:center!important;
  pointer-events:none!important;
  z-index:6!important;
  overflow:visible!important;
}

#baoIntelligence .bao-grade-presenter>.bao-grade-sign:before,
#baoIntelligence .bao-grade-presenter>.bao-grade-sign>span,
#baoIntelligence .bao-grade-presenter>.bao-grade-sign>small{
  display:none!important;
}

/* One live number only, centered in the white portion of the mascot's sign. */
#baoIntelligence .bao-grade-presenter>.bao-grade-sign>strong{
  display:block!important;
  width:100%!important;
  height:86px!important;
  margin:0!important;
  padding:0!important;
  font-size:54px!important;
  line-height:86px!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  font-variant-numeric:tabular-nums!important;
  text-align:center!important;
  color:#0b4f9c!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65)!important;
  white-space:nowrap!important;
}

#baoIntelligence .bao-grade-summary{
  display:block!important;
  width:100%!important;
  max-width:620px!important;
  margin:-8px auto 0!important;
  text-align:center!important;
}

#baoIntelligence .bao-grade-summary h2{
  font-size:0!important;
  line-height:1!important;
  margin:0!important;
}

#baoIntelligence .bao-grade-summary h2:after{
  content:"Your BAO grade";
  display:block;
  font-size:2rem;
  line-height:1.2;
  font-weight:800;
  color:#082341;
}

#baoIntelligence .bao-grade-summary .bao-note{
  margin-top:12px!important;
}

/* Retire stale earlier mascot experiments if cached markup survives. */
#baoIntelligence #baoCanonicalMascotV7,
#baoIntelligence .bao-v7-grade-hero,
#baoIntelligence .bao-single-grade-mascot,
#baoIntelligence .bao-dynamic-grade-mascot{
  display:none!important;
}

@media(max-width:740px){
  #baoIntelligence .bao-grade-presenter{
    min-height:470px!important;
  }
  #baoIntelligence .bao-grade-presenter>.bao-result-mascot{
    width:470px!important;
    height:400px!important;
  }
  #baoIntelligence .bao-grade-presenter>.bao-grade-sign{
    left:calc(50% + 53px)!important;
    top:129px!important;
    width:110px!important;
    min-width:110px!important;
    max-width:110px!important;
    min-height:62px!important;
    height:62px!important;
  }
  #baoIntelligence .bao-grade-presenter>.bao-grade-sign>strong{
    height:62px!important;
    font-size:39px!important;
    line-height:62px!important;
  }
  #baoIntelligence .bao-grade-summary h2:after{
    font-size:1.65rem;
  }
}

@media(max-width:420px){
  #baoIntelligence .bao-grade-presenter{
    min-height:365px!important;
  }
  #baoIntelligence .bao-grade-presenter>.bao-result-mascot{
    width:350px!important;
    height:300px!important;
  }
  #baoIntelligence .bao-grade-presenter>.bao-grade-sign{
    left:calc(50% + 40px)!important;
    top:97px!important;
    width:84px!important;
    min-width:84px!important;
    max-width:84px!important;
    min-height:48px!important;
    height:48px!important;
  }
  #baoIntelligence .bao-grade-presenter>.bao-grade-sign>strong{
    height:48px!important;
    font-size:31px!important;
    line-height:48px!important;
  }
}