/* ================================================================
   Jiu Fan Fan · Tadpole Personality Quiz v1
   Portable module: include this file + jff-tadpole-quiz.js anywhere.
   ================================================================ */

:root{
  --jffq-bg:#080a10;
  --jffq-panel:#10131d;
  --jffq-text:#fff;
  --jffq-muted:rgba(255,255,255,.60);
  --jffq-blue:#63b7ff;
  --jffq-cyan:#52e5eb;
  --jffq-purple:#9a72ff;
  --jffq-pink:#ff73ab;
  --jffq-gold:#ffc56f;
  --jffq-green:#7ce7bc;
}

body.jffQuizOpen{overflow:hidden!important}

.jffQuizBackdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:rgba(2,4,9,.72);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
  backdrop-filter:blur(18px) saturate(112%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility 0s linear .24s;
}

.jffQuizBackdrop.isOpen{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.jffQuizDialog{
  --jffq-accent:255,127,174;
  position:relative;
  isolation:isolate;
  width:min(760px,100%);
  max-height:min(880px,calc(100dvh - 28px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:32px;
  color:var(--jffq-text);
  background:
    radial-gradient(520px 250px at 100% 0%,rgba(255,111,166,.14),transparent 68%),
    radial-gradient(500px 260px at 0% 100%,rgba(84,203,255,.12),transparent 69%),
    radial-gradient(480px 280px at 50% 43%,rgba(145,99,255,.09),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    rgba(7,9,15,.965);
  box-shadow:
    0 42px 140px rgba(0,0,0,.68),
    0 0 55px rgba(130,90,255,.13),
    0 0 42px rgba(255,95,159,.09),
    inset 0 0 0 1px rgba(255,255,255,.025);
  transform:translateY(12px) scale(.982);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}

.jffQuizBackdrop.isOpen .jffQuizDialog{transform:translateY(0) scale(1)}

.jffQuizDialog::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(91,184,255,.72),rgba(151,103,255,.28) 42%,rgba(255,112,164,.70));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.76;
}

.jffQuizGlow{
  position:absolute;
  left:50%;
  bottom:-190px;
  z-index:0;
  width:560px;
  height:360px;
  transform:translateX(-50%);
  border-radius:50%;
  background:conic-gradient(from 25deg,rgba(82,229,235,.16),rgba(154,114,255,.20),rgba(255,115,171,.18),rgba(255,197,111,.12),rgba(82,229,235,.16));
  filter:blur(54px);
  opacity:.72;
  pointer-events:none;
}

.jffQuizClose{
  position:absolute;
  right:16px;
  top:16px;
  z-index:8;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:rgba(255,255,255,.78);
  background:rgba(4,6,11,.58);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:transform .16s ease,border-color .16s ease,color .16s ease;
}
.jffQuizClose:hover{transform:scale(1.05);border-color:rgba(255,255,255,.27);color:#fff}
.jffQuizClose:active{transform:scale(.94)}

.jffQuizScroll{
  position:relative;
  z-index:2;
  max-height:min(880px,calc(100dvh - 28px));
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}

.jffQuizInner{padding:27px 30px 30px}

.jffQuizHeader{
  padding-right:46px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.jffQuizEyebrow{
  color:rgba(255,190,125,.76);
  font-size:8px;
  font-weight:950;
  letter-spacing:.19em;
}

.jffQuizHeader h2{
  margin:8px 0 0;
  font-size:clamp(25px,4.4vw,36px);
  font-weight:950;
  line-height:1.08;
  letter-spacing:-1px;
}

.jffQuizHeader h2 span{
  background:linear-gradient(90deg,#6ed9ff,#9b74ff 48%,#ff78ad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.jffQuizCounter{
  flex:0 0 auto;
  color:rgba(255,255,255,.35);
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
}
.jffQuizCounter strong{color:rgba(255,255,255,.90);font-size:17px}

/* Paw progress ---------------------------------------------------- */
.jffQuizPawTrack{
  position:relative;
  margin:25px 4px 0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
}

.jffQuizPawTrack::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(101,201,255,.14),rgba(155,113,255,.17),rgba(255,112,170,.14));
  transform:translateY(-50%);
}

.jffQuizPaw{
  position:relative;
  z-index:2;
  width:32px;
  height:32px;
  margin:auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  color:rgba(255,255,255,.18);
  background:rgba(7,9,15,.92);
  transform:scale(.87);
  transition:color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.jffQuizPaw svg{width:18px;height:18px;display:block;fill:currentColor}
.jffQuizPaw.isDone{
  color:rgba(119,221,255,.72);
  border-color:rgba(106,209,255,.25);
  background:rgba(72,179,235,.055);
  transform:scale(.92);
  box-shadow:0 0 16px rgba(84,198,255,.10);
}
.jffQuizPaw.isCurrent{
  color:#fff;
  border-color:rgba(var(--jffq-accent),.52);
  background:radial-gradient(circle,rgba(var(--jffq-accent),.18),rgba(8,10,16,.94) 70%);
  transform:scale(1.08);
  box-shadow:0 0 0 4px rgba(var(--jffq-accent),.055),0 0 25px rgba(var(--jffq-accent),.22),inset 0 0 16px rgba(var(--jffq-accent),.07);
  animation:jffQuizPawPulse 1.8s ease-in-out infinite;
}
@keyframes jffQuizPawPulse{50%{box-shadow:0 0 0 7px rgba(var(--jffq-accent),.025),0 0 31px rgba(var(--jffq-accent),.29),inset 0 0 18px rgba(var(--jffq-accent),.09)}}

/* Question -------------------------------------------------------- */
.jffQuizQuestionPanel{margin-top:24px}
.jffQuizQuestionMeta{
  color:rgba(255,255,255,.34);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}
.jffQuizQuestion{
  margin:8px 0 0;
  color:#fff;
  font-size:clamp(20px,3.5vw,28px);
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.35px;
}
.jffQuizOptions{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.jffQuizOption{
  --option-rgb:132,88,255;
  position:relative;
  min-width:0;
  min-height:82px;
  padding:14px 15px 13px 48px;
  overflow:hidden;
  border:1px solid rgba(var(--option-rgb),.15);
  border-radius:18px;
  color:rgba(255,255,255,.83);
  background:
    radial-gradient(180px 90px at 100% 0%,rgba(var(--option-rgb),.065),transparent 70%),
    rgba(255,255,255,.025);
  cursor:pointer;
  text-align:left;
  line-height:1.5;
  font-size:12px;
  font-weight:780;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.jffQuizOption:nth-child(1){--option-rgb:91,180,255}
.jffQuizOption:nth-child(2){--option-rgb:87,225,211}
.jffQuizOption:nth-child(3){--option-rgb:154,114,255}
.jffQuizOption:nth-child(4){--option-rgb:255,112,170}
.jffQuizOption::before{
  content:attr(data-letter);
  position:absolute;
  left:13px;
  top:14px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--option-rgb),.25);
  border-radius:999px;
  color:rgba(var(--option-rgb),.91);
  background:rgba(var(--option-rgb),.06);
  font-size:8px;
  font-weight:950;
}
.jffQuizOption:hover{transform:translateY(-2px);border-color:rgba(var(--option-rgb),.38);color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 21px rgba(var(--option-rgb),.055)}
.jffQuizOption:active{transform:scale(.985)}
.jffQuizOption.isPicked{border-color:rgba(var(--option-rgb),.65);background:rgba(var(--option-rgb),.09);color:#fff;box-shadow:0 0 26px rgba(var(--option-rgb),.10),inset 0 0 20px rgba(var(--option-rgb),.05)}

/* Tadpole lab ----------------------------------------------------- */
.jffQuizLab{
  position:relative;
  min-height:245px;
  margin-top:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:24px;
  background:
    radial-gradient(260px 170px at 50% 48%,rgba(91,183,255,.09),transparent 72%),
    radial-gradient(300px 150px at 15% 100%,rgba(89,226,211,.055),transparent 72%),
    radial-gradient(300px 150px at 100% 0%,rgba(255,108,167,.055),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),
    rgba(3,6,12,.52);
}
.jffQuizLab::before,
.jffQuizLab::after{
  content:"";
  position:absolute;
  left:-6%;
  width:112%;
  height:22px;
  border:1px solid rgba(111,220,255,.08);
  border-left:0;
  border-right:0;
  border-radius:50%;
  opacity:.55;
  animation:jffQuizWater 4.8s ease-in-out infinite;
}
.jffQuizLab::before{top:23%;transform:rotate(-2deg)}
.jffQuizLab::after{bottom:18%;animation-delay:-2.3s;transform:rotate(2deg)}
@keyframes jffQuizWater{50%{transform:translateX(2.5%) rotate(1deg);opacity:.30}}

.jffQuizLabLabel{
  position:absolute;
  left:15px;
  top:13px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.32);
  font-size:7px;
  font-weight:950;
  letter-spacing:.14em;
}
.jffQuizLabLabel::before{content:"";width:6px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--jffq-cyan),var(--jffq-purple),var(--jffq-pink));box-shadow:0 0 10px rgba(143,105,255,.35)}

.jffQuizCreatureWrap{
  --hair:.01;
  --tongue:.01;
  --legs:.01;
  --heart:.16;
  --arms:.01;
  --tail-speed:1.65s;
  position:absolute;
  inset:25px 10px 8px;
  display:grid;
  place-items:center;
}
.jffQuizCreature{width:min(420px,95%);height:auto;overflow:visible;filter:drop-shadow(0 18px 28px rgba(0,0,0,.33))}
.jffQuizTailGroup{transform-origin:270px 121px;animation:jffQuizTail var(--tail-speed) ease-in-out infinite alternate;will-change:transform}
@keyframes jffQuizTail{0%{transform:rotate(-7deg) translateY(1px)}100%{transform:rotate(10deg) translateY(-2px)}}

.jffQuizTail{fill:none;stroke:url(#jffqTailGradient);stroke-linecap:round;stroke-width:16}
.jffQuizTailHighlight{fill:none;stroke:rgba(255,255,255,.16);stroke-linecap:round;stroke-width:3.2}
.jffQuizBody{fill:url(#jffqBodyGradient);stroke:rgba(255,255,255,.20);stroke-width:1.1}
.jffQuizBodyGlow{fill:none;stroke:rgba(111,218,255,.13);stroke-width:10;filter:url(#jffqSoftGlow)}
.jffQuizEyeWhite{fill:rgba(255,255,255,.94)}
.jffQuizEyeIris{fill:#20283a}
.jffQuizEyeDot{fill:#fff}
.jffQuizSmile{fill:none;stroke:rgba(44,30,58,.68);stroke-width:3;stroke-linecap:round}

.jffQuizHair{fill:none;stroke:#9be7dc;stroke-width:5;stroke-linecap:round;transform-box:fill-box;transform-origin:bottom center;transform:scaleY(var(--hair));opacity:var(--hair);animation:jffQuizHairSway 1.8s ease-in-out infinite alternate}
.jffQuizHair.h2{animation-delay:-.45s;stroke:#9bd6ea}.jffQuizHair.h3{animation-delay:-.9s;stroke:#b9d7f1}.jffQuizHair.h4{animation-delay:-1.25s;stroke:#a7e0d4}.jffQuizHair.h5{animation-delay:-.65s;stroke:#a9d7ee}
@keyframes jffQuizHairSway{to{transform:scaleY(var(--hair)) rotate(7deg)}}

.jffQuizTongue{fill:#ff8ab3;stroke:#ff7eae;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:top center;transform:scaleY(var(--tongue));animation:jffQuizTongueWiggle 1.35s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px rgba(255,97,161,.25))}
@keyframes jffQuizTongueWiggle{0%{transform:scaleY(var(--tongue)) rotate(-4deg)}100%{transform:scaleY(var(--tongue)) rotate(5deg)}}

.jffQuizLeg,.jffQuizArm{fill:none;stroke:#78d8dc;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:top center}
.jffQuizLeg{transform:scaleY(var(--legs));opacity:var(--legs);animation:jffQuizLimb 1.9s ease-in-out infinite alternate}
.jffQuizLeg.right{animation-delay:-.9s}
.jffQuizArm{stroke:#82c8f7;transform:scaleY(var(--arms));opacity:var(--arms);animation:jffQuizArm 2.1s ease-in-out infinite alternate}
.jffQuizArm.right{animation-delay:-1.05s}
@keyframes jffQuizLimb{0%{transform:scaleY(var(--legs)) rotate(-5deg)}100%{transform:scaleY(var(--legs)) rotate(8deg)}}
@keyframes jffQuizArm{0%{transform:scaleY(var(--arms)) rotate(5deg)}100%{transform:scaleY(var(--arms)) rotate(-8deg)}}

.jffQuizHeart{fill:#ff6f9c;stroke:rgba(255,255,255,.44);stroke-width:1;transform-box:fill-box;transform-origin:center;transform:scale(var(--heart));opacity:var(--heart);filter:drop-shadow(0 0 8px rgba(255,99,151,.38));animation:jffQuizHeartBeat 1.35s ease-in-out infinite}
@keyframes jffQuizHeartBeat{50%{filter:drop-shadow(0 0 13px rgba(255,99,151,.58)) brightness(1.10)}}

.jffQuizTraitChips{
  position:absolute;
  right:13px;
  bottom:11px;
  z-index:4;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:76%;
}
.jffQuizTraitChip{
  min-height:23px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  color:rgba(255,255,255,.36);
  background:rgba(4,7,12,.52);
  font-size:7px;
  font-weight:850;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.jffQuizTraitChip i{width:5px;height:5px;border-radius:999px;background:currentColor;box-shadow:0 0 8px currentColor}
.jffQuizTraitChip.isHot{color:rgba(255,255,255,.80);border-color:rgba(155,116,255,.18);background:rgba(139,96,255,.05)}

.jffQuizHint{margin:11px 2px 0;color:rgba(255,255,255,.30);font-size:8px;line-height:1.5;text-align:center}

/* Result ---------------------------------------------------------- */
.jffQuizResult[hidden],.jffQuizQuestionScreen[hidden]{display:none!important}
.jffQuizResult{padding-top:4px;text-align:center}
.jffQuizResultBadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:0 10px;
  border:1px solid rgba(var(--jffq-accent),.23);
  border-radius:999px;
  color:rgba(var(--jffq-accent),.92);
  background:rgba(var(--jffq-accent),.055);
  font-size:8px;
  font-weight:950;
  letter-spacing:.11em;
}
.jffQuizResult h3{margin:14px 0 0;font-size:clamp(30px,6vw,50px);line-height:1.02;letter-spacing:-1.7px}
.jffQuizResult h3 span{display:block;margin-top:6px;background:linear-gradient(90deg,#78ddff,#a177ff 46%,#ff7bad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jffQuizMorphSentence{max-width:600px;margin:15px auto 0;color:rgba(255,255,255,.66);font-size:13px;line-height:1.7}

.jffQuizResult .jffQuizLab{margin-top:20px;min-height:230px}

.jffQuizResultGrid{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:left}
.jffQuizResultCard{min-width:0;padding:15px;border:1px solid rgba(255,255,255,.085);border-radius:18px;background:rgba(255,255,255,.022)}
.jffQuizResultCard small{color:rgba(255,255,255,.31);font-size:7px;font-weight:950;letter-spacing:.13em}
.jffQuizResultCard strong{display:block;margin-top:7px;font-size:14px;line-height:1.3}
.jffQuizResultCard p{margin:8px 0 0;color:rgba(255,255,255,.48);font-size:9px;line-height:1.55}
.jffQuizResultCard.isLove{border-color:rgba(255,113,171,.14);background:radial-gradient(160px 90px at 100% 0%,rgba(255,113,171,.07),transparent 70%),rgba(255,255,255,.02)}
.jffQuizResultCard.isMeal{border-color:rgba(255,196,106,.14);background:radial-gradient(160px 90px at 100% 0%,rgba(255,196,106,.065),transparent 70%),rgba(255,255,255,.02)}

.jffQuizResultTraits{margin-top:12px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.jffQuizResultTraits span{min-height:27px;padding:0 9px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:rgba(255,255,255,.49);background:rgba(255,255,255,.022);font-size:8px;font-weight:850}

.jffQuizCta{
  margin-top:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:
    radial-gradient(300px 120px at 0% 100%,rgba(81,213,226,.07),transparent 72%),
    radial-gradient(300px 120px at 100% 0%,rgba(255,105,163,.08),transparent 72%),
    rgba(255,255,255,.021);
}
.jffQuizCta strong{display:block;font-size:16px;line-height:1.4}
.jffQuizCta p{margin:7px auto 0;max-width:560px;color:rgba(255,255,255,.49);font-size:10px;line-height:1.65}
.jffQuizCtaActions{margin-top:13px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.jffQuizDownload,.jffQuizRetry{
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.jffQuizDownload{border:1px solid rgba(255,255,255,.23);color:#fff;background:linear-gradient(100deg,rgba(73,171,255,.72),rgba(132,88,255,.78) 50%,rgba(230,79,149,.69));box-shadow:0 14px 30px rgba(92,74,225,.18),inset 0 1px 0 rgba(255,255,255,.15)}
.jffQuizRetry{border:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.62);background:rgba(255,255,255,.025)}
.jffQuizFineprint{margin:10px auto 0;color:rgba(255,255,255,.24);font-size:7px;line-height:1.5}

.jffQuizScreenSwap{animation:jffQuizScreenIn .30s cubic-bezier(.2,.8,.2,1) both}
@keyframes jffQuizScreenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jffQuizCreaturePop{animation:jffQuizCreaturePop .42s cubic-bezier(.17,.86,.28,1.35)}
@keyframes jffQuizCreaturePop{50%{transform:scale(1.035)}100%{transform:scale(1)}}

@media (max-width:640px){
  .jffQuizBackdrop{padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .jffQuizDialog{width:100%;max-height:calc(100dvh - 16px);border-radius:24px}
  .jffQuizScroll{max-height:calc(100dvh - 16px)}
  .jffQuizInner{padding:20px 17px 20px}
  .jffQuizClose{top:11px;right:11px;width:34px;height:34px;font-size:20px}
  .jffQuizHeader{padding-right:38px;align-items:flex-start;flex-direction:column;gap:6px}
  .jffQuizCounter{position:absolute;right:17px;top:60px}
  .jffQuizPawTrack{margin-top:20px}
  .jffQuizPaw{width:28px;height:28px}.jffQuizPaw svg{width:16px;height:16px}
  .jffQuizOptions{grid-template-columns:1fr;gap:8px}
  .jffQuizOption{min-height:65px;padding:12px 13px 11px 45px}
  .jffQuizOption::before{left:11px;top:11px}
  .jffQuizLab{min-height:218px;border-radius:20px}
  .jffQuizCreatureWrap{inset:30px 0 5px}
  .jffQuizCreature{width:min(390px,108%)}
  .jffQuizTraitChips{left:10px;right:10px;max-width:none;justify-content:center}
  .jffQuizResultGrid{grid-template-columns:1fr}
  .jffQuizResultCard{padding:13px}
  .jffQuizCta{padding:15px}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizBackdrop,.jffQuizDialog,.jffQuizPaw,.jffQuizOption{transition:none!important}
  .jffQuizPaw,.jffQuizTailGroup,.jffQuizTailTip,.jffQuizHair,.jffQuizTongue,.jffQuizLeg,.jffQuizArm,.jffQuizHeart,.jffQuizLab::before,.jffQuizLab::after{animation:none!important}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v2 overrides
   ============================================================ */
.jffQuizCreatureWrap{
  --tail:.01;
  --detail:.10;
  --egg-wobble:1.18s;
}

.jffQuizHint{color:rgba(255,255,255,.38)}

.jffQuizEggScene{transform-origin:192px 126px}
.jffQuizAccessoryStage{transform-origin:192px 128px;animation:jffQuizEggRock var(--egg-wobble) ease-in-out infinite alternate;will-change:transform}
@keyframes jffQuizEggRock{0%{transform:rotate(-3deg) translateY(1px)}100%{transform:rotate(3deg) translateY(-1px)}}

.jffQuizEggTail{fill:none;stroke:url(#jffqTailGradient-live);stroke-linecap:round;stroke-width:14;opacity:var(--tail);transform-origin:274px 146px;transform:scaleX(var(--tail));animation:jffQuizEggTailWave 1.15s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px rgba(87,217,214,.20))}
.jffQuizCreature [style*="jffqTailGradient-result"] ~ * {}
.jffQuizCreature .jffQuizEggTail{stroke:url(#jffqTailGradient-live)}
[data-jffq-creature="result"] .jffQuizEggTail{stroke:url(#jffqTailGradient-result)}
@keyframes jffQuizEggTailWave{0%{transform:scaleX(var(--tail)) rotate(-7deg)}100%{transform:scaleX(var(--tail)) rotate(11deg)}}

.jffQuizEggHair{fill:none;stroke:#9fe7dd;stroke-width:5;stroke-linecap:round;transform-origin:bottom center;transform:scaleY(var(--hair));opacity:var(--hair);animation:jffQuizEggHairSway 1.4s ease-in-out infinite alternate}
.jffQuizEggHair.h2{animation-delay:-.35s;stroke:#b8dcff}
.jffQuizEggHair.h3{animation-delay:-.7s;stroke:#ffe7aa}
.jffQuizEggHair.h4{animation-delay:-1.0s;stroke:#98eac8}
@keyframes jffQuizEggHairSway{0%{transform:scaleY(var(--hair)) rotate(-4deg)}100%{transform:scaleY(var(--hair)) rotate(6deg)}}

.jffQuizEggArm,.jffQuizEggLeg{fill:none;stroke-linecap:round;stroke-linejoin:round;transform-origin:top center}
.jffQuizEggArm{stroke:#84c7f7;stroke-width:9;transform:scaleY(var(--arms));opacity:var(--arms);animation:jffQuizEggArmMove 1.55s ease-in-out infinite alternate}
.jffQuizEggArm.right{animation-delay:-.8s}
.jffQuizEggLeg{stroke:#7edfd4;stroke-width:9;transform:scaleY(var(--legs));opacity:var(--legs);animation:jffQuizEggLegMove 1.7s ease-in-out infinite alternate}
.jffQuizEggLeg.right{animation-delay:-.95s}
@keyframes jffQuizEggArmMove{0%{transform:scaleY(var(--arms)) rotate(4deg)}100%{transform:scaleY(var(--arms)) rotate(-8deg)}}
@keyframes jffQuizEggLegMove{0%{transform:scaleY(var(--legs)) rotate(-4deg)}100%{transform:scaleY(var(--legs)) rotate(7deg)}}

.jffQuizEggGlow{fill:none;stroke:rgba(255,231,173,.26);stroke-width:12;opacity:var(--detail);filter:url(#jffqSoftGlow-live)}
[data-jffq-creature="result"] .jffQuizEggGlow{filter:url(#jffqSoftGlow-result)}
.jffQuizEggTop,.jffQuizEggBottom{stroke:rgba(120,99,66,.18);stroke-width:1.2;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .55s ease,filter .4s ease;filter:drop-shadow(0 10px 14px rgba(0,0,0,.10))}
.jffQuizEggCrack{fill:none;stroke:rgba(128,104,73,.54);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;opacity:.82;transition:opacity .35s ease}

.jffQuizEggEye{fill:#fff;transform-origin:center;animation:jffQuizBlink 4.6s infinite}
.jffQuizEggPupil{fill:#23283b;transform-origin:center;animation:jffQuizBlink 4.6s infinite}
.jffQuizEggLid{fill:none;stroke:rgba(77,55,44,.42);stroke-width:1.7;stroke-linecap:round}
.jffQuizEggSmile{fill:none;stroke:rgba(76,53,46,.7);stroke-width:3;stroke-linecap:round}
.jffQuizEggBlush{fill:rgba(255,139,175,.22)}
@keyframes jffQuizBlink{0%,44%,48%,100%{transform:scaleY(1)}45%,47%{transform:scaleY(.08)}}

.jffQuizHatchFx{opacity:0;transform:scale(.55);transform-origin:192px 122px;pointer-events:none}
.jffQuizBurstCore{fill:rgba(255,246,206,.92);filter:blur(6px)}
.jffQuizBurstRays path{fill:none;stroke:rgba(255,236,168,.96);stroke-width:4;stroke-linecap:round}

.jffQuizAnimalStage{opacity:0;transform:translateY(14px) scale(.78);transform-origin:192px 126px;transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.jffQuizAnimalType{opacity:0;transform-origin:192px 132px;animation:jffQuizAnimalBob 1.85s ease-in-out infinite alternate}
.jffQuizAnimalType.isActive{opacity:1}
@keyframes jffQuizAnimalBob{0%{transform:translateY(0)}100%{transform:translateY(-4px)}}

.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizAccessoryStage{animation:none}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggTop{transform:translate(-12px,-53px) rotate(-18deg);opacity:0}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggBottom{transform:translate(10px,17px) rotate(8deg);opacity:.16}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggCrack,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggFace,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggHairGroup,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggArms,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggLegs,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggTail{opacity:0}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizHatchFx{opacity:1;animation:jffQuizBurst .72s ease-out both}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizAnimalStage{opacity:1;transform:translateY(0) scale(1)}
@keyframes jffQuizBurst{0%{opacity:0;transform:scale(.55)}35%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(1.8)}}

.aniShadow{fill:rgba(0,0,0,.14)}
.aniBody,.aniWing,.aniEar,.aniTailCroc,.aniPenguinWing,.aniFoxTail,.aniFoxEar,.aniCatTail,.aniHeartHold,.aniSnakeBody,.aniSnakeHead,.aniSnout,.aniPartyHat,.aniBeak,.aniHorn,.aniFoot,.aniWhisker,.aniLegTiny,.aniChain,.aniNoseBull,.aniTeeth,.aniSnakeTongue{transition:opacity .2s ease}
.aniBelly,.aniPenguinBelly{fill:#fff4e8;opacity:.92}
.aniFace .aniEye{fill:#24293d;transform-origin:center;animation:jffQuizBlink 4.2s infinite}
.aniFace .aniLid{fill:none;stroke:rgba(45,40,52,.35);stroke-width:1.6;stroke-linecap:round}

.chickBody{fill:#ffd864}.aniWing{fill:#ffc94b}.aniBeak{fill:#ff9a59}.aniPartyHat{fill:#9c79ff}.aniPartyDot{fill:#8af0d8}.aniLegTiny,.aniFoot{fill:none;stroke:#ffad49;stroke-width:5;stroke-linecap:round}
.crocBody,.aniSnout,.aniTailCroc{fill:none;stroke:#79d18d;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.crocBody{fill:#79d18d;stroke-width:0}.aniTailCroc{stroke-width:13}.aniSnout{stroke-width:18}.aniTeeth{fill:none;stroke:#fff7ef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.aniChain{fill:none;stroke:#ffcf5b;stroke-width:5;stroke-linecap:round}
.bullBody{fill:#b87754}.aniHorn{fill:none;stroke:#fff0cf;stroke-width:8;stroke-linecap:round}.aniEar{fill:#f0c0a6}.aniNoseBull{fill:none;stroke:#71412b;stroke-width:4;stroke-linecap:round}
.aniSnakeBody,.aniSnakeHead{fill:#8e7bff;stroke:none}.aniSnakeTongue{fill:none;stroke:#ff7cae;stroke-width:3;stroke-linecap:round}.aniSnakeHead{fill:#9e8eff}
.otterBody{fill:#c58a62}.aniHeartHold{fill:#ff83ad;stroke:rgba(255,255,255,.55);stroke-width:1}
.foxBody,.aniFoxEar,.aniFoxTail{fill:#ff9f47}.aniFoxTail{stroke:#fff2dc;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.penguinBody{fill:#2a3146}.aniPenguinWing{fill:none;stroke:#414c69;stroke-width:16;stroke-linecap:round}.aniPenguinBelly{fill:#fbf6ee}
.catBody,.aniCatEar,.aniCatTail{fill:#a998ff}.aniCatTail{stroke:#a998ff;stroke-width:12;fill:none;stroke-linecap:round}.aniWhisker{fill:none;stroke:#fff4ea;stroke-width:2.4;stroke-linecap:round}

.jffQuizAbilityGrid{width:min(720px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.jffQuizAbilityCard{padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.022)}
.jffQuizAbilityTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jffQuizAbilityTop span{color:rgba(255,255,255,.56);font-size:9px;font-weight:850}
.jffQuizAbilityTop strong{color:#fff;font-size:11px;font-weight:950}
.jffQuizAbilityBar{height:8px;margin-top:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.06)}
.jffQuizAbilityBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--jffq-cyan),var(--jffq-purple),var(--jffq-pink));box-shadow:0 0 12px rgba(143,105,255,.22)}

@media (max-width:760px){
  .jffQuizAbilityGrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizAccessoryStage,.jffQuizEggTail,.jffQuizEggHair,.jffQuizEggArm,.jffQuizEggLeg,.jffQuizEggEye,.jffQuizEggPupil,.aniFace .aniEye,.jffQuizAnimalType{animation:none!important}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v3 overrides
   ============================================================ */
.jffQuizCreatureWrap{
  --hair:.02;
  --tail:.02;
  --legs:.02;
  --detail:.10;
  --arms:.02;
  --egg-wobble:1.18s;
}

.jffQuizHint{color:rgba(255,255,255,.40)}
.jffQuizResult{padding-top:6px;text-align:center}
.jffQuizMorphSentence{max-width:620px;margin:14px auto 0;color:rgba(255,255,255,.70);font-size:13px;line-height:1.75}

.jffQuizEggScene{transform-origin:192px 126px}
.jffQuizAccessoryStage{transform-origin:192px 128px;animation:jffQuizEggRock var(--egg-wobble) ease-in-out infinite alternate;will-change:transform}
@keyframes jffQuizEggRock{0%{transform:rotate(-3deg) translateY(1px)}100%{transform:rotate(3deg) translateY(-1px)}}

.jffQuizEggTop,.jffQuizEggBottom{stroke:rgba(110,103,101,.92);stroke-width:1.8;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .55s ease,filter .4s ease;filter:drop-shadow(0 12px 14px rgba(0,0,0,.10))}
.jffQuizEggCrack{fill:none;stroke:rgba(110,103,101,.98);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:1;transition:opacity .35s ease}
.jffQuizEggSpots ellipse{fill:rgba(214,203,188,.72)}
.jffQuizEggGlow{fill:none;stroke:rgba(255,231,173,.28);stroke-width:12;opacity:var(--detail);filter:url(#jffqSoftGlow-live)}
[data-jffq-creature="result"] .jffQuizEggGlow{filter:url(#jffqSoftGlow-result)}

.jffQuizEggEye{fill:#fff;transform-origin:center;animation:jffQuizBlink 4.4s infinite}
.jffQuizEggPupil{fill:#111;transform-origin:center;animation:jffQuizBlink 4.4s infinite}
.jffQuizEggSparkle{fill:#fff;opacity:.98;transform-origin:center;animation:jffQuizBlink 4.4s infinite}
@keyframes jffQuizBlink{0%,44%,48%,100%{transform:scaleY(1)}45%,47%{transform:scaleY(.07)}}

.jffQuizEggHair{fill:none;stroke:#9fe7dd;stroke-width:5;stroke-linecap:round;transform-origin:bottom center;transform:scaleY(var(--hair));opacity:var(--hair);animation:jffQuizEggHairSway 1.35s ease-in-out infinite alternate}
.jffQuizEggHair.h2{animation-delay:-.35s;stroke:#b8dcff}
.jffQuizEggHair.h3{animation-delay:-.7s;stroke:#ffe7aa}
.jffQuizEggHair.h4{animation-delay:-1.0s;stroke:#98eac8}
@keyframes jffQuizEggHairSway{0%{transform:scaleY(var(--hair)) rotate(-4deg)}100%{transform:scaleY(var(--hair)) rotate(6deg)}}

.jffQuizEggTail{fill:none;stroke-linecap:round;stroke-width:14;opacity:var(--tail);transform-origin:274px 146px;transform:scaleX(var(--tail));animation:jffQuizEggTailWave 1.12s ease-in-out infinite alternate;filter:drop-shadow(0 0 10px rgba(87,217,214,.20))}
@keyframes jffQuizEggTailWave{0%{transform:scaleX(var(--tail)) rotate(-7deg)}100%{transform:scaleX(var(--tail)) rotate(11deg)}}

.jffQuizEggArmGroup,.jffQuizEggLegGroup{transform-origin:top center}
.jffQuizEggArmGroup{transform:scale(var(--arms));opacity:var(--arms);animation:jffQuizEggArmMove 1.55s ease-in-out infinite alternate}
.jffQuizEggArmGroup.right{animation-delay:-.8s}
.jffQuizEggLegGroup{transform:scale(var(--legs));opacity:var(--legs);animation:jffQuizEggLegMove 1.7s ease-in-out infinite alternate}
.jffQuizEggLegGroup.right{animation-delay:-.95s}
.jffQuizEggLimbCore,.jffQuizEggClaw{fill:none;stroke-linecap:round;stroke-linejoin:round}
.jffQuizEggArmGroup .jffQuizEggLimbCore,.jffQuizEggArmGroup .jffQuizEggClaw{stroke:#84c7f7}
.jffQuizEggLegGroup .jffQuizEggLimbCore,.jffQuizEggLegGroup .jffQuizEggClaw{stroke:#7edfd4}
.jffQuizEggLimbCore{stroke-width:8.5}
.jffQuizEggClaw{stroke-width:4.3}
@keyframes jffQuizEggArmMove{0%{transform:scale(var(--arms)) rotate(4deg)}100%{transform:scale(var(--arms)) rotate(-8deg)}}
@keyframes jffQuizEggLegMove{0%{transform:scale(var(--legs)) rotate(-4deg)}100%{transform:scale(var(--legs)) rotate(7deg)}}

.jffQuizHatchFx{opacity:0;transform:scale(.55);transform-origin:192px 122px;pointer-events:none}
.jffQuizBurstCore{fill:rgba(255,246,206,.94);filter:blur(7px)}
.jffQuizBurstRays path{fill:none;stroke:rgba(255,236,168,.98);stroke-width:4.4;stroke-linecap:round}

.jffQuizAnimalStage{opacity:0;transform:translateY(14px) scale(.78);transform-origin:192px 126px;transition:transform .72s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.jffQuizAnimalType{opacity:0;transform-origin:192px 132px;animation:jffQuizAnimalBob 1.85s ease-in-out infinite alternate}
.jffQuizAnimalType.isActive{opacity:1}
@keyframes jffQuizAnimalBob{0%{transform:translateY(0)}100%{transform:translateY(-4px)}}

.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizAccessoryStage{animation:none}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggTop{transform:translate(-14px,-56px) rotate(-18deg);opacity:0}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggBottom{transform:translate(10px,18px) rotate(8deg);opacity:.16}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggCrack,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggFace,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggSpots,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggHairGroup,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggArmGroup,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggLegGroup,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggTail{opacity:0}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizHatchFx{opacity:1;animation:jffQuizBurst .72s ease-out both}
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizAnimalStage{opacity:1;transform:translateY(0) scale(1)}
@keyframes jffQuizBurst{0%{opacity:0;transform:scale(.55)}35%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(1.8)}}

.aniShadow{fill:rgba(0,0,0,.14)}
.aniBody,.aniWing,.aniEar,.aniPartyHat,.aniSnoutFill,.aniCrocTail,.aniPenguinWing,.aniFoxTail,.aniFoxEar,.aniCatTail,.aniHeartHold,.aniSnakeCoil,.aniSnakeHead,.aniMuzzle,.aniPartyDot,.aniChain,.aniChainPendant,.aniHorn,.aniFoot,.aniWhisker,.aniLegTiny,.aniNoseBull,.aniTeeth,.aniSnakeTongue,.aniBeak,.aniSnakeBelly{transition:opacity .2s ease}
.aniBelly,.aniPenguinBelly,.aniMuzzle,.aniSnakeBelly{fill:#fff4e8;opacity:.94}
.aniFace .aniEye{fill:#181818;transform-origin:center;animation:jffQuizBlink 4.2s infinite}
.aniEyeSparkle{fill:#fff;opacity:.96;transform-origin:center;animation:jffQuizBlink 4.2s infinite}

.chickBody{fill:#ffd864}.aniWing{fill:#ffc94b}.aniBeak{fill:#ff9a59}.aniPartyHat{fill:#9c79ff}.aniPartyDot{fill:#8af0d8}.aniLegTiny,.aniFoot{fill:none;stroke:#ffad49;stroke-width:5;stroke-linecap:round}
.crocBody{fill:#79d18d}.aniSnoutFill{fill:#93e2a4}.aniCrocTail{fill:none;stroke:#79d18d;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}.aniTeeth{fill:none;stroke:#fff7ef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.aniChain{fill:none;stroke:#ffcf5b;stroke-width:5;stroke-linecap:round}.aniChainPendant{fill:#ffcf5b}
.bullBody{fill:#b87754}.aniHorn{fill:none;stroke:#fff0cf;stroke-width:8;stroke-linecap:round}.aniEar{fill:#f0c0a6}.aniNoseBull{fill:none;stroke:#71412b;stroke-width:4;stroke-linecap:round}
.aniSnakeCoil,.aniSnakeHead{fill:#9a8cff}.aniSnakeTongue{fill:none;stroke:#ff7cae;stroke-width:3;stroke-linecap:round}.aniSnakeHead{fill:#a899ff}
.otterBody{fill:#c58a62}.aniHeartHold{fill:#ff83ad;stroke:rgba(255,255,255,.55);stroke-width:1}
.foxBody,.aniFoxEar{fill:#ff9f47}.aniFoxTail{fill:#ff9f47;stroke:#fff2dc;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.penguinBody{fill:#2a3146}.aniPenguinWing{fill:none;stroke:#414c69;stroke-width:16;stroke-linecap:round}.aniPenguinBelly{fill:#fbf6ee}
.catBody,.aniCatEar{fill:#a998ff}.aniCatTail{stroke:#a998ff;stroke-width:12;fill:none;stroke-linecap:round}.aniWhisker{fill:none;stroke:#fff4ea;stroke-width:2.4;stroke-linecap:round}

.jffQuizPersonalityCard{margin-top:18px;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:radial-gradient(240px 110px at 100% 0%,rgba(127,157,255,.08),transparent 70%),rgba(255,255,255,.022);text-align:left}
.jffQuizPersonalityCard small{display:block;color:rgba(255,255,255,.31);font-size:7px;font-weight:950;letter-spacing:.13em}
.jffQuizPersonalityCard strong{display:block;margin-top:8px;font-size:17px;line-height:1.35}
.jffQuizPersonalityCard p{margin:8px 0 0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.7}
.jffQuizResultTraits{margin-top:15px;display:block}

.jffQuizMatchRow{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jffQuizResultCard{min-width:0;padding:16px;border:1px solid rgba(255,255,255,.085);border-radius:18px;background:rgba(255,255,255,.022);text-align:left}
.jffQuizResultCard small{color:rgba(255,255,255,.31);font-size:7px;font-weight:950;letter-spacing:.13em}
.jffQuizResultCard strong{display:block;margin-top:7px;font-size:14px;line-height:1.3}
.jffQuizResultCard p{margin:8px 0 0;color:rgba(255,255,255,.48);font-size:10px;line-height:1.65}

.jffQuizAbilityGrid{width:min(720px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
.jffQuizAbilityCard{padding:11px 12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.022)}
.jffQuizAbilityTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jffQuizAbilityTop span{color:rgba(255,255,255,.56);font-size:9px;font-weight:850}
.jffQuizAbilityTop strong{color:#fff;font-size:11px;font-weight:950}
.jffQuizAbilityBar{height:8px;margin-top:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.06)}
.jffQuizAbilityBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--jffq-cyan),var(--jffq-purple),var(--jffq-pink));box-shadow:0 0 12px rgba(143,105,255,.22)}

.jffQuizAllAnimals{margin-top:20px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.02);text-align:left}
.jffQuizAllAnimalsTitle{color:rgba(255,255,255,.72);font-size:12px;font-weight:900;letter-spacing:.05em}
.jffQuizAllAnimalsGrid{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jffQuizAnimalGalleryCard{padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:18px;background:rgba(0,0,0,.18)}
.jffQuizAnimalGalleryCard.isCurrent{border-color:rgba(255,255,255,.20);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 20px rgba(143,105,255,.12)}
.jffQuizAnimalPreviewFrame{display:grid;place-items:center;height:150px;border-radius:14px;background:radial-gradient(160px 80px at 50% 0%,rgba(127,157,255,.10),transparent 70%),rgba(255,255,255,.03);overflow:hidden}
.jffQuizAnimalPreview{width:100%;max-width:150px;height:auto;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}
.jffQuizAnimalGalleryCard strong{display:block;margin-top:10px;font-size:13px;line-height:1.35;color:#fff}
.jffQuizAnimalGalleryCard p{margin:6px 0 0;color:rgba(255,255,255,.50);font-size:9px;line-height:1.6}

@media (max-width:760px){
  .jffQuizAbilityGrid{grid-template-columns:1fr}
  .jffQuizMatchRow,.jffQuizAllAnimalsGrid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizAccessoryStage,.jffQuizEggTail,.jffQuizEggHair,.jffQuizEggArmGroup,.jffQuizEggLegGroup,.jffQuizEggEye,.jffQuizEggPupil,.jffQuizEggSparkle,.aniFace .aniEye,.aniEyeSparkle,.jffQuizAnimalType{animation:none!important}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v4 overrides
   ============================================================ */
.jffQuizEggSpots ellipse{fill:#eedb87;opacity:.92}

/* Make growth feel like lengthening rather than whole-shape enlarging */
.jffQuizEggHair{stroke-width:5.2;transform-origin:bottom center;transform:scaleY(var(--hair));opacity:clamp(.12, var(--hair), 1)}
.jffQuizEggTail{stroke-width:12;transform-origin:274px 146px;transform:scaleX(var(--tail));opacity:clamp(.12, var(--tail), 1)}
.jffQuizEggArmGroup,.jffQuizEggLegGroup{transform-origin:top center}
.jffQuizEggArmGroup{transform:scaleY(var(--arms));opacity:clamp(.1, var(--arms), 1)}
.jffQuizEggLegGroup{transform:scaleY(var(--legs));opacity:clamp(.1, var(--legs), 1)}
.jffQuizEggArmGroup .jffQuizEggLimbCore,.jffQuizEggArmGroup .jffQuizEggClaw,
.jffQuizEggLegGroup .jffQuizEggLimbCore,.jffQuizEggLegGroup .jffQuizEggClaw{stroke:#efb35a}
.jffQuizEggLimbCore{stroke-width:7.2}
.jffQuizEggClaw{stroke-width:4}
@keyframes jffQuizEggArmMove{0%{transform:scaleY(var(--arms)) rotate(3deg)}100%{transform:scaleY(var(--arms)) rotate(-7deg)}}
@keyframes jffQuizEggLegMove{0%{transform:scaleY(var(--legs)) rotate(-3deg)}100%{transform:scaleY(var(--legs)) rotate(6deg)}}

/* Cuter gallery / match previews */
.jffQuizMatchPreview{display:grid;place-items:center;height:90px;margin:10px 0 8px;border-radius:14px;background:radial-gradient(120px 64px at 50% 0%,rgba(255,255,255,.08),transparent 70%),rgba(255,255,255,.03);overflow:hidden}
.jffQuizMatchAnimalSvg{width:100%;max-width:108px;height:auto;overflow:visible;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}

/* Q animal style */
.aniStickerOutline{fill:none;stroke:#202020;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;opacity:.04}
.chickBody,.aniChickWing,.aniChickWingUp,.aniComb,.aniBeakCore,.aniChickenFeet,
.aniCrocBody,.aniCrocTailBody,.aniCrocBelly,.aniCrocSnout,.aniCrocArm,.aniCrocLeg,.aniCrocSpine,.aniCrocStripe,.aniCrocTooth,
.aniBullBody,.aniBullBelly,.aniBullMuzzle,.aniBullHorn,.aniBullEar,.aniBullLeg,.aniBullTail,.aniBullTailTip,.aniBullNostril,
.aniSnakeCuteBody,.aniSnakeCuteBelly,.aniSnakeCuteHead,.aniSnakeCuteStripe,
.aniBody,.aniWing,.aniPartyHat,.aniChain,.aniChainPendant,.aniLegTiny,.aniFoot,.aniBeak,.aniFoxEar,.aniFoxTail,.aniCatEar,.aniCatTail,.aniWhisker,.aniPenguinWing,.aniHeartHold,.aniEar,.aniNoseBull,.aniSnoutFill,.aniTeeth,.aniSnakeTongue,.aniSnakeCoil,.aniSnakeHead,.aniSnakeBelly{
  stroke:#24322a;stroke-linecap:round;stroke-linejoin:round;
}

/* Chick inspired by reference 1 */
.chickBody{fill:#f6e6af;stroke-width:5}.aniChickWing,.aniChickWingUp{fill:#f6e6af;stroke-width:5}.aniComb{fill:#ea8e8e;stroke-width:5}.aniBeakCore{fill:#f3a864;stroke-width:4}.aniCheek{fill:#f2c7c4;opacity:.88}.aniChickenFeet{fill:none;stroke:#efb35a;stroke-width:4.2}.aniEyeWhite{fill:#fff}.aniEye,.aniEyeSparkle{animation:jffQuizBlink 4.2s infinite}

/* Croc inspired by reference 2 */
.aniCrocBody{fill:#51a67a;stroke-width:5}.aniCrocTailBody{fill:#51a67a;stroke-width:5}.aniCrocBelly,.aniCrocSnout{fill:#b9dfc0;stroke-width:5}.aniCrocStripe{fill:none;stroke:#9fc8a6;stroke-width:4}.aniCrocArm,.aniCrocLeg{fill:none;stroke:#3f825f;stroke-width:6}.aniCrocSpine{fill:none;stroke:#d8b151;stroke-width:8}.aniCrocTooth{fill:none;stroke:#fff8ef;stroke-width:3}.aniChain{fill:none;stroke:#ffc852;stroke-width:4.5}.aniChainPendant{fill:#ffc852;stroke-width:3}

/* Snake inspired by reference 3 */
.aniSnakeCuteBody{fill:none;stroke:#b9d98d;stroke-width:22}.aniSnakeCuteBelly{fill:none;stroke:#ead7ad;stroke-width:8;opacity:.88}.aniSnakeCuteHead{fill:#b9d98d;stroke-width:5}.aniSnakeCuteStripe{fill:none;stroke:#6ca594;stroke-width:5}.aniSnakeTongue{fill:none;stroke:#f08e8e;stroke-width:3.2}.aniSnakeCuteHead,.aniSnakeCuteBody{stroke:#b9d98d}.aniSnakeCuteHead,.aniSnakeCuteBody,.aniSnakeCuteBelly,.aniSnakeCuteStripe,.aniSnakeTongue{stroke-linecap:round;stroke-linejoin:round}.aniSnakeCuteHead{stroke:#b9d98d}.aniSnakeCuteBody{filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}

/* Bull inspired by reference 4 */
.aniBullBody{fill:#a87744;stroke-width:5}.aniBullBelly,.aniBullMuzzle{fill:#eadbb5;stroke-width:5}.aniBullHorn{fill:none;stroke:#daca9c;stroke-width:6}.aniBullEar{fill:#a87744;stroke-width:4}.aniBullNostril{fill:#9a764e;stroke:none}.aniBullLeg{fill:none;stroke:#36513d;stroke-width:5}.aniBullTail{fill:none;stroke:#36513d;stroke-width:4.4}.aniBullTailTip{fill:#8e6233;stroke:#36513d;stroke-width:3}

/* Keep existing other animals soft and outlined */
.aniBody{stroke-width:4.5}.aniWing,.aniPenguinWing,.aniFoxTail,.aniCatTail,.aniWhisker,.aniLegTiny,.aniFoot,.aniBeak,.aniFoxEar,.aniCatEar,.aniHeartHold,.aniEar{stroke-width:4.2}
.otterBody{fill:#c58a62}.foxBody,.aniFoxEar{fill:#ff9f47}.penguinBody{fill:#2a3146}.catBody,.aniCatEar{fill:#a998ff}

@media (max-width:760px){
  .jffQuizMatchPreview{height:82px}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v5 overrides
   ============================================================ */
/* More scattered, cuter egg dots */
.jffQuizEggSpots ellipse{fill:#efd975;opacity:.92}

/* Keep arms higher and grow sideways from fixed anchors */
.jffQuizEggArmGroup.left{transform-origin:136px 117px;transform:scaleX(var(--arms));opacity:clamp(.08,var(--arms),1);animation:jffQuizEggArmMoveLeft 1.65s ease-in-out infinite alternate}
.jffQuizEggArmGroup.right{transform-origin:248px 117px;transform:scaleX(var(--arms));opacity:clamp(.08,var(--arms),1);animation:jffQuizEggArmMoveRight 1.65s ease-in-out infinite alternate}
.jffQuizEggLegGroup.left{transform-origin:169px 181px;transform:scaleX(var(--legs));opacity:clamp(.08,var(--legs),1);animation:jffQuizEggLegMoveLeft 1.7s ease-in-out infinite alternate}
.jffQuizEggLegGroup.right{transform-origin:215px 181px;transform:scaleX(var(--legs));opacity:clamp(.08,var(--legs),1);animation:jffQuizEggLegMoveRight 1.7s ease-in-out infinite alternate}
@keyframes jffQuizEggArmMoveLeft{0%{transform:scaleX(var(--arms)) rotate(2deg)}100%{transform:scaleX(var(--arms)) rotate(-4deg)}}
@keyframes jffQuizEggArmMoveRight{0%{transform:scaleX(var(--arms)) rotate(-2deg)}100%{transform:scaleX(var(--arms)) rotate(4deg)}}
@keyframes jffQuizEggLegMoveLeft{0%{transform:scaleX(var(--legs)) rotate(2deg)}100%{transform:scaleX(var(--legs)) rotate(-3deg)}}
@keyframes jffQuizEggLegMoveRight{0%{transform:scaleX(var(--legs)) rotate(-2deg)}100%{transform:scaleX(var(--legs)) rotate(3deg)}}
.jffQuizEggLimbCore{stroke-width:7}
.jffQuizEggClaw{stroke-width:3.9}

/* center the match previews better */
.jffQuizMatchPreview{display:flex;align-items:center;justify-content:center;padding:4px 0 0}
.jffQuizMatchAnimalSvg{max-width:100px}

/* Bull — closer to cute upright reference */
.aniBullBody{fill:#d59646;stroke:#92503d;stroke-width:5.2}
.aniBullMuzzle,.aniBullBelly{fill:#efe5cf;stroke:#92503d;stroke-width:4.8}
.aniBullHorn{fill:none;stroke:#97492e;stroke-width:7}
.aniBullEar{fill:#e2a34e;stroke:#92503d;stroke-width:4}
.aniBullNostril{fill:#ad7d4d;stroke:none}
.aniBullRing{fill:none;stroke:#eac958;stroke-width:5.6}
.aniBullArm,.aniBullLeg,.aniBullTail{fill:none;stroke:#92503d;stroke-width:5;stroke-linecap:round}
.aniBullTailTip{fill:#92503d;stroke:#92503d;stroke-width:3}

/* Penguin — closer to soft 3D standing pose */
.aniPenguinBodyTall{fill:#2f3340;stroke:#2f3340;stroke-width:5}
.aniPenguinBellyTall{fill:#fbfaf7;stroke:#fbfaf7;stroke-width:4}
.aniPenguinWing{fill:none;stroke:#454c5e;stroke-width:8;stroke-linecap:round}
.aniPenguinBeak{fill:#ee9d39;stroke:#df8b2d;stroke-width:2.6}
.aniPenguinTuft{fill:none;stroke:#2f3340;stroke-width:3.4;stroke-linecap:round}
.aniPenguinFoot{fill:none;stroke:#ee9d39;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}

/* keep preview animals centered */
.jffQuizMatchPreview .jffQuizAnimalType{animation:none!important}

@media (max-width:760px){
  .jffQuizMatchAnimalSvg{max-width:92px}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v6 overrides
   ============================================================ */
.jffQuizQuestionActions{display:flex;justify-content:flex-start;margin-top:12px}
.jffQuizPrev{
  appearance:none;border:1px solid rgba(255,255,255,.10);border-radius:999px;
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.78);
  padding:9px 14px;font-size:11px;font-weight:850;letter-spacing:.02em;cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,opacity .18s ease;
}
.jffQuizPrev:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(126,214,255,.30);background:rgba(126,214,255,.08);color:#fff}
.jffQuizPrev:disabled{opacity:.42;cursor:not-allowed}

/* safer egg dots, all inside shell */
.jffQuizEggSpots ellipse{fill:#edd975;opacity:.92}

/* stronger length increase */
.jffQuizEggArmGroup.left{transform-origin:136px 117px;transform:scaleX(var(--arms));opacity:clamp(.08,var(--arms),1)}
.jffQuizEggArmGroup.right{transform-origin:248px 117px;transform:scaleX(var(--arms));opacity:clamp(.08,var(--arms),1)}
.jffQuizEggLegGroup.left{transform-origin:169px 181px;transform:scaleX(var(--legs));opacity:clamp(.08,var(--legs),1)}
.jffQuizEggLegGroup.right{transform-origin:215px 181px;transform:scaleX(var(--legs));opacity:clamp(.08,var(--legs),1)}

/* make match previews center a bit more */
.jffQuizMatchPreview{display:flex;align-items:center;justify-content:center;padding:0;margin:8px auto 8px;width:100%}
.jffQuizMatchAnimalSvg{display:block;max-width:96px;margin:0 auto}

/* cuter chick */
.chickBody{fill:#f5e2a9;stroke:#1f1f1f;stroke-width:4.4}
.aniChickWing,.aniChickWingUp{fill:#f5e2a9;stroke:#1f1f1f;stroke-width:4.4}
.aniComb{fill:#ea8f90;stroke:#1f1f1f;stroke-width:4.2}
.aniBeakCore{fill:#eda566;stroke:#1f1f1f;stroke-width:3.6}
.aniChickTail{fill:none;stroke:#1f1f1f;stroke-width:4;stroke-linecap:round}
.aniChickenFeet{fill:none;stroke:#efb35a;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.aniCheek{fill:#efc7c4;opacity:.88}

/* cuter bull */
.aniBullBody{fill:#cc8d45;stroke:#8d513c;stroke-width:4.8}
.aniBullMuzzle,.aniBullBelly{fill:#efe2c7;stroke:#8d513c;stroke-width:4.4}
.aniBullHorn{fill:none;stroke:#8d513c;stroke-width:6.3;stroke-linecap:round}
.aniBullEar{fill:#dca052;stroke:#8d513c;stroke-width:3.8}
.aniBullRing{fill:none;stroke:#f1d35c;stroke-width:5.2}
.aniBullArm,.aniBullLeg,.aniBullTail{fill:none;stroke:#8d513c;stroke-width:4.6;stroke-linecap:round}
.aniBullTailTip{fill:#8d513c;stroke:#8d513c;stroke-width:2.8}

@media (max-width:760px){
  .jffQuizQuestionActions{margin-top:10px}
  .jffQuizPrev{padding:8px 13px;font-size:10px}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v8 stability / sync overrides
   ============================================================ */

/* Keep question area height stable when one-line / two-line copy changes. */
.jffQuizQuestionPanel{
  position:relative;
  isolation:isolate;
}
.jffQuizQuestion{
  min-height:78px;
}

/* Top-only transition cover. The egg/lab below stays fully visible. */
.jffQuizQuestionTransition{
  position:absolute;
  inset:-8px;
  z-index:40;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:
    radial-gradient(180px 100px at 50% 50%,rgba(132,88,255,.09),transparent 72%),
    rgba(6,8,14,.93);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease,visibility 0s linear .12s;
}
.jffQuizQuestionTransition.isVisible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.jffQuizQuestionHalo{
  width:42px;
  height:42px;
  border-radius:999px;
  background:conic-gradient(from 0deg,transparent,var(--jffq-cyan),var(--jffq-purple),var(--jffq-pink),transparent);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  filter:drop-shadow(0 0 11px rgba(132,88,255,.32));
  animation:jffQuizQuestionHaloSpin .8s linear infinite;
}
@keyframes jffQuizQuestionHaloSpin{to{transform:rotate(360deg)}}

/* Growth is always from fixed anchors; every hit adds visible length. */
.jffQuizEggHair,
.jffQuizEggTail,
.jffQuizEggArmGroup,
.jffQuizEggLegGroup{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}

/* Cute Q bull v8 */
.aniBullBody{fill:#cf914c;stroke:#75513b;stroke-width:4.2}
.aniBullHead{fill:#d99b53;stroke:#75513b;stroke-width:4.4}
.aniBullMuzzle{fill:#f0dfbe;stroke:#75513b;stroke-width:3.7}
.aniBullBelly{fill:#efd9b1;stroke:#75513b;stroke-width:3.6}
.aniBullHorn{fill:none;stroke:#75513b;stroke-width:5.2;stroke-linecap:round}
.aniBullEar{fill:#d99b53;stroke:#75513b;stroke-width:3.4}
.aniBullNostril{fill:#9c744e;stroke:none}
.aniBullSmile{fill:none;stroke:#75513b;stroke-width:2.8;stroke-linecap:round}
.aniBullArm,.aniBullLeg,.aniBullTail{fill:none;stroke:#75513b;stroke-width:4.1;stroke-linecap:round}
.aniBullTailTip{fill:#75513b;stroke:#75513b;stroke-width:2.4}

/* Chick wings now intentionally mirror each other. */
.aniChickWing{fill:#f5e2a9;stroke:#1f1f1f;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:760px){
  .jffQuizQuestion{min-height:62px}
  .jffQuizQuestionTransition{inset:-6px;border-radius:18px}
  .jffQuizQuestionHalo{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizQuestionHalo{animation:none!important}
}

/* Detail answers visibly grow the safe clipped yellow spots. */
.jffQuizCreatureWrap{--spots:.72}
.jffQuizEggSpots ellipse{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(var(--spots));
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v9 overrides
   ============================================================ */

/* Transition: do NOT cover the whole question area.
   While the next question + egg state are being prepared,
   each answer button becomes its own mini halo loader. */
.jffQuizQuestionTransition{display:none!important}
.jffQuizOptions.isTransitioning{pointer-events:none}
.jffQuizOptions.isTransitioning .jffQuizOption{
  color:transparent!important;
  text-shadow:none!important;
  border-color:rgba(255,255,255,.10)!important;
  background:
    radial-gradient(120px 60px at 50% 50%,rgba(132,88,255,.055),transparent 72%),
    rgba(255,255,255,.022)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)!important;
  transform:none!important;
}
.jffQuizOptions.isTransitioning .jffQuizOption::before{opacity:0}
.jffQuizOptions.isTransitioning .jffQuizOption::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:25px;
  height:25px;
  border-radius:999px;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(
    from 0deg,
    transparent,
    rgba(var(--option-rgb),.95),
    rgba(255,255,255,.90),
    rgba(var(--option-rgb),.80),
    transparent
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  filter:drop-shadow(0 0 8px rgba(var(--option-rgb),.30));
  animation:jffQuizOptionHaloSpin .72s linear infinite;
}
@keyframes jffQuizOptionHaloSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

/* Detail / observation answers now grow cat-like whiskers,
   instead of only making a subtle glow stronger. */
.jffQuizCreatureWrap{--whiskers:.01}
.jffQuizEggWhiskerGroup{
  fill:none;
  stroke:#a98470;
  stroke-width:3.5;
  stroke-linecap:round;
  opacity:clamp(.06,var(--whiskers),1);
  transform-box:view-box;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
  filter:drop-shadow(0 0 5px rgba(169,132,112,.13));
}
.jffQuizEggWhiskerGroup.left{
  transform-origin:150px 127px;
  transform:scaleX(var(--whiskers));
}
.jffQuizEggWhiskerGroup.right{
  transform-origin:234px 127px;
  transform:scaleX(var(--whiskers));
}

/* Yellow spots are decorative only now; observation growth is whiskers. */
.jffQuizEggSpots ellipse{
  transform:none!important;
  opacity:.90;
}

/* Make the rules/hair evolution unmistakably look like a fluffy tuft,
   rather than a stray line behind the egg. */
.jffQuizEggHair,
.jffQuizEggHair.h1,
.jffQuizEggHair.h2,
.jffQuizEggHair.h3,
.jffQuizEggHair.h4,
.jffQuizEggHair.h5{
  stroke:#a27c61;
  stroke-width:6.2;
  stroke-linecap:round;
  opacity:clamp(.10,var(--hair),1);
  filter:drop-shadow(0 0 5px rgba(162,124,97,.14));
}

.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggWhiskers{opacity:0}

@media (max-width:760px){
  .jffQuizOptions.isTransitioning .jffQuizOption::after{width:23px;height:23px}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizOptions.isTransitioning .jffQuizOption::after{animation:none!important}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v10 overrides
   ============================================================ */
/* Question line now also uses the same mini halo treatment while transitioning. */
.jffQuizQuestionMeta,
.jffQuizQuestion{position:relative}
.jffQuizQuestionPanel.isTransitioning .jffQuizQuestionMeta,
.jffQuizQuestionPanel.isTransitioning .jffQuizQuestion{
  color:transparent!important;
  text-shadow:none!important;
}
.jffQuizQuestionPanel.isTransitioning .jffQuizQuestionMeta::after,
.jffQuizQuestionPanel.isTransitioning .jffQuizQuestion::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  border-radius:999px;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(
    from 0deg,
    transparent,
    rgba(126,214,255,.95),
    rgba(255,255,255,.94),
    rgba(143,105,255,.82),
    transparent
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
  filter:drop-shadow(0 0 8px rgba(126,214,255,.26));
  animation:jffQuizOptionHaloSpin .72s linear infinite;
}
.jffQuizQuestionPanel.isTransitioning .jffQuizQuestion::after{width:28px;height:28px}

/* Keep decorative egg spots safely away from edges / face / crack. */
.jffQuizEggSpots ellipse{fill:#edd975;opacity:.90}

/* Hair answer should be unmistakable from question 1A onward:
   black upward tuft on top of the egg. */
.jffQuizEggHair,
.jffQuizEggHair.h1,
.jffQuizEggHair.h2,
.jffQuizEggHair.h3,
.jffQuizEggHair.h4,
.jffQuizEggHair.h5{
  stroke:#262626;
  stroke-width:6.4;
  stroke-linecap:round;
  opacity:clamp(.14,var(--hair),1);
  filter:drop-shadow(0 0 4px rgba(0,0,0,.12));
}
.jffQuizEggHair.h1{animation-duration:1.28s}
.jffQuizEggHair.h2{animation-duration:1.34s}
.jffQuizEggHair.h3{animation-duration:1.22s}
.jffQuizEggHair.h4{animation-duration:1.38s}
.jffQuizEggHair.h5{animation-duration:1.30s}

@media (max-width:760px){
  .jffQuizQuestionPanel.isTransitioning .jffQuizQuestionMeta::after,
  .jffQuizQuestionPanel.isTransitioning .jffQuizQuestion::after{width:22px;height:22px}
  .jffQuizQuestionPanel.isTransitioning .jffQuizQuestion::after{width:26px;height:26px}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v11 overrides
   ============================================================ */
.jffQuizQuestionScreen{position:relative}
.jffQuizFinalTransition{
  position:absolute;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  background:rgba(6,8,14,.28);
  border-radius:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.jffQuizFinalTransition.isVisible{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
.jffQuizFinalTransitionHalo{
  width:74px;
  height:74px;
  border-radius:999px;
  background:conic-gradient(from 0deg,transparent,var(--jffq-cyan),rgba(255,255,255,.96),var(--jffq-purple),var(--jffq-pink),transparent);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  filter:drop-shadow(0 0 18px rgba(143,105,255,.28));
  animation:jffQuizFinalHaloSpin .85s linear infinite;
}
@keyframes jffQuizFinalHaloSpin{to{transform:rotate(360deg)}}

/* Hair: 3 short black strands close to the shell, no big waving needed. */
.jffQuizEggHair,
.jffQuizEggHair.h1,
.jffQuizEggHair.h2,
.jffQuizEggHair.h3{
  stroke:#1f1f1f;
  stroke-width:5.4;
  stroke-linecap:round;
  opacity:clamp(.16,var(--hair),1);
  transform-origin:192px 58px;
  animation:none!important;
  filter:none;
}
.jffQuizEggHair.h1{transform:scaleY(var(--hair)) rotate(-10deg)}
.jffQuizEggHair.h2{transform:scaleY(var(--hair))}
.jffQuizEggHair.h3{transform:scaleY(var(--hair)) rotate(10deg)}

/* Cute side-view cow based on the new reference. */
.aniBullBody{fill:#b88768;stroke:none}
.aniBullHead{fill:#c8a38e;stroke:none}
.aniBullMuzzle{fill:#f5edd8;stroke:none}
.aniBullEar{fill:#ba8f73;stroke:none}
.aniBullHorn{fill:none;stroke:#7d593f;stroke-width:4.6;stroke-linecap:round}
.aniBullHornStripe{fill:none;stroke:#e7d3aa;stroke-width:2.1;stroke-linecap:round}
.aniBullLeg{fill:none;stroke:#ab7b60;stroke-width:8.5;stroke-linecap:round}
.aniBullTail{fill:none;stroke:#ab7b60;stroke-width:3.4;stroke-linecap:round}
.aniBullTailTip{fill:none;stroke:#8f664f;stroke-width:4.1;stroke-linecap:round}
.aniBullNostril{fill:#c8b89a;stroke:none}

@media (max-width:760px){
  .jffQuizFinalTransitionHalo{width:66px;height:66px}
}
@media (prefers-reduced-motion:reduce){
  .jffQuizFinalTransitionHalo{animation:none!important}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v12 overrides
   ============================================================ */
/* Head hair: closer to shell, slightly warmer dark tone, with a front overlay so it reads clearly. */
.jffQuizEggHair,
.jffQuizEggHairOverlay .jffQuizEggHair,
.jffQuizEggHairGroup .jffQuizEggHair{
  stroke:#352722;
  stroke-width:5.8;
  stroke-linecap:round;
  opacity:clamp(.18,var(--hair),1);
  transform-origin:192px 74px;
  animation:none!important;
}
.jffQuizEggHairOverlay .jffQuizEggHair{stroke:#2b1f1b;stroke-width:6.1}
.jffQuizEggHair.h1{transform:scaleY(var(--hair)) rotate(-10deg)}
.jffQuizEggHair.h2{transform:scaleY(var(--hair))}
.jffQuizEggHair.h3{transform:scaleY(var(--hair)) rotate(10deg)}

/* Crocodile — flatter side profile like the reference. */
.aniCrocBody,.aniCrocSnoutTop,.aniCrocSnoutBottom,.aniCrocTailBody{fill:#b9d67a;stroke:#222;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.aniCrocSnoutBottom{fill:#b9d67a}
.aniCrocBellyStrip{fill:none;stroke:#e8cf63;stroke-width:5.2;stroke-linecap:round}
.aniCrocSpine{fill:none;stroke:#4f6b2a;stroke-width:6.2;stroke-linecap:round;stroke-linejoin:round}
.aniCrocArm,.aniCrocLeg{fill:none;stroke:#7ea34a;stroke-width:7;stroke-linecap:round}
.aniCrocTooth,.aniCrocTailTeeth{fill:none;stroke:#fff7ef;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}

/* Snake — very simple green Q style like the reference. */
.aniSnakeCuteBody{fill:#b8d88f;stroke:none;filter:none}
.aniSnakeCuteTail{fill:#b8d88f;stroke:none}
.aniSnakeCuteHead{fill:#b8d88f;stroke:none}
.aniSnakeCuteNeck{fill:none;stroke:#b8d88f;stroke-width:26;stroke-linecap:round}
.aniSnakeCuteBelly{fill:none;stroke:#ebdfb4;stroke-width:12;stroke-linecap:round;opacity:1}
.aniSnakeCuteStripe{fill:none;stroke:#d5c89f;stroke-width:4.4;stroke-linecap:round}
.aniNoseDot{fill:#1f1f1f;stroke:none}
.aniSnakeSmile{fill:none;stroke:#1f1f1f;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:760px){
  .jffQuizEggHairOverlay .jffQuizEggHair{stroke-width:5.8}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v13 overrides
   ============================================================ */
/* Head hair must be fully hidden before it grows. */
.jffQuizEggHair,
.jffQuizEggHairOverlay .jffQuizEggHair,
.jffQuizEggHairGroup .jffQuizEggHair{
  stroke:#362925;
  stroke-width:6;
  stroke-linecap:round;
  opacity:var(--hair);
  animation:none!important;
}
.jffQuizEggHairGroup .jffQuizEggHair{transform-origin:192px 66px}
.jffQuizEggHairOverlay .jffQuizEggHair{transform-origin:192px 71px;stroke:#2d211d;stroke-width:6.2}

/* Party accessories */
.aniPartyHat{fill:#8f69ff;stroke:#24322a;stroke-width:3.2;stroke-linejoin:round}
.aniPartyDot{fill:#ffd36b;stroke:#24322a;stroke-width:2}
.aniChain{fill:none;stroke:#ffc852;stroke-width:4.4;stroke-linecap:round}
.aniChainPendant{fill:#ffc852;stroke:#d69d1d;stroke-width:2.3}

/* Snake thinner + cute party-hat styling */
.aniSnakeCuteBody{fill:#b8d88f;stroke:none}
.aniSnakeCuteTail{fill:#b8d88f;stroke:none}
.aniSnakeCuteHead{fill:#b8d88f;stroke:none}
.aniSnakeCuteNeck{fill:none;stroke:#b8d88f;stroke-width:18;stroke-linecap:round}
.aniSnakeCuteBelly{fill:none;stroke:#ebdfb4;stroke-width:9;stroke-linecap:round;opacity:1}
.aniSnakeCuteStripe{fill:none;stroke:#d7cba4;stroke-width:3.8;stroke-linecap:round}
.aniSnakeSmile{fill:none;stroke:#1f1f1f;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.aniPartyHat.snakeHat{fill:#79b7ff;stroke:#24322a;stroke-width:3}

/* Chick keeps soft party-hat look */
.aniPartyHat:not(.snakeHat){fill:#f38ca0;stroke:#1f1f1f;stroke-width:3}

@media (max-width:760px){
  .jffQuizEggHairOverlay .jffQuizEggHair{stroke-width:5.9}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v14 overrides
   ============================================================ */
/* Hide any remaining hair overlay after hatching. */
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggHairOverlay,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggHair,
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizEggWhiskers{
  opacity:0 !important;
}

/* Make accessories visible across more animals. */
.aniBowTie{fill:#8f69ff;stroke:#24322a;stroke-width:2.4;stroke-linejoin:round}
.aniBowTieCenter{fill:#ffd36b;stroke:#24322a;stroke-width:2}
.aniBullCollar{fill:none;stroke:#d85b6e;stroke-width:5;stroke-linecap:round}
.aniBullBell{fill:#ffd36b;stroke:#9a6d15;stroke-width:2.2}
.aniCatStarband{fill:none;stroke:#8f69ff;stroke-width:4.4;stroke-linecap:round}
.aniCatStar{fill:#ffd36b;stroke:#7e5b11;stroke-width:2.1;stroke-linejoin:round}
.aniPartyHat.otterHat{fill:#66c6a7;stroke:#24443a;stroke-width:3}
.aniPartyHat.foxHat{fill:#ff9f69;stroke:#4a2f20;stroke-width:3}

/* Strengthen already existing accessories so they read more clearly. */
.aniChain{stroke:#ffcc4d;stroke-width:5.2;filter:drop-shadow(0 0 2px rgba(255,204,77,.18))}
.aniChainPendant{fill:#ffcc4d;stroke:#d39a10;stroke-width:2.4}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v15 overrides
   ============================================================ */
/* Result section labels should read clearly, not like tiny metadata. */
.jffQuizPersonalityCard small,
.jffQuizResultCard small{
  min-height:28px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  font-size:9.5px;
  font-weight:950;
  line-height:1;
  letter-spacing:.06em;
  text-shadow:0 0 12px rgba(255,255,255,.07);
}
.jffQuizResultCard.isLove small{
  color:rgba(255,196,220,.96);
  border-color:rgba(255,113,171,.22);
  background:rgba(255,113,171,.075);
}
.jffQuizResultCard.isMeal small{
  color:rgba(255,221,166,.96);
  border-color:rgba(255,196,106,.22);
  background:rgba(255,196,106,.075);
}
.jffQuizPersonalityCard strong{margin-top:11px}
.jffQuizResultCard strong{margin-top:10px}

/* Share button */
.jffQuizDownload,.jffQuizRetry,.jffQuizShare{
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.jffQuizShare{
  border:1px solid rgba(115,215,230,.18);
  color:rgba(212,249,255,.82);
  background:rgba(83,202,220,.045);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.jffQuizShare:hover{transform:translateY(-1px);border-color:rgba(115,215,230,.36);background:rgba(83,202,220,.09);color:#fff}
.jffQuizShare.isCopied{border-color:rgba(104,230,180,.40);color:#bff9df;background:rgba(104,230,180,.09)}

/* Make the party accessories unmistakable and place them in front. */
.aniPartyHat.crocHat{fill:#ff7f9f;stroke:#222;stroke-width:3.4}
.aniPartyHat.bullHat{fill:#67c9e8;stroke:#4a3329;stroke-width:3.3}
.aniPartyHat.penguinHat{fill:#9a76ff;stroke:#2f3340;stroke-width:3.2}
.aniPartyHat.catHat{fill:#ffbe63;stroke:#4d3f72;stroke-width:3.2}
.aniPartyHat.otterHat.front{fill:#5fd2ae;stroke:#4d3224;stroke-width:3.1}
.aniPartyHat.foxHat.front{fill:#ff789c;stroke:#4a2f20;stroke-width:3.1}
.aniPartyDot{filter:drop-shadow(0 0 4px rgba(255,211,107,.28))}

/* Croc necklace: larger and brighter. */
.animal-social-croc .aniChain{stroke:#ffd34f;stroke-width:6.2}
.animal-social-croc .aniChainPendant{fill:#ffd34f;stroke:#9e7410;stroke-width:2.5}

/* Bull collar/bell: bolder. */
.animal-social-bull .aniBullCollar{stroke:#ef6f86;stroke-width:6.2}
.animal-social-bull .aniBullBell{fill:#ffd34f;stroke:#9f7210;stroke-width:2.5}

/* Penguin front bow tie: strongly visible on the white belly. */
.aniBowTie.front{fill:#ee6f98;stroke:#3b3140;stroke-width:2.8}
.aniBowTieCenter.front{fill:#ffd34f;stroke:#3b3140;stroke-width:2.2}

/* Cat gets a visible front party hat; older headband may remain subtle. */
.animal-moon-cat .aniCatStarband{opacity:.28}
.animal-moon-cat .aniCatStar{opacity:.42}

@media (max-width:760px){
  .jffQuizPersonalityCard small,.jffQuizResultCard small{font-size:9px;min-height:27px}
  .jffQuizDownload,.jffQuizRetry,.jffQuizShare{min-height:40px;padding:0 14px}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v16 overrides
   ============================================================ */
/* Result animal stage should not show the egg-stage trait chips. */
[data-jffq-lab="result"] .jffQuizTraitChips{
  display:none !important;
}

/* Share button: premium dark-purple glass, aligned with NexPoke visual language. */
.jffQuizShare{
  border:1px solid rgba(151,120,255,.26);
  color:rgba(239,233,255,.92);
  background:
    radial-gradient(110px 48px at 50% 0%,rgba(151,120,255,.12),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(72,54,118,.18);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(132,88,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.jffQuizShare:hover{
  transform:translateY(-1px);
  border-color:rgba(171,144,255,.44);
  color:#fff;
  background:
    radial-gradient(120px 54px at 50% 0%,rgba(171,144,255,.18),transparent 72%),
    rgba(92,68,150,.25);
}
.jffQuizShare.isCopied{
  border-color:rgba(125,225,184,.34);
  color:#d8fff0;
  background:rgba(79,165,126,.16);
}

/* Bull bell sits at the lower neck instead of floating over the torso. */
.animal-social-bull .aniBullCollar{
  stroke:#ef6f86;
  stroke-width:5.4;
}
.animal-social-bull .aniBullBell{
  fill:#ffd34f;
  stroke:#9f7210;
  stroke-width:2.3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.16));
}

/* Crocodile teeth should hug the left-upper mouth seam. */
.animal-social-croc .aniCrocTooth{
  stroke:#fff8ef;
  stroke-width:3.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v17 overrides
   ============================================================ */
/* Bull bell/collar should slope from upper-right to lower-left and sit under the neck. */
.animal-social-bull .aniBullCollar{
  stroke:#ef6f86;
  stroke-width:5.6;
  stroke-linecap:round;
}
.animal-social-bull .aniBullBell{
  fill:#ffd34f;
  stroke:#9f7210;
  stroke-width:2.3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.16));
}

/* On mobile, live trait chip stays in the bottom-right corner and out of the egg center. */
@media (max-width:760px){
  [data-jffq-lab="live"] .jffQuizTraitChips{
    left:auto;
    right:8px;
    bottom:8px;
    max-width:44%;
    justify-content:flex-end;
    gap:4px;
  }
  [data-jffq-lab="live"] .jffQuizTraitChip{
    min-height:20px;
    padding:0 7px;
    font-size:7px;
  }
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v19 overrides
   ============================================================ */
/* Crocodile tail: no white decorative line/teeth on the tail. */
.aniCrocTailTeeth{display:none!important}

/* Result CTA: direct App Store / Google Play buttons,
   visually aligned with the Intro Jiu Fan Fan direct-store row. */
.jffQuizStoreRow{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.jffQuizStoreButton{
  --store-rgb:132,88,255;
  position:relative;
  min-width:0;
  min-height:82px;
  padding:13px 15px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  overflow:hidden;
  border-radius:19px;
  border:1px solid rgba(var(--store-rgb),.25);
  color:#fff;
  text-decoration:none;
  text-align:left;
  background:
    radial-gradient(250px 120px at 0% 0%,rgba(var(--store-rgb),.14),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.018)),
    rgba(7,9,15,.72);
  box-shadow:
    0 15px 34px rgba(0,0,0,.23),
    0 0 22px rgba(var(--store-rgb),.055),
    inset 0 0 0 1px rgba(255,255,255,.020);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.jffQuizStoreButton::before{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--store-rgb),.72),rgba(255,255,255,.30),transparent);
  opacity:.56;
}
.jffQuizStoreApple{--store-rgb:114,139,255}
.jffQuizStoreGoogle{--store-rgb:52,211,153}
.jffQuizStoreButton:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--store-rgb),.46);
  background:
    radial-gradient(280px 135px at 0% 0%,rgba(var(--store-rgb),.20),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.025)),
    rgba(8,10,17,.84);
  box-shadow:
    0 20px 43px rgba(0,0,0,.30),
    0 0 28px rgba(var(--store-rgb),.10),
    inset 0 0 0 1px rgba(255,255,255,.032);
}
.jffQuizStoreButton:active{transform:translateY(0) scale(.992)}
.jffQuizStoreButton:focus-visible{outline:2px solid rgba(var(--store-rgb),.72);outline-offset:3px}
.jffQuizStoreIcon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(var(--store-rgb),.24);
  background:rgba(var(--store-rgb),.070);
  box-shadow:0 0 17px rgba(var(--store-rgb),.07);
}
.jffQuizStoreIcon svg{width:21px;height:21px;display:block;fill:currentColor;color:rgba(255,255,255,.94)}
.jffQuizStoreCopy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.jffQuizStoreCopy small{color:rgba(var(--store-rgb),.80);font-size:6px;font-weight:950;line-height:1.2;letter-spacing:.14em}
.jffQuizStoreCopy strong{margin-top:4px;color:#fff;font-size:16px;font-weight:950;line-height:1.1}
.jffQuizStoreCopy em{margin-top:4px;color:rgba(255,255,255,.39);font-size:7.5px;font-style:normal;font-weight:750;letter-spacing:.03em}
.jffQuizStoreArrow{align-self:center;color:rgba(255,255,255,.38);font-size:14px;font-weight:900;transition:transform .18s ease,color .18s ease}
.jffQuizStoreButton:hover .jffQuizStoreArrow{color:#fff;transform:translate(2px,-2px)}
.jffQuizCtaSecondaryActions{margin-top:10px}

@media (max-width:640px){
  .jffQuizStoreRow{margin-top:14px;gap:8px}
  .jffQuizStoreButton{
    min-height:75px;
    padding:11px 9px;
    grid-template-columns:34px minmax(0,1fr);
    gap:8px;
    border-radius:17px;
  }
  .jffQuizStoreIcon{width:34px;height:34px;border-radius:11px}
  .jffQuizStoreIcon svg{width:18px;height:18px}
  .jffQuizStoreCopy small{font-size:5px;letter-spacing:.08em}
  .jffQuizStoreCopy strong{font-size:13px}
  .jffQuizStoreCopy em{font-size:6.5px}
  .jffQuizStoreArrow{display:none}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v20 overrides
   ============================================================ */
/* Compact version of Intro's AFTER DOWNLOAD → 遊戲區 flow. */
.jffQuizGameZone{
  position:relative;
  margin-top:12px;
  padding:14px 14px 13px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:11px 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:18px;
  text-align:left;
  background:
    radial-gradient(230px 120px at 0% 0%,rgba(82,229,235,.070),transparent 70%),
    radial-gradient(250px 130px at 100% 100%,rgba(154,114,255,.065),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,.010)),
    rgba(4,7,12,.44);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.010),
    0 12px 28px rgba(0,0,0,.13);
}
.jffQuizGameZone::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(82,229,235,.34),rgba(154,114,255,.38),transparent);
  opacity:.65;
}
.jffQuizGameZoneMark{
  grid-row:1 / span 2;
  align-self:start;
  width:32px;
  height:32px;
  padding:7px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:4px;
  border-radius:11px;
  border:1px solid rgba(118,184,255,.17);
  background:rgba(118,184,255,.045);
  box-shadow:0 0 18px rgba(132,88,255,.055);
}
.jffQuizGameZoneMark span{
  display:block;
  border-radius:4px;
  background:linear-gradient(135deg,#5fdde8,#8d6cff 55%,#ff78aa);
  box-shadow:0 0 7px rgba(132,88,255,.12);
}
.jffQuizGameZoneCopy{min-width:0}
.jffQuizGameZoneCopy small{
  display:block;
  color:rgba(112,217,231,.69);
  font-size:5.7px;
  font-weight:950;
  line-height:1.3;
  letter-spacing:.13em;
}
.jffQuizGameZoneCopy strong{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.91);
  font-size:11px;
  font-weight:900;
  line-height:1.38;
}
.jffQuizGameZoneCopy p{
  margin:5px 0 0;
  max-width:none;
  color:rgba(255,255,255,.44);
  font-size:8px;
  font-weight:650;
  line-height:1.55;
}
.jffQuizGameZoneSteps{
  grid-column:1 / -1;
  margin-top:1px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:6px;
}
.jffQuizGameZoneSteps span{
  min-width:0;
  min-height:28px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:10px;
  color:rgba(255,255,255,.60);
  background:rgba(255,255,255,.018);
  font-size:7px;
  font-weight:820;
  text-align:center;
  white-space:nowrap;
}
.jffQuizGameZoneSteps b{
  color:rgba(122,208,255,.82);
  font-size:6px;
  letter-spacing:.04em;
}
.jffQuizGameZoneSteps i{
  color:rgba(255,255,255,.22);
  font-size:9px;
  font-style:normal;
}

@media (max-width:640px){
  .jffQuizGameZone{
    margin-top:10px;
    padding:12px;
    grid-template-columns:30px minmax(0,1fr);
    gap:9px 10px;
    border-radius:16px;
  }
  .jffQuizGameZoneMark{width:29px;height:29px;padding:6px;border-radius:10px}
  .jffQuizGameZoneCopy small{font-size:5px;letter-spacing:.09em}
  .jffQuizGameZoneCopy strong{font-size:10px}
  .jffQuizGameZoneCopy p{font-size:7.4px;line-height:1.5}
  .jffQuizGameZoneSteps{
    grid-template-columns:1fr;
    gap:5px;
  }
  .jffQuizGameZoneSteps span{min-height:27px;font-size:7.2px}
  .jffQuizGameZoneSteps i{display:none}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v21 overrides
   ============================================================ */
/* Tail: keep max length inside the frame, and use a warm monkey-tail brown tone. */
.jffQuizEggTail{
  stroke-width:13px;
  transform-origin:274px 146px;
  transform:scaleX(var(--tail));
  opacity:clamp(.12,var(--tail),1);
  filter:drop-shadow(0 0 7px rgba(128,80,45,.12));
}
@keyframes jffQuizEggTailWave{
  0%{transform:scaleX(var(--tail)) rotate(-5deg)}
  100%{transform:scaleX(var(--tail)) rotate(8deg)}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v23 · invitation screen
   ============================================================ */
.jffQuizWelcome[hidden]{display:none!important}
.jffQuizDialog.isWelcome{width:min(620px,100%)}

.jffQuizWelcome{
  position:relative;
  padding:8px 10px 4px;
  text-align:center;
}
.jffQuizWelcomeEyebrow{
  color:rgba(255,190,125,.78);
  font-size:8px;
  font-weight:950;
  line-height:1.3;
  letter-spacing:.18em;
}
.jffQuizWelcomeTitle{
  margin:10px 0 0;
  color:#fff;
  font-size:clamp(31px,5.8vw,46px);
  font-weight:950;
  line-height:1.04;
  letter-spacing:-1.5px;
}
.jffQuizWelcomeTitle span{
  display:inline-block;
  margin-top:4px;
  background:linear-gradient(90deg,#ffbf69,#ff7baa 48%,#9b78ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,112,170,.14));
}
.jffQuizWelcomeCopy{
  width:min(470px,100%);
  margin:12px auto 0;
  color:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:650;
  line-height:1.7;
}

.jffQuizWelcomeEggStage{
  position:relative;
  width:min(430px,100%);
  height:238px;
  margin:7px auto 0;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.jffQuizWelcomeEggHalo{
  position:absolute;
  left:50%;
  top:49%;
  width:210px;
  height:155px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,193,105,.13),rgba(154,114,255,.08) 45%,transparent 72%);
  filter:blur(17px);
  animation:jffQuizWelcomeHalo 2.2s ease-in-out infinite alternate;
}
.jffQuizWelcomeEgg{
  position:relative;
  z-index:1;
  width:min(390px,100%);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.28));
}
.jffQuizWelcomeEggMotion{
  transform-origin:192px 202px;
  animation:jffQuizWelcomeEggRock 1.7s ease-in-out infinite alternate;
}
.jffQuizWelcomeEggTop,
.jffQuizWelcomeEggBottom{
  fill:url(#jffqWelcomeShellGradient);
  stroke:rgba(110,103,101,.92);
  stroke-width:1.8;
}
.jffQuizWelcomeEggCrack{
  fill:none;
  stroke:rgba(110,103,101,.98);
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.jffQuizWelcomeEggSpots ellipse{
  fill:#efd975;
  opacity:.92;
}
.jffQuizWelcomeEggEye{fill:#fff}
.jffQuizWelcomeEggPupil{fill:#111}
.jffQuizWelcomeEggSparkle{fill:#fff}
.jffQuizWelcomeEggEyeGroup{
  transform-box:fill-box;
  transform-origin:center;
  animation:jffQuizWelcomeBlink 4.3s infinite;
}
@keyframes jffQuizWelcomeEggRock{
  0%{transform:translateY(2px) rotate(-3deg)}
  50%{transform:translateY(-2px) rotate(1deg)}
  100%{transform:translateY(1px) rotate(3deg)}
}
@keyframes jffQuizWelcomeBlink{
  0%,44%,48%,100%{transform:scaleY(1)}
  45%,47%{transform:scaleY(.08)}
}
@keyframes jffQuizWelcomeHalo{
  from{opacity:.56;transform:translate(-50%,-50%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}

.jffQuizWelcomeActions{
  width:min(470px,100%);
  margin:1px auto 0;
  display:grid;
  gap:9px;
}
.jffQuizWelcomeStart,
.jffQuizWelcomeBack{
  width:100%;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.025em;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease,background .17s ease;
}
.jffQuizWelcomeStart{
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  background:linear-gradient(100deg,rgba(85,166,255,.86),rgba(135,91,255,.90) 50%,rgba(235,85,155,.82));
  box-shadow:0 15px 34px rgba(102,78,226,.22),0 0 25px rgba(255,105,164,.08),inset 0 1px 0 rgba(255,255,255,.17);
}
.jffQuizWelcomeBack{
  border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.025);
}
.jffQuizWelcomeStart:hover,
.jffQuizWelcomeBack:hover{transform:translateY(-1px)}
.jffQuizWelcomeStart:hover{box-shadow:0 19px 42px rgba(102,78,226,.28),0 0 31px rgba(255,105,164,.11),inset 0 1px 0 rgba(255,255,255,.20)}
.jffQuizWelcomeBack:hover{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.86);background:rgba(255,255,255,.045)}
.jffQuizWelcomeStart:active,
.jffQuizWelcomeBack:active{transform:scale(.985)}
.jffQuizWelcomeStart:focus-visible,
.jffQuizWelcomeBack:focus-visible{outline:2px solid rgba(164,125,255,.72);outline-offset:3px}

@media (max-width:640px){
  .jffQuizDialog.isWelcome{width:100%}
  .jffQuizWelcome{padding:5px 1px 2px}
  .jffQuizWelcomeTitle{font-size:clamp(29px,9vw,38px)}
  .jffQuizWelcomeCopy{max-width:330px;font-size:10px;line-height:1.62}
  .jffQuizWelcomeEggStage{height:218px;margin-top:3px}
  .jffQuizWelcomeEgg{width:min(365px,112%)}
  .jffQuizWelcomeActions{gap:8px}
  .jffQuizWelcomeStart,.jffQuizWelcomeBack{min-height:44px;font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizWelcomeEggMotion,
  .jffQuizWelcomeEggEyeGroup,
  .jffQuizWelcomeEggHalo{animation:none!important}
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v24 · mobile stability + compact quiz layout
   ============================================================ */

/* Keep the quiz itself as the touch surface; do not let gestures leak to the page. */
.jffQuizBackdrop{
  overscroll-behavior:none;
  touch-action:none;
}
.jffQuizScroll{
  touch-action:pan-y;
}

/* Question stage: the egg now appears before the question and answers. */
.jffQuizHeaderCompact{
  min-height:32px;
  padding-right:48px;
  align-items:center;
  justify-content:space-between;
}
.jffQuizHeaderCompact .jffQuizEyebrow{
  color:rgba(255,190,125,.78);
}
.jffQuizHeaderCompact .jffQuizCounter{
  position:static;
  min-height:29px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  gap:2px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
}
.jffQuizHeaderCompact .jffQuizCounter strong{
  color:#fff;
  font-size:14px;
}
.jffQuizHeaderCompact .jffQuizCounter span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
}

.jffQuizQuestionScreen > .jffQuizPawTrack{
  margin-top:14px;
}
.jffQuizQuestionScreen > .jffQuizLab{
  margin-top:12px;
}
.jffQuizUnderEggActions{
  margin:8px 2px 0;
  display:flex;
  justify-content:flex-start;
}
.jffQuizUnderEggActions .jffQuizPrev{
  min-height:34px;
  padding:0 12px;
}
.jffQuizQuestionScreen .jffQuizQuestionPanel{
  margin-top:12px;
}

/*
 * Mobile fixed + backdrop-filter + body overflow changes can trigger a black
 * compositing frame on some iOS / Android browsers.  On small screens the
 * overlay uses a stable opaque tint instead of live backdrop blur, and the
 * body keeps its scroll layout unchanged while the fixed overlay intercepts
 * all gestures.  This avoids the one-frame black flash on deep-link entry.
 */
@media (max-width:760px){
  body.jffQuizOpen{
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .jffQuizBackdrop{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(2,4,9,.90);
    will-change:opacity;
  }

  .jffQuizDialog,
  .jffQuizBackdrop.isOpen .jffQuizDialog{
    transform:translateZ(0)!important;
    transition:none!important;
    backface-visibility:hidden;
  }

  .jffQuizHeaderCompact{
    min-height:28px;
    padding-right:40px;
    flex-direction:row;
    gap:10px;
  }
  .jffQuizHeaderCompact .jffQuizEyebrow{
    font-size:7px;
    letter-spacing:.15em;
  }
  .jffQuizHeaderCompact .jffQuizCounter{
    position:static!important;
    right:auto!important;
    top:auto!important;
    min-height:26px;
    padding:0 9px;
  }
  .jffQuizHeaderCompact .jffQuizCounter strong{font-size:13px}

  .jffQuizQuestionScreen > .jffQuizPawTrack{
    margin-top:10px;
  }
  .jffQuizQuestionScreen > .jffQuizLab{
    min-height:202px;
    margin-top:9px;
  }
  .jffQuizQuestionScreen > .jffQuizLab .jffQuizCreatureWrap{
    inset:24px 0 2px;
  }
  .jffQuizQuestionScreen > .jffQuizLab .jffQuizCreature{
    width:min(350px,102%);
  }
  .jffQuizUnderEggActions{
    margin-top:6px;
  }
  .jffQuizUnderEggActions .jffQuizPrev{
    min-height:32px;
    padding:0 11px;
    font-size:8px;
  }
  .jffQuizQuestionScreen .jffQuizQuestionPanel{
    margin-top:10px;
  }
  .jffQuizQuestionScreen .jffQuizQuestion{
    font-size:clamp(18px,5.2vw,23px);
  }
}

/* ============================================================
   Jiu Fan Fan · Hatch Quiz v25 overrides
   ============================================================ */
/* The old water-ripple guide lines came from the tadpole-lab concept.
   The current hatch/egg experience reads cleaner without them. */
.jffQuizLab::before,
.jffQuizLab::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}

/* The egg is intentionally left of the raw SVG center to leave room for
   its growing tail. Once hatched, the animal no longer needs that space,
   so recenter the animal only — do not move the egg stage. */
.jffQuizCreatureWrap[data-mode="hatched"] .jffQuizAnimalStage{
  opacity:1;
  transform:translate(14px,-7px) scale(1);
  transform-origin:210px 116px;
}


/* ============================================================
   Jiu Fan Fan · Hatch Quiz v27 · Link-first social sharing
   ============================================================ */
.jffQuizSharePanel{
  --share-rgb:132,88,255;
  position:relative;
  margin-top:14px;
  padding:15px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:19px;
  text-align:left;
  background:
    radial-gradient(310px 140px at 0% 0%,rgba(82,229,235,.07),transparent 70%),
    radial-gradient(330px 160px at 100% 100%,rgba(255,115,171,.075),transparent 72%),
    rgba(4,7,12,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012);
}
.jffQuizSharePanel::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,169,255,.52),rgba(137,91,255,.52),rgba(255,94,163,.48),transparent);
  opacity:.75;
}
.jffQuizSharePanelHead small{
  display:block;
  color:rgba(151,198,255,.72);
  font-size:6px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:.15em;
}
.jffQuizSharePanelHead strong{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:14px;
  font-weight:950;
  line-height:1.3;
}
.jffQuizSharePanelHead p{
  margin:5px 0 0;
  color:rgba(255,255,255,.46);
  font-size:8.5px;
  line-height:1.58;
}
.jffQuizSharePlatformRow{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.jffQuizPlatformShare{
  --platform-rgb:132,88,255;
  min-width:0;
  min-height:66px;
  padding:9px 5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(var(--platform-rgb),.19);
  border-radius:15px;
  color:rgba(255,255,255,.86);
  background:
    radial-gradient(92px 54px at 50% 0%,rgba(var(--platform-rgb),.10),transparent 74%),
    rgba(255,255,255,.024);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,opacity .16s ease;
}
.jffQuizPlatformShare.isThreads{--platform-rgb:220,220,230}
.jffQuizPlatformShare.isFacebook{--platform-rgb:83,139,245}
.jffQuizPlatformShare.isInstagram{--platform-rgb:226,89,158}
.jffQuizPlatformShare.isLine{--platform-rgb:62,210,105}
.jffQuizPlatformShare:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:rgba(var(--platform-rgb),.40);
  color:#fff;
  background:
    radial-gradient(104px 62px at 50% 0%,rgba(var(--platform-rgb),.17),transparent 74%),
    rgba(255,255,255,.038);
}
.jffQuizPlatformShare:disabled{opacity:.48;cursor:wait}
.jffQuizPlatformShare.isBusy .jffQuizPlatformIcon{animation:jffQuizSharePulse .85s ease-in-out infinite alternate}
@keyframes jffQuizSharePulse{to{transform:scale(.84);opacity:.48}}
.jffQuizPlatformShare strong{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  color:inherit;
  font-size:8px;
  font-weight:900;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.jffQuizPlatformIcon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(var(--platform-rgb),.29);
  border-radius:10px;
  color:rgba(255,255,255,.96);
  background:rgba(var(--platform-rgb),.075);
  line-height:1;
}
.jffQuizPlatformShare.isThreads .jffQuizPlatformIcon,
.jffQuizPlatformShare.isFacebook .jffQuizPlatformIcon{
  border-radius:999px;
}
.jffQuizPlatformIcon svg{
  width:21px;
  height:21px;
  display:block;
  overflow:visible;
}
.jffQuizThreadsMark{
  fill:currentColor;
  stroke:none;
  font:800 19px Arial,Helvetica,sans-serif;
  text-anchor:middle;
  dominant-baseline:central;
}
.jffQuizFacebookMark{fill:currentColor;stroke:none}
.jffQuizInstagramFrame,
.jffQuizInstagramLens{
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
}
.jffQuizInstagramDot{fill:currentColor;stroke:none}
.jffQuizPlatformShare.isLine .jffQuizPlatformIcon{
  border-color:rgba(82,229,126,.42);
  border-radius:9px;
  background:
    linear-gradient(145deg,rgba(84,232,128,.20),rgba(84,232,128,.055)),
    rgba(5,13,9,.72);
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    0 0 18px rgba(82,229,126,.08),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.jffQuizLineWordmark{
  width:22px!important;
  height:22px!important;
  overflow:visible;
}
.jffQuizLineWordmark path{
  fill:none;
  stroke:rgba(255,255,255,.97);
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.jffQuizSharePlatformNote{
  margin:9px auto 0;
  max-width:590px;
  color:rgba(255,255,255,.38);
  font-size:7.5px;
  font-weight:700;
  line-height:1.55;
  text-align:center;
}
.jffQuizShareUtilityRow{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
}
.jffQuizSaveShareImage{
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(99,169,255,.18);
  border-radius:999px;
  color:rgba(212,228,247,.72);
  background:rgba(68,101,151,.075);
  font-size:9px;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.jffQuizSaveShareImage:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(99,169,255,.34);color:#fff;background:rgba(75,119,185,.14)}
.jffQuizSaveShareImage:disabled{opacity:.48;cursor:wait}
.jffQuizShareUtilityRow .jffQuizShare{
  border-color:rgba(151,111,255,.34);
  color:#f1ebff;
  background:
    radial-gradient(130px 50px at 50% 0%,rgba(159,116,255,.13),transparent 72%),
    rgba(119,82,194,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}
.jffQuizShareStatus{
  min-height:14px;
  margin:8px 0 0;
  color:rgba(255,255,255,.44);
  font-size:7.5px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}

@media (max-width:640px){
  .jffQuizSharePanel{padding:13px 10px;border-radius:17px}
  .jffQuizSharePlatformRow{gap:5px}
  .jffQuizPlatformShare{min-height:60px;padding:7px 2px;border-radius:13px;gap:6px}
  .jffQuizPlatformIcon{width:27px;height:27px;flex-basis:27px;border-radius:9px}
  .jffQuizPlatformShare.isThreads .jffQuizPlatformIcon,
  .jffQuizPlatformShare.isFacebook .jffQuizPlatformIcon{border-radius:999px}
  .jffQuizPlatformIcon svg{width:19px;height:19px}
  .jffQuizThreadsMark{font-size:18px}
  .jffQuizPlatformShare strong{font-size:6.5px;letter-spacing:-.01em}
  .jffQuizShare,.jffQuizSaveShareImage{min-height:38px;padding:0 11px;font-size:8.4px}
  .jffQuizSharePanelHead p{font-size:8px}
  .jffQuizSharePlatformNote{font-size:7.2px}
}

@media (max-width:380px){
  .jffQuizSharePlatformRow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jffQuizPlatformShare{min-height:58px}
  .jffQuizPlatformShare strong{font-size:7.2px}
}

@media (prefers-reduced-motion:reduce){
  .jffQuizPlatformShare.isBusy .jffQuizPlatformIcon{animation:none!important}
}


/* v29: share OG cards use the same print-card visual language as the in-page 4:5 card. */


/* ============================================================
   Jiu Fan Fan · Hatch Quiz v31 share cleanup
   ============================================================ */
.jffQuizShareStatus:empty{display:none!important;margin:0!important;min-height:0!important}
.jffQuizSharePanelHead > p,.jffQuizSharePlatformNote{display:none!important}