/* ================================================================
   class7-math-hcf-common.css
   Shared look for every "Factors, Multiples, HCF and LCM" quiz popup (all tiers).
   The popup shell, chips (always ONE line of 4), prompt, feedback and picture stage all come from
   class7-math-ch2-common.css (.c72-overlay); this file only adds what the HCF pictures need:
   nowrap svg text for every popup of this chapter, the soft tile / coin / frog shine, and a hop animation.
   Popup ids are the lower-case prefixes: wu* (Tier 1), cf* (Tier 2), hf* (Tier 3), lg* (Tier 4), pm* (Tier 5), pf* (Tier 6), fp* (Tier 7), hp* (Tier 8), mc* (Tier 9), lm* (Tier 10), lp* (Tier 11), gp* (Tier 12), ep* (Tier 13), hl* (Tier 14), mt* (Tier 15), aw* (Tier 16), bf* (Tier 17), pz* (Tier 18).
   To cover a new tier, add its prefix to the --hc selector list in its own tier css, never here.
   ================================================================ */
.c72-overlay[id^="wu"] .c72-svg text,
.c72-overlay[id^="cf"] .c72-svg text,
.c72-overlay[id^="hf"] .c72-svg text,
.c72-overlay[id^="lg"] .c72-svg text,
.c72-overlay[id^="pm"] .c72-svg text,
.c72-overlay[id^="pf"] .c72-svg text,
.c72-overlay[id^="fp"] .c72-svg text,
.c72-overlay[id^="hp"] .c72-svg text,
.c72-overlay[id^="mc"] .c72-svg text,
.c72-overlay[id^="lm"] .c72-svg text,
.c72-overlay[id^="lp"] .c72-svg text,
.c72-overlay[id^="gp"] .c72-svg text,
.c72-overlay[id^="ep"] .c72-svg text,
.c72-overlay[id^="hl"] .c72-svg text,
.c72-overlay[id^="mt"] .c72-svg text,
.c72-overlay[id^="aw"] .c72-svg text,
.c72-overlay[id^="bf"] .c72-svg text,
.c72-overlay[id^="pz"] .c72-svg text { white-space: nowrap; }

