/* ================================================================
   class1-math-quizzes.css
   ----------------------------------------------------------------
   Styling for the interactive skill-quiz popups on the Class 1 Math
   page (numeric-keypad quizzes, Counting-by-Groups/Multiplication/
   Missing-Factor picture boxes, and Division Concepts S.1-S.8),
   extracted out of class1-math.html's inline <style> blocks to keep
   that file smaller and easier to navigate. Loaded as a plain
   stylesheet link, so load order relative to class1-math.css only
   matters where a rule here intentionally overrides something there
   (kept as-is, in original order, from the two inline blocks this
   was extracted from).

   Fraction Concepts (T.1-T.5) styling lives in its own fraction.css
   file, loaded right after this one - see that file's header for
   details.
   ================================================================ */

    /* Guarantee keypad-driven quizzes can always scroll on short mobile
       viewports, no matter what the shared CSS does elsewhere. */
    #tens-ones-quiz-overlay .quiz-modal,
    #blocks-quiz-overlay .quiz-modal{
        overflow-y:auto;
        max-height:100dvh;
        -webkit-overflow-scrolling:touch;
    }

    /* Compact number badge — replaces the tall cn-question-wrap spacing
       used by the bigger diagram-style quizzes, since we only need to
       show one small number here. */
    .to-number-wrap{display:flex; justify-content:center; align-items:center; margin:6px 0 10px;}
    .to-number-badge{
        display:inline-flex; align-items:center; justify-content:center;
        min-width:70px; height:70px; padding:0 14px;
        border-radius:16px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12);
        font-family:'Nunito',sans-serif; font-weight:900; font-size:2.1rem; color:var(--secondary,#1b3a57);
    }
    #toQuestionText{margin:4px 0 10px;}

    .to-input-row{display:flex; gap:10px; justify-content:center; align-items:center; margin:8px 0;}
    .to-input-group{display:flex; flex-direction:column; align-items:center; gap:4px;}
    .to-input-label{font-family:'Nunito',sans-serif; font-weight:800; font-size:.78rem; color:var(--muted,#6b7280); text-transform:uppercase; letter-spacing:.04em;}
    .to-answer-input{width:64px; height:56px; text-align:center; cursor:pointer; caret-color:transparent; font-size:1.5rem; font-weight:800; padding:0;}
    .to-answer-input.to-active{outline:3px solid var(--primary,#6c5ce7); outline-offset:2px; animation:toPulse 1s ease-in-out infinite;}
    .to-answer-input.to-correct{border-color:#2ecc71 !important; background:#eafff2;}
    .to-answer-input.to-wrong{border-color:#ff6b6b !important; background:#fff0f0;}

    /* Count-with-Blocks (A.1/A.2/A.3) answer input gets the same
       tap-to-open-keypad pulse treatment as the A.4 tens/ones boxes. */
    #blocksAnswerInput{cursor:pointer;}
    .bq-answer-input.bq-input-active{outline:3px solid var(--primary,#6c5ce7); outline-offset:2px; animation:toPulse 1s ease-in-out infinite;}
    .bq-answer-input.correct-input{border-color:#2ecc71 !important; background:#eafff2;}
    .bq-answer-input.wrong-input{border-color:#ff6b6b !important; background:#fff0f0;}

    /* + sign gets its own label-height spacer so it lines up with the
       vertical center of the boxes (not the labels above them), and is
       now sized to match the boxes instead of looking tiny next to them. */
    .to-plus-wrap{display:flex; flex-direction:column; align-items:center; gap:4px;}
    .to-plus-spacer{height:1em; font-size:.78rem; visibility:hidden;}
    .to-plus-sign{font-family:'Nunito',sans-serif; font-weight:900; font-size:2.6rem; line-height:56px; height:56px; color:var(--primary,#6c5ce7);}
    @keyframes toPulse{0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.35);} 50%{box-shadow:0 0 0 8px rgba(108,92,231,0);}}

    /* Mixed 100s/10s/1s (A.8) has 3 boxes + 2 plus-signs in its input
       row — wrap and tighten spacing on narrow phones so it never
       overflows the modal (the 2-box A.4 row above never needs this). */
    #mxQuizCard .to-input-row{flex-wrap:wrap; gap:6px;}
    @media (max-width:420px){
        #mxQuizCard .to-answer-input{width:48px; height:46px; font-size:1.2rem;}
        #mxQuizCard .to-plus-sign{font-size:1.7rem; height:46px; line-height:46px;}
    }

    #toCheckBtn{display:block; width:auto; min-width:130px; margin:12px auto 0; padding:8px 28px;}
    #mxCheckBtn{display:block; width:auto; min-width:130px; margin:12px auto 0; padding:8px 28px;}

    /* ---- Shared on-screen keypad (A.1 – A.4) ----
       One wide 6-column layout so all 12 keys (0-9 plus two controls)
       fit in just 2 rows with no inner scrolling on any phone screen.
       .to-keypad/.to-key power the A.4 (Count 10s and 1s) keypad;
       .bq-keypad/.bq-key power the A.1/A.2/A.3 (Count with Blocks)
       keypad — grouped together so both stay in sync and both get the
       same "no scroll, every key visible" treatment. */
    .to-keypad, .bq-keypad{
        display:none; width:100%; max-width:460px; margin:12px auto 0; padding:10px 14px;
        border-radius:18px; box-sizing:border-box;
        background:linear-gradient(160deg,#fff6e5,#fff0fa); border:3px dashed var(--sun,#ffb100);
        box-shadow:0 8px 18px rgba(0,0,0,.14);
    }
    .to-keypad.open, .bq-keypad.open{display:block; animation:toKeypadPop .2s ease-out;}
    @keyframes toKeypadPop{from{opacity:0; transform:scale(.9) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);}}
    .to-keypad-title, .bq-keypad-title{text-align:center; font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem;
        color:#7c5cff; margin:0 0 8px;}
    .to-keypad-grid, .bq-keypad-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;}
    .to-key, .bq-key{font-family:'Poppins',sans-serif; font-weight:800; font-size:1.15rem; padding:12px 0; border:none;
        border-radius:12px; cursor:pointer; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.18), 0 5px 8px rgba(0,0,0,.12);
        transition:transform .08s ease;}
    .to-key:nth-child(1), .bq-key:nth-child(1){background:#ff6b6b;}
    .to-key:nth-child(2), .bq-key:nth-child(2){background:#ffa94d;}
    .to-key:nth-child(3), .bq-key:nth-child(3){background:#ffd43b; color:#5c4a00;}
    .to-key:nth-child(4), .bq-key:nth-child(4){background:#69db7c; color:#0a3b1a;}
    .to-key:nth-child(5), .bq-key:nth-child(5){background:#38d9a9;}
    .to-key:nth-child(6), .bq-key:nth-child(6){background:#4dabf7;}
    .to-key:nth-child(7), .bq-key:nth-child(7){background:#748ffc;}
    .to-key:nth-child(8), .bq-key:nth-child(8){background:#da77f2;}
    .to-key:nth-child(9), .bq-key:nth-child(9){background:#f783ac;}
    .to-key:nth-child(10), .bq-key:nth-child(10){background:#ff8787;}
    .to-key:active, .bq-key:active{transform:scale(0.88) translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.12);}
    .to-key-clear, .bq-key-back{background:#adb5bd !important; color:#212529 !important; font-size:.95rem;}
    .to-key-done, .bq-key-done{background:linear-gradient(135deg,#6c5ce7,#a29bfe) !important; color:#fff !important; font-size:.95rem;}

    /* Narrow phones: shrink everything a notch further, but keep all
       6 columns on screen — the grid never wraps to extra rows. */
    @media (max-width:420px){
        .to-answer-input{width:56px; height:50px; font-size:1.3rem;}
        .to-plus-sign{font-size:2.1rem; height:50px; line-height:50px;}
        .to-number-badge{min-width:60px; height:60px; font-size:1.8rem;}
        .to-keypad, .bq-keypad{max-width:100%; padding:8px 10px;}
        .to-keypad-grid, .bq-keypad-grid{gap:6px;}
        .to-key, .bq-key{padding:9px 0; font-size:.95rem;}
    }
    /* Short viewports (phone in landscape, or a small browser chrome
       eating into the visible height): tighten vertical rhythm so the
       keypad and Check/Next controls are never pushed below the fold. */
    @media (max-height:680px){
        .to-number-wrap{margin:2px 0 4px;}
        .to-input-row{margin:4px 0;}
        .to-keypad, .bq-keypad{margin-top:6px; padding:8px 10px;}
        .to-keypad-grid, .bq-keypad-grid{gap:6px;}
        .to-key, .bq-key{padding:7px 0;}
    }

    /* ---- Multiplication Concept (M.1–M.4) group picture layout ----
       #multBox reuses the shared .quiz-enough-box/.quiz-enough-group/
       .quiz-enough-icons classes from Counting by Groups for visual
       consistency, but that shared CSS is hard-locked to a fixed 2-column
       grid — with 3 groups the 3rd one gets squeezed into a tiny leftover
       cell and its icons get clipped, while the modal's side padding goes
       unused. These overrides are scoped to #multBox only (G.1–G.5 is
       untouched) and use a responsive auto-fit grid instead, so 2–4
       groups always get an equal, full-width share of the space and
       every icon stays visible — including on narrow Android phones. */
    #multBox.quiz-enough-box{
        display:grid !important;
        grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) !important;
        grid-auto-rows:auto !important;
        align-items:stretch !important;
        gap:14px !important;
        width:100% !important;
        max-width:640px !important;
        margin:0 auto !important;
        box-sizing:border-box;
    }
    #multBox .quiz-enough-group{
        width:auto !important;
        max-width:none !important;
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
        box-sizing:border-box;
        display:flex !important;
        flex-direction:column;
        align-items:center;
    }
    #multBox .quiz-enough-icons{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:6px !important;
        width:100%;
        height:auto !important;
        overflow:visible !important;
    }
    #multBox .quiz-enough-icons svg{
        width:var(--cbg-icon-size, 60px) !important;
        height:var(--cbg-icon-size, 60px) !important;
        flex:0 0 auto;
    }
    @media (max-width:480px){
        #multBox.quiz-enough-box{
            grid-template-columns:repeat(2, 1fr) !important;
            gap:10px !important;
        }
    }
    @media (max-width:340px){
        #multBox.quiz-enough-box{
            grid-template-columns:1fr !important;
        }
    }

    /* ---- Missing Factor (P.1–P.4) sample-group picture layout ----
       #missingBox reuses the same shared .quiz-enough-box/-group/-icons
       classes and only ever renders a single group, but gets the same
       #multBox overrides (auto-fit grid, no clipping, no fixed 2-column
       lock) for visual consistency and to stay Android-phone friendly. */
    #missingBox.quiz-enough-box{
        display:grid !important;
        grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) !important;
        grid-auto-rows:auto !important;
        align-items:stretch !important;
        gap:14px !important;
        width:100% !important;
        max-width:640px !important;
        margin:0 auto !important;
        box-sizing:border-box;
    }
    #missingBox .quiz-enough-group{
        width:auto !important;
        max-width:none !important;
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
        box-sizing:border-box;
        display:flex !important;
        flex-direction:column;
        align-items:center;
    }
    #missingBox .quiz-enough-icons{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:6px !important;
        width:100%;
        height:auto !important;
        overflow:visible !important;
    }
    #missingBox .quiz-enough-icons svg{
        width:var(--cbg-icon-size, 60px) !important;
        height:var(--cbg-icon-size, 60px) !important;
        flex:0 0 auto;
    }
    @media (max-width:480px){
        #missingBox.quiz-enough-box{
            grid-template-columns:repeat(2, 1fr) !important;
            gap:10px !important;
        }
    }
    @media (max-width:340px){
        #missingBox.quiz-enough-box{
            grid-template-columns:1fr !important;
        }
    }

    /* ---- Real-World Multiplication (R.1) single-item picture layout ----
       #realBox reuses the same shared .quiz-enough-box/-group/-icons
       classes as #multBox/#missingBox above, but only ever renders one
       big item (bicycle, spider, hand, etc.) plus its fact label, so the
       grid collapses to a single centered column instead of auto-fitting
       multiple cells. */
    #realBox.quiz-enough-box{
        display:flex !important;
        justify-content:center !important;
        align-items:stretch !important;
        width:100% !important;
        max-width:640px !important;
        margin:0 auto !important;
        box-sizing:border-box;
    }
    #realBox .quiz-enough-group{
        width:auto !important;
        max-width:none !important;
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
        box-sizing:border-box;
        display:flex !important;
        flex-direction:column;
        align-items:center;
    }
    #realBox .quiz-enough-icons{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:6px !important;
        width:100%;
        height:auto !important;
        overflow:visible !important;
    }
    #realBox .quiz-enough-icons svg{
        width:var(--cbg-icon-size, 120px) !important;
        height:var(--cbg-icon-size, 120px) !important;
        flex:0 0 auto;
    }
    @media (max-width:480px){
        #realBox .quiz-enough-icons svg{
            width:var(--cbg-icon-size, 96px) !important;
            height:var(--cbg-icon-size, 96px) !important;
        }
    }

    /* ---- Reverse-Build: Fact to Picture (R.2) tap-to-build board ----
       Unlike every other picture on this page, #buildBox is not a fixed
       set of pre-drawn icons — it's a live, editable set of "group"
       tiles the child assembles themselves, plus a trailing dashed
       "Add Group" tile. Fully self-contained (doesn't lean on the
       shared .quiz-enough-* classes, since those assume a fixed,
       non-interactive picture). */
    .quiz-build-fact{
        display:block;
        width:fit-content;
        margin:6px auto 2px;
        font-size:clamp(2.1rem, 9vw, 3rem);
        font-weight:800;
        letter-spacing:1px;
        text-align:center;
        color:#1c2a4a;
        background:rgba(255,255,255,0.55);
        border:3px dashed rgba(28,42,74,0.45);
        border-radius:20px;
        padding:8px 26px;
    }
    .quiz-build-icon-label{
        text-align:center;
        font-weight:700;
        font-size:1rem;
        color:#1c2a4a;
        margin:2px 0 14px;
    }
    .quiz-build-box{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        justify-content:center;
        align-items:flex-start;
        width:100%;
        max-width:640px;
        margin:0 auto;
        box-sizing:border-box;
        /* Groups can pile up to BUILD_GROUP_CAP (6) x BUILD_SIZE_CAP (8)
           icons — bound the board's own height and let IT scroll, rather
           than letting the card grow tall enough to push "Check My
           Picture" off screen below the fold. */
        max-height:44vh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding:4px 4px 8px;
    }
    .quiz-build-group{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
        width:140px;      /* fixed, not min-width — a full group's icons wrap
                              INSIDE the tile instead of stretching it wide,
                              so several tiles fit side-by-side per row */
        flex:0 0 140px;
        background:rgba(255,255,255,0.5);
        border:2px solid rgba(28,42,74,0.3);
        border-radius:16px;
        padding:10px 10px;
        box-sizing:border-box;
    }
    .quiz-build-group-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        gap:6px;
    }
    .quiz-build-group-label{
        font-weight:700;
        font-size:0.85rem;
        color:#1c2a4a;
    }
    .quiz-build-remove-group{
        background:none;
        border:none;
        color:#c0392b;
        opacity:0.85;
        font-size:1.15rem;
        line-height:1;
        padding:2px 4px;
        cursor:pointer;
    }
    .quiz-build-remove-group:hover{ opacity:1; }
    .quiz-build-icons{
        display:flex;
        flex-wrap:wrap;
        gap:4px;
        justify-content:center;
        align-items:center;
        width:100%;
        min-height:var(--cbg-icon-size, 56px);
    }
    .quiz-build-icons svg{
        width:var(--cbg-icon-size, 56px);
        height:var(--cbg-icon-size, 56px);
        flex:0 0 auto;
    }
    .quiz-build-controls{
        display:flex;
        gap:6px;
        margin-top:2px;
    }
    .quiz-build-tap{
        background:var(--secondary);
        color:#fff;
        border:none;
        border-radius:10px;
        padding:6px 10px;
        font-weight:700;
        font-size:0.8rem;
        cursor:pointer;
        white-space:nowrap;
    }
    .quiz-build-tap:disabled{ opacity:0.4; cursor:default; }
    .quiz-build-undo{
        background:rgba(255,255,255,0.65);
        color:#1c2a4a;
        border:1px solid rgba(28,42,74,0.3);
        border-radius:10px;
        width:32px;
        height:32px;
        font-size:1.1rem;
        line-height:1;
        cursor:pointer;
    }
    .quiz-build-undo:disabled{ opacity:0.35; cursor:default; }
    .quiz-build-add-group{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        width:140px;
        flex:0 0 140px;
        min-height:96px;
        background:transparent;
        border:2px dashed rgba(28,42,74,0.45);
        border-radius:16px;
        color:#1c2a4a;
        font-weight:700;
        font-size:0.82rem;
        cursor:pointer;
        box-sizing:border-box;
    }
    .quiz-build-add-group-plus{
        font-size:1.8rem;
        line-height:1;
    }
    .quiz-build-summary{
        text-align:center;
        font-size:0.85rem;
        color:#1c2a4a;
        opacity:0.85;
        margin:12px 0 4px;
    }
    @media (max-width:480px){
        .quiz-build-fact{
            font-size:clamp(1.7rem, 10vw, 2.3rem);
            padding:7px 18px;
        }
        .quiz-build-icon-label{ font-size:0.9rem; }
        .quiz-build-box{ max-height:40vh; }
        .quiz-build-group{ width:108px; flex-basis:108px; padding:8px 8px; }
        .quiz-build-add-group{ width:108px; flex-basis:108px; min-height:84px; }
        .quiz-build-tap{ padding:5px 8px; font-size:0.72rem; }
        .quiz-build-undo{ width:28px; height:28px; font-size:1rem; }
    }
    @media (max-width:340px){
        .quiz-build-box{ gap:10px; max-height:38vh; }
        .quiz-build-group{ width:92px; flex-basis:92px; }
        .quiz-build-add-group{ width:92px; flex-basis:92px; min-height:78px; }
        .quiz-build-controls{ flex-direction:column; gap:5px; }
    }

    /* ---- Spot the Mistake (R.3) picture + mistake-card layout ----
       #spotBox shows a static "2-4 equal groups" picture, several
       tiles side-by-side. It reuses the exact .quiz-build-group /
       .quiz-build-group-head / .quiz-build-group-label /
       .quiz-build-icons tile markup and .share-groups-wrap flex
       container that Division's S.2 "Sharing vs. Grouping" already
       renders correctly, instead of the pile-only .quiz-enough-*
       classes: those are meant for a single shrinking pile, not
       several tiles side-by-side, and let icons spill outside a
       tile's border and overlap a neighboring tile/label once a
       picture has more than one group (as seen on narrow Android
       screens). Each .quiz-build-group tile has its own fixed width,
       border, and background and wraps its icons INSIDE itself, so
       nothing can ever overlap no matter how many groups a question
       has. The wrap has no fixed max-height and grows naturally — the
       surrounding .quiz-modal scrolls (see the overflow rules above)
       if the picture ever runs tall, so every group stays reachable
       by scrolling down instead of ever being clipped.
       The worked "solution" line below it reuses Build the Picture's
       dashed fact-card look (.quiz-build-fact) but as its own
       .quiz-mistake-fact class, tinted red to read as "this is wrong"
       and — unlike R.2's always-short "3 x 4" facts — given its own
       max-width/word-wrap safety net, since a repeated-addition
       mistake like "5 + 5 + 5 + 5 + 5" is longer and must never
       overflow narrow Android screens. */
    #spotBox.share-groups-wrap{
        overflow:visible;
    }

    /* ---- Remainder Recognition (S.3) / Spot the Mistake (S.4) picture
       layout — both show a static set of pre-built tiles (full groups
       or friend shares), same as R.3's #spotBox above: the shared
       .quiz-build-group / .quiz-build-group-head / .quiz-build-group-
       label / .quiz-build-icons tile markup and .share-groups-wrap
       flex container (never the pile-only .quiz-enough-* classes,
       which are meant for a single shrinking pile and let icons spill
       outside a tile's border once several tiles sit side by side).
       Every tile has its own fixed width, own border/background, and
       wraps its icons INSIDE itself, so nothing can spill outside a
       tile's border or overlap a neighboring tile no matter how many
       icons a group holds. The wrap has no fixed max-height and grows
       naturally — the surrounding .quiz-modal (see the overflow rules
       above) is what scrolls if the picture ever runs tall, so every
       group is guaranteed reachable by scrolling down instead of ever
       being clipped or overlapped. */
    #remBox.share-groups-wrap,
    #mistakeBox.share-groups-wrap,
    #divSplitBox.share-groups-wrap{
        overflow:visible;
    }

    /* S.3's "Leftover" tile is visually set apart from the full-group
       tiles beside it — amber/dashed instead of the default card look —
       so the child's eye immediately separates "grouped" from "not
       enough left to group," which is the whole conceptual point of a
       remainder. */
    #remBox .quiz-build-group.leftover-tile,
    #divSplitBox .quiz-build-group.leftover-tile{
        border:3px dashed #d99a1f !important;
        background:rgba(255, 205, 82, 0.18) !important;
    }
    #remBox .quiz-build-group.leftover-tile .quiz-build-group-label,
    #divSplitBox .quiz-build-group.leftover-tile .quiz-build-group-label{
        color:#a5680f;
    }

    .quiz-mistake-card{
        text-align:center;
        margin:8px 0 4px;
    }
    .quiz-mistake-label{
        font-weight:700;
        font-size:0.95rem;
        color:#1c2a4a;
        opacity:0.85;
        margin:0 0 6px;
    }
    .quiz-mistake-fact{
        display:inline-block;
        max-width:92%;
        margin:0 auto;
        font-size:clamp(1.5rem, 7vw, 2.4rem);
        font-weight:800;
        letter-spacing:0.5px;
        text-align:center;
        color:#c0392b;
        background:rgba(255,240,240,0.7);
        border:3px dashed rgba(192,57,43,0.5);
        border-radius:20px;
        padding:8px 20px;
        word-break:break-word;
        white-space:normal;
        box-sizing:border-box;
    }
    @media (max-width:480px){
        .quiz-mistake-fact{
            font-size:clamp(1.2rem, 7.5vw, 1.8rem);
            padding:7px 14px;
        }
    }

    /* ---- Fact Family Check (S.7) "given fact" display ----
       Same dashed-card look and sizing as .quiz-mistake-fact above
       (so it never overflows narrow Android screens either), but
       tinted with the app's primary/blue color instead of red — this
       fact is neutral information being GIVEN to the child, not a
       flagged mistake to spot. */
    .quiz-given-fact{
        display:inline-block;
        max-width:92%;
        margin:0 auto;
        font-size:clamp(1.5rem, 7vw, 2.4rem);
        font-weight:800;
        letter-spacing:0.5px;
        text-align:center;
        color:var(--primary, #2f6fed);
        background:rgba(47,111,237,0.08);
        border:3px dashed rgba(47,111,237,0.45);
        border-radius:20px;
        padding:8px 20px;
        word-break:break-word;
        white-space:normal;
        box-sizing:border-box;
    }
    @media (max-width:480px){
        .quiz-given-fact{
            font-size:clamp(1.2rem, 7.5vw, 1.8rem);
            padding:7px 14px;
        }
    }

    /* ---- True/False Fact Pairs (R.5) picture layout ----
       #tfBox shows the same "2-4 equal groups" picture as Multiplication
       Concept, so it reuses the exact #multBox overrides (responsive
       auto-fit grid, no clipping, Android-safe icon sizing) scoped to
       its own id. */
    #tfBox.quiz-enough-box{
        display:grid !important;
        grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) !important;
        grid-auto-rows:auto !important;
        align-items:stretch !important;
        gap:14px !important;
        width:100% !important;
        max-width:640px !important;
        margin:0 auto !important;
        box-sizing:border-box;
    }
    #tfBox .quiz-enough-group{
        width:auto !important;
        max-width:none !important;
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
        box-sizing:border-box;
        display:flex !important;
        flex-direction:column;
        align-items:center;
    }
    #tfBox .quiz-enough-icons{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:6px !important;
        width:100%;
        height:auto !important;
        overflow:visible !important;
    }
    #tfBox .quiz-enough-icons svg{
        width:var(--cbg-icon-size, 60px) !important;
        height:var(--cbg-icon-size, 60px) !important;
        flex:0 0 auto;
    }
    @media (max-width:480px){
        #tfBox.quiz-enough-box{
            grid-template-columns:repeat(2, 1fr) !important;
            gap:10px !important;
        }
    }
    @media (max-width:340px){
        #tfBox.quiz-enough-box{
            grid-template-columns:1fr !important;
        }
    }
    #tfCheckBtn{display:block; width:auto; min-width:160px; margin:14px auto 0; padding:9px 30px;}

    /* ---- Equal vs. Unequal Sorting (R.4) picture-card grid ----
       Unlike every other skill's single #...Box picture, R.4 shows 4-5
       *separate* small pictures side by side and the child taps every
       one that shows equal-sized groups (i.e. every picture that CAN be
       written as a multiplication fact). Each card is its own mini
       group row of small icons, laid out in a responsive auto-fit grid
       (same Android-safe pattern as #multBox/#spotBox above) with its
       own is-selected/is-correct/is-wrong states that deliberately
       mirror .quiz-multi-opt so right/wrong feedback reads the same
       way it does everywhere else on this page. */
    .quiz-sort-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
        gap:12px;
        width:100%;
        max-width:640px;
        margin:10px auto 0;
        box-sizing:border-box;
    }
    .quiz-sort-card{
        display:flex; flex-direction:column; align-items:center; gap:8px;
        padding:12px 10px 14px; border-radius:16px; border:2px solid var(--line,#e2e5ec);
        background:#fff; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.06);
        transition:transform .08s ease, border-color .15s ease, background .15s ease;
        box-sizing:border-box;
        font-family:'Nunito',sans-serif;
    }
    .quiz-sort-card:active{transform:scale(0.97);}
    .quiz-sort-groups{
        display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:6px; width:100%;
    }
    .quiz-sort-group{
        display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:3px;
        padding:4px; border-radius:10px; background:rgba(108,92,231,0.06);
    }
    .quiz-sort-group svg{ width:26px !important; height:26px !important; flex:0 0 auto; }
    .quiz-sort-check{
        flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:8px; border:2px solid var(--line,#c9ced9);
        background:#fff; color:transparent; transition:all .15s ease;
    }
    .quiz-sort-card.is-selected{border-color:var(--primary,#6c5ce7); background:#f5f3ff;}
    .quiz-sort-card.is-selected .quiz-sort-check{
        background:var(--primary,#6c5ce7); border-color:var(--primary,#6c5ce7); color:#fff;
    }
    .quiz-sort-card.is-correct{border-color:#2ecc71 !important; background:#eafff2 !important;}
    .quiz-sort-card.is-correct .quiz-sort-check{background:#2ecc71 !important; border-color:#2ecc71 !important; color:#fff !important;}
    .quiz-sort-card.is-wrong{border-color:#ff6b6b !important; background:#fff0f0 !important;}
    .quiz-sort-card.is-wrong .quiz-sort-check{background:#ff6b6b !important; border-color:#ff6b6b !important; color:#fff !important;}
    .quiz-sort-card:disabled{cursor:default;}
    @media (max-width:480px){
        .quiz-sort-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:10px; }
        .quiz-sort-group svg{ width:22px !important; height:22px !important; }
    }
    @media (max-width:340px){
        .quiz-sort-grid{ grid-template-columns:1fr !important; }
    }
    #eqCheckBtn{display:block; width:auto; min-width:160px; margin:14px auto 0; padding:9px 30px;}

    /* ---- "Choose all that are correct" checklist (M.1–M.4 Multiplication
       Concept). A vertical list of full-width toggle buttons, each with a
       checkbox-style indicator, instead of the round quiz-number-opt used
       for single-answer questions elsewhere on this page. */
    .quiz-multi-options{display:flex; flex-direction:column; gap:10px; width:100%; max-width:480px; margin:14px auto 0;}
    .quiz-multi-opt{
        display:flex; align-items:center; gap:12px; width:100%; text-align:left;
        padding:12px 16px; border-radius:14px; border:2px solid var(--line,#e2e5ec);
        background:#fff; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:700;
        font-size:1rem; color:var(--secondary,#1b3a57); box-shadow:0 3px 0 rgba(0,0,0,.06);
        transition:transform .08s ease, border-color .15s ease, background .15s ease;
    }
    .quiz-multi-opt:active{transform:scale(0.98);}
    .quiz-multi-check{
        flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:8px; border:2px solid var(--line,#c9ced9);
        background:#fff; color:transparent; transition:all .15s ease;
    }
    .quiz-multi-opt.is-selected{border-color:var(--primary,#6c5ce7); background:#f5f3ff;}
    .quiz-multi-opt.is-selected .quiz-multi-check{
        background:var(--primary,#6c5ce7); border-color:var(--primary,#6c5ce7); color:#fff;
    }
    .quiz-multi-opt.is-correct{border-color:#2ecc71 !important; background:#eafff2 !important;}
    .quiz-multi-opt.is-correct .quiz-multi-check{background:#2ecc71 !important; border-color:#2ecc71 !important; color:#fff !important;}
    .quiz-multi-opt.is-wrong{border-color:#ff6b6b !important; background:#fff0f0 !important;}
    .quiz-multi-opt.is-wrong .quiz-multi-check{background:#ff6b6b !important; border-color:#ff6b6b !important; color:#fff !important;}
    .quiz-multi-opt:disabled{cursor:default;}
    .quiz-multi-text{flex:1 1 auto; line-height:1.35;}

    #multCheckBtn{display:block; width:auto; min-width:160px; margin:14px auto 0; padding:9px 30px;}

    /* ---- Multiplication Match memory game (N.1–N.4) ---- */
    .match-status-bar{
        display:flex; justify-content:center; gap:22px; margin:6px 0 16px;
        font-family:'Nunito',sans-serif; font-weight:800; color:var(--secondary,#1b3a57); font-size:.95rem;
    }
    .match-stat-value{color:var(--primary,#6c5ce7);}

    .match-grid{
        display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
        width:100%; max-width:520px; margin:0 auto;
    }
    .match-card{
        position:relative; aspect-ratio:1/1; background:transparent; border:none; padding:0;
        cursor:pointer; perspective:700px; -webkit-tap-highlight-color:transparent;
    }
    .match-card-inner{
        position:relative; width:100%; height:100%;
        transition:transform .45s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
    }
    .match-card.flipped .match-card-inner{transform:rotateY(180deg);}
    .match-card-face{
        position:absolute; inset:0; backface-visibility:hidden; border-radius:14px;
        display:flex; align-items:center; justify-content:center;
        box-shadow:0 3px 0 rgba(0,0,0,.08); box-sizing:border-box;
    }
    .match-card-front{
        background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:#fff; font-size:1.3rem;
    }
    .match-card-back{
        background:#fff; transform:rotateY(180deg); border:2px solid var(--line,#e2e5ec); padding:5px;
        overflow:hidden;
    }
    .match-card.is-matched .match-card-back{border-color:#2ecc71; background:#eafff2;}
    .match-card.is-matched{cursor:default;}

    .match-array{
        display:grid; gap:2px; width:100%; height:100%;
        align-content:center; justify-content:center;
    }
    .match-dot{width:8px; height:8px; border-radius:50%; background:var(--primary,#6c5ce7);}

    .match-fact-text{
        font-family:'Nunito',sans-serif; font-weight:800; color:var(--secondary,#1b3a57);
        font-size:1.05rem; text-align:center;
    }

    @media (max-width:480px){
        .match-grid{grid-template-columns:repeat(3, 1fr); gap:8px;}
        .match-dot{width:6px; height:6px;}
        .match-fact-text{font-size:.9rem;}
        .match-status-bar{gap:14px; font-size:.85rem;}
    }
    @media (max-width:340px){
        .match-grid{grid-template-columns:repeat(2, 1fr);}
    }

    /* ---- Multiplication Array Model (O.1–O.4) rows × columns layout ----
       #arrayBox draws a true rectangular array: rows stacked top to
       bottom, each row a horizontal strip of `columns` icons — the
       "rows × columns" grid model, distinct from the separate labeled
       "Group 1 / Group 2" clusters used in Multiplication Concept
       (M.1–M.4). Sizes shrink at narrower widths so 4–5 icons per row
       never overflow or clip on small Android phones. The checklist of
       statements below the picture reuses the exact same
       .quiz-multi-options / .quiz-multi-opt styling as M.1–M.4. */
    .array-grid-box{
        display:flex; flex-direction:column; align-items:center;
        gap:8px; width:100%; max-width:520px; margin:0 auto; box-sizing:border-box;
    }
    .array-grid-row{
        display:flex; flex-direction:row; align-items:center; justify-content:center;
        gap:8px; flex-wrap:nowrap;
    }
    .array-grid-row svg{
        width:var(--ag-icon-size, 52px); height:var(--ag-icon-size, 52px); flex:0 0 auto;
    }
    #arrayCheckBtn{display:block; width:auto; min-width:160px; margin:14px auto 0; padding:9px 30px;}
    @media (max-width:480px){
        .array-grid-box{gap:6px;}
        .array-grid-row{gap:6px;}
    }
    @media (max-width:340px){
        .array-grid-box{gap:4px;}
        .array-grid-row{gap:4px;}
    }

    /* Guarantee S.1/S.2 (which now carry a picture, a live board, and a
       prominent status panel all in one card) can always scroll on
       short/narrow viewports — same fix already used for the keypad
       quizzes above, so nothing (options, Next Question) ever ends up
       clipped below the fold on desktop or Android browsers. Applied
       at all three levels (overlay, modal, and card) with !important,
       since it's not visible from here which of the three the shared
       stylesheet caps with overflow:hidden. #fracfair-quiz-overlay and
       #fracparts-quiz-overlay ride along in this same shared rule (it's
       one generic scroll fix applied to a list of IDs, not fraction-
       specific styling), so they stayed here rather than moving to
       fraction.css with the rest of the Fraction Concepts rules. */
    #sub-quiz-overlay,
    #share-quiz-overlay,
    #rem-quiz-overlay,
    #mistake-quiz-overlay,
    #spot-quiz-overlay,
    #divmatch-quiz-overlay,
    #divestimate-quiz-overlay,
    #divfact-quiz-overlay,
    #divsplit-quiz-overlay,
    #fracfair-quiz-overlay,
    #fracparts-quiz-overlay{
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
    }
    #sub-quiz-overlay .quiz-modal,
    #share-quiz-overlay .quiz-modal,
    #rem-quiz-overlay .quiz-modal,
    #mistake-quiz-overlay .quiz-modal,
    #spot-quiz-overlay .quiz-modal,
    #divmatch-quiz-overlay .quiz-modal,
    #divestimate-quiz-overlay .quiz-modal,
    #divfact-quiz-overlay .quiz-modal,
    #divsplit-quiz-overlay .quiz-modal,
    #fracfair-quiz-overlay .quiz-modal,
    #fracparts-quiz-overlay .quiz-modal{
        overflow-y:auto !important;
        max-height:100dvh !important;
        -webkit-overflow-scrolling:touch;
    }
    #sub-quiz-overlay .card,
    #share-quiz-overlay .card,
    #rem-quiz-overlay .card,
    #mistake-quiz-overlay .card,
    #spot-quiz-overlay .card,
    #divmatch-quiz-overlay .card,
    #divestimate-quiz-overlay .card,
    #divfact-quiz-overlay .card,
    #divsplit-quiz-overlay .card,
    #fracfair-quiz-overlay .card,
    #fracparts-quiz-overlay .card{
        overflow-y:visible !important;
        max-height:none !important;
    }

    /* #subBox / #shareBox only ever render ONE pile (never a multi-cell
       grid), and that pile shrinks all the way down to 0 icons by the
       end of the question — so, same fix as #realBox above, let the
       box hug its actual content instead of reserving the shared
       .quiz-enough-box class's fixed min-height, which left a tall
       empty dashed rectangle once the pile was empty. */
    #subBox.quiz-enough-box,
    #shareBox.quiz-enough-box{
        display:flex !important;
        justify-content:center !important;
        align-items:stretch !important;
        width:100% !important;
        max-width:640px !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 auto !important;
        box-sizing:border-box;
    }
    #subBox .quiz-enough-group,
    #shareBox .quiz-enough-group{
        width:auto !important;
        max-width:none !important;
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
        box-sizing:border-box;
        display:flex !important;
        flex-direction:column;
        align-items:center;
    }
    #subBox .quiz-enough-icons,
    #shareBox .quiz-enough-icons{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:6px !important;
        width:100%;
        height:auto !important;
        overflow:visible !important;
    }

    /* ---------- Scoped styling for Repeated Subtraction (S.1) ----------
       The "12 -> 9 -> 6 -> 3 -> 0" trail and the "12 / 3 = 4" equation
       reveal are the whole conceptual payoff of this skill, so they get
       their own prominent, bold, wide panel that sits directly under
       the picture — still in the card's upper (sky) area, using up the
       empty space there — rather than the small gray .quiz-build-summary
       styling used elsewhere. */
    .sub-trail-panel{
        background:rgba(255,255,255,0.55);
        border-radius:18px;
        padding:14px 20px;
        margin:12px auto 16px;
        max-width:92%;
        text-align:center;
        box-shadow:0 4px 14px rgba(0,0,0,0.08);
    }
    .sub-trail-text{
        margin:0;
        font-size:clamp(1.3rem, 5vw, 1.9rem);
        font-weight:800;
        letter-spacing:0.5px;
        color:#1c2a4a;
    }
    .sub-equation-text{
        margin:10px 0 0;
        font-size:clamp(1.15rem, 4.5vw, 1.6rem);
        font-weight:800;
        color:#1a7f5a;
    }
    #subFeedback.bq-feedback{
        margin:12px 0 0;
        font-size:clamp(1.05rem, 4vw, 1.35rem);
        font-weight:700;
        line-height:1.35;
    }
    @media (max-width:480px){
        .sub-trail-panel{ padding:12px 14px; margin:12px auto 18px; }
    }

    /* ---------- Scoped styling for Sharing vs. Grouping (S.2) ----------
       Reuses the .quiz-build-group/-group-head/-group-label/-icons tile
       markup from R.2's board, but NOT its wrapper: R.2's #buildBox caps
       width at 640px and height at 44vh with overflow-y:auto/scroll
       because a child can keep tapping "Add Group" indefinitely there.
       S.2 is hard-bounded (at most SHARE_MAX_N=5 tiles of at most
       SHARE_MAX_ANSWER=4 icons each), so it never needs to scroll —
       this wrapper is wider and lets the tiles wrap and grow naturally,
       using the open space beside the picture instead of being
       squeezed into a narrow, clipped column. */
    .share-groups-wrap{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        justify-content:center;
        align-items:flex-start;
        width:100%;
        max-width:900px;
        margin:12px auto;
        box-sizing:border-box;
    }
    @media (max-width:480px){
        .share-groups-wrap{ gap:10px; margin:10px auto; }
    }

    /* ---------- Scoped styling for Estimation Warm-up (Q.1–Q.4) ---------- */

    /* Hidden-picture card (phase 2). Sizing is also set inline in JS so it
       reliably overrides whatever fixed height/grid the shared
       .quiz-enough-box class uses for the picture — this stylesheet copy is
       the fallback/first-paint version of the same rules. */
    #estimateBox.estimate-box-hidden,
    #divEstimateBox.estimate-box-hidden {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 120px;
        padding: clamp(20px, 6vw, 32px) 16px;
        margin-bottom: 12px;
    }
    #estimateBox .estimate-hidden-note,
    #divEstimateBox .estimate-hidden-note {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: inherit;
        font-size: clamp(0.95rem, 4vw, 1.1rem);
        font-weight: 700;
        color: #fff;
        text-align: center;
        background: rgba(255, 255, 255, 0.18);
        border: 2px dashed rgba(255, 255, 255, 0.55);
        border-radius: 16px;
        padding: 14px 20px;
        max-width: 90%;
    }
    #estimateBox .estimate-hidden-note i,
    #divEstimateBox .estimate-hidden-note i {
        font-size: 1.15em;
        flex: 0 0 auto;
    }

    /* "Too few / About right / Too many" choice buttons (phase 2).
       A dedicated class, rather than reusing the numeric quiz-number-opt
       buttons, since these need to hold multi-word labels instead of a
       single digit. */
    #estimateChoiceOptions,
    #divEstimateChoiceOptions {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 12px;
        margin: 18px auto 4px;
        max-width: 480px;
        padding: 0 8px;
    }
    #estimateQuestionText,
    #divEstimateQuestionText {
        flex: 0 0 auto;
        margin-bottom: 4px;
    }
    .estimate-choice-btn {
        flex: 1 1 140px;
        min-width: 100px;
        max-width: 170px;
        padding: 14px 10px;
        font-family: inherit;
        font-size: clamp(0.85rem, 3.6vw, 1.02rem);
        font-weight: 700;
        line-height: 1.25;
        color: #1f2937;
        background: #ffffff;
        border: 2px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        white-space: nowrap;
        text-align: center;
        transition: background-color 0.15s ease, border-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .estimate-choice-btn:disabled {
        cursor: default;
        opacity: 0.95;
    }
    .estimate-choice-btn.is-correct {
        background: #d1fae5;
        border-color: #10b981;
        color: #065f46;
        box-shadow: 0 3px 0 rgba(16, 185, 129, 0.35);
    }
    .estimate-choice-btn.is-wrong {
        background: #fee2e2;
        border-color: #ef4444;
        color: #991b1b;
        box-shadow: 0 3px 0 rgba(239, 68, 68, 0.35);
    }

    /* Generic reusable Yes/No (or any short-label 2-4 option) choice
       row — a class, not an ID-scoped rule like #estimateChoiceOptions
       above, so any future skill can drop .estimate-choice-btn buttons
       into a .quiz-choice-row wrapper without a CSS edit here. Used by
       S.8's "Can it split evenly?" Yes/No prompt. */
    .quiz-choice-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 12px;
        margin: 18px auto 4px;
        max-width: 480px;
        padding: 0 8px;
    }
    @media (max-width: 768px) {
        .quiz-choice-row {
            gap: 10px;
            max-width: 100%;
        }
    }

    /* Phones & tablets in portrait (incl. Android): stack estimate choices
       full-width so they stay visible and easy to tap. */
    @media (max-width: 768px) {
        #estimateBox.estimate-box-hidden,
        #divEstimateBox.estimate-box-hidden {
            max-height: 100px;
            padding: 16px 12px;
            margin-bottom: 8px;
        }
        #estimateChoiceOptions,
        #divEstimateChoiceOptions {
            gap: 10px;
            max-width: 100%;
        }
        .estimate-choice-btn {
            flex: 1 1 100%;
            max-width: 320px;
            min-height: 48px;
            padding: 14px 12px;
        }
        #estimateQuestionText,
        #divEstimateQuestionText {
            font-size: clamp(0.95rem, 4.2vw, 1.1rem);
            padding: 0 8px;
        }
    }

    /* Sidebar links for not-yet-built skills - dimmed and given a
       distinct cursor so they read as "on the roadmap" but not
       clickable-broken. fraction.js intercepts the click and shows a
       small "coming soon" note instead of navigating. */
    a.skill-coming-soon {
        opacity: 0.55;
        cursor: default;
    }
    a.skill-coming-soon i.fa-hourglass-half {
        color: #b08a3e;
    }