/* ================================================================
   class7-math-ch2-common.css
   Shared look for every Class 7 "Arithmetic Expressions" quiz popup (all tiers).
   Loaded after quiz-popup-theme.css / quiz-modal-responsive.css, so these rules are scoped to
   .c72-overlay and only override what is needed:
     - the popup uses the site's full-overlay shell (same as the other Class 7 topics)
     - answer chips: ALWAYS one single line of 4 (never wraps), sized to fill the row
     - prompt, chip, hint, feedback and button sizes match class7-math-common.css (c7-overlay)
     - the picture stage is capped at 560px wide, same as other Class 7 topic modals
     - the picture stage: soft matte card, big pictures, hint bubble
     - svg text classes and the few animations the pictures use
   The site's own quiz css fixes .quiz-number-opt to a small square and sets small fonts, so the size
   rules for chips / prompt / feedback / button repeat the full .quiz-overlay.c72-overlay .quiz-modal chain
   (+ !important). To change a size, change the --c72-fs-* / --c72-chip-h variables at the top.
   Palette (kid psychology): sunny yellow = energy, sky blue = calm, mint = success,
   coral / pink = friendly, lavender = imagination. Deep indigo ink instead of black.
   ================================================================ */
.c72-overlay {
    --c72-ink: #3b3470;
    --c72-ink-soft: #6a62a3;
    --c72-line: #e3dbf8;
    --c72-card: #ffffff;
    --c72-stage-a: #fffaf0;
    --c72-stage-b: #f1ecff;
    --c72-sky: #63bbff;
    --c72-mint: #63d8a3;
    --c72-sun: #ffc93f;
    --c72-coral: #ff8f78;
    --c72-lav: #a98fff;
    /* match class7-math-common.css (c7-overlay) sizing — same popup shell as other Class 7 topics */
    --c72-fs-q: clamp(16px, 4.2vw, 20px);
    --c72-fs-chip: clamp(13px, 4.2vw, 20px);
    --c72-fs-chip-sm: clamp(11px, 3.5vw, 16px);
    --c72-fs-chip-xs: clamp(9.5px, 2.9vw, 13px);
    --c72-chip-h: 52px;
    --c72-fs-word: clamp(10px, 3vw, 13px);
    --c72-fs-hint: 13px;
    --c72-fs-fb: clamp(14px, 3.5vw, 18px);
    --c72-fs-btn: clamp(15px, 3.5vw, 18px);
    -webkit-tap-highlight-color: transparent;
}
.c72-overlay, .c72-overlay * { box-sizing: border-box; }

/* ---------- the popup: same full-overlay shell as other Class 7 topics (c7-overlay) ----------
   The site's own quiz css sizes the prompt, feedback and buttons for its small popups, so the rules below
   repeat the full .quiz-overlay.c72-overlay .quiz-modal chain (and !important) to win over it. */
