/* Compact Axie-inspired treatment for "What is Brainrot Games?". */
.world-home .world-about{
  --about-bg:#101e52;
  --about-cyan:#84d6ff;
  --about-cyan-body:#79cffb;
  --about-line:rgba(126,216,255,.82);
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:150px 0 24px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  background:var(--about-bg)!important;
  color:var(--about-cyan)!important;
}

.world-home .world-about::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0!important;
  background:var(--about-bg)!important;
  pointer-events:none!important;
}

.world-home .world-about::after{content:none!important;display:none!important}

.world-home .world-about .world-about-inner{
  width:min(1620px,calc(100% - 120px))!important;
  max-width:1620px!important;
  margin:0 auto!important;
  padding:0!important;
}

.world-home .world-about h2{
  position:relative!important;
  max-width:none!important;
  margin:0 auto!important;
  color:var(--about-cyan)!important;
  font-family:"Rowdies",system-ui,sans-serif!important;
  font-size:clamp(29px,2vw,36px)!important;
  font-weight:700!important;
  letter-spacing:.012em!important;
  line-height:1.06!important;
  text-transform:uppercase!important;
  text-align:center!important;
  text-shadow:none!important;
}

/* Keep the same 82px heading-icon slot as OUR ECOSYSTEM, but compensate for
   the tighter artwork inside this PNG so the visible question mark matches
   the solar-system mark instead of looking oversized. */
.world-home .world-about h2::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 6px)!important;
  width:82px!important;
  height:82px!important;
  transform:translateX(-50%)!important;
  background-image:url("./assets/world/about-question-mark.png?v=1")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:64px 64px!important;
  pointer-events:none!important;
}

.world-home .world-about .world-about-description{
  width:min(820px,100%)!important;
  max-width:820px!important;
  margin:26px auto 0!important;
  color:var(--about-cyan-body)!important;
  font-family:"Nunito",system-ui,sans-serif!important;
  font-size:clamp(14px,.98vw,16px)!important;
  font-weight:700!important;
  letter-spacing:.004em!important;
  line-height:1.52!important;
  text-align:center!important;
  text-shadow:none!important;
}

/* Keep the full-width blue section, but size the four-panel strip like the Axie reference. */
.world-home .world-about .world-about-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:min(1520px,86.5vw)!important;
  max-width:1520px!important;
  margin:56px auto 0!important;
  overflow:hidden!important;
  border:1px solid var(--about-line)!important;
  border-radius:12px!important;
  background:rgba(9,27,83,.22)!important;
  box-sizing:border-box!important;
}

.world-home .world-about .about-stat{
  position:relative!important;
  min-height:188px!important;
  padding:24px 18px 21px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border-right:1px solid rgba(126,216,255,.66)!important;
  color:var(--about-cyan)!important;
  background:
    linear-gradient(var(--about-line),var(--about-line)) 8px 8px/9px 1px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) 8px 8px/1px 9px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) calc(100% - 8px) 8px/9px 1px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) calc(100% - 8px) 8px/1px 9px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) 8px calc(100% - 8px)/9px 1px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) 8px calc(100% - 8px)/1px 9px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) calc(100% - 8px) calc(100% - 8px)/9px 1px no-repeat,
    linear-gradient(var(--about-line),var(--about-line)) calc(100% - 8px) calc(100% - 8px)/1px 9px no-repeat!important;
}
.world-home .world-about .about-stat:last-child{border-right:0!important}

.world-home .world-about .about-stat-icon{
  display:block!important;
  width:80px!important;
  height:55px!important;
  margin:0 0 11px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}

/* Hard reset: legacy cached nth-child rules used background SVGs on this same class. */
.world-home .world-about .world-about-stats .about-stat:nth-child(1) > img.about-stat-icon,
.world-home .world-about .world-about-stats .about-stat:nth-child(2) > img.about-stat-icon,
.world-home .world-about .world-about-stats .about-stat:nth-child(3) > img.about-stat-icon,
.world-home .world-about .world-about-stats .about-stat:nth-child(4) > img.about-stat-icon{
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
}

.world-home .world-about .about-stat strong{
  display:block!important;
  margin:0!important;
  color:var(--about-cyan)!important;
  font-family:"Rowdies",system-ui,sans-serif!important;
  font-size:clamp(15px,1vw,17px)!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
}
.world-home .world-about .about-stat span{
  display:block!important;
  margin:6px 0 0!important;
  color:var(--about-cyan-body)!important;
  font-family:"Nunito",system-ui,sans-serif!important;
  font-size:clamp(12px,.82vw,14px)!important;
  font-weight:800!important;
  line-height:1.25!important;
}

@media(max-width:1000px){
  .world-home .world-about h2::before{width:72px!important;height:72px!important;bottom:calc(100% + 6px)!important;background-size:56px 56px!important}
}

@media(max-width:900px){
  .world-home .world-about{padding:110px 0 32px!important}
  .world-home .world-about .world-about-inner{width:min(100% - 44px,760px)!important}
  .world-home .world-about h2{font-size:30px!important}
  .world-home .world-about .world-about-description{width:min(680px,100%)!important;margin-top:22px!important;font-size:14px!important}
  .world-home .world-about .world-about-stats{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:48px!important}
  .world-home .world-about .about-stat{min-height:160px!important;padding:22px 16px 19px!important;border-bottom:1px solid rgba(126,216,255,.66)!important}
  .world-home .world-about .about-stat:nth-child(2){border-right:0!important}
  .world-home .world-about .about-stat:nth-child(3),
  .world-home .world-about .about-stat:nth-child(4){border-bottom:0!important}
  .world-home .world-about .about-stat-icon{width:74px!important;height:51px!important;margin-bottom:10px!important}
}

@media(max-width:680px){
  .world-home .world-about h2::before{width:62px!important;height:62px!important;bottom:calc(100% + 5px)!important;background-size:48px 48px!important}
}

@media(max-width:560px){
  .world-home .world-about{padding:80px 0 28px!important}
  .world-home .world-about .world-about-inner{width:calc(100% - 28px)!important}
  .world-home .world-about h2{font-size:26px!important}
  .world-home .world-about .world-about-description{font-size:13px!important;line-height:1.5!important}
  .world-home .world-about .world-about-stats{grid-template-columns:1fr!important;margin-top:38px!important}
  .world-home .world-about .about-stat{min-height:136px!important;border-right:0!important;border-bottom:1px solid rgba(126,216,255,.66)!important;padding:20px 14px 17px!important}
  .world-home .world-about .about-stat:nth-child(3){border-bottom:1px solid rgba(126,216,255,.66)!important}
  .world-home .world-about .about-stat:last-child{border-bottom:0!important}
  .world-home .world-about .about-stat-icon{width:68px!important;height:47px!important;margin-bottom:8px!important}
  .world-home .world-about .about-stat strong{font-size:15px!important}
  .world-home .world-about .about-stat span{font-size:12px!important;margin-top:5px!important}
}
