/* English Study Bot · Homepage Fun Quiz Lab refinement v1.0.39 Hotfix 39
 * Scope: ONLY the existing v1.0.37 homepage quiz entrance (.home-quiz137).
 * Goal: desktop + mobile both match the approved pink banner style more closely,
 * while keeping the original DOM, text, links, girl asset and CTA effect JS.
 */
.home-quiz137{
  display:block;
  width:100%;
  max-width:none;
  margin:16px 0 22px;
  padding:0;
  box-sizing:border-box;
}
.home-quiz137-card{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:134px;
  display:grid;
  grid-template-columns:minmax(250px,25%) minmax(0,1fr) 182px;
  align-items:center;
  gap:16px;
  overflow:hidden;
  padding:0 26px 0 0;
  border:1px solid rgba(236,157,184,.42);
  border-radius:24px;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.94),transparent 26%),
    radial-gradient(circle at 78% 22%,rgba(255,255,255,.72),transparent 28%),
    linear-gradient(104deg,#fff7fa 0%,#fff1f5 40%,#f8f1ff 71%,#eef5ff 100%);
  box-shadow:0 12px 30px rgba(91,103,155,.10), inset 0 1px 0 rgba(255,255,255,.95);
}
.home-quiz137-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.78;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,186,208,.20) 0 6px,transparent 7px),
    radial-gradient(circle at 60% 20%,rgba(255,213,230,.26) 0 8px,transparent 9px),
    radial-gradient(circle at 74% 28%,rgba(255,189,212,.18) 0 5px,transparent 6px),
    radial-gradient(circle at 70% 66%,rgba(255,183,205,.22) 0 4px,transparent 5px),
    radial-gradient(circle at 79% 59%,rgba(177,156,255,.15) 0 4px,transparent 5px),
    radial-gradient(circle at 86% 66%,rgba(255,207,104,.16) 0 5px,transparent 6px);
}
.home-quiz137-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 18%,rgba(255,255,255,.26) 24%,transparent 33%),
    radial-gradient(circle at 90% 80%,rgba(255,183,206,.15),transparent 30%);
}
.home-quiz137-art{
  position:relative;
  align-self:stretch;
  min-width:0;
  min-height:134px;
  overflow:hidden;
}
.home-quiz137-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0 68%,rgba(255,244,248,.35) 80%,rgba(255,244,248,.98) 100%);
}
.home-quiz137-art img{
  display:block;
  width:100%;
  height:100%;
  min-height:134px;
  object-fit:cover;
  object-position:49% center;
  filter:saturate(1.01) contrast(1.01);
  transform:scale(1.01);
}
.home-quiz137-copy{
  min-width:0;
  padding:10px 0;
}
.home-quiz137-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 7px;
  padding:6px 12px;
  border:1px solid rgba(221,153,189,.28);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#ae68ad;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
  font-size:12.5px;
  line-height:1;
  font-weight:850;
  letter-spacing:.02em;
  white-space:nowrap;
}
.home-quiz137-kicker i{font-style:normal;color:#ff9ab8;font-size:11px}
.home-quiz137-copy h2{
  margin:0;
  font-family:"STKaiti","KaiTi","Songti SC","PingFang SC","Microsoft YaHei",serif;
  font-size:clamp(35px,2.8vw,49px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
  white-space:nowrap;
  background:linear-gradient(90deg,#ea72a0 0%,#eb5f97 24%,#d9509d 48%,#b44fc2 72%,#8f65e2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 8px 18px rgba(235,95,151,.10);
}
.home-quiz137-copy h2 em{
  font-style:normal;
  background:inherit;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.home-quiz137-copy p{
  margin:10px 0 0;
  color:#756b93;
  font-size:15.5px;
  line-height:1.35;
  font-weight:760;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-quiz137-cta{
  position:relative;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:166px;
  min-height:48px;
  padding:0 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  background:linear-gradient(135deg,#ff98ad 0%,#ff6e96 52%,#ef5e95 100%);
  box-shadow:0 12px 25px rgba(225,82,132,.25), inset 0 1px 0 rgba(255,255,255,.42);
  font-size:15px;
  line-height:1;
  font-weight:900;
  letter-spacing:.01em;
  transform:translateZ(0);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.home-quiz137-cta::before{
  content:"";
  position:absolute;
  top:-70%;
  left:-35%;
  width:42%;
  height:240%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transition:left .48s ease;
}
.home-quiz137-cta::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(255,125,166,.0);
  border-radius:inherit;
  pointer-events:none;
}
.home-quiz137-cta span,.home-quiz137-cta svg{position:relative;z-index:2}
.home-quiz137-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.home-quiz137-cta:focus-visible{outline:3px solid rgba(239,95,150,.25);outline-offset:4px}
.home-quiz137-cta:active{transform:translateY(1px) scale(.965);filter:saturate(1.07)}
.home-quiz137-cta.is-activating{transform:scale(.95);box-shadow:0 7px 16px rgba(225,82,132,.20),0 0 0 6px rgba(255,112,146,.10)}
.home-quiz137-cta.is-activating::after{animation:homeQuiz137Ring .32s ease-out}
.home-quiz137-pop{
  position:absolute;
  z-index:3;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  pointer-events:none;
  background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.22);
  animation:homeQuiz137Pop .34s ease-out forwards;
}
.home-quiz137-pop:nth-last-child(2){background:#ffd2df}
.home-quiz137-pop:nth-last-child(3){background:#fff1a7}
@keyframes homeQuiz137Ring{0%{border-color:rgba(255,125,166,.48);transform:scale(.94);opacity:1}100%{border-color:rgba(255,125,166,0);transform:scale(1.09);opacity:0}}
@keyframes homeQuiz137Pop{0%{transform:translate(0,0) scale(.5);opacity:1}100%{transform:translate(var(--qx),var(--qy)) scale(1.15);opacity:0}}

@media(hover:hover) and (pointer:fine){
  .home-quiz137-card{transition:box-shadow .2s ease,border-color .2s ease}
  .home-quiz137-card:hover{border-color:rgba(229,134,170,.48);box-shadow:0 16px 34px rgba(91,103,155,.13),inset 0 1px 0 #fff}
  .home-quiz137-cta:hover{transform:translateY(-2px);box-shadow:0 15px 28px rgba(225,82,132,.29),0 0 0 5px rgba(255,112,146,.07)}
  .home-quiz137-cta:hover::before{left:115%}
}

/* Desktop / tablet keep the same homepage shell width. */
@media(min-width:768px){
  body.esb-home-desktop-v486 .home-quiz137{
    width:var(--esb-v486-shell)!important;
    max-width:var(--esb-v486-shell)!important;
    margin-left:50%!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
  }
}
@media(min-width:1024px){
  .home-quiz137-card{grid-template-columns:minmax(256px,25%) minmax(0,1fr) 182px}
}
@media(min-width:768px) and (max-width:1023px){
  .home-quiz137-card{
    grid-template-columns:minmax(190px,24%) minmax(0,1fr) 146px;
    gap:12px;
    min-height:118px;
    padding-right:14px;
  }
  .home-quiz137-art,.home-quiz137-art img{min-height:118px}
  .home-quiz137-kicker{font-size:10px;padding:5px 9px}
  .home-quiz137-copy h2{font-size:clamp(27px,3vw,33px)}
  .home-quiz137-copy p{font-size:12.2px}
  .home-quiz137-cta{width:138px;min-height:44px;font-size:13px;padding:0 14px}
}

/* Phone: compact two-column layout; do NOT clip the girl, the title or the CTA text. */
@media(max-width:767.98px){
  .home-quiz137{margin:12px 0 18px}
  .home-quiz137-card{
    grid-template-columns:96px minmax(0,1fr);
    gap:10px;
    min-height:142px;
    padding:0;
    border-radius:20px;
  }
  .home-quiz137-art{
    min-height:142px;
    width:96px;
  }
  .home-quiz137-art img{
    min-height:142px;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:58% center;
    transform:scale(1.02);
  }
  .home-quiz137-art::after{background:linear-gradient(90deg,transparent 0 48%,rgba(255,244,248,.35) 69%,rgba(255,244,248,.97) 100%)}
  .home-quiz137-copy{
    min-width:0;
    padding:10px 12px 54px 0;
  }
  .home-quiz137-kicker{
    font-size:9px;
    padding:4px 7px;
    margin-bottom:6px;
    gap:4px;
  }
  .home-quiz137-copy h2{
    font-size:clamp(18px,5.15vw,23px);
    line-height:1.08;
    letter-spacing:-.03em;
    white-space:normal;
    text-wrap:balance;
  }
  .home-quiz137-copy p{
    margin-top:7px;
    font-size:clamp(10px,2.95vw,11.6px);
    line-height:1.32;
    letter-spacing:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:keep-all;
  }
  .home-quiz137-cta{
    position:absolute;
    right:12px;
    bottom:11px;
    width:auto;
    min-width:112px;
    min-height:40px;
    padding:0 14px;
    gap:5px;
    font-size:12.8px;
    box-shadow:0 8px 18px rgba(225,82,132,.22);
  }
  .home-quiz137-cta svg{width:15px;height:15px}
}
@media(max-width:430px){
  .home-quiz137-card{grid-template-columns:88px minmax(0,1fr);min-height:138px;gap:9px}
  .home-quiz137-art{width:88px;min-height:138px}
  .home-quiz137-art img{min-height:138px;object-position:59% center}
  .home-quiz137-copy{padding:10px 10px 52px 0}
  .home-quiz137-copy h2{font-size:clamp(17px,5vw,21px)}
  .home-quiz137-copy p{font-size:clamp(9.6px,2.8vw,10.8px)}
  .home-quiz137-cta{min-width:106px;min-height:38px;font-size:12px;padding:0 12px;right:10px;bottom:10px}
}
@media(max-width:360px){
  .home-quiz137-card{grid-template-columns:82px minmax(0,1fr);min-height:134px;gap:8px}
  .home-quiz137-art{width:82px;min-height:134px}
  .home-quiz137-art img{min-height:134px;object-position:60% center}
  .home-quiz137-copy{padding:9px 8px 50px 0}
  .home-quiz137-kicker{font-size:8.3px;padding:4px 6px}
  .home-quiz137-copy h2{font-size:clamp(16px,4.95vw,18px)}
  .home-quiz137-copy p{font-size:9.2px;line-height:1.28}
  .home-quiz137-cta{min-width:102px;min-height:37px;font-size:11.4px;padding:0 10px}
}
@media(prefers-reduced-motion:reduce){
  .home-quiz137-card,.home-quiz137-cta,.home-quiz137-cta::before{transition:none!important}
  .home-quiz137-pop,.home-quiz137-cta.is-activating::after{animation:none!important}
}