/* Match each 192 x 220 source cell's aspect ratio; never stretch square crops. */
html body :is(#catalog,#landingV6,#resultScreen) .love64-art.love64-art.love64-art {
  background-image:url('https://koropopgames.com/assets/love64-characters-approved.png')!important;
  background-size:800% 800%!important;
  background-position:var(--art-x) var(--art-y)!important;
  background-repeat:no-repeat!important;
  background-color:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  image-rendering:auto!important;
  filter:none!important;
  transform:none!important;
}
html body :is(#catalog,#landingV6,#resultScreen) .love64-art.love64-art.love64-art[data-mbti="ISTJ"] {
  background-image:url('love64-reference-istj.jpeg')!important;
  background-size:1723.809524% 1086%!important;
}
html body #catalog .chara.love64-art {width:104px!important;height:119.1667px!important;}
html body #landingV6 .v6-card .v6-pixel.love64-art {width:104px!important;height:119.1667px!important;}
html body #landingV6 .v6-cat-avatar.love64-art {width:72px!important;height:82.5px!important;flex:0 0 72px!important;}
html body #resultCharacter.love64-art {width:144px!important;height:165px!important;margin:0 auto 12px!important;}
html body .love64-art:before,html body .love64-art:after {content:none!important;display:none!important;}
#catalog .catch {font-size:.875rem!important;line-height:1.65!important;color:#bf2855!important;}
#catalog .sub {font-size:.9rem!important;}
#catalog .greek,#catalog .family-title span,#catalog .group-label small {color:#616573!important;}
#landingV6 .v6-card span,#landingV6 .v6-cat-copy span {color:#626574!important;}
@media(max-width:560px){
  html body #landingV6 .v6-catalog article {gap:8px!important;padding:12px 8px!important;min-width:0!important;}
  html body #landingV6 .v6-cat-avatar.love64-art {width:56px!important;height:64.1667px!important;flex-basis:56px!important;}
  #landingV6 .v6-cat-copy b {font-size:.95rem!important;}
  #landingV6 .v6-cat-copy span {font-size:.75rem!important;line-height:1.6!important;}
  #catalog .family-title {flex-wrap:wrap;}
  #catalog .group-label small {display:block!important;margin:6px 0 0!important;line-height:1.6!important;}
}
@media(prefers-reduced-motion:reduce){
  html {scroll-behavior:auto!important;}
  #landingV6 .v6-rail {animation:none!important;overflow-x:auto;max-width:100%;}
}

html body #catalog .chara.love64-art[data-mbti="ISTJ"],
html body #landingV6 .v6-card .v6-pixel.love64-art[data-mbti="ISTJ"] {width:100.1px!important;}
html body #landingV6 .v6-cat-avatar.love64-art[data-mbti="ISTJ"] {width:69.3px!important;flex-basis:69.3px!important;}
html body #resultCharacter.love64-art[data-mbti="ISTJ"] {width:138.6px!important;}
@media(max-width:560px){
html body #landingV6 .v6-cat-avatar.love64-art[data-mbti="ISTJ"] {width:53.9px!important;flex-basis:53.9px!important;}
}

html body #landingV6 .v16-axis-char.love64-art {width:52px!important;height:59.5833px!important;flex:0 0 52px!important;}
html body #landingV6 .v16-hero-char.love64-art {width:112px!important;height:128.3333px!important;}
html body #landingV6 .v16-hero-char.love64-art[data-mbti="ISTJ"] {width:107.8px!important;}

html body :is(#catalog,#landingV6,#resultScreen) .love64-art.love64-art.love64-art[data-mbti="ISTJ"] {box-shadow:inset 2px 0 #fff,inset -2px 0 #fff!important;}
@media(max-width:360px){
  #landingV6 .v6-hero h1 {font-size:1.5rem!important;line-height:1.45!important;}
  #landingV6 .v6-hero p {font-size:.875rem!important;}
  #landingV6 .v6-starts {gap:8px!important;}
  #landingV6 .v6-start {padding:12px 8px!important;gap:6px!important;}
  #landingV6 .v6-start>span:last-child {font-size:.9rem!important;white-space:nowrap;}
  #landingV6 .v10-cta-avatar {width:32px!important;height:36px!important;flex-basis:32px!important;}
}

/* Approved INTJ only: override the generic 64-character sprite selector above. */
html body #landingV6 .v6-catalog .v6-cat-avatar.love64-art.intj-approved,
html body #landingV6 .v6-catalog .v6-cat-avatar.love64-art[data-mbti="INTJ"]{
  background-image:url('love64-intj-new.webp')!important;
  background-position:center center!important;
  background-size:auto 76%!important;
  background-repeat:no-repeat!important;
}
html body #landingV6 .v6-characters .v6-card .v6-pixel.intj-approved{
  background-image:url('love64-intj-new.webp')!important;
  background-position:center center!important;
  background-size:auto 76%!important;
  background-repeat:no-repeat!important;
}

