/* The uploaded illustrated artwork belongs to the full-width "A world worth getting lost in" panorama.
   Keep it proportional and blend it directly into the following star-world artwork. */

/* Match the "Our ecosystem" section background to the blue About section above. */
.world-home .world-ecosystem{
  position:relative;
  isolation:isolate;
  z-index:auto;
  padding-top:40px;
  padding-bottom:105px;
}
.world-home .world-ecosystem::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-1!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  width:100vw!important;
  transform:translateX(-50%)!important;
  background:#101e52!important;
  pointer-events:none!important;
}
.world-home .world-ecosystem::after{
  content:none!important;
  display:none!important;
}

/* Axie-inspired section heading: custom solar-system mark centered above the title. */
.world-home .world-ecosystem .world-section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:32px;
  text-align:center;
}
.world-home .world-ecosystem .world-section-title>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.world-home .world-ecosystem .world-section-title>div::before{
  content:"";
  display:block;
  width:82px;
  height:82px;
  margin:0 0 6px;
  background:url('./assets/world/ecosystem-solar-system.svg?v=1') center/contain no-repeat;
}
.world-home .world-ecosystem .world-section-title .world-kicker,
.world-home .world-ecosystem .world-section-title .section-index{
  display:none!important;
}
.world-home .world-ecosystem .world-section-title h2{
  margin:0;
  color:#84d6ff;
  font-family:"Rowdies",system-ui,sans-serif;
  font-size:clamp(30px,2.35vw,40px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:.012em;
  text-transform:uppercase;
}

/* Keep this section image-first like the Axie reference: two equal image slots. */
.world-home .world-ecosystem .world-ecosystem-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:start!important;
}
.world-home .world-ecosystem .world-game-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:0!important;
  aspect-ratio:1.72/1!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* Crop the ecosystem artwork to the requested framing. */
.world-home .world-ecosystem .world-game-card>img:not(.ecosystem-card-logo){
  object-position:left center!important;
  transform:scale(1.27)!important;
  transform-origin:left center!important;
}
.world-home .world-ecosystem .world-game-card:hover>img:not(.ecosystem-card-logo){
  transform:scale(1.29)!important;
}

/* Brainrot Battles key-art treatment: explicit image overlay so it cannot be
   suppressed by the card pseudo-element rules used elsewhere on the site. */
.world-home .world-ecosystem .world-game-card>.ecosystem-card-logo{
  position:absolute!important;
  z-index:5!important;
  left:50%!important;
  bottom:6%!important;
  top:auto!important;
  right:auto!important;
  width:48%!important;
  height:34%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:translateX(-50%)!important;
  transform-origin:center!important;
  pointer-events:none!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));
}
.world-home .world-ecosystem .world-game-card:hover>.ecosystem-card-logo{
  transform:translateX(-50%)!important;
}

/* TikTok wordmark: keep the source artwork at full opacity and full brightness.
   Only its footprint is reduced to balance it against the detailed Brainrot Battles logo. */
.world-home .world-ecosystem .world-tiktok-link>.ecosystem-card-logo{
  width:40%!important;
  height:30%!important;
  bottom:7%!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.24))!important;
}

/* Legacy pseudo-element rule retained for older cached markup. */
.world-home .world-ecosystem .world-tiktok-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  left:50%!important;
  bottom:7%!important;
  width:32%!important;
  height:22%!important;
  transform:translateX(-50%)!important;
  background:url('./assets/world/tiktok-wordmark.png?v=1') center/contain no-repeat!important;
  pointer-events:none!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.24))!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

.world-home .world-ecosystem .world-game-card::after,
.world-home .world-ecosystem .world-card-label,
.world-home .world-ecosystem .world-game-card-copy,
.world-home .world-ecosystem .world-side-cards{
  display:none!important;
}

/* Use the creator's new artwork in the panorama that previously showed world-hub.webp.
   Start with the exact ecosystem blue so there is no visible hard seam, then
   fade that blue smoothly into the panorama artwork below. */
.world-home .world-panorama{
  position:relative;
  isolation:isolate;
  z-index:1;
  height:clamp(900px,70vw,1320px);
  background:#101e52;
}
.world-home .world-panorama>img{
  opacity:0!important;
  visibility:hidden!important;
}
.world-home .world-panorama::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background-image:none;
  background-repeat:no-repeat;
  background-position:center 54%;
  background-size:cover;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease-out;
}

