/* Final visual overrides loaded last. This keeps mobile and desktop consistent. */

body .panel-head h2,
body .links-panel h2,
body .about-story h2,
body .section-title,
body .studio-panel h2,
body #generatorTitle,
body #aboutTitle,
body #howToBuyTitle{
  text-shadow:none!important;
}

body .panel-head p{
  display:none!important;
}

body .gallery-track{
  animation-duration:100s!important;
}

body .gallery-card{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:24px!important;
  overflow:hidden!important;
  cursor:default!important;
}

body .gallery-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border:0!important;
  box-shadow:none!important;
  transform:scale(1)!important;
  transition:transform .25s ease!important;
  pointer-events:none!important;
}

body .gallery-card:hover img{
  transform:scale(1.065)!important;
}

body .gallery-card.missing{
  border:0!important;
  box-shadow:none!important;
}

body .trait-card{
  position:relative!important;
  padding:20px 22px 22px!important;
  border-radius:24px!important;
}

body .trait-card span{
  margin-right:92px!important;
  line-height:1!important;
}

body .trait-card strong{
  display:block!important;
  margin-top:12px!important;
  font-size:clamp(16px,1.75vw,20px)!important;
  font-weight:850!important;
  line-height:1.25!important;
  color:#202020!important;
}

body .trait-card small,
body #renderStatus{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  margin:0!important;
  padding:5px 9px!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  color:#10220c!important;
  background:#dff8d5!important;
  border:2px solid rgba(0,0,0,.12)!important;
  border-radius:999px!important;
}

body #renderStatus.status-loading{
  color:#421818!important;
  background:#ffe0df!important;
}

body #renderStatus.status-empty{
  color:#3b3420!important;
  background:#fff0c8!important;
}

body #renderStatus.status-ready,
body #renderStatus.status-done{
  color:#10220c!important;
  background:#dff8d5!important;
}

/* Global How-to-buy polish: less heavy fonts and thinner window lines. */
body #howToBuyTitle{
  font-family:"Trebuchet MS","Arial Narrow",Arial,sans-serif!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}

body .buy-step-card{
  border-width:2px!important;
}

body .window-dots{
  border-bottom-width:2px!important;
}

body .window-dots i{
  border-width:2px!important;
}

body .buy-step-body h3{
  font-family:"Trebuchet MS","Arial Narrow",Arial,sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.012em!important;
  line-height:1.08!important;
}

body .buy-step-body p{
  font-weight:500!important;
  color:#111!important;
}

/* Desktop-only: make How to Buy match the Wojak-style layout: cards left/right, character centered. */
@keyframes floatBabyTDesktop{
  0%,100%{transform:translateY(-10px)}
  50%{transform:translateY(-28px)}
}

@media(min-width:901px){
  body .buy-guide-section{
    padding-top:clamp(74px,8vw,112px)!important;
    padding-bottom:clamp(74px,8vw,112px)!important;
  }

  body .buy-guide-section .section-title,
  body #howToBuyTitle{
    font-size:clamp(58px,6.2vw,92px)!important;
    line-height:.95!important;
    margin-bottom:48px!important;
    text-shadow:none!important;
  }

  body .buy-guide-shell{
    width:min(1180px,calc(100% - 48px))!important;
  }

  body .buy-guide-panel{
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:minmax(270px,1fr) minmax(230px,.82fr) minmax(270px,1fr)!important;
    grid-template-rows:repeat(2,minmax(174px,auto))!important;
    gap:32px 40px!important;
    align-items:center!important;
    justify-items:stretch!important;
    padding:58px 50px!important;
    min-height:570px!important;
    border-radius:38px!important;
    overflow:visible!important;
  }

  body .buy-step-card{
    width:100%!important;
    max-width:none!important;
    min-height:168px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:stretch!important;
    position:relative!important;
    z-index:3!important;
    border-width:2px!important;
    border-radius:19px!important;
  }

  body .buy-step-card:nth-of-type(1){
    grid-column:1!important;
    grid-row:1!important;
  }

  body .buy-step-card:nth-of-type(2){
    grid-column:1!important;
    grid-row:2!important;
  }

  body .buy-step-card:nth-of-type(3){
    grid-column:3!important;
    grid-row:1!important;
  }

  body .buy-step-card:nth-of-type(4){
    grid-column:3!important;
    grid-row:2!important;
  }

  body .buy-floating-character{
    display:block!important;
    position:relative!important;
    grid-column:2!important;
    grid-row:1 / span 2!important;
    place-self:center!important;
    right:auto!important;
    top:auto!important;
    width:min(370px,30vw)!important;
    max-width:none!important;
    max-height:540px!important;
    z-index:4!important;
    object-fit:contain!important;
    filter:drop-shadow(9px 12px 0 rgba(0,0,0,.2))!important;
    animation:floatBabyTDesktop 3.8s ease-in-out infinite!important;
    pointer-events:none!important;
  }

  body .window-dots{
    height:42px!important;
    padding:0 22px!important;
    gap:9px!important;
    border-bottom-width:2px!important;
  }

  body .window-dots i{
    width:13px!important;
    height:13px!important;
    border-width:2px!important;
  }

  body .buy-step-body{
    padding:23px 24px 25px!important;
  }

  body .buy-step-body h3{
    font-size:clamp(20px,1.85vw,27px)!important;
    line-height:1.06!important;
    margin-bottom:11px!important;
    letter-spacing:-.015em!important;
  }

  body .buy-step-body p{
    font-size:clamp(14px,1.22vw,17px)!important;
    line-height:1.44!important;
  }
}