/* CTA character art uses the exact approved 16-character sheet.
   Blend away its white paper background on the existing colored buttons. */
html body #landingV6 .v10-cta-avatar.love64-art.love64-art.love64-art,
html body #stickyCta .v10-cta-avatar.love64-art.love64-art.love64-art{
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

html body #stickyCta .v10-cta-avatar.love64-art{
  display:inline-block;
  width:34px;
  height:38px;
  flex:0 0 34px;
}
@media(max-width:360px){
  html body #stickyCta .v10-cta-avatar.love64-art{width:28px;height:32px;flex-basis:28px}
}

/* 2026-10-10: opaque, faithful colors on BOTH start buttons. */
#landingV6 .v10-cta-avatar:has(> .love64-cta-img),
#stickyCta .v10-cta-avatar:has(> .love64-cta-img){
  background:none!important;opacity:1!important;filter:none!important;
  border:0!important;box-shadow:none!important;overflow:visible!important;
}
#landingV6 .love64-cta-img,#stickyCta .love64-cta-img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:contain!important;opacity:1!important;filter:none!important;
  mix-blend-mode:normal!important;transform:none!important;
}
html body #catalog .chara.love64-art > svg{overflow:visible!important}
html body #catalog .chara.love64-art {overflow:visible!important}
html body #resultCharacter.love64-art > svg{overflow:visible!important}

/* 2026-10-10: match benchmark's restrained mobile CTA; no oversized avatars. */
html body #stickyCta.sticky-cta {
  display:flex!important; align-items:center!important; justify-content:center!important;
  min-height:0!important;height:auto!important;
  gap:10px!important;
  padding:10px max(14px,env(safe-area-inset-left)) calc(11px + env(safe-area-inset-bottom))!important;
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid #f1eff2!important;
  box-shadow:0 -4px 18px rgba(42,29,48,.055)!important;
}
html body #stickyCta.sticky-cta button {
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:1 1 0!important;min-width:0!important;
  width:auto!important;max-width:310px!important;
  height:48px!important;min-height:48px!important;max-height:48px!important;
  gap:7px!important;padding:6px 10px!important;
  border-radius:15px!important;font-size:clamp(13px,3.8vw,15px)!important;
  font-weight:900!important;line-height:1.15!important;letter-spacing:0!important;
  white-space:nowrap!important;
  box-shadow:0 3px 10px rgba(37,35,57,.08)!important;
}
html body #stickyCta.sticky-cta button > span:last-child {
  display:inline-block!important;flex:0 0 auto!important;
  font-size:inherit!important;white-space:nowrap!important;
  overflow:visible!important;line-height:1.15!important;
}
html body #stickyCta.sticky-cta .v10-cta-avatar {
  display:block!important;position:relative!important;
  width:29px!important;height:33px!important;flex:0 0 29px!important;
  max-width:29px!important;max-height:33px!important;
  background:none!important;opacity:1!important;
  overflow:hidden!important;transform:none!important;
}
html body #stickyCta.sticky-cta .v10-cta-avatar img.love64-cta-img {
  display:block!important;position:static!important;
  width:100%!important;height:100%!important;max-width:100%!important;
  object-fit:contain!important;opacity:1!important;filter:none!important;
  mix-blend-mode:normal!important;transform:none!important;
}
/* Top buttons: same benchmark proportions, with readable unwrapped labels. */
html body #landingV6 .v6-starts {
  width:min(calc(100% - 44px),560px)!important;
  max-width:560px!important;margin-inline:auto!important;
  gap:10px!important;
}
html body #landingV6 .v6-starts .v6-start {
  min-height:58px!important; height:58px!important;
  padding:7px 10px!important; gap:8px!important;
  border-radius:16px!important; font-size:clamp(13px,4vw,16px)!important;
  white-space:nowrap!important;line-height:1.1!important;
}
html body #landingV6 .v6-starts .v10-cta-avatar{
  width:34px!important;height:39px!important;flex:0 0 34px!important;
  max-width:34px!important;max-height:39px!important;
}
html body #landingV6 .v6-starts .v6-start > span:last-child {
  white-space:nowrap!important;flex:0 0 auto!important;line-height:1.15!important;
}
@media(max-width:360px){
 html body #stickyCta.sticky-cta {padding-left:8px!important;padding-right:8px!important;gap:7px!important}
 html body #stickyCta.sticky-cta button {height:46px!important;min-height:46px!important;max-height:46px!important;padding:5px 6px!important;font-size:12.5px!important}
 html body #landingV6 .v6-starts{width:min(calc(100% - 20px),560px)!important;gap:7px!important}
}