/* Seamless fade from the ecosystem blue into the artwork — no hard horizontal line. */
.world-home .world-panorama::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      #101e52 0,
      rgba(16,30,82,.96) 24px,
      rgba(16,30,82,.78) 70px,
      rgba(16,30,82,.46) 126px,
      rgba(16,30,82,.18) 182px,
      rgba(16,30,82,0) 245px),
    linear-gradient(90deg,
      rgba(7,18,29,.44) 0%,
      rgba(7,18,29,.20) 28%,
      rgba(7,18,29,.03) 62%,
      rgba(7,18,29,0) 100%);
  opacity:0;
  transition:opacity .18s ease-out;
}

/* Reveal the artwork and its readability shading together only after both large
   transition artworks are fully downloaded and decoded. */
.world-home.artworks-loaded .world-panorama::before{
  background-image:url('./assets/world/adventure-panorama-artwork.png?v=2');
}
.world-home.artworks-loaded .world-panorama::before,
.world-home.artworks-loaded .world-panorama::after{
  opacity:1;
}

.world-home .world-panorama .panorama-copy{
  position:absolute;
  z-index:2;
}
.world-home .world-panorama .panorama-caption{
  display:none!important;
}

@media(max-width:1000px){
  .world-home .world-ecosystem{padding-top:36px;padding-bottom:80px}
  .world-home .world-ecosystem .world-section-title>div::before{width:72px;height:72px;margin-bottom:6px}
  .world-home .world-ecosystem .world-section-title h2{font-size:34px}
  .world-home .world-ecosystem .world-ecosystem-grid{gap:18px!important}
  .world-home .world-ecosystem .world-game-card>img:not(.ecosystem-card-logo){transform:scale(1.22)!important}
  .world-home .world-ecosystem .world-game-card:hover>img:not(.ecosystem-card-logo){transform:scale(1.24)!important}
  .world-home .world-ecosystem .world-game-card>.ecosystem-card-logo{width:50%!important;bottom:6%!important}
  .world-home .world-ecosystem .world-tiktok-link>.ecosystem-card-logo{width:42%!important;height:30%!important;bottom:7%!important}
  .world-home .world-ecosystem .world-tiktok-card::before{width:34%!important;bottom:7%!important}
  .world-home .world-panorama{height:clamp(820px,90vw,1100px)}
  .world-home .world-panorama::before{background-position:center 54%}
}

@media(max-width:680px){
  .world-home .world-ecosystem{padding-top:30px;padding-bottom:66px}
  .world-home .world-ecosystem .world-section-title{margin-bottom:30px}
  .world-home .world-ecosystem .world-section-title>div::before{width:62px;height:62px;margin-bottom:5px}
  .world-home .world-ecosystem .world-section-title h2{font-size:30px}
  .world-home .world-ecosystem .world-ecosystem-grid{grid-template-columns:1fr!important;gap:16px!important}
  .world-home .world-ecosystem .world-game-card>img:not(.ecosystem-card-logo){transform:scale(1.15)!important}
  .world-home .world-ecosystem .world-game-card:hover>img:not(.ecosystem-card-logo){transform:scale(1.17)!important}
  .world-home .world-ecosystem .world-game-card>.ecosystem-card-logo{width:52%!important;bottom:6%!important}
  .world-home .world-ecosystem .world-tiktok-link>.ecosystem-card-logo{width:44%!important;height:30%!important;bottom:7%!important}
  .world-home .world-ecosystem .world-tiktok-card::before{width:36%!important;bottom:7%!important}
  .world-home .world-panorama{height:860px}
  .world-home .world-panorama::before{
    background-position:center 55%;
    background-size:cover;
  }
  .world-home .world-panorama::after{
    background:
      linear-gradient(180deg,
        #101e52 0,
        rgba(16,30,82,.88) 46px,
        rgba(16,30,82,.48) 102px,
        rgba(16,30,82,.12) 154px,
        rgba(16,30,82,0) 190px),
      linear-gradient(90deg,rgba(7,18,29,.36),rgba(7,18,29,.07) 72%,rgba(7,18,29,0));
  }
}