/* one soft shine on every chapter picture: a matte pastel card with a gentle highlight */
.c72-overlay[id^="wu"] .c72-stage,
.c72-overlay[id^="cf"] .c72-stage,
.c72-overlay[id^="hf"] .c72-stage,
.c72-overlay[id^="lg"] .c72-stage,
.c72-overlay[id^="pm"] .c72-stage,
.c72-overlay[id^="pf"] .c72-stage,
.c72-overlay[id^="fp"] .c72-stage,
.c72-overlay[id^="hp"] .c72-stage,
.c72-overlay[id^="mc"] .c72-stage,
.c72-overlay[id^="lm"] .c72-stage,
.c72-overlay[id^="lp"] .c72-stage,
.c72-overlay[id^="gp"] .c72-stage,
.c72-overlay[id^="ep"] .c72-stage,
.c72-overlay[id^="hl"] .c72-stage,
.c72-overlay[id^="mt"] .c72-stage,
.c72-overlay[id^="aw"] .c72-stage,
.c72-overlay[id^="bf"] .c72-stage,
.c72-overlay[id^="pz"] .c72-stage {
    background:
        radial-gradient(90% 60% at 18% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(120% 90% at 20% 0%, var(--c72-stage-a) 0%, var(--c72-stage-b) 100%);
}

/* lettered answer rows sit under the picture: a little air between the two cards */
.c72-overlay .c72-stage + .c72-stage { margin-top: 2px; }

/* the frog hops a little on the number line */
.c72-svg use[href$="hc-ic-frog"] { transform-box: fill-box; transform-origin: 50% 100%; animation: hc-bob 1.6s ease-in-out infinite; }
@keyframes hc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ghost "?" placeholders keep their pulse readable on the matte card */
.c72-svg .c72-ghost { fill: rgba(255, 255, 255, .92); }

@media (max-width: 400px) {
    .c72-overlay .c72-stage + .c72-stage { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .c72-svg use[href$="hc-ic-frog"] { animation: none !important; }
}

/* ================================================================
   Picture height caps for each tier's popups (the tall pictures are limited so the chips always stay in view on a phone).
   One block per tier, in tier order; a new tier adds its block here. Popup ids are the lower-case prefixes.
   ================================================================ */

/* ---- Tier 1: warmup ---- */
.c72-overlay[id^="wupairs"] .c72-svg { max-height: 240px; }
.c72-overlay[id^="hcjump"] .c72-svg { max-height: 170px; }
.c72-overlay[id^="wuwho"] .c72-svg { max-height: 150px; }
.c72-overlay[id^="wudivide"] .c72-svg { max-height: 280px; }
.c72-overlay[id^="wuhunt"] .c72-svg { max-height: 220px; }
.c72-overlay[id^="wupairs"] .quiz-question .c72-inl,
.c72-overlay[id^="wuwho"] .quiz-question .c72-inl { width: 1.6em; height: 1.6em; vertical-align: -0.5em; }
@media (max-width: 400px) {
    .c72-overlay[id^="wudivide"] .c72-svg { max-height: 250px; }
    .c72-overlay[id^="wuhunt"] .c72-svg { max-height: 200px; }
}

/* ---- Tier 2: commonfactors ---- */
.c72-overlay[id^="cftiles"] .c72-svg,
.c72-overlay[id^="cfwhy"] .c72-svg,
.c72-overlay[id^="cfdraw"] .c72-svg { max-height: 250px; }
.c72-overlay[id^="cfsides"] .c72-svg { max-height: 270px; }
.c72-overlay[id^="cfvenn"] .c72-svg { max-height: 280px; }
.c72-overlay[id^="cffrac"] .c72-svg { max-height: 140px; }
@media (max-width: 400px) {
    .c72-overlay[id^="cftiles"] .c72-svg,
    .c72-overlay[id^="cfwhy"] .c72-svg,
    .c72-overlay[id^="cfdraw"] .c72-svg { max-height: 220px; }
    .c72-overlay[id^="cfvenn"] .c72-svg { max-height: 250px; }
}

/* ---- Tier 3: hcf ---- */
.c72-overlay[id^="hflargest"] .c72-svg,
.c72-overlay[id^="hfcount"] .c72-svg { max-height: 230px; }
.c72-overlay[id^="hfrice"] .c72-svg { max-height: 250px; }
.c72-overlay[id^="hfname"] .c72-svg,
.c72-overlay[id^="hfcoprime"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="hfjump"] .c72-svg,
.c72-overlay[id^="hfreflect"] .c72-svg { max-height: 190px; }
@media (max-width: 400px) {
    .c72-overlay[id^="hfrice"] .c72-svg { max-height: 220px; }
}

/* ---- Tier 4: listing ---- */
.c72-overlay[id^="lgrace"] .c72-svg,
.c72-overlay[id^="lgmiss"] .c72-svg { max-height: 240px; }
.c72-overlay[id^="lgsimple"] .c72-svg { max-height: 200px; }
@media (max-width: 400px) {
    .c72-overlay[id^="lgrace"] .c72-svg,
    .c72-overlay[id^="lgmiss"] .c72-svg { max-height: 210px; }
}

/* ---- Tier 5: primes ---- */
.c72-overlay[id^="pmsort"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="pmsieve"] .c72-svg { max-height: 330px; }
.c72-overlay[id^="pmpattern"] .c72-svg { max-height: 330px; }
.c72-overlay[id^="pmone"] .c72-svg { max-height: 150px; }
@media (max-width: 400px) {
    .c72-overlay[id^="pmsieve"] .c72-svg,
    .c72-overlay[id^="pmpattern"] .c72-svg { max-height: 290px; }
}

/* ---- Tier 6: factorise ---- */
.c72-overlay[id^="pftree"] .c72-svg,
.c72-overlay[id^="pfpaths"] .c72-svg,
.c72-overlay[id^="pfrace"] .c72-svg { max-height: 320px; }
.c72-overlay[id^="pfladder"] .c72-svg,
.c72-overlay[id^="pfcircle"] .c72-svg { max-height: 300px; }
.c72-overlay[id^="pfown"] .c72-svg { max-height: 160px; }
.c72-overlay[id^="pfbuild"] .c72-svg { max-height: 150px; }
@media (max-width: 400px) {
    .c72-overlay[id^="pftree"] .c72-svg,
    .c72-overlay[id^="pfpaths"] .c72-svg,
    .c72-overlay[id^="pfrace"] .c72-svg { max-height: 270px; }
    .c72-overlay[id^="pfladder"] .c72-svg,
    .c72-overlay[id^="pfcircle"] .c72-svg { max-height: 250px; }
}

/* ---- Tier 7: fromprimes ---- */
.c72-overlay[id^="fppick"] .c72-svg,
.c72-overlay[id^="fpis"] .c72-svg,
.c72-overlay[id^="fpother"] .c72-svg,
.c72-overlay[id^="fpfigure"] .c72-svg { max-height: 210px; }
.c72-overlay[id^="fpbuild"] .c72-svg,
.c72-overlay[id^="fpmissany"] .c72-svg { max-height: 260px; }
@media (max-width: 400px) {
    .c72-overlay[id^="fpbuild"] .c72-svg,
    .c72-overlay[id^="fpmissany"] .c72-svg { max-height: 230px; }
}

/* ---- Tier 8: hcfprimes ---- */
.c72-overlay[id^="hpmatch"] .c72-svg,
.c72-overlay[id^="hpwalk"] .c72-svg,
.c72-overlay[id^="hpmin"] .c72-svg,
.c72-overlay[id^="hpbuild"] .c72-svg,
.c72-overlay[id^="hppractice"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="hpthree"] .c72-svg { max-height: 240px; }
.c72-overlay[id^="hptrap"] .c72-svg { max-height: 170px; }
@media (max-width: 400px) {
    .c72-overlay[id^="hpthree"] .c72-svg { max-height: 210px; }
}

/* ---- Tier 9: multiples ---- */
.c72-overlay[id^="mctoran"] .c72-svg,
.c72-overlay[id^="mclargest"] .c72-svg,
.c72-overlay[id^="mcgajak"] .c72-svg { max-height: 160px; }
.c72-overlay[id^="mclists"] .c72-svg { max-height: 250px; }
.c72-overlay[id^="mcdraw"] .c72-svg { max-height: 260px; }
@media (max-width: 400px) {
    .c72-overlay[id^="mclists"] .c72-svg { max-height: 220px; }
    .c72-overlay[id^="mcdraw"] .c72-svg { max-height: 230px; }
}

/* ---- Tier 10: lcm ---- */
.c72-overlay[id^="lmsmallest"] .c72-svg,
.c72-overlay[id^="lmsorter"] .c72-svg { max-height: 160px; }
.c72-overlay[id^="lmname"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="lmidli"] .c72-svg { max-height: 330px; }
.c72-overlay[id^="lmfirst"] .c72-svg { max-height: 300px; }
@media (max-width: 400px) {
    .c72-overlay[id^="lmidli"] .c72-svg { max-height: 280px; }
    .c72-overlay[id^="lmfirst"] .c72-svg { max-height: 250px; }
}

/* ---- Tier 11: lcmprimes ---- */
.c72-overlay[id^="lporig"] .c72-svg,
.c72-overlay[id^="lpmax"] .c72-svg,
.c72-overlay[id^="lpminmax"] .c72-svg,
.c72-overlay[id^="lppractice"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="lptower"] .c72-svg,
.c72-overlay[id^="lpis"] .c72-svg,
.c72-overlay[id^="lpmore"] .c72-svg { max-height: 170px; }
.c72-overlay[id^="lpthree"] .c72-svg { max-height: 240px; }
@media (max-width: 400px) {
    .c72-overlay[id^="lpthree"] .c72-svg { max-height: 210px; }
}

/* ---- Tier 12: patterns ---- */
.c72-overlay[id^="gphcfone"] .c72-svg,
.c72-overlay[id^="gplcmone"] .c72-svg,
.c72-overlay[id^="gpdouble"] .c72-svg,
.c72-overlay[id^="gpmultiplier"] .c72-svg,
.c72-overlay[id^="gpstmtl"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="gpletters"] .c72-svg,
.c72-overlay[id^="gpstmth"] .c72-svg,
.c72-overlay[id^="gpconj"] .c72-svg { max-height: 150px; }
@media (max-width: 400px) {
    .c72-overlay[id^="gphcfone"] .c72-svg,
    .c72-overlay[id^="gplcmone"] .c72-svg { max-height: 170px; }
}

/* ---- Tier 13: ladder ---- */
.c72-overlay[id^="epladder"] .c72-svg,
.c72-overlay[id^="ephcf"] .c72-svg,
.c72-overlay[id^="eplcm"] .c72-svg,
.c72-overlay[id^="epbig"] .c72-svg,
.c72-overlay[id^="eptry"] .c72-svg,
.c72-overlay[id^="epspot"] .c72-svg { max-height: 280px; }
@media (max-width: 400px) {
    .c72-overlay[id^="epladder"] .c72-svg,
    .c72-overlay[id^="ephcf"] .c72-svg,
    .c72-overlay[id^="eplcm"] .c72-svg,
    .c72-overlay[id^="epbig"] .c72-svg,
    .c72-overlay[id^="eptry"] .c72-svg,
    .c72-overlay[id^="epspot"] .c72-svg { max-height: 240px; }
}

/* ---- Tier 14: product ---- */
.c72-overlay[id^="hlbigger"] .c72-svg,
.c72-overlay[id^="hlmult"] .c72-svg,
.c72-overlay[id^="hlpattern"] .c72-svg,
.c72-overlay[id^="hlmissing"] .c72-svg { max-height: 150px; }
.c72-overlay[id^="hlwhy"] .c72-svg { max-height: 230px; }
.c72-overlay[id^="hlthree"] .c72-svg { max-height: 220px; }

/* ---- Tier 15: thinking ---- */
.c72-overlay[id^="mtclaim"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="mtfact"] .c72-svg,
.c72-overlay[id^="mtdetective"] .c72-svg,
.c72-overlay[id^="mtbuilder"] .c72-svg,
.c72-overlay[id^="mttalk"] .c72-svg { max-height: 130px; }

/* ---- Tier 16: word ---- */
.c72-overlay[id^="awcubes"] .c72-svg { max-height: 230px; }
.c72-overlay[id^="awmeet"] .c72-svg,
.c72-overlay[id^="awgates"] .c72-svg,
.c72-overlay[id^="awfire"] .c72-svg,
.c72-overlay[id^="awchase"] .c72-svg,
.c72-overlay[id^="awrem"] .c72-svg,
.c72-overlay[id^="awtwo"] .c72-svg { max-height: 160px; }
.c72-overlay[id^="awlargest"] .c72-svg,
.c72-overlay[id^="awprimes"] .c72-svg,
.c72-overlay[id^="awfactmult"] .c72-svg,
.c72-overlay[id^="awform"] .c72-svg { max-height: 200px; }
.c72-overlay[id^="awskip"] .c72-svg { max-height: 120px; }
@media (max-width: 400px) {
    .c72-overlay[id^="awcubes"] .c72-svg { max-height: 200px; }
}

/* ---- Tier 17: fractions ---- */
.c72-overlay[id^="bfdenom"] .c72-svg,
.c72-overlay[id^="bfsimplify"] .c72-svg,
.c72-overlay[id^="bfadd"] .c72-svg,
.c72-overlay[id^="bftalk"] .c72-svg { max-height: 150px; }

/* ---- Tier 18: puzzle ---- */
.c72-overlay[id^="pzdecode"] .c72-svg,
.c72-overlay[id^="pzpages"] .c72-svg,
.c72-overlay[id^="pzpattern"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="pzgiant"] .c72-svg,
.c72-overlay[id^="pzmatch"] .c72-svg,
.c72-overlay[id^="pzmixed"] .c72-svg { max-height: 130px; }
.c72-overlay[id^="pzspot"] .c72-svg { max-height: 150px; }