/* Subtle character poses and expression cues, 2026-10-10.
   The approved character artwork is NOT repainted: only eyes/cheeks accents
   and full-body posture react, with original hair, face shape and clothes intact. */
html body :is(#catalog,#landingV6,#resultScreen) .love64-art .love64-pose-motion {
  transform-box:fill-box;
  transform-origin:50% 66%;
  will-change:auto;
}
html body :is(#catalog,#landingV6,#resultScreen) .love64-art .love64-facial-fx {
  pointer-events:none;
  mix-blend-mode:normal;
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) {
  #catalog .card:hover .love64-variant-0 .love64-pose-motion,
  #landingV6 .v6-card:hover .love64-variant-0 .love64-pose-motion {
    animation:love64-confident 1.35s ease-in-out infinite;
  }
  #catalog .card:hover .love64-variant-1 .love64-pose-motion,
  #landingV6 .v6-card:hover .love64-variant-1 .love64-pose-motion {
    animation:love64-gentle 2.4s ease-in-out infinite;
  }
  #catalog .card:hover .love64-variant-2 .love64-pose-motion,
  #landingV6 .v6-card:hover .love64-variant-2 .love64-pose-motion {
    animation:love64-adventurous .82s ease-in-out infinite;
  }
  #catalog .card:hover .love64-variant-3 .love64-pose-motion,
  #landingV6 .v6-card:hover .love64-variant-3 .love64-pose-motion {
    animation:love64-bashful 2s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion:no-preference) {
  #resultCharacter.love64-variant-0 .love64-pose-motion {animation:love64-confident 3s ease-in-out infinite}
  #resultCharacter.love64-variant-1 .love64-pose-motion {animation:love64-gentle 4s ease-in-out infinite}
  #resultCharacter.love64-variant-2 .love64-pose-motion {animation:love64-adventurous 2.7s ease-in-out infinite}
  #resultCharacter.love64-variant-3 .love64-pose-motion {animation:love64-bashful 4.3s ease-in-out infinite}
}
@keyframes love64-confident {
  0%,100%{transform:translate(0,0) rotate(0)}
  45%{transform:translate(0,-4px) rotate(-1.7deg)}
}
@keyframes love64-gentle {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(1px,1px) rotate(1.6deg)}
}
@keyframes love64-adventurous {
  0%,100%{transform:translate(0,0) rotate(0)}
  45%{transform:translate(0,-6px) rotate(-3.1deg)}
  65%{transform:translate(0,-3px) rotate(1deg)}
}
@keyframes love64-bashful {
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(1px,2px) rotate(2.1deg)}
}
@media(prefers-reduced-motion:reduce) {
  .love64-pose-motion {animation:none!important}
}

/* On mobile, only the visible catalog cards move: pose, not recolored costumes. */
@media (prefers-reduced-motion:no-preference) {
 #catalog .card.love64-in-view .love64-variant-0 .love64-pose-motion {
   animation:love64-confident 3.4s ease-in-out infinite;
 }
 #catalog .card.love64-in-view .love64-variant-1 .love64-pose-motion {
   animation:love64-gentle 4.3s ease-in-out infinite;
 }
 #catalog .card.love64-in-view .love64-variant-2 .love64-pose-motion {
   animation:love64-adventurous 2.1s ease-in-out infinite;
 }
 #catalog .card.love64-in-view .love64-variant-3 .love64-pose-motion {
   animation:love64-bashful 4.1s ease-in-out infinite;
 }
}
@media(prefers-reduced-motion:reduce) {
 #catalog .card.love64-in-view .love64-pose-motion {animation:none!important}
}