@media(min-width:901px) and (max-width:1080px){
  body .buy-guide-shell{
    width:min(100% - 34px,1040px)!important;
  }

  body .buy-guide-panel{
    grid-template-columns:minmax(245px,1fr) minmax(190px,.7fr) minmax(245px,1fr)!important;
    gap:24px 24px!important;
    padding:46px 36px!important;
    min-height:520px!important;
  }

  body .buy-floating-character{
    width:min(300px,29vw)!important;
  }

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

  body .buy-step-body p{
    font-size:14px!important;
  }
}

@media(max-width:900px){
  body .buy-floating-character{
    display:none!important;
  }
}

@media(max-width:640px){
  body .panel-head h2,
  body .links-panel h2,
  body .about-story h2,
  body .section-title,
  body .studio-panel h2,
  body #generatorTitle,
  body #aboutTitle,
  body #howToBuyTitle{
    text-shadow:none!important;
  }

  body #howToBuyTitle{
    font-size:46px!important;
    line-height:1!important;
    letter-spacing:.015em!important;
  }

  body .gallery-track{
    animation-duration:90s!important;
  }

  body .gallery-card{
    border:0!important;
    box-shadow:none!important;
    border-radius:18px!important;
  }

  body .trait-card{
    padding:18px!important;
  }

  body .trait-card span{
    margin-right:76px!important;
    font-size:28px!important;
  }

  body .trait-card strong{
    font-size:17px!important;
    margin-top:10px!important;
  }

  body .trait-card small,
  body #renderStatus{
    top:14px!important;
    right:14px!important;
    font-size:10px!important;
    padding:5px 9px!important;
    background:#dff8d5!important;
    color:#10220c!important;
    border:2px solid rgba(0,0,0,.12)!important;
  }

  body #renderStatus.status-loading{
    background:#ffe0df!important;
    color:#421818!important;
  }

  body #renderStatus.status-empty{
    background:#fff0c8!important;
    color:#3b3420!important;
  }

  body .buy-step-card{
    border-width:2px!important;
    border-radius:20px!important;
  }

  body .window-dots{
    height:48px!important;
    border-bottom-width:2px!important;
    padding-inline:24px!important;
  }

  body .window-dots i{
    width:17px!important;
    height:17px!important;
    border-width:2px!important;
  }

  body .buy-step-body{
    padding:24px 26px 28px!important;
  }

  body .buy-step-body h3{
    font-size:24px!important;
    line-height:1.08!important;
    letter-spacing:-.018em!important;
    margin-bottom:16px!important;
  }

  body .buy-step-body p{
    font-size:18px!important;
    line-height:1.45!important;
    font-weight:500!important;
  }
}

/* Studio readability polish: white buy button and cleaner, readable controls on desktop and mobile. */
body .story-actions .buy-link,
body .story-actions .comic-btn.white{
  background:#fff!important;
  background-color:#fff!important;
  color:#000!important;
  box-shadow:4px 5px 0 rgba(0,0,0,.18)!important;
}

body .story-actions .buy-link:hover,
body .story-actions .comic-btn.white:hover{
  background:#fff!important;
  background-color:#fff!important;
}

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!important;
  line-height:1.12!important;
  font-stretch:normal!important;
}

body .studio-panel .trait-card span{
  font-size:clamp(19px,1.7vw,24px)!important;
  font-weight:900!important;
}

body .studio-panel .trait-card strong{
  font-size:clamp(14px,1.35vw,18px)!important;
  font-weight:750!important;
}

body .studio-panel .layer-tab{
  min-height:40px!important;
  padding:0 14px!important;
  border-width:3px!important;
  font-size:clamp(12px,1vw,14px)!important;
  font-weight:850!important;
}

body .studio-panel .layer-tab.active{
  font-weight:900!important;
}

body .studio-panel .studio-actions .comic-btn,
body #randomBtn,
body #downloadBtn{
  min-height:50px!important;
  border-width:3px!important;
  font-size:clamp(14px,1.05vw,16px)!important;
  font-weight:850!important;
}

@media(max-width:640px){
  body .studio-panel .trait-card span{
    font-size:26px!important;
  }

  body .studio-panel .trait-card strong{
    font-size:17px!important;
    font-weight:750!important;
  }

  body .studio-panel .layer-tab{
    min-height:40px!important;
    padding:0 13px!important;
    font-size:14px!important;
    font-weight:850!important;
  }

  body .studio-panel .studio-actions .comic-btn,
  body #randomBtn,
  body #downloadBtn{
    min-height:54px!important;
    font-size:17px!important;
    font-weight:850!important;
  }
}

/* Desktop final How-to-buy spacing: bigger center mascot, title closer to the black panel. */
@media(min-width:901px){
  body .buy-guide-section .section-title,
  body #howToBuyTitle{
    margin-bottom:24px!important;
  }

  body .buy-floating-character{
    width:min(450px,34vw)!important;
    max-height:640px!important;
  }
}

@media(min-width:901px) and (max-width:1080px){
  body .buy-guide-section .section-title,
  body #howToBuyTitle{
    margin-bottom:22px!important;
  }

  body .buy-floating-character{
    width:min(360px,34vw)!important;
    max-height:600px!important;
  }
}