.c72-overlay { overscroll-behavior: contain; }
.c72-overlay .quiz-modal { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.c72-overlay .card { color: var(--c72-ink); }
.quiz-overlay.c72-overlay .quiz-modal .quiz-question {
    font-size: var(--c72-fs-q) !important;
    line-height: 1.35 !important;
    font-weight: 800;
    color: var(--c72-ink);
    margin: 8px 0 14px;
    text-align: center;
}
.c72-overlay .quiz-question b { color: #7f5cf0; font-weight: 900; }
.c72-overlay .quiz-question .c72-inl { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }
.quiz-overlay.c72-overlay .quiz-modal .bq-feedback { min-height: 1.4em; font-size: var(--c72-fs-fb) !important; font-weight: 800; text-align: center; line-height: 1.4; }
.c72-overlay .bq-feedback.good { color: #1f9d6b; }
.c72-overlay .bq-feedback.wrong { color: #d9604a; }
.quiz-overlay.c72-overlay .quiz-modal .bq-next-btn { min-height: 52px; font-size: var(--c72-fs-btn) !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- answer chips: one single line of 4, always ----------
   The site gives .quiz-number-opt a fixed small square, so every size rule here uses the full
   .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt chain with !important. */
.quiz-overlay.c72-overlay .quiz-modal .quiz-number-options.c72-picker {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: clamp(6px, 1.8vw, 12px) !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 6px auto 4px !important;
    padding: 0 !important;
    grid-template-columns: none !important;
}
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: var(--c72-chip-h) !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 16px;
    border: 2px solid var(--c72-line);
    background: linear-gradient(180deg, #ffffff, #f6f1ff);
    color: var(--c72-ink);
    font-family: inherit;
    font-size: var(--c72-fs-chip) !important;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 3px 0 #d9cff5, 0 6px 12px rgba(86, 67, 160, .1);
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease, border-color .15s ease;
}
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.c72-sm { font-size: var(--c72-fs-chip-sm) !important; }
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.c72-xs { font-size: var(--c72-fs-chip-xs) !important; }
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.has-ico { padding: 6px 2px 6px !important; min-height: 72px !important; line-height: 1.15; overflow: visible; }
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #d9cff5; }
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt:focus-visible { outline: 3px solid #7f5cf0; outline-offset: 2px; }
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt:disabled { cursor: default; }
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.is-correct {
    background: linear-gradient(180deg, #d9f8e9, #a9ebcb); border-color: #4fcf98; color: #14724d;
    box-shadow: 0 3px 0 #7fd9b4; animation: c72-pop .45s ease;
}
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.is-wrong {
    background: linear-gradient(180deg, #ffe9e3, #ffd0c5); border-color: #ff9c86; color: #b4432f;
    box-shadow: 0 3px 0 #f0a897; animation: c72-shake .4s ease;
}
.quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .62; }
.c72-opt-ico { display: block; width: 100%; max-width: 50px; height: clamp(36px, 10vw, 48px); flex: 0 0 auto; }
.c72-opt-ico svg { width: 100%; height: 100%; display: block; }
.c72-opt-word { display: block; font-size: var(--c72-fs-word) !important; font-weight: 800; letter-spacing: .1px; max-width: 100%; overflow: hidden; }
.c72-swatch { display: block; width: clamp(20px, 5vw, 32px); height: clamp(20px, 5vw, 32px); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), 0 2px 4px rgba(60, 50, 120, .2); }
.c72-thumb { display: block; width: 100%; height: auto; }
@keyframes c72-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes c72-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- the picture stage: a soft matte card ---------- */
.c72-overlay [id$="StageWrap"] { margin: 0 0 4px; }
.c72-stage {
    position: relative;
    margin: 10px auto 12px;
    max-width: 560px;
    border-radius: 22px;
    padding: 10px 10px 8px;
    background: radial-gradient(120% 90% at 20% 0%, var(--c72-stage-a) 0%, var(--c72-stage-b) 100%);
    border: 2px solid var(--c72-line);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), 0 10px 22px -14px rgba(86, 67, 160, .45);
    overflow: hidden;
}
.c72-stage::before {              /* soft matte dots, like a paper sheet */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(#e6defb 1.2px, transparent 1.4px); background-size: 18px 18px;
}
.c72-hint {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0 auto 4px; padding: 4px 12px; max-width: 100%;
    font-size: var(--c72-fs-hint) !important; font-weight: 800; color: var(--c72-ink-soft);
    background: rgba(255, 255, 255, .85); border-radius: 999px; width: fit-content;
}
.c72-hint svg { width: 1.3em; height: 1.3em; flex: none; }
.c72-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.c72-replay {
    position: relative; z-index: 2; display: block; margin: 4px auto 2px; padding: 7px 16px; border: 0; border-radius: 999px;
    font-family: inherit; font-weight: 800; font-size: 13px; color: #fff; cursor: pointer; touch-action: manipulation;
    background: linear-gradient(180deg, #8f78f7, #7556e8); box-shadow: 0 3px 0 #5b3fc9;
}
.c72-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 #5b3fc9; }

/* ---------- svg text ---------- */
.c72-svg text, .c72-t {
    font-family: Nunito, Poppins, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 900; fill: #3b3470;
    text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.c72-svg .c72-start { text-anchor: start; }
.c72-svg .c72-end { text-anchor: end; }
.c72-t-xs { font-size: 13px; } .c72-t-s { font-size: 17px; } .c72-t-m { font-size: 22px; }
.c72-t-l { font-size: 30px; } .c72-t-xl { font-size: 42px; } .c72-t-huge { font-size: 64px; }
.c72-svg text.c72-white { fill: #fff; }
.c72-svg text.c72-soft { fill: #7a72b3; }
.c72-svg text.c72-op { fill: #7f5cf0; }

/* cards, bins, glow */
.c72-svg .c72-card-r { stroke: #d7ccf6; stroke-width: 2.4; filter: drop-shadow(0 3px 2px rgba(86, 67, 160, .22)); }
.c72-svg .c72-ghost { fill: rgba(255, 255, 255, .9); stroke: #b8a8f0; stroke-width: 2.6; stroke-dasharray: 7 6; }
.c72-svg .c72-glow { fill: none; stroke: #ffc93f; stroke-width: 4.5; animation: c72-glow 1.4s ease-in-out infinite; }
.c72-svg .c72-bin { stroke-width: 3; }
.c72-svg .c72-badge { fill: #7f5cf0; }
.c72-svg .c72-pulse { animation: c72-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes c72-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes c72-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* hidden until the child answers (the picture confirms the answer) */
.c72-stage .c72-after { opacity: 0; transition: opacity .45s ease .15s; }
.c72-stage.c72-revealed .c72-after { opacity: 1; }
.c72-stage .c72-before { opacity: 1; transition: opacity .3s ease; }
.c72-stage.c72-revealed .c72-before { opacity: 0; }

/* the value machine */
.c72-svg .c72-drop { animation: c72-drop 1.1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes c72-drop { from { transform: translateY(-26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.c72-svg .c72-light { animation: c72-blink 1.2s ease-in-out infinite; }
.c72-svg .c72-l2 { animation-delay: .3s; } .c72-svg .c72-l3 { animation-delay: .6s; }
@keyframes c72-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.c72-svg .c72-out-pop { transform-box: fill-box; transform-origin: center; }
.c72-stage.c72-revealed .c72-out-pop { animation: c72-pop .6s ease; }

/* the balance scale */
.c72-svg .c72-beam, .c72-svg .c72-pan {
    transform-box: view-box;
    transition: transform .95s cubic-bezier(.34, 1.45, .64, 1);
}
.c72-svg .c72-beam { transform-origin: 200px 70px; }

/* phones / Android browsers: bottom sheet + compact chips (same feel as c7-overlay + lkg-ready) */
@media (max-width: 768px) {
    .quiz-overlay.c72-overlay .quiz-modal .quiz-question {
        font-size: clamp(15px, 4vw, 18px) !important;
        margin: 4px 0 10px !important;
    }
    .quiz-overlay.c72-overlay .quiz-modal .quiz-number-options.c72-picker {
        gap: 6px !important;
        max-width: 100% !important;
        margin: 8px auto 4px !important;
    }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt {
        min-height: 48px !important;
        padding: 5px 1px !important;
        font-size: clamp(11px, 3.2vw, 14px) !important;
        border-radius: 14px;
    }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.c72-sm { font-size: clamp(10px, 2.8vw, 12px) !important; }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.c72-xs { font-size: clamp(9px, 2.5vw, 11px) !important; letter-spacing: -.2px; }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.has-ico { min-height: 64px !important; }
    .c72-opt-ico { max-width: 38px; height: clamp(28px, 8vw, 36px); }
    .c72-swatch { width: clamp(18px, 4.5vw, 26px); height: clamp(18px, 4.5vw, 26px); }
}

@media (max-width: 600px) {
    .c72-overlay { align-items: flex-end !important; padding: 0 !important; }
    .c72-overlay .quiz-modal {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        max-height: 96vh; max-height: 96dvh; overflow-y: auto;
        border-radius: 26px 26px 0 0 !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .c72-overlay .quiz-close { width: 44px; height: 44px; }
    .c72-stage { margin-left: -4px; margin-right: -4px; padding: 8px 6px 6px; border-radius: 18px; }
}

@media (max-width: 400px) {
    .quiz-overlay.c72-overlay .quiz-modal .quiz-number-options.c72-picker { gap: 4px !important; }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt {
        min-height: 44px !important;
        font-size: 10.5px !important;
        padding: 4px 1px !important;
        border-radius: 12px;
    }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.c72-sm { font-size: 9.5px !important; }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.c72-xs { font-size: 9px !important; }
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt.has-ico { min-height: 58px !important; }
    .c72-opt-ico { max-width: 32px; height: 28px; }
}

/* touch devices: tap-friendly but not oversized */
@media (pointer: coarse) {
    .quiz-overlay.c72-overlay .quiz-modal .c72-picker > .c72-opt {
        min-height: 48px !important;
        -webkit-tap-highlight-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c72-overlay *, .c72-svg * { animation: none !important; transition: none !important; }
}