/* Final BabyT fixes loaded after all other CSS. */

/* Keep the mobile How-to-Buy heading style like the older mobile version. */
@media (max-width: 900px){
  body #howToBuyTitle,
  body .buy-guide-section .section-title{
    font-family: var(--headline)!important;
    font-weight: 950!important;
    letter-spacing: .035em!important;
    line-height: .92!important;
    text-transform: uppercase!important;
    text-shadow: none!important;
  }

  body .buy-step-body h3{
    font-family: var(--headline)!important;
    font-weight: 950!important;
    letter-spacing: .02em!important;
    line-height: 1!important;
    text-transform: uppercase!important;
  }
}

@media (max-width: 640px){
  body #howToBuyTitle,
  body .buy-guide-section .section-title{
    font-size: 48px!important;
  }

  body .buy-step-body h3{
    font-size: 26px!important;
  }
}

/* Restore the old mobile Studio button/title typography only on mobile, but keep the trait title compact so the panel does not jump. */
@media (max-width: 900px){
  body .studio-panel .trait-card span,
  body .studio-panel .layer-tab,
  body .studio-panel .studio-actions .comic-btn,
  body #randomBtn,
  body #downloadBtn{
    font-family: var(--headline)!important;
    font-weight: 950!important;
    text-transform: uppercase!important;
    letter-spacing: .035em!important;
    line-height: 1!important;
  }

  body .studio-panel .trait-card{
    min-height: 124px!important;
  }

  body .studio-panel .trait-card span{
    font-size: clamp(26px, 6.2vw, 30px)!important;
    max-width: calc(100% - 86px)!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
  }

  body .studio-panel .layer-tab{
    font-size: 15px!important;
  }

  body .studio-panel .studio-actions .comic-btn,
  body #randomBtn,
  body #downloadBtn{
    font-size: 22px!important;
  }
}

@media (max-width: 380px){
  body .studio-panel .trait-card{
    min-height: 118px!important;
  }

  body .studio-panel .trait-card span{
    font-size: 26px!important;
  }

  body .studio-panel .layer-tab{
    font-size: 13px!important;
  }
}

/* About section: clean social icon buttons, PNG-replaceable icons, no CA button. */
body .story-actions .buy-link,
body .story-actions .comic-btn.white{
  background: #fff!important;
  color: #000!important;
}

body .social-bubbles{
  display: flex!important;
  align-items: center!important;
  justify-content: flex-start!important;
  flex-wrap: nowrap!important;
  gap: 18px!important;
}

body .social-bubbles a{
  order: 10;
  overflow: hidden!important;
  padding: 0!important;
  background-color: #fff!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: 78% 78%!important;
  color: transparent!important;
  font-size: 0!important;
  line-height: 0!important;
  flex: 0 0 auto!important;
}

/* The visible icon is now the PNG background. If a PNG is missing, the old SVG stays as fallback behind it. */
body .social-bubbles a img{
  display: none!important;
}

body #storyPumpLink{
  order: 1;
  background-image: url('./assets/social-icons/pumpfun.png'), url('./assets/social-icons/pumpfun-wood.svg')!important;
}
body #storyTiktokLink{
  order: 2;
  background-image: url('./assets/social-icons/tiktok.png'), url('./assets/social-icons/tiktok-wood.svg')!important;
}
body #storyXLink{
  order: 3;
  background-image: url('./assets/social-icons/x.png'), url('./assets/social-icons/x-wood.svg')!important;
}
body #storyInstagramLink{
  order: 4;
  background-image: url('./assets/social-icons/instagram.png'), url('./assets/social-icons/instagram-wood.svg')!important;
}
body #storyDexLink{
  order: 5;
  background-image: url('./assets/social-icons/dexscreener.png'), url('./assets/social-icons/dexscreener-wood.svg')!important;
}
body #storyJupiterLink{
  order: 6;
  background-image: url('./assets/social-icons/jupiter.png'), url('./assets/social-icons/jupiter-wood.svg')!important;
}
body #copyCaBtn2{ display: none!important; }

@media (min-width: 901px){
  body .buy-guide-section{
    padding-top: clamp(42px, 6.8vw, 82px)!important;
  }

  body .about-story h2,
  body #aboutTitle{
    font-size: clamp(34px, 3.7vw, 52px)!important;
    letter-spacing: .025em!important;
  }

  body .social-bubbles a{
    width: 60px!important;
    height: 60px!important;
  }

  /* Desktop-only Studio typography: same clean body font as the selected-title card, not italic and not headline-style. */
  body .studio-panel .trait-card span,
  body .studio-panel .trait-card strong,
  body .studio-panel .layer-tab,
  body .studio-panel .studio-actions .comic-btn,
  body #randomBtn,
  body #downloadBtn{
    font-family: var(--body)!important;
    text-transform: none!important;
    letter-spacing: -0.015em!important;
    text-shadow: none!important;
    font-style: normal!important;
  }

  body .studio-panel .trait-card span{
    font-size: clamp(24px, 2.15vw, 32px)!important;
    font-weight: 950!important;
    line-height: 1.05!important;
  }

  /* Desktop only: selected value like "None" should be closer to mobile: readable, a bit bigger, but not too thick. */
  body .studio-panel .trait-card strong{
    font-size: clamp(18px, 1.55vw, 24px)!important;
    font-weight: 720!important;
    line-height: 1.15!important;
    letter-spacing: -0.01em!important;
  }

  /* Desktop only: layer choice buttons should stay readable, but not thick/bold. */
  body .studio-panel .layer-tab{
    font-size: clamp(13px, 1.05vw, 16px)!important;
    font-weight: 650!important;
    line-height: 1!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-align: center!important;
  }

  body .studio-panel .layer-tab.active,
  body .studio-panel .layer-tab[aria-selected="true"]{
    font-weight: 700!important;
  }

  body .studio-panel .studio-actions .comic-btn,
  body #randomBtn,
  body #downloadBtn{
    font-size: clamp(17px, 1.35vw, 21px)!important;
    font-weight: 950!important;
    line-height: 1!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-align: center!important;
    padding-top: 0!important;
    padding-bottom: 0!important;
  }
}

@media (max-width: 640px){
  body .social-bubbles{
    width: 100%!important;
    justify-content: space-between!important;
    gap: clamp(6px, 1.8vw, 10px)!important;
  }

  body .social-bubbles a{
    width: clamp(42px, 11.2vw, 50px)!important;
    height: clamp(42px, 11.2vw, 50px)!important;
    border-width: 3px!important;
    background-size: 76% 76%!important;
    box-shadow: 4px 5px 0 rgba(0,0,0,.18)!important;
  }
}

@media (max-width: 380px){
  body .social-bubbles a{
    width: 42px!important;
    height: 42px!important;
    background-size: 74% 74%!important;
  }
}