<!-- Sandy Fast Facts · v105 (Laura, 12 Oct 2026). 🎯 YEAR 8 GAP LEVELS, ALTs 1 TO 3 (8MAT Release 2 of 3). 39 new levels from the 8MAT booklet audit: 22 appended to existing skills and 6 new skills. ALT 1: Divisibility Tests (Factors, Multiples & Primes L6), Long Division by a Two-Digit Number (Division L6), Three or More Integers and Word Problems (Multiply / Divide Integers L5, L6), Average Rates (Simplifying Rates L3), Two Rates Together (Converting Rates L5), NEW Scale Drawings & Maps (3 levels), NEW Speed, Distance & Time (4). ALT 2: Equivalent Fractions (Simplify Fractions L5), Increase or Decrease by a Fraction (Fraction of an Amount L5), Find the Whole from a Part (Percentage of an Amount L5), Find the Percentage Change (Percentage Increase & Decrease L6), Divide Fractions & Decimals (Multiply Decimals & Fractions L4). ALT 3: Spot the Like Terms, Negative Outside the Bracket, Write and Expand, Bracketed Numerators, HCF of Two Terms, Words to Equation, The Zero Index, Mixed Index Laws, Rearrange First (x² − a = c), Read the Inequality, Inequality Word Problems, NEW Expressions, Equations & Identities (2), NEW Checking Solutions (2), NEW Multi-Step Equations (4), NEW Equation Word Problems (2). All routed from one map (V105_APPEND, V105_SKILLS) and one dispatcher (genV105Level); no existing generator reopened. Appended levels go on the END of each skill and of its LEVEL_ORDER entry. Every new band is a PLACEHOLDER (V105_LION). Storage-safe: new ids, new lvKeys, appended levels only; the .bas is regenerated (782 to 821 rows, every existing row byte-identical) and must be redeployed. The new levels are in the Year 8 ALT pools only; the Year 7 courses are unchanged. -->
<!-- Sandy Fast Facts · v104 (Laura, 12 Oct 2026). 🎯 YEAR 8 MATHEMATICS ON THE EXAM / ALT SCREEN (8MAT, Release 1 of 3). A third course, Year 8 Mathematics (short "Year 8"), mapped from the 2027 8MAT student booklet: ALT 1 Number, Rates & Ratios; ALT 2 Fractions, Decimals & Percentages; ALT 3 Algebra & Equations; ALT 4 Measurement & Pythagoras; ALT 5 Linear Graphs; ALT 6 Probability & Statistics; ALT 7 Geometry (exam:false, taught after the exam, same note as Year 7's ALT 8). Exam Practice is the union of ALTs 1 to 6. This release uses ONLY levels that already exist, so it is metadata only: no skill, level, lvKey, band, storage key or share line changes, and the .bas is unchanged (FastFactsBands_v103.bas still parity-clean). Gap levels found in the booklet audit follow in v105 (ALTs 1 to 3) and v106 (ALTs 4 to 7). Enrichment, Challenge and the booklet's Extension items are in no 8MAT ALT (Laura: Extension waits for the 8MAS teaching order). test_courses.js now reads each course's own ALT count and non-exam ALT instead of assuming eight; test_v104.js locks the 8MAT pools. -->
<!-- Sandy Fast Facts · v103 (Laura, Oct 2026). 📏 MEASUREMENT, RELEASE B: SURFACE AREA, VOLUME & CAPACITY. The 3D half of the strand: 8 skills and 47 levels from the 7MAT Measurement booklet (Lesson 5) and the 7MAS SEAL booklet (Lessons 3 to 5). Surface Area of Prisms, Surface Area of Cylinders, Units of Volume & Capacity, Volume of Rectangular Prisms, Volume of Prisms, Volume of Cylinders, Capacity of Containers, Volume of Composite Solids. One oblique 3D drawing engine (msPrismSVG, msCylSVG, msBlockSVG). ALT 8 complete in both courses; Enrichment and SEAL filling and pouring are built and kept out of ALT 8. Storage-safe and additive. -->
<!-- Sandy Fast Facts · v102.1 (Laura, 11 Oct 2026). TRANSFORMATION BANDS HALVED: every Lion ceiling on Translations, Reflections, Dilations, Rotations, Combinations and Transformations of 2D Shapes halved (floor 3), signed off by Laura because students and teachers were stuck at Greyhound. Display-only; storage-safe. -->
<!-- Sandy Fast Facts · v102 (Laura). 📏 MEASUREMENT, RELEASE A: LENGTH, PERIMETER, CIRCLES & AREA. A new 18th category and the last missing strand begun: 10 skills and 53 levels mapped from the 7MAT Measurement booklet (Lessons 1 to 4) and the 7MAS SEAL booklet (Lessons 1 and 2). Units of Length, Perimeter, Circumference, Perimeter of Circle Parts, Units of Area, Area of Rectangles/Parallelograms/Triangles, Missing Length from Area and Composite Area for both courses; Rhombuses/Kites/Trapeziums and Area of Circles & Sectors for SEAL. Challenge questions are not assessed and are not built; ENRICHMENT items are built as the last level of their skill and kept out of every ALT (Laura, 4 Oct). ALT 8 in both courses now carries the 2D half and stays exam:false; its note says the 3D half is coming. ONE NEW INPUT MODE, piExact: the number box plus a pi key, reading k pi and a + k pi. A decimal on an exact level is wrong, and if it is the right SIZE the miss review says "now give it exactly". 2 d.p. MEANS THE PI KEY, NOT 3.14 (Laura): tolerance 0.005 round the correctly rounded value, every 2 d.p. question re-rolled until its 3.14 answer differs, and a 3.14 answer gets its own miss-review line. EVERY DIAGRAM IS DRAWN TO ITS LABELS with one uniform scale. PREREQUISITES ARE NOW PER-ALT (an open item closed): ALT 8 shows times tables, x and / by powers of ten and square numbers; ALT 7 shows Simplify Fractions and Convert FDP. STORAGE-SAFE: all new ids and levels; the .bas is regenerated and must be redeployed. Every Measurement band is a PLACEHOLDER. Previously: v101 (Laura). 🎲 PROBABILITY — THE SECOND MISSING STRAND, BUILT. 14 skills and 80 levels, mapped from the 7MAT and 7MAS (SEAL) Statistics & Probability booklets and Laura's Year 7 / Year 7 SEAL topic lists: Sample Space, Language of Chance, Theoretical Probability, Complement, Experimental Probability, Expected Number of Outcomes and Two-Step Experiments for both courses; Tree Diagrams, Two-Way Tables, Venn Diagrams, Probability Notation, Mutually Exclusive Events and the Addition Rule for SEAL; and Conditional Probability built ahead for Year 10 because the engines were already there. ALT 7 in BOTH courses now carries the probability half and its "still being built" note is gone — 682 skill-levels, 1001 course references. THIS RELEASE IS STORAGE-SAFE: all new ids, all new levels, nothing renamed and nothing reordered, so no Personal Best moves (the .bas still has to be redeployed, or the dashboard leaves the Animal column blank for every probability row). THREE THINGS WORTH KNOWING. (1) THE FRACTION RULE TIGHTENS AS THE LADDER CLIMBS, which was Laura's call: Theoretical L1–L2 and Experimental L1–L2 accept any equivalent fraction, so a student meeting probability for the first time is marked on the probability and not on the simplifying; from Theoretical L3 up, simplest form is required and the miss review says WHICH of the two things went wrong ("Right probability — now simplify it"). PROB_LENIENT is the one list that decides it, read by both the marking and the on-screen notice. (2) ONE NEW INPUT MODE, gridFill — the v74 FDP table generalised into a reusable table filler, 1 POINT PER CORRECT BOX, which is what completing a two-way table needed. (3) NO NEW MODE WAS NEEDED FOR THE PROBABILITY LINE: plotPts takes its geometry from qData.plotGeom, so the 0–1 line is the v99 number-line surface in twelfths. Three new drawing helpers (spinner, Venn incl. shaded regions, tree) and a dice-totals grid; everything else re-uses daFreqTable and the existing panels. ALL 80 BANDS ARE PLACEHOLDERS — written out per level in an explicit BAND_OVERRIDE stage so every one is a number somebody can see and argue with, and the next thing to recalibrate with a class. Previously: v100 (Laura). 🪜 LEVELS IN ORDER, EASIEST TO HARDEST — AND THE NINE CONTENT GAPS BUILT. Two things in one release, both of them Laura's call. 🪜 THE REORDER. Levels had been APPENDED for four releases running, because appending is the storage-safe move: the level number is part of the storage key, so inserting one re-points every Personal Best recorded on that skill. That kept the data safe and let the ladder drift — "how many decimal places" (the rule, with no arithmetic in it) sat at Level 5 of Multiply Decimals, "which fraction is in simplest form" sat AFTER algebraic fractions, and "polygon or not?" sat at Level 6 of Naming Shapes, three levels below naming a rhombus. Laura: the classes have not used the app enough for the stored data to outweigh a sensible order, and most students start a fresh profile anyway. So 21 skills are reordered and a student with an old best on a moved level will see it against a different question type — the known, accepted cost, and the ONLY change in the program's history that is not storage-safe. HOW IT IS DONE, because this is the part worth keeping: LEVEL_ORDER[lvKey] lists the OLD level numbers in their NEW order, and one block applies it at load time to everything keyed by level — the level cards (renumbering their own titles), the per-level input modes, the recall/method flags, the fluency targets, the band cut-offs across all five BAND_OVERRIDE stages, the mode recommendations and both ALT pools. The GENERATORS were not touched at all: nextQCore swaps in the old number for the length of one question and puts it back before enableInputs(). Reordering another skill later is now ONE LINE in LEVEL_ORDER. ⚠ THREE LEVELS WERE REMOVED, and finding them is what the reorder was worth on its own: v98 added "Mixed Numbers" to Add & Subtract Fractions, and "With Negatives" to Multiply and to Divide Fractions — all three ALREADY EXISTED (fas L4 is genFracAddSubMixed; fmu/fd L3 already turn a numerator negative). Sorting the levels put the duplicate titles next to each other and made it obvious. The v98 copies are gone, the originals stay, and the ALT pools now point at them. The lesson: an audit that reads a level LIST can miss what a level DOES — the duplicate check belongs in the add-a-level checklist, and it is now in the guide. 🧱 THE NINE CONTENT GAPS, all built — 575 → 605 → 602 skill-levels after the three removals, and 848 → 886 ALT references. SIX NEW SKILLS. Writing Expressions from Words (the highest-value gap in the audit: it appears four times across the two ALT 3 papers, and the app could read a coefficient, substitute, expand, factorise and solve but nothing turned ENGLISH into algebra — five levels, phrase to expression, expression to phrase, two operations, generalise a number pattern, and story to equation to answer; the phrase bank is DATA, so the words and the algebra cannot drift apart, and every distractor is the expression a student produces by MIS-READING those exact words). Algebraic Fractions (5r/6 − 12r/18 is on BOTH ALT 3 papers word for word — six levels built as one family because it is one method: same denominator, different denominators, multiply, divide, with indices including a negative one, and simplify by factorising, which is SEAL MC Q8). Perimeter & Area as an Expression (SEAL Q11 and Q12, 9 marks — this looks like the Measurement gap and is NOT: no unit conversion and no formula recall, just adding labelled sides and collecting like terms, so it is an Algebra item wearing a Measurement costume and did not have to wait). Number Lines (read a fraction off the line, which arrow is closest, mark every integer that fits, and show an inequality solution — NO new input mode: plotPts already takes its geometry from qData.plotGeom, so a one-dimensional line is the same tap surface with one row, which is exactly what "axis-agnostic" was for in v78). Written Multiplication, and Long Division as Division L4 (both ALT 1 papers set 132 × 29 and 5932 ÷ 4 explicitly — worth naming the tension: the ALT marks are for the SETTING OUT and a fluency app can only check the answer, but a student who cannot get the answer will not get the setting-out marks either). Absolute Value & Factorials (|−10 + 4!| − |3| is one mark on both ALT 1 papers and neither notation existed anywhere). Direct & Inverse Proportion (the plotting half was already built — v98 mapped Table of Values into SEAL ALT 2 — so only the naming needed a skill). THREE APPENDED LEVELS: HCF & LCM in Index Form (multiple choice, because a keypad cannot type 3² × 7, and every distractor is a named misconception — the higher power for the HCF, the lower for the LCM, or adding the indices), and Currency Conversion on Converting Rates (half the questions go BACKWARDS, because dividing when you expect to multiply is the whole error). test_v100.js checks the two things a reorder can silently get wrong: that every map keyed by level number moved with its level, and that the question a student now gets at Level n is the one the Level n card promises — probed by its own signature rather than by trusting the map. test_v99.js re-derives all 30 new answers independently, and its two most useful assertions are that EVERY integer drawn on a number line which satisfies the condition is in the answer set (or a student can be right and be marked wrong), and that the proportion table is classified from its own numbers rather than from the label the generator gave it. Suites: smoke 602 levels · v100 · v99 · v98 · v96 · v93 all green. Every band for the 30 new levels is a PLACEHOLDER. FastFactsBands_v100.bas regenerated and parity-checked 602/602 — and this time many existing rows DID change, because a reordered level takes its band with it; that is the release where the .bas must be redeployed alongside the app rather than after it. v98 notes follow. internal v98 (Laura). 🎯 THE 2026 ALT AUDIT, PART 1: THE MAPPING FIXES AND THE ENHANCEMENTS. The ten ALT papers for ALTs 1–5 were mapped question by question against each course's OWN ALT pool — a tighter question than the exam audit asked, because the exam is a sample and an ALT is the whole unit, and because a student who opens "ALT 3" three days before ALT 3 has an exact expectation about what is inside. 75% of the assessed tasks were already fully covered; the failures clustered in three recognisable ways and only one of them needed building. ⚠ THIRTEEN MAPPING FIXES FIRST, because they needed no new content at all — the level exists and was simply in the wrong ALT, which is invisible to every test, every band and every generator, and visible only to a student revising for that paper. Four of them were severe: Year 7 ALT 3 tests expanding brackets and had NO expanding level at all; SEAL ALT 5 asks a surd to be simplified and Simplify Surds was not in the pool (Add & Subtract, Multiply and Divide all were); SEAL ALT 5 sets (2x + 3)(x − 5) = 0 without the Null Factor Law level; and SEAL ALT 2 sets a 3-significant-figure question while Significant Figures sat in ALT 1. The other nine: the two index laws and integer comparison into Yr 7 ALT 1, Applications of Linear Graphs into BOTH ALT 3s (the party-room rule C = 12 + 5h is on both papers), substitution into Yr 7 ALT 5, rearranging into SEAL ALT 3, polygon naming and angle naming into SEAL ALT 4, and Table of Values and time conversion into SEAL ALT 2. 791 → 848 course→skill-level references. TWENTY-EIGHT NEW LEVELS, every one APPENDED so no stored Personal Best moves, and every one answering a question that is actually on one of the ten papers. The pattern the audit found is the part worth remembering: the app was very good at DO THE CALCULATION and thin on RECOGNISE / CHOOSE / CLASSIFY / GO BACKWARDS — which is exactly where the cheap one-mark ALT items live. So: which fraction is already in simplest form, which sign makes −2 ? −2 = 4 true, which is the correct working line for "27 out of 93 as a percentage", which drink has the higher percentage of sugar, are these two lines parallel, is this triangle right-angled (the CONVERSE of Pythagoras), which set is all prime, between which two whole numbers does √34 lie, how many decimal places will the answer have, which decimal is closest to 7.5, which expression has exactly three terms and two pronumerals, is 5² × 5³ = 5⁶ true or false, and find the missing term in 4x + ? = 7x. Plus the content gaps the papers exposed: mixed-number addition and subtraction (on BOTH ALT 2 papers, two marks each, and there was no level for it at all), signed fraction multiplication and division, ratio read off a diagram, ratios in different units, three- and four-part ratios, ratio as a fraction, four-part shares, decimal substitution, decimal one-step equations, mixed numbers to decimals, and an FDP table carrying values over 100% and recurring ones. All 28 route from ONE map and ONE dispatcher (V98_LEVELS / genV98Level), the same discipline as the v93 word problems and the v96 exam levels, so not a single existing generator was reopened to bolt a level onto the end of it. Levels added to recall skills go into METHOD_LEVEL_OVERRIDE — a recognition tap and a converse are not fact recall. ⚠ ONE STRUCTURAL THING WORTH KNOWING: Square Numbers and Square Roots SHARE the lvKey 'sq', so appending one level to it appends a level to BOTH skills. Renaming a lvKey would orphan stored data, so the estimate-a-square-root level is deliberately served to both — which is consistent rather than sloppy, because their L1–L3 are already the same content under two names. Check for a shared lvKey before appending a level; only 'sq', 'as', 'cu', 'sci' and 'mi' are shared. THREE GENERATOR WIDENINGS, no new level and therefore no .bas row and no storage key moved: Rounding Decimals L2 now mixes 1, 2 AND 3 d.p. (both papers round to three), Multiply & Divide by 10, 100, 1000 now includes 10 000 (Yr 7 MC Q2 — the SKILL NAME is deliberately left alone because the dashboard .bas keys on it), and Add / Subtract Integers L3 now chains a THIRD term, because both ALT 1 papers open with (−13) + (−12) + 5. test_v98.js re-derives every answer INDEPENDENTLY of the generator that produced it: the sign question is re-tested against all four operations to prove exactly one of them works, primality by trial division, the shapes in a ratio diagram are COUNTED from the drawn SVG, the parallel-lines verdict is recomputed from the two angles actually on screen, the closest-decimal minimum is checked to be unique, and the missing term is substituted back into its own printed statement. It also asserts all 13 mapping fixes directly, because that is the class of change nothing else notices. 547 → 575 skill-levels. All v98 bands are PLACEHOLDERS pending class data. FastFactsBands_v98.bas regenerated, parity-checked 575/575, and a row-by-row diff against v97 confirms NO existing row changed. v97 notes follow. internal v97 (Laura). 📉 A SKETCH IS MARKED AGAINST THE LINE, NOT A POINT LIST. Laura, on y = −x + 4: she plotted (0, 4) and stepped the gradient BACKWARDS to (−1, 5) — a correct point on a correctly drawn line — and was marked wrong, because plotPts compared her taps against ONE fixed pair. The old way of hiding that flaw was to name the two points in the prompt ("step 1 across and 1 down"), which handed over the answer and turned the level into a copying exercise. Both are fixed together. A plotting question can now describe the LINE instead of the points: qData.plotLine = {m, c} or {vx} for a vertical, qData.plotMust = the anchor points the named METHOD requires, qData.plotNeed = how many to plot. Marked right when the required number of DISTINCT points is plotted, every one lies on the line, and every compulsory point is among them. So on Gradient & y-Intercept L3 the y-intercept is still compulsory — plotting it IS half of "the gradient–intercept method" — but the second point is genuinely free, and stepping the gradient either way is correct. On Sketching Linear Graphs L1 (horizontal/vertical) ANY two points on the line count; L2 still requires both intercepts and L3 the origin, because those anchors ARE the method each level is named for. Every giveaway instruction is gone: "Plot the y-intercept, then use the gradient to plot one more point on the line" and "Plot any two points on this line". The marked-up re-draw now shows the whole correct LINE dashed in green with each tap green or red against it, instead of hollow rings on the two points the app happened to have in mind — better feedback, and it makes the "any point counts" rule visible. PURELY ADDITIVE: the exact-point-set path is untouched, so Table of Values, Distance-Time Graphs and Transformations of 2D Shapes mark exactly as before (regression-checked). test_v96.js now asserts the backwards step is accepted on every question, that an off-line point and a pair missing the compulsory anchor are still rejected, and that the instruction no longer names the second point. No band, storage key, level count or .bas row changed — FastFactsBands_v96.bas is still current. v96 notes follow. internal v96 (Laura). 📝 THE 2026 EXAM AUDIT, BUILT. Both Year 7 papers were mapped question by question against Exam Practice mode; everything below answers a question that is actually on one of them. 514 → 547 skill-levels. ⚠ THE TWO MAPPING FIXES FIRST, because they needed no new content at all: Year 7 Section B Q14 IS "solve 2x/5 − 8 = −4" and Two-Step Equations with Fractions was not in the Year 7 exam pool, so a student revising in the app would never have met the question type — it is now in ALT 3; and Q11c needs an 18% increase while Year 7 carried only Percentage Increase & Decrease L1 (friendly percentages) — L2 and L3 are now in ALT 5. SIX NEW SKILLS. Identify Fractions (the app could read a decimal and a percentage off a shaded grid but not a FRACTION, which the Year 7 paper asks for twice; L1/L2 generate only fractions already in lowest terms so "simplest form" is never ambiguous while the diagram is the thing being learned, L3 is where simplifying becomes the point). Index Notation & Expanded Form (VC2M7N02, Section B Q5). Quartiles & Interquartile Range (SEAL Section B Q9 — and the Outliers & Fences levels already in the app computed fences from Q1 and Q3 without ever teaching them; every data set is sized so BOTH halves are odd, so Q1 and Q3 are real data values and a quartiles drill is not also a "halfway between 63 and 77" drill). Gradient & y-Intercept from an Equation (SEAL MC Q7 — Gradient of a Line Segment only ever worked from two points or a diagram; L1/L2 are MULTIPLE CHOICE because a gradient is often a fraction and a fraction will not go in a numeric box, and L3 is the sketch-by-gradient-intercept level on the same tap-to-plot surface as the distance-time graphs). Matching Equations & Graphs (SEAL MC Q10 and Section B Q5c — the graph is DRAWN and the four options are EQUATIONS, because four graphs in a 74px button are unreadable; L3 checks every distractor against the rule so a "wrong" point can never accidentally satisfy it). Sketching Linear Graphs (Laura's spec: L1 horizontal and vertical, L2 by the intercepts, L3 through the origin, L4 mixed — every level names EXACTLY which two points to plot, because the marking is all-or-nothing on a point set and "sketch the line" alone would have infinitely many right answers). TEN NEW LEVELS on existing skills: four-digit column addition and subtraction, Division L4 (how many are needed — ceiling division, where rounding the ordinary way is wrong every time), Describe the Number (Yr 7 MC Q3), Prime Factor Form (Q7), Combining Two Ratios (SEAL Q2), Two-Step Number Patterns (Yr 7 MC Q10 — ×2 + 1 is neither arithmetic nor geometric), Find the Term Number (SEAL Q10c), Working Backwards from a finish time (SEAL Q8e), and Polygon-or-Not plus Count the Sides/Vertices (Section B Q1). All ten route from ONE map and ONE dispatcher (V96_LEVELS / genV96Level), the same pattern as the v93 word problems, so not a single existing generator was reopened. Levels added to recall skills go into METHOD_LEVEL_OVERRIDE. test_v96.js re-derives every answer INDEPENDENTLY of the generator that produced it — quartiles recomputed from the sorted list, prime factor form refactorised, ratio chains recombined, plotted points substituted back into their own equation — so a generator and its own working can never be wrong together. All v96 bands are PLACEHOLDERS. FastFactsBands_v96.bas regenerated, parity-checked 547/547, no existing row changed. v95 notes follow. internal v95 (Laura). 🏆 THE REST OF THE SURD FAMILY. Add & Subtract Surds L1 and Divide Surds L1 were still asking for 23 correct answers in a round; both are now Cheetah 10, matching Multiply Surds. The family now reads Simplify 8·8·7 (unchanged — already sane), Add & Subtract 10·9·8, Multiply 10·10·9·8, Divide 10·9·8. Every answer in this family has to be WRITTEN as an exact surd, which is slower than any of the arithmetic skills banded above 20. Nothing outside the family moved: the same [6,12,18,26] placeholder is still on Scientific Notation L1–L3 and several fraction L1s, deliberately left for a separate call. ⚠ STRUCTURAL FIX WORTH KNOWING: these two L1s came from the 2026-08-28 REVIEWED SPREADSHEET at [5,10,15,22], not from a placeholder — so which of the three maps setting them won was decided by LINE ORDER (the literal, then the v74.9 spreadsheet block, then the reviewed block). Every surd band Laura has called now lives in ONE "LAURA'S SURD CALLS" Object.assign block appended AFTER the reviewed block, so a future spreadsheet pass cannot silently revert a classroom call, and the superseded lines above carry a pointer to it. METHOD_BAND_CEIL surdAddSub/surdDivide L1 fallbacks follow the overrides. Bands are DISPLAY-ONLY over the stored Fluency Score: no storage key, PB, streak or share line changes and no score is lost — a past round simply reads as a higher animal. test_bands_surd.js now locks the WHOLE family (96 assertions): every Cheetah value, cut-offs in order, Cheetah = Antelope+1, a harder level never easier to top out than an easier one, the five non-surd skills that keep the old placeholder, and no surd level ever earning Fluent. FastFactsBands_v95.bas regenerated and parity-checked 514/514. v94 notes follow. internal v94 (Laura). 🏆 BAND FIX: MULTIPLY SURDS L1 AND L2. Laura: "the bands are too high, move Cheetah down to 10". The v86 PLACEHOLDER overrides asked for 31 (L1) and 27 (L2) correct answers in a round on a skill where every answer has to be written as an exact surd. BAND_OVERRIDE surdMultiply_L1 [8,15,22,30] → [3,5,7,9] and surdMultiply_L2 [6,12,18,26] → [2,4,6,9]; Cheetah is Antelope max + 1, so both are now 10. The four cut-offs below Cheetah are rescaled in the SAME PROPORTIONS as the old ladder rather than squashed under an unchanged one — a Lion ceiling of 22 beneath a Cheetah of 10 would be nonsense — and L2 keeps slightly easier lower bands than L1 because the simplifying step makes it slower. L3 and L4 are untouched (Cheetah 9 and 8), and no other skill moved: the identical [6,12,18,26] placeholder is still shared by Add & Subtract Surds L1, Divide Surds L1, Scientific Notation → Number L3 and several fraction L1s, all of which are LEFT AS THEY WERE because Laura only called this one. METHOD_BAND_CEIL surdMultiply is updated to [7,6,6,5] so the fallback no longer contradicts the overrides that actually apply. Bands are DISPLAY-ONLY over the stored Fluency Score — no storage key, PB, streak or share line changes, and no student loses a recorded score; a past round simply reads as a higher animal than it did. test_bands_surd.js locks the new numbers in the style of test_bands.js. FastFactsBands_v94.bas is regenerated and parity-checked (514/514 rows match bandCutoffs) — the dashboard module had not been regenerated since v79, so it was leaving the Animal column BLANK for all 65 skill-levels added in v80–v93 (the whole Data Analysis category included). v93 notes follow. internal v93 (Laura). 📐 CURRICULUM FILL: NETS/VIEWS, RECURRING DECIMALS, PERCENTAGE ERROR AND TEN WORD-PROBLEM LEVELS. NEW SKILL Nets, Plans & Views of 3D Objects (Geometry, VC2M7SP01 — the one examinable Level 7 Space idea with nothing in the app): L1 name the solid from a drawn net, L2 what the net of a drawn solid is made from, L3 front/side/top of a labelled rectangular prism (w, h and d forced distinct so exactly one view fits the stated rectangle), L4 the shape of a named view. Every level is CHOICE with a drawing and TEXT options — four small net pictures in a 74px option grid are unreadable, and comparing four pictures is a different task from the one the curriculum names. The nets are drawn here rather than taken from SHAPE_LIB because a net is a DIFFERENT picture of the same solid, which is the skill. NEW SKILL Terminating & Recurring Decimals (Decimals, VC2M8N03): L1 pick the odd one out, L2 write a terminating fraction as a decimal, L3 a dotted recurring decimal back to a fraction in simplest form. The terminate/recur test is done on the fraction in LOWEST TERMS (strip every 2 and 5, terminating iff 1 remains) and questions are GENERATED then CLASSIFIED, so 6/8 can never be mislabelled. NEW LEVEL Percentage Increase & Decrease L4 — PERCENTAGE ERROR (VC2M8N05), with values chosen so the error is a whole number of units and the percentage is exact. TEN WORD-PROBLEM LEVELS (VC2M7N10 / VC2M7A03 / VC2M8A03) — a FORMAT gap, not a topic gap: until now only three decimal skills had worded questions, so students met worded number, ratio and algebra questions for the first time in an ALT. HCF/LCM L4, Add/Subtract Integers L4, Order of Operations L5, Fraction of an Amount L4, Percentage of an Amount L4, Percentage Increase & Decrease L5, Sharing in a Ratio L5, Converting Rates L3, Substitute into Expressions L5, Two-Step Equations L4 (levelModes 4:number — the answer is a whole number, one box). All eleven are routed from ONE line at the top of nextQCore via the WORD_LEVEL map, so not one existing generator was touched. Word-problem levels on recall skills are added to METHOD_LEVEL_OVERRIDE — a word problem is never fact recall — and all carry a Challenge hint. test_v93.js compares the number inside the <b> of every worked solution against the stored answer on every question (the realistic bug is the story and the working drifting apart) and re-derives the HCF/LCM, ratio and equation answers from the story text itself. Nets/views and recurring-decimal bands are PLACEHOLDERS pending class data. v92 notes follow. internal v92 (Laura). 🎯 NEW: EXAM / ALT TRAINING + THREE USABILITY CHANGES. (1) HOME HEADER is one row — name and greeting left, class chip and Edit / Dark / Backup as icon buttons plus Switch profile right; Backup turns amber with a dot when the last backup is over 14 days old, because it is the only control there that protects data. (2) MODE IS CHOSEN AFTER THE LEVEL, not before. The home-screen segmented control is gone; the level screen's Start now opens a mode screen naming the skill and level, with one of the three RECOMMENDED from what the app already stores — an explicit LEVEL_REC wins, then a never-attempted or sub-85% level goes to Practice, and only an accurate student is sent to the clock. This is the fix for "everyone just does Fluency because it is pre-set". beginGame() is unchanged and still starts the game, so every existing test path (harness start = selectSkill -> lc<lv>.onclick -> beginGame -> launchSession) still works. (3) TOP ROW is streak strip + Daily Mix + Exam/ALT Training, three across at >=900px and stacked below; the streak card lost its progress text and shrank to a strip. EXAM / ALT TRAINING: a COURSES object of PURE METADATA (Year 7 Mathematics, Year 7 SEAL Mathematics) naming skill ids and level numbers that already exist — nothing in CATS, LEVEL_DEFS or any band changed, and no storage key moved. Course -> ALT list -> the skills and levels in that ALT, each level carrying a grey/amber/green READINESS dot read from the accuracy the app already saved after every session. Every ALT and the exam get a MIXED PRACTICE button (practice mode only, by design): nextQ() is now a wrapper that re-picks the skill between questions, weighting anything not yet green 3:1, and the round records one session plus a per-level accuracy stamp for every level that got at least 3 questions. EXAM PRACTICE is generated as the union of the examinable ALTs, so it can never drift; ALT 8 (Measurement) is exam:false because it is taught after the exam. PREREQUISITES (Times Tables, Division) sit greyed and dashed at the foot of every ALT — assumed knowledge, not assessed, but somewhere to drop back to. test_courses.js proves all 718 course->skill-level references resolve, that Exam Practice equals the union, and that Mixed Practice rotates skills and stays in practice mode. v84 notes follow. internal v84 (Laura). 📊 NEW CATEGORY: DATA ANALYSIS (Release 1 of 3). Four reusable display engines — daDotPlot, daStemHtml, daHistogram, daBoxPlot — each driven by DATA and working out its own scale, so Release 2 (mean/mode/median/range) re-uses them unchanged. Three skills: Classifying Data, Frequency Tables (read · from a raw list · grouped class intervals · percentage frequency, with totals restricted to 20/25/50 so every percentage is exact) and Reading Data Displays (one level per display, so every engine is student-tested now rather than sitting unused until Release 2). All bands are PLACEHOLDERS and every level is METHOD (accuracy-first, no Fluent badge) until class data exists. Purely additive: no existing skill, level, id or band changed. v83 notes follow. internal v83: 🔍 DESKTOP SIZING, SPLIT THE DIFFERENCE: v82 over-reserved vertical space (420px) so diagrams came out smaller than they had to; the budget is now calc(100vh - 330px) and the cap 460px. Question CONTENT also scales on a big screen — A_LBL now reads its size from --qlbl (a CSS variable, because a media query cannot override an inline style) and the timetable from --qtbl, so prompts and tables grow with the column instead of staying at phone size. v82 notes follow. internal v82: 📏 TIGHTER GAME HEADER ON DESKTOP: the back link / stats / progress / nudge strip is trimmed from ~170px to ~105px and diagrams are capped at calc(100vh - 420px), so the tall coordinate-grid and plot questions fit without scrolling. CSS only, ≥900px only. v81 notes follow. internal v81: 🎯 START BUTTON IS ALWAYS REACHABLE: #levelStartBtn is position:sticky at every width, so on a 6-level skill it rides the bottom of the window instead of hiding below the cards, and settles into the flow once the list fits. On desktop the level grid is now auto-fill minmax(300px) — 3 across on a 1080px frame — so even the worst case (six levels) needs no scrolling. CSS only. v80 notes follow. internal v80: 🖥 DESKTOP LAYOUT: additive CSS in one @media (min-width:900px) block plus two harmless wrapper divs on the home screen (.home-top, .home-foot). The frame widens to 1080px, categories go 3-across, skills and levels 2-across, and the GAME screen becomes two columns (question left, answering right) via grid auto-placement — no JS, no ids, no question logic touched. Under 900px every rule is unchanged, so all phone layouts are byte-identical to v79. v79 notes follow. internal v79: 🧩 OTHER IS RENAMED 🔄 TIME & TRANSFORMATIONS — display only: the CATS key stays 'other', so every stored Personal Best, streak and share line is untouched, and the dashboard .bas keys on SKILL names so it is unaffected too. SIX NEW TRANSFORMATION SKILLS, all built on one engine: every transformation in the program is an affine map whose matrix has exactly one non-zero entry per row, so applying one is two lines, COMPOSING two stays in the same family (which is what lets the Combinations skill print a single mapping for a chain), and the mapping notation is rendered straight off the matrix so the words and the notation can never drift apart. Translations (L1 one-axis slide · L2 two-axis · L3 describe it from the drawn points · L4 read the mapping · L5 apply the mapping · L6 find the pre-image), Reflections (same six; L1 the axes, L2 adds y = x), Dilations from the Origin (ONE apply level per Laura — a dilation from the origin is always a single step — then the same four; factors 2, 3, 4, ½ and ⅓ on a ±10 window because a factor of 4 leaves the −5…5 box immediately), Rotations about the Origin (L1 half turns only, L2 the quarter turns clockwise and anticlockwise; the describe-it levels are restricted to the three CANONICAL names because 90° clockwise and 270° anticlockwise are the SAME map and would otherwise be two right answers), Combinations of Transformations (NO describe-in-words level, per Laura — two points can be joined by any number of chains — so L1/L2 apply a chain of two then three, and the mapping levels survive because a mapping IS the composite), and Transformations of 2D Shapes (Yr 7–8: translate, reflect, identify, dilate, rotate and un-transform a whole shape by TAPPING its image corners, on a coarser −4…4 grid so a corner is an easy tap on a phone). One subtle guard worth remembering: two DIFFERENT transformations can still agree on ONE point — (2, −2) goes to (−2, 2) under both a half turn and a reflection in y = x — so a describe-it distractor is only safe if it fails on THAT point, not merely if it is a different map. Purely additive apart from the category label: no existing skill, level, id or band changed. All new bands are PLACEHOLDERS pending class data. internal v78.4 FIXES: (1) TYPING WAS DEAD on any narrow screen — the "is this a phone" test was window width ALONE, so a laptop with a narrow window (or the app in a preview pane) got the readonly-input trick meant to suppress a phone keyboard, with no way to type. A phone must now ALSO have a coarse primary pointer, and the first real key press from a physical keyboard unlocks every box and hides the keypad for the rest of the session. (2) THE PLOT GRID WAS SQUASHED — #qBox is a flex container and plotRender was handing it two or three children, so the prompt, story and grid became columns; wrapped in a single .q-text child, and the plot/graph SVGs now scale to the available width (up to 460px) instead of sitting at a fixed 300px. (3) DISTANCE-TIME JOURNEYS CAN NOW RETURN HOME — a stage may head back towards home so the graph comes down, and some journeys finish at 0 km; the line can never go below 0, "fastest" and "speed" compare magnitudes, and the story says "back towards home" / "the last N km home". internal v78.3: NEW CATEGORY 🧩 OTHER (Laura) — the practical, everyday-maths corner, placed last: Converting Units of Time (Yr 7: sec/min/hour · hour/day/week · week/month/year · compound times both ways), Train & Bus Timetables (Yr 7: read the table · trip length in minutes · latest service that still arrives in time · minutes until the next service, with 24-hour and 12-hour clocks mixed) and Distance-Time Graphs (Yr 7–8: read the distance · which stage is stationary/fastest · BUILD or finish the graph by tapping the corner of each stage · speed of a labelled stage). Coordinate Geometry gains Applications of Linear Graphs (Yr 8–9: rate or starting amount from P = −35 + 4c · write y = a + bx from a story · build its table · write ax + by = d from a two-item total). The plotPts mode is now axis-agnostic and can mark an ORDERED path, which is what the distance-time construct level uses. Purely additive — no existing skill, level, id or band changed. internal v78.2: 📈 COORDINATE GEOMETRY grows (Laura). The Cartesian Plane gains L4 — three corners of a rectangle, square or labelled parallelogram ABCD are plotted and the student writes the coordinates of the fourth. NEW skill Table of Values (Yr 7–8: L1 build a linear table from a rule · L2 PLOT that table on the plane · L3 build a non-linear table (x², x³, 2ˣ) · L4 plot a non-linear table). x- and y-Intercepts gains a new L2 — read both intercepts off a table of values — pushing y-int/x-int/both down to L3/L4/L5 (safe: no student has played Coordinate Geometry yet). NEW INPUT MODE plotPts: the drawn Cartesian plane itself is the answer surface — every lattice point carries an invisible tap target, tap to place or remove a marker, all-or-nothing marking, and the marking is drawn back onto the grid. internal v78.0: Yr 7–9 SEQUENCES in 💰 Finance & Patterns (Laura). NEW Sequence Rules in Words (Yr 7: L1 first term · L2 the term-to-term rule in words as a 4-way tap (add / subtract / multiply / divide / square numbers) · L3 next two terms · L4 write the first five terms from a starting value and a worded rule · L5 read a term off the sequence from aₙ notation). NEW Arithmetic Sequences (Yr 7–8: L1 common difference d · L2 next three terms · L3 fill a₁ and d into aₙ = a₁ + (n − 1)d · L4 use the rule to find a required term). NEW Geometric Sequences (Yr 8–9: L1 common ratio r · L2 next three terms · L3 fill a₁ and r into aₙ = a₁ × rⁿ⁻¹ · L4 use the rule to find a required term). The existing Sequences skill is RENAMED "Arithmetic & Geometric Sequences" and otherwise untouched (id, lvKey, levels and bands all unchanged) — it stays as the higher-order one where the student decides which kind it is. gapFill grows from four boxes to FIVE (gap4), with narrower boxes on a five-box row. All new bands are PLACEHOLDERS pending class data. internal v77.0: THREE NEW CATEGORIES and one new Number skill. ◡ Quadratics — Verify Solutions to Quadratic Equations (L1 x²=k · L2 factorised · L3 trinomial, Yes/No) and Solve Quadratic Equations (L1 x²=k · L2 exact values/fractions as multiple choice · L3 Null Factor Law · L4 monic trinomials). 📈 Coordinate Geometry — The Cartesian Plane (quadrant · read a plotted coordinate), Linear or Non-Linear (from a graph · from an equation), x- and y-Intercepts (y-int · x-int · both from ax+by=c) and Gradient of a Line Segment (whole · from a diagram · fractions & negatives). 💰 Finance & Patterns — GST (10%: added · price incl · removed), Simple Interest (5 levels on Vn = V0 + nD, D = r/100 × V0), Sequences (classify · next term · arithmetic rule · geometric rule), Recurrence Relations (write · use) and Flat Rate Depreciation (5 levels on Vn = V0 − nD). Number gains Number Classification (rational/irrational · tick every set). TWO NEW INPUT MODES: gapFill (a rendered rule/coordinate/solution template with up to five numeric boxes, all-or-nothing, optional order-free marking) and multiSel (tick every box that applies, all-or-nothing). Purely additive — no existing skill, level, id or band changed; all new bands are PLACEHOLDERS pending class data. internal v76.0: Congruence & Similarity now distinguish "provably false" from "unknown". L3 adds a 6th button "Not similar" (sides given but not in a constant ratio — the case a student CAN disprove, e.g. 5,8,11 vs 10,18,22); L2 adds a 6th button "Not congruent" via a new DIFF scenario that labels side lengths that don't all match. "Not enough information" now means only the genuinely undetermined cases (SSA, AAA-for-congruence, one angle, two sides). csSimilarityVerdict/csCongruenceVerdict extended; fixed 6-button order; storage-safe (no skill/level renamed or reordered). v75.0: NEW Percentages skills — Convert Percentages & Decimals (pctDecConv, both directions, number box) and Convert Fractions & Percentages (fracPctConv: L1–2 fraction→% number box, L3–4 %→fraction box; direction fixed per level via levelModes). Both single-question (not the FDP fill-in table), placed before Convert FDP; recall/Fluent-eligible with PLACEHOLDER bands (recalibrate with class data). Recurring values (33⅓% etc.) accepted within a per-question tolerance via qData.ansTol. Storage-safe additive change. v74.9: band cut-offs revised across the whole program from Laura's reviewed spreadsheet — 95 skill-levels re-banded via explicit per-level BAND_OVERRIDE entries (app matches the sheet on all 330 rows). v74.8: Decimals band targets LOWERED (Laura) so quick+accurate students reach higher animals — Identify/Expanded Form/Convert D→F −2; Rounding & Add/Subtract Decimals −3; all ×/÷ decimal operations (Multiply, Divide, ×÷ by 10/100/1000, Squares & Cubes, Square/Cube Roots, signed ×÷, ×fractions) −4. Display-only/storage-safe; .bas regenerated. v74.7: more Decimals (Laura) — NEW skills Add & Subtract Decimals (Positive & Negative), Multiply Decimals & Fractions (decFrac), Multiply & Divide Decimals (Positive & Negative), Leading Digit Estimation (round-to-1sf → estimate → BODMAS), Square Roots & Cube Roots of Decimals; NEW word-problem L4 on Multiply Decimals and Divide Decimals; Squares & Cubes of Decimals moved after Multiply Decimals & Fractions. v74.6: Add & Subtract Decimals L4 word problems; Add & Subtract Fractions & Decimals; Rounding Decimals L3 round-then-estimate. v74.5: miss reviews work THIS question's numbers step-by-step; Angles-in-Polygons L4; deeper concave polygons) -->
<!-- Viewport (v48): dropped `maximum-scale=1.0, user-scalable=no`. iOS ignored it (so pinch worked there anyway) but Android obeyed it, blocking accessibility pinch-zoom. Accidental double-tap-to-zoom is killed per-control via `touch-action: manipulation` instead, which leaves deliberate pinch-zoom intact on every platform. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap" rel="stylesheet">
<style>
/* ── DESIGN TOKENS ─────────────────────────────
   Light theme on warm off-white for accessibility.
   WCAG AA contrast maintained throughout.
   All fonts: Nunito (rounded sans-serif).
──────────────────────────────────────────────── */
:root {
  --bg:        #F5F4F0;   /* warm off-white – easier on eyes than pure white */
  --surface:   #FFFFFF;
  --surface2:  #EEF0F5;
  --border:    #D4D6E0;
  --text:      #1A1C2E;   /* near-black, 13:1 contrast on --bg */
  --muted:     #5A5E78;   /* 5.5:1 on --bg – AA compliant */
  --accent:    #4338CA;   /* indigo – 5.9:1 on --bg */
  --accent-bg: #EEF2FF;
  --green:     #166534;   /* dark green – readable on light */
  --green-bg:  #DCFCE7;
  --amber:     #92400E;
  --amber-bg:  #FEF3C7;
  --red:       #991B1B;
  --red-bg:    #FEE2E2;
  --r:         14px;
  --r-sm:      8px;
  --shadow:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
}

/* v26: dark mode for evening practice. Overrides the palette; --accent stays a
   mid-indigo so white-on-accent buttons keep their contrast. */
body.dark {
  --bg:        #14161E;
  --surface:   #1D2130;
  --surface2:  #272C3E;
  --border:    #383E52;
  --text:      #EBEDF5;
  --muted:     #9AA0B8;
  --accent:    #6366F1;
  --accent-bg: #2A2F4A;
  --green:     #34D399;
  --green-bg:  #143226;
  --amber:     #FBBF24;
  --amber-bg:  #39300F;
  --red:       #F87171;
  --red-bg:    #3A1B1B;
  --shadow:    0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── v48: kill ACCIDENTAL double-tap-to-zoom on every interactive control.
   iOS reads two fast taps on a control (e.g. rapid times-tables keypad taps)
   as a double-tap-zoom gesture and zooms the page in mid-drill. `manipulation`
   disables double-tap zoom + the legacy 300ms tap delay on these elements while
   KEEPING deliberate pinch-zoom available (an accessibility requirement). The
   app wires interactions via inline onclick, so `[onclick]` covers the cards,
   mode/level buttons and links; the rest are explicit. ── */
button, a, input, textarea, select, label, [onclick], .kb-key {
  touch-action: manipulation;
}
/* v86 (Laura): double-tap-to-zoom came back, because the rule above only covers
   controls — a double tap on the PAGE (the question card, a diagram, the gap
   between buttons) still zoomed, and during a fast drill that is most of the
   screen. `manipulation` on the root disables the double-tap gesture while
   LEAVING PINCH-ZOOM INTACT (that is the difference between `manipulation` and
   `none`), so the accessibility requirement from v48 still holds. */
html, body { touch-action: manipulation; }
#s-game, #s-game * { touch-action: manipulation; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 16px 16px 48px;
  font-size: 16px;
  line-height: 1.5;
}

.app { width: 100%; max-width: 520px; }

/* ── SCREENS ── */
.screen { display: none; }
.screen.active { display: block; }

/* ── HERO ── */
.hero {
  text-align: center;
  padding: 44px 0 32px;
}
.logo {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--accent);
}
.logo span { color: var(--text); }
.tagline { color: var(--muted); font-size: 0.9rem; margin-top: 6px; font-weight: 700; }

/* ── SECTION LABEL ── */
.slabel {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* ── PROFILE GRID ── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.p-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px 12px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.p-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.p-card.add-card { border-style: dashed; background: transparent; box-shadow: none; }
.p-card.add-card:hover { border-color: var(--accent); background: var(--accent-bg); box-shadow: none; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.2rem;
  margin: 0 auto 10px;
}
.p-name { font-weight: 800; font-size: 1rem; color: var(--text); }
.p-sub  { font-size: 0.75rem; color: var(--muted); margin-top: 3px; font-weight: 700; }

/* ── NAME FORM ── */
.name-form {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  margin-top: 4px;
}
.name-form h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; }
.txt-input {
  width: 100%;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 11px 14px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color .18s;
}
.txt-input:focus { border-color: var(--accent); background: #fff; }
.color-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; border: 3px solid transparent;
  transition: transform .15s, border-color .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.swatch.sel { border-color: var(--text); transform: scale(1.25); }

/* ── HOME ── */
.home-header {
  display: flex; align-items: center; gap: 14px;
  padding: 28px 0 20px;
}
.av-sm {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem; flex-shrink: 0;
}
.greeting { font-weight: 900; font-size: 1.4rem; color: var(--text); }
.greeting-sub { font-size: 0.82rem; color: var(--muted); margin-top: 2px; font-weight: 700; }
.switch-btn {
  margin-left: auto;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem; padding: 7px 14px;
  border-radius: 20px; cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  transition: border-color .18s, color .18s;
}
.switch-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── SESSION TOGGLE ── */
.sess-toggle {
  display: flex; background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 4px; gap: 4px;
  margin-bottom: 24px;
}
.sess-toggle button {
  flex: 1; background: transparent; border: none;
  color: var(--muted); font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 0.82rem;
  padding: 10px 4px; border-radius: 10px; cursor: pointer;
  transition: all .2s; line-height: 1.2;
}
.sess-toggle button.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(67,56,202,0.25);
}

/* ── CATEGORY GRID ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.cat-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 16px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-icon {
  font-size: 1.5rem; margin-bottom: 10px; display: block;
  line-height: 1;
}
/* v77.1 (Laura): four categories use a drawn icon instead of an emoji. Sized to sit on
   the same 1.5rem baseline as the emoji ones; strokes use theme tokens so they invert
   correctly in dark mode. */
.cat-icon svg { display: block; width: 28px; height: 28px; }
.cat-name { font-weight: 900; font-size: 1rem; color: var(--text); }
.cat-desc { font-size: 0.76rem; color: var(--muted); margin-top: 3px; font-weight: 700; }

/* ── BUTTONS ── */
.btn-primary {
  width: 100%; background: var(--accent); border: none;
  border-radius: var(--r); color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  padding: 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(67,56,202,0.25);
  transition: opacity .18s, transform .15s;
}
.btn-primary:hover:not(:disabled) { opacity: 0.9; transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  width: 100%; background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r); color: var(--muted);
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 0.92rem;
  padding: 13px; cursor: pointer;
  transition: border-color .18s, color .18s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.back-btn {
  background: transparent; border: none;
  color: var(--muted); font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 0.88rem;
  cursor: pointer; padding: 16px 0 8px;
  display: flex; align-items: center; gap: 6px;
  transition: color .18s;
}
.back-btn:hover { color: var(--accent); }

/* ── SKILL LIST ── */
.skill-list { display: flex; flex-direction: column; gap: 10px; }
.skill-btn {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r); color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 0.98rem;
  padding: 16px 20px; cursor: pointer;
  text-align: left; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.skill-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateX(4px); }
.pb-chip {
  font-size: 0.72rem; background: var(--accent-bg);
  color: var(--accent); padding: 3px 10px;
  border-radius: 20px; font-weight: 800;
  white-space: nowrap; flex-shrink: 0;
}
/* Year-level guide chip (Victorian Curriculum 2.0) — neutral, informational */
.year-chip {
  font-size: 0.68rem; background: var(--border);
  color: var(--muted); padding: 3px 9px;
  border-radius: 20px; font-weight: 800;
  white-space: nowrap; flex-shrink: 0; letter-spacing: 0.2px;
}

/* ── LEVEL SCREEN ── */
.level-screen-header {
  padding: 8px 0 20px;
}
.level-screen-header h2 {
  font-size: 1.3rem; font-weight: 900; margin-bottom: 4px;
}
.level-screen-header p {
  font-size: 0.85rem; color: var(--muted); font-weight: 700;
}

.level-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

.lv-card {
  background: var(--surface);
  border: 2.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 16px;
  align-items: start;
}
.lv-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.lv-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 3px rgba(67,56,202,0.12);
}

.lv-badge {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.85rem; color: var(--muted);
  grid-row: span 2;
  align-self: center;
  transition: background .18s, color .18s, border-color .18s;
}
.lv-card.active .lv-badge {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.lv-title { font-weight: 900; font-size: 1rem; color: var(--text); margin-bottom: 4px; }
.lv-card.active .lv-title { color: var(--accent); }

.lv-desc { font-size: 0.82rem; color: var(--muted); font-weight: 700; line-height: 1.5; }

.lv-examples {
  margin-top: 6px; grid-column: 2;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lv-example {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.78rem; font-weight: 800;
  color: var(--muted);
}
.lv-card.active .lv-example {
  background: rgba(67,56,202,0.08);
  border-color: rgba(67,56,202,0.2);
  color: var(--accent);
}
.lv-pb { font-size: 0.72rem; font-weight: 800; color: var(--amber); margin-top: 6px; display: block; grid-column: 2; }
.lv-trend { grid-column: 2; margin-top: 4px; display: flex; align-items: flex-end; }

/* ── Level recommendation tags (v23): "best played in Challenge/Practice" ── */
.lv-rec {
  grid-column: 2; margin-top: 8px; width: fit-content;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 900;
  padding: 4px 11px; border-radius: 999px;
}
.lv-rec.challenge { background: var(--accent-bg); color: var(--accent); }
.lv-rec.practice  { background: var(--amber-bg);  color: var(--amber); }
.lv-card.rec-challenge:not(.active) { border-color: rgba(67,56,202,0.40); background: rgba(67,56,202,0.03); }
.lv-card.rec-practice:not(.active)  { border-color: rgba(217,119,6,0.42); background: rgba(217,119,6,0.045); }
#levelRecHint .rec-switch {
  display: inline-block; margin-left: 6px; text-decoration: underline;
  cursor: pointer; font-weight: 900;
}
.btn-primary.rec-practice { background: var(--amber); border-color: var(--amber); }

/* ── GAME ── */
.game-stats {
  display: flex; justify-content: space-between;
  padding: 14px 0 10px; gap: 8px;
}
.stat-pill {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 800; font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.stat-pill .lbl { color: var(--muted); font-size: 0.7rem; font-weight: 700; margin-right: 3px; }

.prog-wrap {
  height: 10px; background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; margin-bottom: 12px;
}
.prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #7C3AED);
  border-radius: 5px; transition: width 1s linear;
  width: 100%;
}

.pb-nudge {
  text-align: center; font-size: 0.83rem; color: var(--muted);
  margin-bottom: 10px; min-height: 22px; font-weight: 700;
}
.pb-nudge strong { color: var(--amber); }

/* Question box */
.q-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 28px 20px; text-align: center;
  margin-bottom: 16px; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.q-text {
  font-weight: 900; font-size: 2.8rem;
  letter-spacing: -0.5px;
  white-space: pre-line; line-height: 1.25;
  color: var(--text);
}
/* Fraction question display */
.ef-frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 3px; }
.ef-frac .ef-num { font-size:0.82em; line-height:1.05; }
.ef-frac .ef-line { width:100%; min-width:1.4em; height:2px; background:currentColor; margin:1px 0; border-radius:1px; }
.ef-frac .ef-den { font-size:0.82em; line-height:1.05; }
.q-frac {
  display: inline-flex; flex-direction: column;
  align-items: center; line-height: 1;
}
.q-frac .fnum { font-size: 2.2rem; font-weight: 900; }
.q-frac .fline { width: 100%; height: 4px; background: var(--text); border-radius: 2px; margin: 4px 0; }
.q-frac .fden { font-size: 2.2rem; font-weight: 900; }
.q-expr { font-size: 2rem; font-weight: 900; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── ANSWER INPUTS ── */

/* Standard number input */
.ans-wrap { text-align: center; margin-bottom: 14px; }
.ans-input {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 2rem; text-align: center;
  padding: 11px 18px; width: 180px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  box-shadow: var(--shadow);
}
.ans-input::-webkit-outer-spin-button,
.ans-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ans-input:focus { border-color: var(--accent); background: #fff; }
.ans-input.ok  { border-color: var(--green); background: var(--green-bg); }
.ans-input.bad { border-color: var(--red);   background: var(--red-bg); }

/* Desktop power buttons (v33) — insert correct superscript notation */
.pow-btn {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.1rem; line-height: 1;
  padding: 8px 12px; min-width: 48px; cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s, background .15s, transform .05s;
}
.pow-btn:hover  { border-color: var(--accent); }
.pow-btn:active { transform: translateY(1px); }

/* Factorising scaffold (v40) — rendered brackets around typed binomial boxes */
.factor-row {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: nowrap;
}
.factor-br {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 2.4rem; color: var(--text); line-height: 1;
}
.factor-box {
  width: 110px; font-size: 1.6rem; padding: 9px 10px;
}

/* Gap-fill scaffold (v77) — rendered rule text around numeric answer boxes */
.gap-row {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; flex-wrap: wrap; row-gap: 10px;
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.5rem; color: var(--text); line-height: 1.2;
}
.gap-row .gap-lit { white-space: pre; }
.gap-box {
  width: 84px; font-size: 1.4rem; padding: 8px 6px; text-align: center;
}
.gap-row sub, .gap-row sup { font-size: 0.62em; font-weight: 900; }
/* v78: five-box templates (write the first five terms) need narrower boxes so the
   whole row still fits a phone without wrapping mid-answer. */
.gap-row.gap-many { font-size: 1.15rem; gap: 3px; }
.gap-row.gap-many .gap-box { width: 56px; font-size: 1.05rem; padding: 8px 3px; }
/* v78 (Laura): a literal that is nothing but a <sup> is an EXPONENT on the box
   before it. The row is a flex box with align-items:center, so a superscript
   sitting in its own flex item was being vertically centred against a 40px-tall
   answer box — it read as "× ▢ + n − 1" rather than "× ▢ⁿ⁻¹". Pin it to the top
   of the row and pull it against the box so it reads as a power. */
.gap-row .gap-pow {
  align-self: flex-start; margin-left: -2px; padding-top: 2px;
  font-size: 0.62em; font-weight: 900; white-space: pre;
}
.gap-row .gap-pow sup { font-size: 1em; vertical-align: baseline; }

/* Plot-the-points (v78.2) — every lattice point carries an invisible tap target.
   r = 10 against a 22px grid spacing, so targets never overlap and a tap is
   never ambiguous, while still clearing the ~24px minimum touch size. */
.cg-hit { fill: transparent; cursor: pointer; }
.cg-hit:active { fill: var(--accent); fill-opacity: 0.18; }
.tov-table { border-collapse: collapse; margin: 10px auto; font-weight: 900; }
.tov-table th, .tov-table td {
  border: 2px solid var(--border); padding: 5px 11px; text-align: center;
  font-size: 1.05rem; min-width: 34px;
}
.tov-table th { background: var(--border); color: var(--text); }
/* Timetable (v78.3) — a stop per row, a service per column. */
.tt-table { border-collapse: collapse; margin: 10px auto; font-weight: 800; }
.tt-table th, .tt-table td {
  border: 1px solid var(--border); padding: var(--qtblpad, 4px 7px); text-align: center;
  font-size: var(--qtbl, 0.86rem); white-space: nowrap;
}
.tt-table th { background: var(--border); color: var(--text); font-weight: 900; }
.tt-table td.tt-stop { text-align: left; font-weight: 900; }
.tt-table td.tt-hi { background: var(--accent); color: #fff; }

/* Data Analysis tables (v84) — frequency tables and stem-and-leaf plots.
   Sizes read the same --qtbl / --qtblpad variables as the timetable, so they
   stay phone-sized on a phone and scale up on a desktop (see v83). */
.da-table { border-collapse: collapse; margin: 12px auto 0; font-weight: 800; }
.da-table th, .da-table td {
  border: 1px solid var(--border); padding: var(--qtblpad, 5px 12px); text-align: center;
  font-size: var(--qtbl, 0.9rem); white-space: nowrap;
}
.da-table th { background: var(--border); color: var(--text); font-weight: 900; }
.da-table td.da-lbl { text-align: left; font-weight: 900; }
.da-stem td.da-stem-st { font-weight: 900; color: var(--accent); }
.da-stem td.da-leaf { text-align: left; letter-spacing: 2px; min-width: 120px; }
.da-key { font-size: var(--qtbl, 0.82rem); color: var(--muted); font-weight: 800; margin-top: 8px; text-align: center; }

/* Multi-select (tick every set that applies) — v77 */
.ms-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; width: 100%; max-width: 420px;
}
.ms-btn {
  padding: 12px 10px; font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1rem; border: 2px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: var(--r-sm); cursor: pointer;
  touch-action: manipulation; text-align: center;
}
.ms-btn.sel { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.ms-btn.ok  { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.ms-btn.bad { border-color: var(--red);   background: var(--red-bg);   color: var(--red); }
.ms-btn .ms-tick { font-size: 1.05rem; margin-right: 4px; }

/* Stacked fraction input */
.frac-input-wrap {
  display: none; /* toggled by JS */
  flex-direction: column; align-items: center; gap: 0;
  margin-bottom: 14px;
}
.frac-input-wrap.visible { display: flex; }
.frac-box {
  display: flex; flex-direction: column; align-items: center;
}
.frac-hint { font-size: 0.72rem; font-weight: 800; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.frac-num-input {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.8rem; text-align: center;
  width: 130px; padding: 10px 8px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  box-shadow: var(--shadow);
}
.frac-num-input::-webkit-outer-spin-button,
.frac-num-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.frac-num-input:focus { border-color: var(--accent); background: #fff; z-index: 1; }
.frac-line-bar {
  width: 130px; height: 5px;
  background: var(--text); z-index: 2; position: relative;
}
.frac-den-input {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.8rem; text-align: center;
  width: 130px; padding: 10px 8px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  border-top: none;
  box-shadow: var(--shadow);
}
.frac-den-input::-webkit-outer-spin-button,
.frac-den-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.frac-den-input:focus { border-color: var(--accent); background: #fff; z-index: 1; }
.frac-input-wrap.ok  .frac-num-input,
.frac-input-wrap.ok  .frac-den-input { border-color: var(--green); background: var(--green-bg); }
.frac-input-wrap.bad .frac-num-input,
.frac-input-wrap.bad .frac-den-input { border-color: var(--red);   background: var(--red-bg); }
/* ── RATIO INPUT (v22) — two number boxes separated by a colon ── */
.ratio-input-wrap {
  display: none;
  align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px;
}
.ratio-input-wrap.visible { display: flex; }
.ratio-input {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.8rem; text-align: center;
  width: 110px; padding: 10px 8px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  box-shadow: var(--shadow);
}
.ratio-input::-webkit-outer-spin-button,
.ratio-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ratio-input:focus { border-color: var(--accent); background: #fff; }
.ratio-colon {
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 2.4rem; color: var(--text);
  padding-bottom: 4px;
}
.ratio-input-wrap.ok  .ratio-input { border-color: var(--green); background: var(--green-bg); }
.ratio-input-wrap.bad .ratio-input { border-color: var(--red);   background: var(--red-bg); }
/* Hint label above fraction input for algebraic */
.frac-alg-label {
  font-size: 0.78rem; font-weight: 800; color: var(--accent);
  margin-bottom: 6px; text-align: center;
}

/* ── EQUATIONS — inline "x =" prefix beside the active answer box ──
   Only one box ever shows (whole-number box OR fraction box). The prefix
   is hidden by default and revealed only when its wrap carries .eq-mode. */
.eq-prefix {
  display: none;
  font-family: 'Times New Roman', Times, serif; font-style: italic;
  font-weight: 700; font-size: 1.9rem; color: var(--text);
}
.ans-wrap.eq-mode { display: flex; align-items: center; justify-content: center; gap: 8px; }
.frac-input-wrap.eq-mode { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.eq-mode .eq-prefix { display: inline; }
.eq-mode .frac-alg-label { display: none; }

/* ── MULTIPLE CHOICE (v37) — tap-to-answer, used by exact-value trig ── */
.choice-wrap { display: none; margin-bottom: 14px; }
.choice-wrap.visible { display: block; }
.choice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 360px; margin: 0 auto;
}
/* v57 (Laura): every button is the SAME fixed size regardless of label length —
   the text shrinks and wraps (max 2 lines) rather than the box growing. Kept 2×2
   on every device so the spatial layout is identical phone and desktop. */
.choice-btn {
  background: var(--surface); border: 3px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.15rem; line-height: 1.15;
  padding: 8px 8px; height: 74px; min-height: 74px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .15s, background .15s, transform .1s;
}
/* v69: long options (expanded form w/ stacked fractions) need a full-width,
   auto-height single column instead of the 74px 2-up trig grid. */
.choice-grid.wide { grid-template-columns: 1fr; max-width: 440px; }
.choice-grid.wide .choice-btn { height: auto; min-height: 62px; font-size: 1.05rem; padding: 12px 14px; }
.choice-btn:hover:not(:disabled) { border-color: var(--accent); }
.choice-btn:active:not(:disabled) { transform: scale(0.98); }
.choice-btn.ok  { border-color: var(--green); background: var(--green-bg); }
.choice-btn.bad { border-color: var(--red);   background: var(--red-bg); }
.choice-btn:disabled { cursor: default; }

/* ── TAP-TO-ARRANGE (v71) — order values by tapping them into place ── */
.arrange-wrap { display: none; margin-bottom: 14px; }
.arrange-wrap.visible { display: block; }
.arrange-instr { font-size: 0.9rem; font-weight: 800; color: var(--muted); text-align: center; margin-bottom: 10px; }
.arrange-answer {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: stretch;
  min-height: 66px; padding: 8px; margin: 0 auto 12px; max-width: 440px;
  border: 2px dashed var(--border); border-radius: var(--r-sm); background: var(--surface2);
}
.arrange-pool {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch;
  margin: 0 auto 12px; max-width: 440px;
}
.arrange-tile {
  position: relative; background: var(--surface); border: 3px solid var(--border);
  border-radius: var(--r-sm); color: var(--text); font-family: 'Nunito', sans-serif;
  font-weight: 900; font-size: 1.3rem; min-width: 58px; min-height: 50px; padding: 8px 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: border-color .15s, background .15s, transform .1s;
}
.arrange-tile:hover:not(:disabled) { border-color: var(--accent); }
.arrange-tile:active:not(:disabled) { transform: scale(0.97); }
.arrange-tile:disabled { cursor: default; }
.arrange-tile .arrange-seq {
  position: absolute; top: -8px; left: -8px; background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 900; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.arrange-answer .arrange-empty { color: var(--muted); font-weight: 800; font-size: 0.9rem; align-self: center; }
.arrange-tile.ok  { border-color: var(--green); background: var(--green-bg); }
.arrange-tile.bad { border-color: var(--red);   background: var(--red-bg); }
.arrange-ctrls { display: flex; gap: 10px; justify-content: center; max-width: 440px; margin: 0 auto; }
.arrange-ctrls button { flex: 1; padding: 12px; font-size: 1rem; }
.arrange-check:disabled { opacity: 0.5; cursor: default; }
/* ── Convert FDP table (v74) ── */
.fdp-table { border-collapse: collapse; margin: 0 auto; font-family: 'Nunito', sans-serif; width: 100%; max-width: 380px; table-layout: fixed; }
.fdp-table th { background: var(--accent); color: #fff; font-weight: 900; font-size: 0.8rem; padding: 7px 4px; border: 1px solid var(--accent); width: 33.33%; }
.fdp-table td { border: 1px solid var(--border); padding: 7px 3px; text-align: center; height: 56px; vertical-align: middle; overflow: hidden; }
.fdp-given { font-weight: 900; font-size: 1.2rem; color: var(--text); }
.fdp-inwrap { display: inline-flex; align-items: center; gap: 2px; justify-content: center; max-width: 100%; }
.fdp-unit { font-weight: 900; font-size: 1rem; color: var(--muted); flex: 0 0 auto; }
/* box-sizing:border-box so the fixed width INCLUDES padding+border and never spills into
   the next column (the base .ans-input is content-box + 180px, which we override here). */
.fdp-input { box-sizing: border-box; width: 68px; max-width: 100%; text-align: center; font-size: 1.1rem; font-weight: 900; padding: 8px 3px; }
.fdp-fracwrap { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.fdp-fracline { width: 38px; height: 3px; background: var(--text); border-radius: 2px; }
.fdp-frac { box-sizing: border-box; width: 46px; max-width: 100%; text-align: center; font-size: 1rem; font-weight: 900; padding: 6px 2px; }
/* Narrow phones: shrink everything so the 3 columns always fit without horizontal scroll. */
@media (max-width: 430px) {
  .fdp-table th { font-size: 0.66rem; padding: 6px 1px; }
  .fdp-table td { padding: 6px 1px; height: 52px; }
  .fdp-given { font-size: 1.02rem; }
  .fdp-input { width: 50px; font-size: 1rem; padding: 8px 1px; }
  .fdp-frac  { width: 38px; font-size: 0.95rem; padding: 6px 1px; }
  .fdp-fracline { width: 30px; }
  .fdp-unit { font-size: 0.8rem; }
}
/* Review copy of the table (results screen) — compact, with filled boxes highlighted. */
.fdp-review { margin: 6px auto 4px; }
.fdp-review td { height: auto; padding: 6px 4px; font-size: 1rem; }
.fdp-review td.fdp-fill { background: var(--surface2); color: var(--accent); font-weight: 900; }
.fdp-review td.fdp-given-cell { color: var(--muted); }
/* ── Profit / Loss toggle (v74) ── */
.pl-btn { flex: 0 0 auto; padding: 12px 22px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.05rem; border: 2px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-sm); cursor: pointer; }
.pl-btn.sel { border-color: var(--accent); background: var(--accent); color: #fff; }
.pl-btn.ok  { border-color: var(--green); background: var(--green); color: #fff; }
.pl-btn.bad { border-color: var(--red);   background: var(--red);   color: #fff; }
/* compact stacked fraction for buttons / radian angles */
.t-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; vertical-align: middle; }
.t-frac .tn { font-size: 1.2rem; font-weight: 900; }
.t-frac .tb { width: 100%; min-width: 20px; height: 3px; background: currentColor; margin: 2px 0; border-radius: 2px; }
.t-frac .td { font-size: 1.2rem; font-weight: 900; }

/* Mixed number input: whole + fraction */
.mixed-input-wrap {
  display: none;
  align-items: center; gap: 14px;
  justify-content: center; margin-bottom: 14px;
}
.mixed-input-wrap.visible { display: flex; }
.whole-input {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.8rem; text-align: center;
  width: 80px; padding: 10px 6px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  box-shadow: var(--shadow);
  align-self: center;
}
.whole-input::-webkit-outer-spin-button,
.whole-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.whole-input:focus { border-color: var(--accent); background: #fff; }
.whole-label { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-align: center; margin-top: 4px; text-transform: uppercase; }
.mixed-frac-col { display: flex; flex-direction: column; align-items: center; }

/* ── ACCURACY & FEEDBACK ── */
.acc-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.acc-label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; font-weight: 700; }
.acc-track { flex: 1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.acc-fill  { height: 100%; background: var(--green); border-radius: 3px; transition: width .3s, background .3s; }
.acc-pct   { font-size: 0.78rem; font-weight: 800; min-width: 40px; text-align: right; color: var(--text); }

.feedback {
  text-align: center; min-height: 28px;
  font-weight: 800; font-size: 0.95rem;
  color: var(--red);
}

.ctrl-row { display: flex; gap: 10px; margin-top: 14px; }
.ctrl-row .btn-primary { flex: 2; }
.ctrl-row .btn-ghost   { flex: 1; padding: 13px 8px; width: auto; }

/* ── RESULTS ── */
.res-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 28px 24px; text-align: center;
  margin: 12px 0 14px;
}
.res-score {
  font-weight: 900; font-size: 4.5rem;
  letter-spacing: -3px; line-height: 1;
  color: var(--accent);
}
.res-label { font-size: 0.82rem; color: var(--muted); margin-top: 6px; margin-bottom: 22px; font-weight: 700; }
.res-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 16px;
}
/* v49: scored sessions show a 4th box (Score). Drop to 2×2 on narrow phones. */
.res-stats.four { grid-template-columns: repeat(4, 1fr); }

/* v49: prominent animal-band hero (scored sessions lead with this) */
.res-band-hero { margin: 4px 0 18px; }
.res-band-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 1.9rem; line-height: 1;
  padding: 12px 24px; border-radius: 999px;
  box-shadow: var(--shadow);
}
.res-band-chip .ac-emoji { font-size: 1.8rem; }
.res-band-hero .fluent-badge,
.res-band-hero .res-newband { font-size: 0.8rem; vertical-align: middle; margin-left: 8px; }
.res-newband {
  display: inline-block; font-weight: 800;
  color: var(--green); background: var(--green-bg);
  border: 1px solid #86efac; border-radius: 999px; padding: 2px 9px;
}
.rbh-next { font-size: 0.98rem; font-weight: 800; color: var(--muted); margin-top: 14px; }
.rbh-next b { color: var(--text); }
.res-formula { font-size: 0.72rem; color: var(--muted); font-weight: 700; margin: -6px 0 14px; }
.res-stat {
  background: var(--surface2); border-radius: var(--r-sm);
  border: 1px solid var(--border);
  padding: 12px 6px;
}
.res-stat .val { font-weight: 900; font-size: 1.35rem; color: var(--text); }
.res-stat .key { font-size: 0.7rem; color: var(--muted); margin-top: 2px; font-weight: 700; }

.pb-banner {
  border-radius: var(--r-sm); padding: 11px 16px;
  font-weight: 800; font-size: 0.9rem; margin-bottom: 14px;
}
.pb-new   { background: var(--green-bg); color: var(--green); border: 1.5px solid #86efac; }
.pb-equal { background: var(--amber-bg); color: var(--amber); border: 1.5px solid #fcd34d; }
.pb-below { background: var(--surface2); color: var(--muted); border: 1.5px solid var(--border); }

.sparkline-wrap { margin-top: 6px; }
.sl-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.sparkline { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.sl-bar {
  flex: 1; background: var(--accent-bg);
  border: 1px solid rgba(67,56,202,0.2);
  border-radius: 3px 3px 0 0; min-height: 4px; position: relative;
}
.sl-bar.latest { background: var(--accent); border-color: var(--accent); }
.sl-val {
  position: absolute; top: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem; color: var(--muted); white-space: nowrap; font-weight: 700;
}
.sl-bar.latest .sl-val { color: var(--accent); font-weight: 800; }

/* ── v25: fluency verdict + missed-question review ── */
.res-verdict { font-size: 0.92rem; font-weight: 800; margin: 2px 0 16px; min-height: 18px; line-height: 1.4; }
.res-verdict.fluent { color: var(--green); }
.res-verdict.near   { color: var(--amber); }
.res-verdict.method { color: var(--accent); }
.res-verdict .vt { font-size: 1.05rem; }
.fluent-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 800;
  color: var(--green); background: var(--green-bg);
  border: 1px solid #86efac; border-radius: 999px;
  padding: 1px 8px; margin-left: 5px; vertical-align: middle;
}
/* ── Sandy Fast Facts animal band chips (brand pyramid colours) ──
   Display-only. The band is read from the stored Fluency Score (CPM × acc²)
   against per-skill-per-level thresholds — see ANIMALS / animalForScore in JS. */
.animal-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.68rem; font-weight: 800; white-space: nowrap;
  border-radius: 999px; padding: 2px 9px; vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.12);
}
.animal-chip .ac-emoji { font-size: 0.8rem; line-height: 1; }
/* Results-screen larger band pill */
.animal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 900; font-size: 1.05rem;
  border-radius: 999px; padding: 4px 14px;
  border: 1px solid rgba(0,0,0,0.12);
}
.animal-pill .ac-emoji { font-size: 1.25rem; line-height: 1; }
.review-hdr { font-weight: 900; font-size: 1.05rem; margin: 18px 4px 10px; text-align: left; }
.rv-item {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 9px; text-align: left;
}
.rv-q { margin-bottom: 7px; color: var(--text); }
.rv-q, .rv-q * { font-size: 1.1rem !important; line-height: 1.35 !important; font-weight: 800 !important; text-align: left !important; }
.rv-q sup { font-size: 0.7em !important; }
.rv-ans { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.92rem; font-weight: 800; margin-bottom: 2px; }
.rv-you { color: var(--red); }
.rv-correct { color: var(--green); }
.rv-how {
  background: none; border: none; color: var(--accent);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.86rem;
  padding: 5px 0 2px; cursor: pointer;
}
.rv-work {
  font-size: 0.92rem; line-height: 1.55; color: var(--text);
  background: var(--accent-bg); border-radius: var(--r-sm);
  padding: 9px 12px; margin-top: 5px;
}
.rv-work b { color: var(--accent); }
.wk-note { display: block; margin-top: 5px; font-size: 0.82rem; font-style: italic; color: var(--muted); }
.lv-target { display: block; grid-column: 2; font-size: 0.78rem; font-weight: 800; color: var(--muted); margin-top: 8px; }

/* ── v27: habit card ── */
.habit-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
.hb-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-streak { font-weight: 800; font-size: 0.95rem; color: var(--text); }
.hb-streak b { color: var(--amber); }
.hb-goal { font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.hb-goal.done { color: var(--green); }
.hb-bar { height: 8px; background: var(--surface2); border-radius: 99px; margin: 10px 0 6px; overflow: hidden; }
.hb-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.hb-sub { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.hb-dots { display: flex; gap: 6px; margin-top: 10px; }
.hb-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface2); border: 1.5px solid var(--border); }
.hb-dot.on { background: var(--green); border-color: var(--green); }
.hb-dot.today { box-shadow: 0 0 0 2px var(--accent); }

/* ── v27: Daily Mix ── */
.mix-btn { width: 100%; background: var(--accent-bg); color: var(--accent); border: 2px solid var(--accent); border-radius: var(--r); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.05rem; padding: 14px; cursor: pointer; margin-bottom: 18px; transition: transform .15s; }
.mix-btn span { font-weight: 700; font-size: 0.85rem; opacity: 0.85; }
.mix-btn:hover { transform: scale(0.99); }
.mix-intro { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-bottom: 14px; line-height: 1.45; }
.mix-prog { display: inline-block; font-weight: 800; color: var(--accent); margin-left: 4px; }
.mix-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 10px; }
.mix-card.done { opacity: 0.7; border-color: var(--green); }
.mix-name { font-weight: 800; font-size: 0.98rem; color: var(--text); }
.mix-meta { font-size: 0.76rem; color: var(--muted); font-weight: 700; margin-top: 2px; }
.mix-go { background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.9rem; padding: 9px 18px; cursor: pointer; flex-shrink: 0; }
.mix-card.done .mix-go { background: var(--surface2); color: var(--muted); }

/* ── v27: backup / restore ── */
.backup-note { font-size: 0.88rem; color: var(--muted); font-weight: 600; line-height: 1.5; margin-bottom: 16px; }
.backup-block { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 14px; }
.backup-label { font-weight: 800; font-size: 0.85rem; margin-bottom: 8px; color: var(--text); }
.backup-area { width: 100%; font-family: monospace; font-size: 0.78rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 8px; background: var(--surface2); color: var(--text); resize: vertical; }
.backup-msg { font-size: 0.85rem; font-weight: 800; min-height: 18px; text-align: center; }
.backup-msg.ok { color: var(--green); }
.backup-msg.bad { color: var(--red); }

/* ── LEADERBOARD ── */
.lb-hdr { padding: 16px 0 20px; display: flex; align-items: center; gap: 12px; }
.lb-hdr h2 { font-size: 1.3rem; font-weight: 900; }
.lb-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.lb-tab {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 20px; color: var(--muted);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.8rem;
  padding: 6px 14px; cursor: pointer; box-shadow: var(--shadow);
  transition: all .18s;
}
.lb-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th {
  text-align: left; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: 0 8px 10px;
  font-weight: 800;
}
.lb-table td {
  padding: 10px 8px; font-size: 0.87rem; font-weight: 700;
  border-top: 1px solid var(--border);
}
.lb-table td:last-child {
  text-align: right; font-weight: 900;
  font-size: 1rem; color: var(--accent);
  white-space: nowrap;
}
.lb-table td:nth-child(3) { white-space: nowrap; }
.lb-empty { text-align: center; color: var(--muted); padding: 36px 12px; font-size: 0.88rem; font-weight: 700; }

/* ── UTILITY ── */
.gap { height: 14px; }
.hide { display: none !important; }
.text-center { text-align: center; }

/* ── CHALLENGE / FLUENCY MODE badges ── */
.ob-badge.challenge { background: var(--accent-bg); color: var(--accent); }
.ob-badge.fluency   { background: var(--amber-bg);  color: var(--amber); }

/* ── CLASS CODE chip on home ── */
.class-code-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-bg); color: var(--accent);
  border: 1.5px solid rgba(67,56,202,0.2);
  border-radius: 20px; padding: 4px 12px;
  font-size: 0.78rem; font-weight: 800;
  margin-top: 2px;
}

/* ── TODAY / SESSION HISTORY SCREEN ── */
.today-header {
  padding: 16px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.today-header h2 { font-size: 1.25rem; font-weight: 900; }
.session-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.session-row {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.session-row.is-pb { border-color: var(--amber); background: var(--amber-bg); }
.session-skill { font-weight: 900; font-size: 0.95rem; color: var(--text); }
.session-meta { font-size: 0.75rem; color: var(--muted); font-weight: 700; margin-top: 2px; }
.session-score-col { text-align: right; flex-shrink: 0; }
.session-score { font-weight: 900; font-size: 1.4rem; color: var(--accent); }
.session-pb-tag {
  font-size: 0.65rem; font-weight: 800;
  color: var(--amber); display: block; margin-top: 1px;
}
.session-sent-tag {
  font-size: 0.65rem; font-weight: 800;
  color: var(--green); display: block; margin-top: 1px;
}

/* ── SHARE PANEL ── */
.share-card {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--r); box-shadow: var(--shadow-md);
  padding: 22px 20px; margin-bottom: 16px;
}
.share-card h3 { font-size: 1.05rem; font-weight: 900; margin-bottom: 6px; }
.share-card p { font-size: 0.85rem; color: var(--muted); font-weight: 700; margin-bottom: 16px; }
.share-preview {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 14px;
  font-family: monospace; font-size: 0.78rem;
  color: var(--text); white-space: pre-wrap;
  margin-bottom: 14px; line-height: 1.6;
}
.btn-share {
  width: 100%; background: #0078d4; border: none;
  border-radius: var(--r); color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  padding: 14px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,120,212,0.3);
  transition: opacity .18s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-share:hover { opacity: 0.9; }
.btn-copy {
  width: 100%; background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r); color: var(--muted);
  font-family: 'Nunito', sans-serif;
  font-weight: 800; font-size: 0.92rem;
  padding: 13px; cursor: pointer; margin-top: 8px;
  transition: border-color .18s, color .18s;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.share-success {
  background: var(--green-bg); color: var(--green);
  border: 1.5px solid #86efac; border-radius: var(--r-sm);
  padding: 12px 16px; font-weight: 800; font-size: 0.9rem;
  text-align: center; margin-top: 10px; display: none;
}
.nothing-to-share {
  text-align: center; color: var(--muted);
  padding: 32px 16px; font-size: 0.88rem; font-weight: 700;
}



/* ── INDEX ANSWER INPUT LAYOUT ── */
/* ── INDEX INPUT BOXES ── */
/* Coefficient box — medium width, same style as ans-input but smaller */
.idx-input {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.4rem; text-align: center;
  padding: 7px 6px;
  width: 80px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  box-shadow: var(--shadow);
}
.idx-input::-webkit-outer-spin-button,
.idx-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.idx-input:focus { border-color: var(--accent); background: #fff; }
.idx-input.wide { width: 110px; }
.idx-input.ok   { border-color: var(--green); background: var(--green-bg); }
.idx-input.bad  { border-color: var(--red);   background: var(--red-bg); }

/* Exponent box — smaller, accent-coloured border to signal "this is a power" */
.idx-exp-input {
  background: var(--surface);
  border: 3px solid rgba(67,56,202,0.35);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: 1.1rem; text-align: center;
  padding: 5px 4px;
  width: 54px; outline: none;
  transition: border-color .18s, background .18s;
  -moz-appearance: textfield;
  box-shadow: var(--shadow);
}
.idx-exp-input::-webkit-outer-spin-button,
.idx-exp-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.idx-exp-input:focus { border-color: var(--accent); background: var(--accent-bg); }
.idx-exp-input.ok  { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.idx-exp-input.bad { border-color: var(--red);   background: var(--red-bg);   color: var(--red);   }


/* Label above an input field */
.idx-field-lbl {
  display: block;
  font-size: 0.68rem; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 3px; text-align: center;
}

/* Generic field group: label on top, input below */
.idx-field-group {
  display: flex; flex-direction: column; align-items: center;
}

/* Variable + superscript power box — the key layout piece.
   The variable letter sits at the bottom baseline.
   The superscript box sits at the top, shifted right. */
.idx-var-group {
  display: inline-flex;
  align-items: flex-end;   /* baseline-align the variable letter */
  position: relative;
}

/* The serif italic variable letter (x, y) */
.idx-var-letter {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--text);
  line-height: 1;
  /* sits at the bottom of the group */
  align-self: flex-end;
  padding-bottom: 4px;
}

/* The power input — floats to top-right of the variable */
.idx-superscript-box {
  display: flex; flex-direction: column; align-items: center;
  /* pull it up so it sits like a true exponent */
  margin-bottom: 22px;  /* pushes the box up relative to the variable */
  margin-left: 1px;
}

/* Also update .idx-var inside question display to be serif italic */

/* ── INDEX QUESTION DISPLAY ── */
.idx-q-display {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  line-height: 1.3;
  color: var(--text);
}
/* base+exponent pair — keeps them together, exponent floats top-right */
.idx-base-exp {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}
.idx-base {
  align-self: flex-end;
  padding-bottom: 2px;
}
.idx-sup {
  font-size: 0.58em;
  color: var(--accent);
  margin-top: -2px;
  font-weight: 900;
}
/* Variable letters — Times New Roman italic for mathematical x, y */
.idx-var {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--text);
}


/* ══════════════════════════════════════════════
   MOBILE KEYPAD
══════════════════════════════════════════════ */
#mobileKeypad {
  padding: 0 0 8px;
}
.kb-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  justify-content: center;
}
.kb-key {
  flex: 1;
  border: none;
  border-radius: var(--r-sm);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  padding: 16px 8px;
  cursor: pointer;
  transition: transform .1s, opacity .1s;
  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.kb-key:active {
  transform: translateY(2px);
  box-shadow: none;
}
/* Number keys — white */
.kb-num {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
}
/* Symbol keys (−, .) — light accent */
.kb-sym {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1.5px solid rgba(67,56,202,0.2);
  font-size: 1.4rem;
}
/* Inactive state — always visible but greyed out */
.kb-sym-inactive {
  background: var(--surface2) !important;
  color: var(--border) !important;
  border-color: var(--border) !important;
  cursor: default !important;
  box-shadow: none !important;
}
.kb-next-inactive {
  background: var(--surface2) !important;
  color: var(--border) !important;
  border-color: var(--border) !important;
  cursor: default !important;
  box-shadow: none !important;
}
/* Delete key */
.kb-del {
  background: var(--surface2);
  color: var(--muted);
  border: 1.5px solid var(--border);
  font-size: 1.1rem;
}
/* Next box key */
.kb-next {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1.5px solid rgba(67,56,202,0.2);
  font-size: 0.95rem;
}
/* 0 key — wider */
.kb-zero {
  flex: 2;
}
/* Submit / Enter key — primary colour */
.kb-submit {
  flex: 2;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  box-shadow: 0 3px 0 rgba(67,56,202,0.4);
}
.kb-submit:active { box-shadow: none; }


/* Highlight the currently active input field on mobile (kbTarget) */
.kb-focused {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
  outline: 3px solid rgba(67,56,202,0.15);
}

/* ── Small phones ── */
@media (max-width: 380px) {
  .q-text { font-size: 2.3rem; }
  .res-score { font-size: 3.2rem; }
  .cat-grid { grid-template-columns: 1fr; }
}

/* v49: 4-box scored stats wrap to 2×2 on narrow phones; band hero scales down */
@media (max-width: 480px) {
  .res-stats.four { grid-template-columns: repeat(2, 1fr); }
  .res-band-chip { font-size: 1.6rem; padding: 10px 20px; }
  .res-band-chip .ac-emoji { font-size: 1.5rem; }
}

/* v49: typed algebra answers can be long (e.g. (x + 3)(x − 5)). Let the field
   fill the available width and use a smaller font so the whole answer shows
   instead of scrolling to the end. The keypad display strip (below) also
   left-aligns and wraps in these modes, so the full answer is always visible. */
#algTypeWrap > div { width: 100%; }
#algTypeInput {
  flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%;
  text-align: center; font-size: 1.5rem;
}
/* Keypad display strip: wrap + left-align the whole typed answer for algebra. */
#kbDisplay.kb-disp-wrap { text-align: left; }
#kbDisplay.kb-disp-wrap #kbDisplayText {
  overflow-wrap: anywhere; word-break: break-word; letter-spacing: 0;
}

/* ── iOS ZOOM FIX: iOS Safari zooms in when any input has font-size < 16px.
   Force all interactive inputs to 16px minimum on mobile so the viewport
   never zooms when a student taps a field. ── */
@media (max-width: 899px) {
  input, textarea, select,
  .ans-input, .frac-num-input, .frac-den-input,
  .whole-input, .mixed-num-input, .mixed-den-input,
  .idx-input, .idx-exp-input,
  .txt-input {
    font-size: 16px !important;
    /* Prevent browser from resizing the viewport on focus */
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE GAME LAYOUT  (< 768px)
   Goal: entire game visible above the pinned keypad.
   Keypad height ≈ 260px. Available above ≈ viewport - 260px.
══════════════════════════════════════════════════ */

/* ── STREAK PILL ── */
#streakPill { border-color: var(--amber); }
#streakPill b { color: var(--amber); }
#streakPill.hot { background: var(--amber-bg); animation: streakPop .25s ease; }
@keyframes streakPop {
  0%  { transform: scale(1); }
  50% { transform: scale(1.18); }
  100%{ transform: scale(1); }
}


/* ── ONBOARDING ── */
.ob-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); transition: background .25s, transform .25s;
}
.ob-dot.active { background: var(--accent); transform: scale(1.25); }
.ob-replay-btn { font-size:0.7rem;font-weight:800;color:var(--muted);cursor:pointer;text-decoration:underline; }
.ob-replay-btn:hover { color:var(--accent); }

.ob-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  min-height: 220px;
}

.ob-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 0;
}
.ob-row + .ob-row { border-top: 1px solid var(--border); }

.ob-badge {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0; font-weight: 900;
}
.ob-badge.fluency { background: var(--accent-bg); color: var(--accent); }
.ob-badge.practice { background: var(--green-bg); color: var(--green); }
.ob-badge.score { background: var(--amber-bg); color: var(--amber); }
.ob-badge.pb { background: #fce7f3; color: #9d174d; }
.ob-badge.spark { background: var(--surface2); color: var(--muted); }

.ob-row-text .ob-row-title {
  font-weight: 900; font-size: 0.95rem; color: var(--text); margin-bottom: 3px;
}
.ob-row-text .ob-row-desc {
  font-size: 0.82rem; color: var(--muted); font-weight: 700; line-height: 1.5;
}

@media (max-width: 899px) {

  /* ── Body: add bottom padding so fixed keypad doesn't cover content ── */
  body {
    padding-bottom: 280px;   /* matches keypad height + breathing room */
  }

  /* ── Pin keypad to bottom of viewport ── */
  #mobileKeypad {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg);
    border-top: 2px solid var(--border);
    padding: 10px 12px 16px;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    margin: 0;   /* override any inherited margin */
  }

  /* ── Shrink keypad display strip ── */
  #kbDisplay {
    padding: 6px 12px !important;
    font-size: 1.2rem !important;
    min-height: 36px !important;
    margin-bottom: 8px !important;
  }

  /* ── Key sizing: slightly smaller so all 4 rows fit ── */
  .kb-key {
    padding: 12px 4px !important;
    font-size: 1.15rem !important;
  }
  .kb-row { gap: 6px !important; margin-bottom: 6px !important; }

  /* ── Game stats bar: tighten up ── */
  .game-stats { padding: 8px 0 6px; }
  .stat-pill { padding: 5px 10px; font-size: 0.85rem; }

  /* ── Progress bar: slimmer ── */
  .prog-wrap { height: 6px; margin-bottom: 8px; }

  /* ── PB nudge: smaller ── */
  .pb-nudge { font-size: 0.75rem; margin-bottom: 6px; min-height: 16px; }

  /* ── Question box: compact AND pinned to the top of the viewport (v48) so the
     question is ALWAYS visible above the fixed keypad, however tall the keypad
     gets in algebra. z-index sits below the keypad (z-index 100). It's sized to
     content (no max-height) so a long algebra question wraps instead of clipping,
     and its surface background is opaque so content scrolls cleanly underneath. ── */
  .q-box {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 12px 12px;
    min-height: 64px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .q-text { font-size: 2rem; }

  /* ── v86 (Laura): TALL QUESTIONS vs THE KEYPAD ──
     The question box is sticky at the top and sized to its content. On a
     coordinate-plane question that content is a ~300px grid, so with the
     keypad pinned at the bottom the answer box was squeezed into — or right
     under — the gap between them, and the student could not see what they had
     typed. While the keypad is open the diagram is capped at 34vh and the whole
     card at 46vh, which always leaves a clear band for the answer. The cap is
     only applied WITH the keypad open (body.kb-open), so tap-to-answer
     questions — plotPts, multiple choice — keep the full-size grid they need. */
  body.kb-open #s-game #qBox svg { max-height: var(--qsvgcap, 30vh); width: 100%; height: auto; }
  body.kb-open #s-game .q-box    { max-height: var(--qcap, 40vh); overflow-y: auto; }

  /* ── v86 (Laura): rule / recurrence templates stay on ONE line ──
     A template that wrapped mid-expression ("aₙ = a₁ + (n − 1)" / "d") reads as
     two different things. The row no longer wraps; if it is still too wide for
     the phone, gapFitOneLine() scales it down to fit. */
  .gap-row { flex-wrap: nowrap; font-size: 1.2rem; gap: 3px; }
  .gap-row .gap-box { width: 62px; font-size: 1.1rem; padding: 8px 3px; }
  .gap-row.gap-many { font-size: 1.02rem; }
  .gap-row.gap-many .gap-box { width: 46px; font-size: 0.95rem; padding: 8px 2px; }

  /* ── Fraction input: smaller boxes ── */
  .frac-num-input,
  .frac-den-input {
    font-size: 1.4rem !important;
    width: 110px !important;
    padding: 8px 6px !important;
  }

  /* ── Standard answer input ── */
  .ans-input {
    font-size: 1.6rem;
    width: 150px;
    padding: 8px 12px;
  }
  .ans-wrap { margin-bottom: 8px; }
  /* v49: typed-algebra field fills the row and uses a legible size that still
     fits long answers. It's readonly on mobile (custom keypad), so the >16px
     size carries no focus-zoom risk; the !important beats the global 16px rule. */
  #algTypeInput { font-size: 1.35rem !important; width: 100% !important; padding: 8px 10px !important; }

  /* ── Index inputs ── */
  .idx-input { font-size: 1.2rem !important; width: 70px !important; padding: 6px 4px !important; }
  .idx-exp-input { font-size: 0.95rem !important; width: 46px !important; padding: 4px 3px !important; }
  .idx-var-letter { font-size: 1.8rem !important; }

  /* ── Accuracy row: compress ── */
  .acc-row { margin-bottom: 6px; }

  /* ── Feedback: smaller ── */
  .feedback { font-size: 0.82rem; min-height: 20px; }

  /* ── Control buttons: compress ── */
  .ctrl-row { margin-top: 8px; gap: 8px; }
  .btn-primary, .btn-ghost { padding: 10px; font-size: 0.88rem; }

  /* ── Today screen: share card needs clearance above fixed keypad ── */
  #s-today { padding-bottom: 20px; }

  /* ── Back button on game screen: shorten ── */
  #s-game .back-btn { padding: 8px 0 4px; font-size: 0.8rem; }

  /* ── Simplify notice: compact ── */
  .simplify-notice { padding: 6px 10px; font-size: 0.76rem; margin-bottom: 6px; }

  /* ── idx-q-display: smaller on mobile ── */
  .idx-q-display { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════════
   SHORT PHONES (v48) — the algebra keypad gains a 5th (symbol) row, so on
   shorter screens it needs to shed height to leave room for the pinned
   question + answer. These overrides only bite when vertical space is tight,
   so taller phones keep the comfortable sizing above. The JS clearance sync
   (syncKeypadClearance) still reserves exactly the keypad's measured height,
   so nothing overlaps regardless; this just keeps keys reachable on small
   devices. ══════════════════════════════════════════════════ */
@media (max-width: 899px) and (max-height: 760px) {
  #kbDisplay {
    padding: 4px 12px !important;
    font-size: 1.1rem !important;
    min-height: 30px !important;
    margin-bottom: 6px !important;
  }
  .kb-key {
    padding: 9px 4px !important;
    font-size: 1.05rem !important;
  }
  .kb-row { gap: 5px !important; margin-bottom: 5px !important; }
  .q-box { min-height: 52px; padding: 10px 12px; }
  .q-text { font-size: 1.8rem; }
  .game-stats { padding: 5px 0 4px; }
  .stat-pill { padding: 4px 9px; font-size: 0.8rem; }
}

/* ── v57 (Laura): DESKTOP FIT for multiple-choice geometry ──
   On a laptop the viewport is wide but short, so a full-height diagram card
   pushed the 2×2 answer grid below the fold. For choice questions only, keep
   the diagram compact so all four options stay on screen without scrolling.
   Scoped via #s-game.choice-active so number-input geometry is untouched. */
@media (min-width: 900px) {
  #s-game.choice-active #qBox svg {
    width: auto; height: auto; max-height: 200px; max-width: 100%;
  }
  #s-game.choice-active .q-box {
    padding-top: 16px; padding-bottom: 16px; min-height: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════
   v81 (Laura): "WHERE IS THE START BUTTON?"  — ALL WIDTHS
   Students kept asking, because on a 6-level skill (Translations,
   Reflections, Rotations, Simple Interest, Depreciation, 2D Shapes)
   the Start button sat below six stacked cards, off the bottom of
   the screen. Sizing the cards to fit helps (see the desktop block
   below) but can't guarantee it — a short laptop window, a large
   accessibility font, or a future 7th level puts it back off-screen.

   position: sticky is the guarantee: while the level list is longer
   than the window the button rides the bottom edge, and once the
   list fits it drops back into its normal place at the end. Nothing
   is permanently hidden underneath it, because at the foot of the
   page it settles into the flow.
══════════════════════════════════════════════════════════════════ */
#levelStartBtn {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  /* The 14px ring of page colour is a mask, not decoration: while the button
     floats it would otherwise have level cards showing through around its
     rounded corners. var(--bg) means it follows dark mode automatically. */
  box-shadow: 0 0 0 14px var(--bg), 0 10px 26px -8px rgba(0, 0, 0, 0.40);
}
/* Breathing room so a card never sits flush under the floating button. */
#s-levels .level-cards { margin-bottom: 18px; }
#s-levels { padding-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════════
   v80 (Laura): DESKTOP LAYOUT  (≥ 900px)
   The app was built phone-first at a fixed 520px column, which on a
   laptop left two thirds of the screen empty. This block is PURELY
   ADDITIVE and scoped to ≥900px — every phone/tablet layout below
   that width is byte-for-byte unchanged, so nothing that was tested
   on a phone can regress.

   Three ideas:
   1. The frame widens to 1080px, so browse screens get real columns.
   2. The game screen becomes two columns — question on the left,
      answering on the right — which also fixes the old laptop
      problem of a diagram pushing the answer boxes below the fold.
   3. Screens that are one column of reading (welcome, results,
      backup, mix, bests, today) stay centred and narrow. Stretching
      a results card to 1080px would look worse, not better.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  body { padding: 24px 28px 56px; }
  .app { max-width: 1080px; }

  /* ── Single-column reading screens stay centred ── */
  #s-welcome, #s-onboard, #s-results, #s-backup, #s-mix, #s-lb, #s-today {
    max-width: 620px;
    margin: 0 auto;
  }

  /* ── HOME ── */
  .home-header { padding: 34px 0 22px; }
  .greeting { font-size: 1.7rem; }
  .greeting-sub { font-size: 0.9rem; }

  /* Streak card and Daily Mix side by side — both are "what should I do
     today" prompts, so they belong on the same line rather than stacked. */
  .home-top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 18px;
  }
  .home-top .habit-card { margin-bottom: 0; }
  .home-top .mix-btn {
    margin-bottom: 0;
    font-size: 1.1rem;
  }

  /* A segmented control stretched to 1080px reads as three separate bars,
     so it keeps a sensible width and centres. */
  .sess-toggle { max-width: 640px; margin: 0 auto 26px; }
  .sess-toggle button { font-size: 0.95rem; padding: 14px 6px; }

  /* Three category cards per row: 15 categories read as a tidy 5×3 board
     instead of an eight-scroll list. */
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Footer links sit in a row instead of three full-width stacked bars. */
  .home-foot { display: flex; gap: 12px; align-items: stretch; }
  .home-foot .btn-ghost { flex: 1; margin: 0; }
  .home-foot > div { display: none; }   /* the 8px mobile spacers */

  /* ── SKILL + LEVEL PICKERS ── */
  .skill-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* v81: sized for the WORST case — the 6-level skills. auto-fill at 300px
     gives 3 across on a 1080px frame, so six levels are two tidy rows and
     the Start button stays on screen without scrolling. Three- and
     four-level skills (107 of the 131) fit in one or two rows too. */
  .level-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .level-screen-header { padding: 4px 0 14px; }
  #s-levels .lv-card { padding: 16px 18px; }
  #s-levels .lv-card .lv-desc { margin-bottom: 8px; }

  /* ══ GAME: two columns ══
     Auto-placement does the work — every child defaults to the right
     column, the status strip spans both, and #qBox is pinned to the
     left column spanning the rows the answer side occupies, so the
     question sits centred beside the answer area no matter which of
     the ~12 answer panels is showing. */
  #s-game.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
  }
  #s-game.active > * { grid-column: 2; }
  #s-game.active > .back-btn,
  #s-game.active > .game-stats,
  #s-game.active > .prog-wrap,
  #s-game.active > .pb-nudge { grid-column: 1 / -1; }
  #s-game.active > .q-box {
    grid-column: 1;
    grid-row: span 60;          /* reserves the rows the answer stack uses */
    align-self: start;          /* sized by the question, not by the answers */
    margin-bottom: 0;
    min-height: 170px;
    padding: 32px 24px;
  }
  /* Status pills read as a group in the middle rather than three items
     flung to the far corners of a 1080px row. */
  #s-game.active > .game-stats { justify-content: center; gap: 14px; }

  /* v82 (Laura): tighten the strip above the question. On a laptop the
     back link, stats, progress bar and nudge line were eating ~170px of
     vertical space before the question even started, which is what pushed
     the tall coordinate-grid questions off the bottom. Now ~105px. */
  #s-game.active > .back-btn { padding: 4px 0 6px; }
  #s-game.active > .game-stats { padding: 6px 0 8px; }
  #s-game.active > .prog-wrap { margin-bottom: 8px; }
  #s-game.active > .pb-nudge { margin-bottom: 4px; min-height: 0; }
  #s-game.active > .q-box { padding: 24px 26px; }
  #s-game.active .q-text { font-size: 3.1rem; }
  #s-game.active > .ctrl-row { margin-top: 20px; }

  /* Diagrams get their own column now, so they no longer have to be squashed
     to keep the answers on screen (this supersedes the v57 200px cap). */
  /* #qBox is a flex row, so its child is shrink-to-fit — without this the
     diagram can never grow past its natural 300px inside the wide column. */
  #s-game.active > .q-box > * { width: 100%; }
  /* v82/v83: a diagram may never be taller than the space actually left on
     screen. The SVGs keep their default preserveAspectRatio, so clamping
     the box height letterboxes them — it never distorts the picture.
     v83: the reserved 420px was too pessimistic — the header strip is only
     ~105px and the answer side rarely needs more than ~200px — so diagrams
     came out smaller than they needed to be. 330px is the real budget. */
  #s-game.active #qBox svg {
    width: 100%; height: auto;
    max-width: 460px;
    max-height: calc(100vh - 330px);
  }

  /* v83: question CONTENT scales up on a big screen, not just the box around
     it. --qlbl drives every generated prompt (A_LBL), --qtbl the timetable. */
  #s-game.active .q-box { --qlbl: 1.12rem; --qtbl: 1.02rem; --qtblpad: 8px 13px; }
  /* The answer-side hint lines are inline-styled in the HTML at 0.82rem, which
     a media query cannot override without !important. */
  #s-game.active #idxInstruction,
  #s-game.active #algInstruction,
  #s-game.active #algTypeHint,
  #s-game.active #factorHint,
  #s-game.active #gapHint,
  #s-game.active #msInstr,
  #s-game.active #plotInstr,
  #s-game.active .arrange-instr,
  #s-game.active .simplify-notice { font-size: 0.98rem !important; }
  /* Note: the plot/coordinate SVGs set their own max-width inline (430–460px),
     which wins over the 400px above — deliberate, they need the room. The
     height cap still applies to them, because it is not set inline. */
  #s-game.choice-active .q-box { padding-top: 32px; padding-bottom: 32px; }

  /* Answer controls fill the right column instead of hugging a 360px core. */
  #s-game.active .choice-grid,
  #s-game.active .choice-grid.wide,
  #s-game.active .arrange-answer,
  #s-game.active .arrange-pool,
  #s-game.active .arrange-ctrls { max-width: 100%; }
  #s-game.active .ans-input { font-size: 2.4rem; }
}

/* Very large monitors: cap the question column so the two halves don't
   drift so far apart that the eye has to travel between them. */
@media (min-width: 1400px) {
  .app { max-width: 1180px; }
}

/* ══════════════════════════════════════════════════════════════════
   v92 (Laura): USABILITY — HEADER, TOP ROW, MODE SCREEN, EXAM/ALT
   All additive and appended last, so every earlier rule still wins
   where it should and this block can be removed in one edit.
══════════════════════════════════════════════════════════════════ */

/* ── HEADER: one row instead of two ── */
.home-header { padding: 20px 0 14px; flex-wrap: wrap; }
.hh-name { min-width: 0; }
.hh-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hh-tools .class-code-chip { margin-top: 0; }
.hh-icon {
  background: transparent; border: 1.5px solid var(--border); border-radius: 50%;
  width: 34px; height: 34px; line-height: 1; font-size: 0.95rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; transition: border-color .18s, background .18s;
}
.hh-icon:hover { border-color: var(--accent); background: var(--accent-bg); }
/* Backup is the only control here that protects data, so when it has gone
   stale it stops being a quiet icon and asks to be pressed. */
.hh-icon.stale {
  border-color: var(--amber); background: rgba(217,119,6,0.10); position: relative;
}
.hh-icon.stale::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--bg);
}
.hh-switch {
  background: transparent; border: 1.5px solid var(--border); color: var(--muted);
  font-size: 0.75rem; padding: 7px 13px; border-radius: 20px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 700;
  transition: border-color .18s, color .18s;
}
.hh-switch:hover { border-color: var(--accent); color: var(--accent); }

/* ── TOP ROW: streak strip · Daily Mix · Exam/ALT ──
   The streak was a full card for one number. It is now a strip the same
   height as the two tiles beside it. */
.home-top { margin-bottom: 18px; }
.habit-card { padding: 12px 14px; margin-bottom: 12px; }
.hb-bar { margin: 8px 0 5px; height: 6px; }
.hb-dots { margin-top: 8px; gap: 5px; }
.hb-dot { width: 11px; height: 11px; }
.hb-sub { font-size: 0.74rem; }
.hb-streak { font-size: 0.88rem; }
.hb-goal { font-size: 0.72rem; }

.mix-btn, .exam-btn {
  width: 100%; display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 9px; row-gap: 1px; align-items: center;
  text-align: left; border-radius: var(--r);
  font-family: 'Nunito', sans-serif; padding: 12px 14px; cursor: pointer;
  margin-bottom: 12px; transition: transform .15s, box-shadow .15s;
}
.mix-btn { background: var(--accent-bg); color: var(--accent); border: 2px solid var(--accent); font-size: 1rem; }
.mix-btn span { font-weight: 700; }
.exam-btn {
  background: var(--surface); color: var(--text);
  border: 2px solid var(--amber);
  box-shadow: 0 6px 18px -12px var(--amber);
}
.tile-icon { font-size: 1.2rem; grid-row: 1 / span 2; align-self: center; }
.tile-name { font-weight: 900; font-size: 1.02rem; }
.exam-btn .tile-name { color: var(--amber); }
.tile-sub { font-weight: 700; font-size: 0.78rem; opacity: 0.85; grid-column: 2; }
.mix-btn:hover, .exam-btn:hover { transform: scale(0.99); }

/* ── MODE SCREEN ── */
.mode-cards { margin-bottom: 14px; }
.sess-toggle button.rec {
  box-shadow: inset 0 0 0 2.5px var(--green);
  border-radius: 12px;
}
.mode-rec-note {
  text-align: center; font-weight: 800; font-size: 0.88rem;
  color: var(--green); margin-bottom: 14px; min-height: 20px;
}
.mode-what {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; font-size: 0.8rem; font-weight: 700; color: var(--muted); line-height: 1.7;
}
.mode-what b { color: var(--text); }

/* ── EXAM / ALT TRAINING ── */
.alt-card {
  width: 100%; text-align: left; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 13px 15px; margin-bottom: 10px; cursor: pointer;
  font-family: 'Nunito', sans-serif; display: block;
  transition: border-color .18s, transform .15s;
}
.alt-card:hover { border-color: var(--accent); transform: translateX(3px); }
.alt-card.exam { border-color: var(--amber); border-width: 2px; background: rgba(217,119,6,0.06); }
.alt-card.empty { opacity: 0.62; cursor: default; }
.alt-card.empty:hover { border-color: var(--border); transform: none; }
.alt-n { font-size: 0.72rem; font-weight: 900; color: var(--muted); letter-spacing: 0.06em; }
.alt-title { font-weight: 900; font-size: 1.02rem; color: var(--text); margin: 1px 0 5px; }
.alt-meta { font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.alt-note { font-size: 0.74rem; font-weight: 700; color: var(--amber); margin-top: 5px; }

.alt-ready-bar {
  font-size: 0.8rem; font-weight: 800; color: var(--muted);
  margin: 2px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.alt-skill-list { margin-top: 16px; }
.alt-skill-row {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 10px 13px; margin-bottom: 8px;
}
.alt-skill-row.prereq { opacity: 0.72; border-style: dashed; }
.alt-skill-name { font-weight: 800; font-size: 0.92rem; color: var(--text); margin-bottom: 7px; }
.alt-lv-row { display: flex; gap: 7px; flex-wrap: wrap; }
.alt-lv {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 5px 11px; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.78rem; color: var(--text);
  transition: border-color .18s;
}
.alt-lv:hover { border-color: var(--accent); }
.rd { display: inline-block; vertical-align: middle; width: 9px; height: 9px;
      border-radius: 50%; flex-shrink: 0; margin-right: 1px;
      background: var(--surface2); border: 1.5px solid var(--muted); }
.rd.amber { background: var(--amber); border-color: var(--amber); }
.rd.green { background: var(--green); border-color: var(--green); }
.alt-prereq-head {
  font-size: 0.78rem; font-weight: 900; color: var(--muted);
  margin: 22px 0 4px; text-transform: uppercase; letter-spacing: 0.05em;
}
.alt-prereq-sub { font-size: 0.76rem; font-weight: 700; color: var(--muted); margin-bottom: 9px; }

@media (min-width: 900px) {
  /* Streak strip and the two tiles share one line. The streak gets the extra
     width because it holds a bar and seven dots; the tiles are two lines of text. */
  .home-top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px; align-items: stretch; margin-bottom: 20px;
  }
  .home-top .habit-card, .home-top .mix-btn, .home-top .exam-btn { margin-bottom: 0; }
  .home-top .mix-btn, .home-top .exam-btn { justify-content: center; }
  .mode-cards { max-width: 640px; margin: 0 auto 14px; }
  .mode-what { max-width: 640px; margin: 0 auto; }
  #s-course, #s-alts, #s-altskills { max-width: 760px; margin: 0 auto; }
  #s-mode { max-width: 640px; margin: 0 auto; }
  .alt-skill-list { columns: 2; column-gap: 12px; }
  .alt-skill-row { break-inside: avoid; }
}

/* v98 — the blanked-out term in a Find the Missing Term question */
.v98-box{display:inline-block;min-width:38px;padding:0 10px;border:2px dashed var(--accent);border-radius:8px;color:var(--accent);}
</style>
</head>
<body>
<div class="app">

<!-- ══════════════ WELCOME ══════════════ -->
<div id="s-welcome" class="screen active">
  <div class="hero">
    <div class="logo">⚡ Sandy<span>FastFacts</span></div>
    <div class="tagline">Secondary Maths — practise, master, improve</div>
  </div>
  <div class="slabel">Choose Your Profile</div>
  <div class="profile-grid" id="profileGrid"></div>
  <div id="nameFormWrap" class="hide">
    <div class="name-form">
      <h2 id="nameFormTitle">New Profile</h2>
      <input id="nameInputFirst" class="txt-input" type="text" placeholder="First name" maxlength="18" autocomplete="given-name" autocapitalize="words">
      <input id="nameInputLast"  class="txt-input" type="text" placeholder="Last name"  maxlength="24" autocomplete="family-name" autocapitalize="words">
      <input id="classCodeInput" class="txt-input" type="text" placeholder="Class code — ask your teacher (e.g. 7A-MATHS)" maxlength="20" autocomplete="off" autocapitalize="characters" spellcheck="false">
      <div class="slabel">Pick a colour</div>
      <div class="color-row" id="colorRow"></div>
      <button class="btn-primary" onclick="saveProfile()">Save Profile</button>
      <div class="gap"></div>
      <button class="btn-ghost" onclick="cancelNameForm()">Cancel</button>
    </div>
  </div>
</div>


<!-- ══════════════ ONBOARDING ══════════════ -->
<div id="s-onboard" class="screen">
  <div style="padding: 32px 0 20px; text-align:center;">
    <div style="font-size:2.4rem;margin-bottom:8px" id="obIcon">⚡</div>
    <h2 style="font-size:1.4rem;font-weight:900;margin-bottom:8px" id="obTitle">Welcome to Sandy FastFacts!</h2>
    <p style="font-size:0.92rem;color:var(--muted);font-weight:700;line-height:1.6;max-width:360px;margin:0 auto" id="obBody"></p>
  </div>

  <!-- Slide content area -->
  <div class="ob-card" id="obCard"></div>

  <!-- Dot progress indicator (built dynamically per slide count) -->
  <div id="obDots" style="display:flex;justify-content:center;gap:8px;margin:20px 0 24px;"></div>

  <button class="btn-primary" id="obNextBtn" onclick="obNext()">Next →</button>
  <div style="height:10px"></div>
  <button class="btn-ghost" onclick="obSkip()">Skip intro</button>
</div>

<!-- ══════════════ HOME ══════════════ -->
<div id="s-home" class="screen">
  <div class="home-header">
    <div class="av-sm" id="homeAv"></div>
    <div class="hh-name">
      <div class="greeting" id="homeGreeting"></div>
      <div class="greeting-sub" id="homeSub"></div>
    </div>
    <div class="hh-tools">
      <span class="class-code-chip" id="homeClassChip" title="Class code">🏫 <span id="homeClassCode">No class code set</span></span>
      <button class="hh-icon" onclick="editCurrentProfile()" title="Edit profile" aria-label="Edit profile">✏️</button>
      <button class="hh-icon" id="themeToggleBtn" onclick="toggleTheme()" title="Dark mode" aria-label="Dark mode">🌙</button>
      <button class="hh-icon" id="backupIconBtn" onclick="openBackup()" title="Backup" aria-label="Backup">💾</button>
      <button class="hh-switch" onclick="goWelcome()">Switch profile</button>
    </div>
  </div>

  <div class="home-top">
    <div class="habit-card" id="habitCard"></div>
    <button class="mix-btn" onclick="openDailyMix()">
      <span class="tile-icon">🎲</span>
      <span class="tile-name">Daily Mix</span>
      <span class="tile-sub">4 skills picked for you</span>
    </button>
    <button class="exam-btn" onclick="openExamTraining()">
      <span class="tile-icon">🎯</span>
      <span class="tile-name">Exam / ALT Training</span>
      <span class="tile-sub" id="examBtnSub">What you need to know</span>
    </button>
  </div>

  <div class="slabel">Choose a Category</div>
  <div class="cat-grid">
    <div class="cat-card" onclick="openCat('number')">
      <span class="cat-icon">🔢</span>
      <div class="cat-name">Number</div>
      <div class="cat-desc">Times tables, ×÷ +−, BODMAS &amp; significant figures</div>
    </div>
    <div class="cat-card" onclick="openCat('integers')">
      <span class="cat-icon">±</span>
      <div class="cat-name">Integers</div>
      <div class="cat-desc">Add, subtract, multiply, divide, squares, cubes &amp; BODMAS</div>
    </div>
    <div class="cat-card" onclick="openCat('exponents')">
      <span class="cat-icon">x²</span>
      <div class="cat-name">Exponents</div>
      <div class="cat-desc">Squares, roots, cubes, index laws &amp; standard form</div>
    </div>

    <div class="cat-card" onclick="openCat('fractions')">
      <span class="cat-icon">½</span>
      <div class="cat-name">Fractions</div>
      <div class="cat-desc">Simplify, ×÷ +−, mixed numbers &amp; BODMAS</div>
    </div>
    <div class="cat-card" onclick="openCat('decimals')">
      <span class="cat-icon">0.1</span>
      <div class="cat-name">Decimals</div>
      <div class="cat-desc">Place value, convert, compare, round, ×÷ +−, squares &amp; BODMAS</div>
    </div>
    <div class="cat-card" onclick="openCat('percentages')">
      <span class="cat-icon">%</span>
      <div class="cat-name">Percentages</div>
      <div class="cat-desc">Identify, convert FDP, of an amount, increase/decrease &amp; profit/loss</div>
    </div>
    <div class="cat-card" onclick="openCat('ratiosrates')">
      <span class="cat-icon"><svg viewBox="0 0 28 28" role="img" aria-label="4 to 3 ratio"><rect x="2" y="5.5" width="24" height="17" rx="3" fill="none" stroke="var(--text)" stroke-width="2"/><text x="14" y="14.4" text-anchor="middle" dominant-baseline="central" font-family="Nunito,sans-serif" font-weight="900" font-size="10" fill="var(--text)">4:3</text></svg></span>
      <div class="cat-name">Ratios &amp; Rates</div>
      <div class="cat-desc">Simplify, equivalent, share &amp; convert</div>
    </div>
    <div class="cat-card" onclick="openCat('algebra')">
      <span class="cat-icon">𝑥</span>
      <div class="cat-name">Algebra</div>
      <div class="cat-desc">Like terms, multiply, expand, factorise &amp; more</div>
    </div>
    <div class="cat-card" onclick="openCat('equations')">
      <span class="cat-icon">⚖️</span>
      <div class="cat-name">Linear Equations</div>
      <div class="cat-desc">One &amp; two-step, fractions, both sides &amp; inequalities</div>
    </div>
    <div class="cat-card" onclick="openCat('quadratics')">
      <span class="cat-icon"><svg viewBox="0 0 28 28" role="img" aria-label="parabola on axes"><path d="M14 20 V4" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round"/><path d="M11.6 6.4 L14 3.6 L16.4 6.4" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.5 20 H24" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round"/><path d="M22 17.8 L24.8 20 L22 22.2" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 7 Q14 30 23 7" fill="none" stroke="var(--accent)" stroke-width="2.8" stroke-linecap="round"/></svg></span>
      <div class="cat-name">Quadratics</div>
      <div class="cat-desc">Verify solutions, x² = k, Null Factor Law &amp; factorising</div>
    </div>
    <div class="cat-card" onclick="openCat('coordgeom')">
      <span class="cat-icon"><svg viewBox="0 0 28 28" role="img" aria-label="linear graph on axes"><path d="M5 3 V24 H26" fill="none" stroke="var(--text)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><g stroke="var(--text)" stroke-width="1.6" stroke-linecap="round"><path d="M5 8 H8.5"/><path d="M5 13 H8.5"/><path d="M5 18 H8.5"/><path d="M11 24 V20.5"/><path d="M16 24 V20.5"/><path d="M21 24 V20.5"/></g><path d="M6 23 L24 6" fill="none" stroke="var(--accent)" stroke-width="2.8" stroke-linecap="round"/></svg></span>
      <div class="cat-name">Coordinate Geometry</div>
      <div class="cat-desc">Quadrants, coordinates, linear graphs, intercepts &amp; gradient</div>
    </div>
    <div class="cat-card" onclick="openCat('financepatterns')">
      <span class="cat-icon"><svg viewBox="0 0 28 28" role="img" aria-label="stack of banknotes"><g stroke="#1B5E20" stroke-width="0.9"><rect x="1.8" y="18.5" width="24.4" height="6.2" rx="1.4" fill="#2E7D32"/><rect x="1.8" y="11.9" width="24.4" height="6.2" rx="1.4" fill="#4CAF50"/><rect x="1.8" y="5.3" width="24.4" height="6.2" rx="1.4" fill="#8BD48E"/></g><rect x="11.5" y="5.3" width="5" height="19.4" fill="#DCCBA0" stroke="#B9A578" stroke-width="0.8"/></svg></span>
      <div class="cat-name">Finance &amp; Patterns</div>
      <div class="cat-desc">GST, simple interest, depreciation, sequences &amp; recurrence</div>
    </div>
    <div class="cat-card" onclick="openCat('trig')">
      <span class="cat-icon">📐</span>
      <div class="cat-name">Trig &amp; Pythagoras</div>
      <div class="cat-desc">Pythagoras &amp; exact values of sin, cos, tan</div>
    </div>
    <div class="cat-card" onclick="openCat('geometry')">
      <span class="cat-icon">△</span>
      <div class="cat-name">Geometry</div>
      <div class="cat-desc">Naming shapes, angles, Euler's rule &amp; congruence</div>
    </div>
    <div class="cat-card" onclick="openCat('other')">
      <span class="cat-icon">🔄</span>
      <div class="cat-name">Time &amp; Transformations</div>
      <div class="cat-desc">Time, timetables, distance-time graphs &amp; transformations</div>
    </div>
    <div class="cat-card" onclick="openCat('data')">
      <span class="cat-icon">📊</span>
      <div class="cat-name">Data Analysis</div>
      <div class="cat-desc">Classify data, frequency tables, dot plots, stem plots, histograms &amp; box plots</div>
    </div>
    <div class="cat-card" onclick="openCat('prob')">
      <span class="cat-icon">🎲</span>
      <div class="cat-name">Probability</div>
      <div class="cat-desc">Sample space, chance, theoretical &amp; experimental probability, tables, trees &amp; Venn diagrams</div>
    </div>
    <div class="cat-card" onclick="openCat('meas')">
      <span class="cat-icon">📏</span>
      <div class="cat-name">Measurement</div>
      <div class="cat-desc">Units, perimeter, circles, area, surface area, volume &amp; capacity</div>
    </div>

  </div>

  <div class="home-foot">
    <button class="btn-ghost" onclick="goLeaderboard()">🏆  Personal Bests</button>
    <div style="height:8px"></div>
    <button class="btn-ghost" onclick="goToday()" id="todayBtn" style="border-color:var(--accent);color:var(--accent)">📋  Today's Sessions &amp; Share</button>
    <div style="height:8px"></div>
    <button class="btn-ghost" onclick="replayTutorial()" style="font-size:0.85rem;padding:10px">📖  Replay Tutorial</button>
  </div>
</div>

<!-- ══════════════ v92 — CHOOSE A MODE (after skill + level) ══════════════ -->
<div id="s-mode" class="screen">
  <button class="back-btn" id="modeBackBtn" onclick="modeGoBack()">← Back to levels</button>
  <div class="level-screen-header">
    <h2 id="modeTitle">How do you want to train?</h2>
    <p id="modeSub"></p>
  </div>
  <div class="sess-toggle mode-cards">
    <button id="btn-fluency"   onclick="pickMode('fluency')">⏱ Fluency<br>60s</button>
    <button id="btn-challenge" onclick="pickMode('challenge')">⚡ Challenge<br>3 min</button>
    <button id="btn-practice"  onclick="pickMode('practice')">∞ Practice</button>
  </div>
  <div id="modeRecNote" class="mode-rec-note"></div>
  <div id="modeWhat" class="mode-what"></div>
</div>

<!-- ══════════════ v92 — EXAM / ALT TRAINING ══════════════ -->
<div id="s-course" class="screen">
  <button class="back-btn" onclick="goHome()">← Back home</button>
  <div class="slabel">🎯 Exam / ALT Training</div>
  <p class="mix-intro">Choose your class. Everything after this shows the skills and levels for <b>your</b> assessments — you can change class any time.</p>
  <div id="courseList" class="skill-list"></div>
</div>

<div id="s-alts" class="screen">
  <button class="back-btn" onclick="goHome()">← Back home</button>
  <div class="slabel" id="altsLabel"></div>
  <p class="mix-intro" id="altsSub"></p>
  <div id="altList"></div>
  <div style="height:10px"></div>
  <button class="btn-ghost" onclick="openCoursePicker(true)" style="font-size:0.85rem;padding:10px">🔄 Change class</button>
</div>

<div id="s-altskills" class="screen">
  <button class="back-btn" onclick="openAltList()">← Back to ALTs</button>
  <div class="slabel" id="altSkillsLabel"></div>
  <div id="altReadyBar" class="alt-ready-bar"></div>
  <button class="btn-primary" id="altMixBtn" onclick="startAltMix()">∞ Mixed Practice — every skill in this ALT</button>
  <div id="altSkillList" class="alt-skill-list"></div>
  <div id="altPrereq"></div>
</div>

<!-- ══════════════ DAILY MIX ══════════════ -->
<div id="s-mix" class="screen">
  <button class="back-btn" onclick="goHome()">← Back home</button>
  <div class="slabel">🎲 Daily Mix</div>
  <p class="mix-intro">Four skills picked for you today — weighted toward what you've been working on, with a couple of others to keep it fresh. <span id="mixProgress" class="mix-prog"></span></p>
  <div id="mixList"></div>
  <div style="height:10px"></div>
  <button class="btn-ghost" onclick="reshuffleMix()" style="font-size:0.85rem;padding:10px">🔄 Shuffle the mix</button>
</div>

<!-- ══════════════ BACKUP / RESTORE ══════════════ -->
<div id="s-backup" class="screen">
  <button class="back-btn" onclick="goHome()">← Back home</button>
  <div class="slabel">💾 Backup &amp; Restore</div>
  <p class="backup-note">Your progress is saved <b>on this device only</b>. To move it to another device — or to keep it safe before clearing your browser — copy your backup code below and paste it on the other device.</p>
  <div class="backup-block">
    <div class="backup-label">Your backup code</div>
    <textarea id="backupOut" class="backup-area" readonly rows="4"></textarea>
    <button class="btn-primary" onclick="copyBackup()" style="margin-top:8px">📋 Copy backup code</button>
  </div>
  <div class="backup-block">
    <div class="backup-label">Restore from a code</div>
    <textarea id="backupIn" class="backup-area" rows="4" placeholder="Paste a backup code here…"></textarea>
    <button class="btn-ghost" onclick="restoreBackup()" style="margin-top:8px;border-color:var(--accent);color:var(--accent)">↩️ Restore into this profile</button>
  </div>
  <div id="backupMsg" class="backup-msg"></div>
</div>

<!-- ══════════════ SKILL SELECT ══════════════ -->
<div id="s-skills" class="screen">
  <button class="back-btn" onclick="goHome()">← Back to categories</button>
  <div class="slabel" id="skillCatLabel"></div>
  <div class="skill-list" id="skillList"></div>
</div>

<!-- ══════════════ LEVEL SELECT ══════════════ -->
<div id="s-levels" class="screen">
  <button class="back-btn" id="levelBackBtn" onclick="goBackToSkills()">← Back to skills</button>
  <div class="level-screen-header">
    <h2 id="levelScreenTitle">Choose a Level</h2>
    <p id="levelScreenSub"></p>
  </div>
  <div class="level-cards" id="levelCards"></div>
  <button class="btn-primary" id="levelStartBtn" onclick="chooseMode()" disabled>
    Start — Level <span id="levelStartLbl">?</span>
  </button>
  <div id="levelRecHint" style="display:none;text-align:center;margin-top:10px;font-weight:900;font-size:0.85rem;"></div>
</div>

<!-- ══════════════ GAME ══════════════ -->
<div id="s-game" class="screen">
  <button class="back-btn" onclick="abortGame()">← Back</button>
  <div class="game-stats">
    <div class="stat-pill"><span class="lbl">Score</span><b id="gScore">0</b></div>
    <div class="stat-pill"><span class="lbl" id="gTimeLbl">Time</span><b id="gTime">∞</b></div>
    <div class="stat-pill"><span class="lbl">CPM</span><b id="gCpm">–</b></div>
    <div class="stat-pill" id="streakPill" style="display:none"><span class="lbl">🔥</span><b id="gStreak">0</b></div>
  </div>
  <div class="prog-wrap" id="progWrap" style="display:none">
    <div class="prog-bar" id="progBar"></div>
  </div>
  <div class="pb-nudge" id="pbNudge"></div>

  <div class="q-box" id="qBox">
    <div class="q-text" id="qText"></div>
  </div>

  <!-- Simplify reminder (shown for fraction skills) -->
  <div class="simplify-notice" id="simplifyNotice">✏️ Remember to simplify your answer fully</div>

  <!-- Standard numeric answer -->
  <div class="ans-wrap" id="stdAnsWrap">
    <span class="eq-prefix" id="eqStdPrefix"></span>
    <input id="ansInput" class="ans-input" type="text" inputmode="decimal" disabled placeholder="?" autocomplete="off">
  </div>
  <!-- Desktop inequality-sign buttons (v52) — shown only for the inequalities
       skill on a computer, where ≤ / ≥ aren't on the keyboard (and < / > aren't
       obvious). Clicking inserts the true glyph. On mobile the on-screen keypad
       already provides these keys. Typing < > <= >= still works too. -->
  <div id="ineqDeskRow" style="display:none; justify-content:center; gap:8px; margin:-4px 0 12px;">
    <button type="button" class="pow-btn" onclick="insertIneq('<')" aria-label="insert less than">&lt;</button>
    <button type="button" class="pow-btn" onclick="insertIneq('>')" aria-label="insert greater than">&gt;</button>
    <button type="button" class="pow-btn" onclick="insertIneq('≤')" aria-label="insert less than or equal">≤</button>
    <button type="button" class="pow-btn" onclick="insertIneq('≥')" aria-label="insert greater than or equal">≥</button>
  </div>
  <!-- Desktop surd button (v74): surd mode (Pythagoras, Surds skills) needs a √ that a
       physical keyboard can't type. On mobile the keypad already has √. -->
  <div id="surdDeskRow" style="display:none; justify-content:center; gap:8px; margin:-4px 0 12px;">
    <button type="button" class="pow-btn" onclick="insertSurd()" aria-label="insert square root">√</button>
  </div>
  <!-- Desktop π button (v102): exact circle answers (piExact) need a π a keyboard cannot type.
       Typing "pi" works too. On mobile the keypad has a π row instead. -->
  <div id="piDeskRow" style="display:none; justify-content:center; gap:8px; margin:-4px 0 12px;">
    <button type="button" class="pow-btn" onclick="insertPi('π')" aria-label="insert pi">π</button>
    <button type="button" class="pow-btn" onclick="insertPi(' + ')" aria-label="insert plus">+</button>
  </div>

  <!-- Index notation answer panel -->
  <!-- Completely hidden unless mode=index or mode=sci. Never shown for other skills. -->
  <div id="idxAnsWrap" style="display:none; flex-direction:column; align-items:center; gap:14px; margin-bottom:14px;">

    <!-- Instruction line explaining exactly what to type -->
    <div id="idxInstruction" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;"></div>

    <!-- POWER ONLY row: base^[?] — one box, student types the exponent -->
    <div id="idxPowerOnlyRow" style="display:none; align-items:center; gap:6px; font-family:Nunito,sans-serif; font-weight:900; font-size:2rem;">
      <span id="idxBaseLabel" style="color:var(--text)"></span>
      <sup style="font-size:1rem;color:var(--accent);padding-bottom:8px">
        <input id="idxExp" class="idx-exp-input" type="number" disabled placeholder="?">
      </sup>
    </div>

    <!-- COEFF + POWER row: [coeff] x^[expB] y^[expC] -->
    <!-- Uses idx-var-group to position the power box as a true superscript -->
    <div id="idxCoeffPowerRow" style="display:none; align-items:flex-end; gap:10px; flex-wrap:wrap; justify-content:center;">

      <!-- Coefficient -->
      <div class="idx-field-group">
        <span class="idx-field-lbl">Coefficient</span>
        <input id="idxCoeff" class="idx-input" type="number" disabled placeholder="?">
      </div>

      <!-- x^[power] group -->
      <div class="idx-var-group" id="idxXGroup">
        <span class="idx-var-letter" id="idxVarDisplay">x</span>
        <div class="idx-superscript-box">
          <span class="idx-field-lbl">x power</span>
          <input id="idxExpB" class="idx-exp-input" type="number" disabled placeholder="?">
        </div>
      </div>

      <!-- y^[power] group — hidden unless L3 -->
      <div class="idx-var-group" id="idxYGroup" style="display:none">
        <span class="idx-var-letter" id="idxVarYDisplay">y</span>
        <div class="idx-superscript-box">
          <span class="idx-field-lbl">y power</span>
          <input id="idxExpC" class="idx-exp-input" type="number" disabled placeholder="?">
        </div>
      </div>

    </div>

    <!-- SCIENTIFIC NOTATION row: [coeff] × 10^[exp] -->
    <!-- Uses idx-var-group so the power box sits above "10" like a true exponent -->
    <div id="idxSciRow" style="display:none; align-items:flex-end; gap:10px; flex-wrap:wrap; justify-content:center;">

      <!-- Coefficient a -->
      <div class="idx-field-group">
        <span class="idx-field-lbl">a (e.g. 3.2)</span>
        <input id="sciCoeff" class="idx-input wide" type="number" step="0.01" disabled placeholder="?">
      </div>

      <!-- × symbol -->
      <span style="font-size:1.8rem;font-weight:900;color:var(--muted);padding-bottom:6px;">×</span>

      <!-- 10^[power] — uses same idx-var-group pattern so power floats above -->
      <div class="idx-var-group">
        <span class="idx-var-letter" style="font-family:'Nunito',sans-serif;font-style:normal;font-size:2rem;padding-bottom:4px;">10</span>
        <div class="idx-superscript-box">
          <span class="idx-field-lbl">Power</span>
          <input id="sciExp" class="idx-exp-input" type="number" disabled placeholder="?">
        </div>
      </div>

    </div>
  </div>

  <!-- Algebra answer panel (v23) -->
  <!-- Up to 3 coefficient slots, each with a pre-printed variable and an optional power box. -->
  <!-- Completely hidden unless mode=algebra. Built from qData.alg.slots at runtime. -->
  <div id="algAnsWrap" style="display:none; flex-direction:column; align-items:center; gap:14px; margin-bottom:14px;">
    <div id="algInstruction" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;"></div>
    <div id="algTermRow" style="display:none; align-items:flex-end; gap:8px; flex-wrap:wrap; justify-content:center;">

      <div class="idx-field-group" id="algCoeffGroup0">
        <span class="idx-field-lbl">Coefficient</span>
        <input id="algC0" class="idx-input" type="number" disabled placeholder="?">
      </div>
      <div class="idx-var-group" id="algVarGroup0">
        <span class="idx-var-letter" id="algV0">x</span>
        <div class="idx-superscript-box" id="algPowBox0">
          <span class="idx-field-lbl">power</span>
          <input id="algP0" class="idx-exp-input" type="number" disabled placeholder="?">
        </div>
      </div>

      <span id="algSep1" class="alg-plus" style="display:none; font-family:'Nunito',sans-serif; font-weight:900; font-size:2rem; color:var(--muted); padding-bottom:6px;">+</span>

      <div class="idx-field-group" id="algCoeffGroup1" style="display:none">
        <span class="idx-field-lbl">Coefficient</span>
        <input id="algC1" class="idx-input" type="number" disabled placeholder="?">
      </div>
      <div class="idx-var-group" id="algVarGroup1" style="display:none">
        <span class="idx-var-letter" id="algV1">y</span>
        <div class="idx-superscript-box" id="algPowBox1">
          <span class="idx-field-lbl">power</span>
          <input id="algP1" class="idx-exp-input" type="number" disabled placeholder="?">
        </div>
      </div>

      <span id="algSep2" class="alg-plus" style="display:none; font-family:'Nunito',sans-serif; font-weight:900; font-size:2rem; color:var(--muted); padding-bottom:6px;">+</span>

      <div class="idx-field-group" id="algCoeffGroup2" style="display:none">
        <span class="idx-field-lbl">Coefficient</span>
        <input id="algC2" class="idx-input" type="number" disabled placeholder="?">
      </div>
      <div class="idx-var-group" id="algVarGroup2" style="display:none">
        <span class="idx-var-letter" id="algV2"></span>
        <div class="idx-superscript-box" id="algPowBox2">
          <span class="idx-field-lbl">power</span>
          <input id="algP2" class="idx-exp-input" type="number" disabled placeholder="?">
        </div>
      </div>

    </div>
  </div>

  <!-- Free-text algebra answer (v24) — student types the whole answer (e.g. 7x, 8x + 2y, 3x + 6) -->
  <div id="algTypeWrap" style="display:none; flex-direction:column; align-items:center; gap:10px; margin-bottom:14px;">
    <div id="algTypeHint" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;">Type the whole answer — including the letter</div>
    <div style="display:flex; align-items:center; justify-content:center; gap:10px;">
      <input id="algTypeInput" class="ans-input" type="text" inputmode="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" disabled placeholder="?">
      <!-- Desktop power buttons (v33) — insert correct superscript notation. Hidden on
           mobile, where the on-screen keypad already provides ² / ³ keys. -->
      <div id="algPowRow" style="display:none; flex-direction:column; gap:6px;">
        <button type="button" class="pow-btn" id="algPow2" onclick="insertPower('²')" title="squared" aria-label="insert squared">x²</button>
        <button type="button" class="pow-btn" id="algPow3" onclick="insertPower('³')" title="cubed" aria-label="insert cubed">x³</button>
      </div>
    </div>
  </div>

  <!-- Stacked fraction answer -->
  <div class="frac-input-wrap" id="fracAnsWrap">
    <div id="fracAlgLabel" class="frac-alg-label hide"></div>
    <span class="eq-prefix" id="eqFracPrefix"></span>
    <div class="frac-box">
      <input id="fracNum" class="frac-num-input" type="number" disabled placeholder="?">
      <div class="frac-line-bar"></div>
      <input id="fracDen" class="frac-den-input" type="number" disabled placeholder="?">
    </div>
  </div>

  <!-- Mixed number answer: whole + fraction -->
  <div class="mixed-input-wrap" id="mixedAnsWrap">
    <div>
      <input id="mixedWhole" class="whole-input" type="number" disabled placeholder="0">
      <div class="whole-label">Whole</div>
    </div>
    <div class="mixed-frac-col">
      <input id="mixedNum" class="frac-num-input" type="number" disabled placeholder="?">
      <div class="frac-line-bar"></div>
      <input id="mixedDen" class="frac-den-input" type="number" disabled placeholder="?">
    </div>
  </div>

  <!-- Ratio answer: two number boxes with colon between (v22) -->
  <div class="ratio-input-wrap" id="ratioAnsWrap">
    <input id="ratioA" class="ratio-input" type="number" disabled placeholder="?">
    <span class="ratio-colon">:</span>
    <input id="ratioB" class="ratio-input" type="number" disabled placeholder="?">
  </div>

  <!-- Multiple-choice answer: tap an option (v37) -->
  <div class="choice-wrap" id="choiceAnsWrap">
    <div class="choice-grid" id="choiceGrid"></div>
  </div>

  <!-- Tap-to-arrange answer: order values by tapping (v71) -->
  <div class="arrange-wrap" id="arrangeAnsWrap">
    <div class="arrange-instr" id="arrangeInstr"></div>
    <div class="arrange-answer" id="arrangeAnswer"></div>
    <div class="arrange-pool" id="arrangePool"></div>
    <div class="arrange-ctrls">
      <button class="btn-ghost arrange-clear" id="arrangeClearBtn" onclick="arrangeClear()">Clear</button>
      <button class="btn-primary arrange-check" id="arrangeCheckBtn" onclick="arrangeSubmit()" disabled>Check</button>
    </div>
  </div>

  <!-- Factorising answer (v40) — student types each bracket's contents into a
       fixed ( … )( … ) scaffold; brackets are rendered, never typed. -->
  <div id="factorAnsWrap" style="display:none; flex-direction:column; align-items:center; gap:8px; margin-bottom:14px;">
    <div id="factorHint" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;">Type what goes inside each bracket, e.g. x − 2</div>
    <div class="factor-row">
      <span class="factor-br" id="factorBr0">(</span>
      <input id="factorBox0" class="ans-input factor-box" type="text" inputmode="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" disabled placeholder="?">
      <span class="factor-br" id="factorBr1">)(</span>
      <input id="factorBox1" class="ans-input factor-box" type="text" inputmode="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" disabled placeholder="?">
      <span class="factor-br" id="factorBr2">)</span>
    </div>
  </div>

  <style>
    #gridHost .da-table { margin: 0 auto; font-size: 0.95rem; }
    #gridHost .da-table th, #gridHost .da-table td { padding: 5px 7px; }
    #gridHost input.gap-box { width: 58px; min-width: 0; padding: 7px 2px; font-size: 1.05rem; text-align: center; }
    @media (max-width: 899px) {
      #gridHost .da-table { font-size: 0.82rem; }
      #gridHost .da-table th, #gridHost .da-table td { padding: 3px 4px; }
      #gridHost input.gap-box { width: 46px; padding: 6px 1px; font-size: 0.95rem; }
    }
  </style>
  <!-- Convert FDP table (v74) — fill the blank cells; 1 point per correct box. -->
  <div id="pctTableWrap" style="display:none; flex-direction:column; align-items:center; gap:12px; margin-bottom:14px;">
    <table class="fdp-table">
      <thead><tr><th>Percentage</th><th>Decimal</th><th>Fraction</th></tr></thead>
      <tbody id="fdpBody">
        <tr>
          <td class="fdp-cell"><span class="fdp-given" id="pctPg0"></span><span class="fdp-inwrap" id="pctPin0"><input id="pctP0" class="ans-input fdp-input" type="text" inputmode="decimal" disabled placeholder="?"><span class="fdp-unit">%</span></span></td>
          <td class="fdp-cell"><span class="fdp-given" id="pctDg0"></span><span class="fdp-inwrap" id="pctDin0"><input id="pctD0" class="ans-input fdp-input" type="text" inputmode="decimal" disabled placeholder="?"></span></td>
          <td class="fdp-cell"><span class="fdp-given" id="pctFg0"></span><span class="fdp-fracwrap" id="pctFin0"><input id="pctFn0" class="ans-input fdp-frac" type="text" inputmode="numeric" disabled placeholder="?"><span class="fdp-fracline"></span><input id="pctFd0" class="ans-input fdp-frac" type="text" inputmode="numeric" disabled placeholder="?"></span></td>
        </tr>
        <tr>
          <td class="fdp-cell"><span class="fdp-given" id="pctPg1"></span><span class="fdp-inwrap" id="pctPin1"><input id="pctP1" class="ans-input fdp-input" type="text" inputmode="decimal" disabled placeholder="?"><span class="fdp-unit">%</span></span></td>
          <td class="fdp-cell"><span class="fdp-given" id="pctDg1"></span><span class="fdp-inwrap" id="pctDin1"><input id="pctD1" class="ans-input fdp-input" type="text" inputmode="decimal" disabled placeholder="?"></span></td>
          <td class="fdp-cell"><span class="fdp-given" id="pctFg1"></span><span class="fdp-fracwrap" id="pctFin1"><input id="pctFn1" class="ans-input fdp-frac" type="text" inputmode="numeric" disabled placeholder="?"><span class="fdp-fracline"></span><input id="pctFd1" class="ans-input fdp-frac" type="text" inputmode="numeric" disabled placeholder="?"></span></td>
        </tr>
        <tr>
          <td class="fdp-cell"><span class="fdp-given" id="pctPg2"></span><span class="fdp-inwrap" id="pctPin2"><input id="pctP2" class="ans-input fdp-input" type="text" inputmode="decimal" disabled placeholder="?"><span class="fdp-unit">%</span></span></td>
          <td class="fdp-cell"><span class="fdp-given" id="pctDg2"></span><span class="fdp-inwrap" id="pctDin2"><input id="pctD2" class="ans-input fdp-input" type="text" inputmode="decimal" disabled placeholder="?"></span></td>
          <td class="fdp-cell"><span class="fdp-given" id="pctFg2"></span><span class="fdp-fracwrap" id="pctFin2"><input id="pctFn2" class="ans-input fdp-frac" type="text" inputmode="numeric" disabled placeholder="?"><span class="fdp-fracline"></span><input id="pctFd2" class="ans-input fdp-frac" type="text" inputmode="numeric" disabled placeholder="?"></span></td>
        </tr>
      </tbody>
    </table>
    <button class="btn-primary" id="pctCheckBtn" onclick="checkAns()" style="max-width:220px;">Check</button>
  </div>

  <!-- Gap-fill answer (v77) — a rendered template (rule / recurrence relation /
       coordinate pair / solution pair) with up to five numeric boxes the student
       fills in. Marked all-or-nothing; qData.gapUnordered accepts either order. -->
  <div id="gapFillWrap" style="display:none; flex-direction:column; align-items:center; gap:8px; margin-bottom:14px;">
    <div id="gapHint" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;"></div>
    <div id="gapPool" style="display:none">
      <input id="gap0" class="ans-input gap-box" type="text" inputmode="decimal" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="gap1" class="ans-input gap-box" type="text" inputmode="decimal" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="gap2" class="ans-input gap-box" type="text" inputmode="decimal" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="gap3" class="ans-input gap-box" type="text" inputmode="decimal" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="gap4" class="ans-input gap-box" type="text" inputmode="decimal" autocomplete="off" spellcheck="false" disabled placeholder="?">
    </div>
    <div id="gapRow" class="gap-row"></div>
    <button class="btn-primary" id="gapCheckBtn" onclick="checkAns()" style="max-width:220px;">Check</button>
  </div>

  <!-- Multi-select answer (v77) — tick every box that applies; all-or-nothing. -->
  <div id="multiSelWrap" style="display:none; flex-direction:column; align-items:center; gap:10px; margin-bottom:14px;">
    <div id="msInstr" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;">Tick every set the number belongs to.</div>
    <div class="ms-grid" id="msGrid"></div>
    <button class="btn-primary" id="msCheckBtn" onclick="checkAns()" style="max-width:220px;">Check</button>
  </div>

  <!-- Plot-the-points answer (v78.2) — the student taps lattice points on the drawn
       Cartesian plane in #qBox itself; this panel is just the prompt and the Check
       button. All-or-nothing: exactly the right set of points, none extra. -->
  <div id="plotWrap" style="display:none; flex-direction:column; align-items:center; gap:10px; margin-bottom:14px;">
    <div id="plotInstr" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;">Tap the grid to plot each point. Tap a point again to remove it.</div>
    <div id="plotCount" style="font-size:0.82rem;font-weight:900;color:var(--accent);"></div>
    <button class="btn-primary" id="plotCheckBtn" onclick="checkAns()" style="max-width:220px;">Check</button>
  </div>

  <!-- Grid-fill answer (v101) — fill the blank cells of a table (two-way tables).
       Generalises the v74 FDP table: 1 POINT PER CORRECT BOX, and the boxes are the
       static inputs grid0…grid8 (registered in KB_INPUTS so the mobile keypad drives
       them), stowed in #gridPool between questions so their listeners survive. -->
  <div id="gridFillWrap" style="display:none; flex-direction:column; align-items:center; gap:10px; margin-bottom:14px;">
    <div id="gridInstr" style="font-size:0.82rem;font-weight:800;color:var(--muted);text-align:center;padding:0 8px;"></div>
    <div id="gridPool" style="display:none">
      <input id="grid0" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid1" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid2" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid3" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid4" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid5" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid6" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid7" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
      <input id="grid8" class="ans-input gap-box" type="text" inputmode="numeric" autocomplete="off" spellcheck="false" disabled placeholder="?">
    </div>
    <div id="gridHost" style="width:100%;overflow-x:auto;"></div>
    <button class="btn-primary" id="gridCheckBtn" onclick="checkAns()" style="max-width:220px;">Check</button>
  </div>

  <!-- Profit & Loss toggle (v74) — number box (stdAnsWrap) + Profit/Loss selector. -->
  <div id="plToggleWrap" style="display:none; justify-content:center; gap:12px; margin-bottom:14px;">
    <button type="button" class="pl-btn" id="plProfitBtn" onclick="plChoose('profit')">▲ Profit</button>
    <button type="button" class="pl-btn" id="plLossBtn" onclick="plChoose('loss')">▼ Loss</button>
  </div>

  <div class="acc-row">
    <div class="acc-label">Accuracy</div>
    <div class="acc-track"><div class="acc-fill" id="accFill" style="width:0%"></div></div>
    <div class="acc-pct" id="accPct">–</div>
  </div>
  <div class="feedback" id="feedback"></div>

  <div class="ctrl-row">
    <button class="btn-primary" id="gameStartBtn" onclick="launchSession()">Start</button>
    <button class="btn-ghost" id="gameStopBtn" onclick="stopPractice()" style="display:none">Stop</button>
    <button class="btn-ghost" onclick="abortGame()">Reset</button>
  </div>

  <!-- ── CUSTOM MOBILE KEYPAD ── -->
  <!-- Shown only on screens < 768px. Suppresses native keyboard on all inputs. -->
  <!-- Layout adapts per skill via JS (keypadMode). -->
  <div id="mobileKeypad" style="display:none; margin-top:16px;">

    <!-- Display strip — shows what's being typed into the focused field -->
    <div id="kbDisplay" style="
      background:var(--surface2); border:2px solid var(--border);
      border-radius:var(--r-sm); padding:10px 16px; margin-bottom:10px;
      font-family:'Nunito',sans-serif; font-weight:900; font-size:1.5rem;
      color:var(--text); min-height:46px; text-align:right;
      letter-spacing:1px; box-shadow:var(--shadow);
    ">
      <span id="kbDisplayText" style="color:var(--muted)">–</span>
    </div>

    <!-- Algebra symbol row (v24) — shown only when typing a whole algebra answer.
         Variable keys are set per-question; + and − let students build terms. -->
    <div class="kb-row" id="kbAlgRow" style="display:none">
      <button class="kb-key kb-sym" id="kbVar1" onclick="kbPress('x')">x</button>
      <button class="kb-key kb-sym" id="kbVar2" onclick="kbPress('y')" style="display:none">y</button>
      <button class="kb-key kb-sym" id="kbVar3" onclick="kbPress('z')" style="display:none">z</button>
      <button class="kb-key kb-sym" id="kbPow2" onclick="kbPress('²')" style="display:none">x²</button>
      <button class="kb-key kb-sym" id="kbPow3" onclick="kbPress('³')" style="display:none">x³</button>
      <button class="kb-key kb-sym" id="kbPlusBtn" onclick="kbPress('+')">+</button>
      <button class="kb-key kb-sym" id="kbMinusBtn" onclick="kbPress('-')">−</button>
      <button class="kb-key kb-sym" id="kbOpenBtn" onclick="kbPress('(')" style="display:none">(</button>
      <button class="kb-key kb-sym" id="kbCloseBtn" onclick="kbPress(')')" style="display:none">)</button>
    </div>

    <!-- Surd symbol row (v50) — shown only for exact-value (Pythagoras) answers. -->
    <div class="kb-row" id="kbSurdRow" style="display:none">
      <button class="kb-key kb-sym" id="kbSqrtBtn" onclick="kbPress('√')">√</button>
    </div>

    <!-- π row (v102): shown only for exact circle answers (piExact), e.g. 12π, 10 + 5π. -->
    <div class="kb-row" id="kbPiRow" style="display:none">
      <button class="kb-key kb-sym" id="kbPiBtn" onclick="kbPress('π')">π</button>
      <button class="kb-key kb-sym" id="kbPiPlusBtn" onclick="kbPress('+')">+</button>
    </div>

    <!-- Fraction-slash row — shown only for the decFrac mode (Add & Subtract Fractions
         & Decimals), so a fraction answer like 5/6 can be typed alongside a decimal. -->
    <div class="kb-row" id="kbFracSlashRow" style="display:none">
      <button class="kb-key kb-sym" id="kbFracSlashBtn" onclick="kbPress('/')">/</button>
    </div>

    <!-- Inequality symbol row (v51) — shown only for the inequalities skill.
         The variable, the four comparison signs, and / for fractional answers. -->
    <div class="kb-row" id="kbIneqRow" style="display:none">
      <button class="kb-key kb-sym" onclick="kbPress('x')">x</button>
      <button class="kb-key kb-sym" onclick="kbPress('&lt;')">&lt;</button>
      <button class="kb-key kb-sym" onclick="kbPress('&gt;')">&gt;</button>
      <button class="kb-key kb-sym" onclick="kbPress('≤')">≤</button>
      <button class="kb-key kb-sym" onclick="kbPress('≥')">≥</button>
      <button class="kb-key kb-sym" onclick="kbPress('/')">/</button>
    </div>

    <!-- Row 1: 7 8 9 ⌫ -->
    <div class="kb-row">
      <button class="kb-key kb-num" onclick="kbPress('7')">7</button>
      <button class="kb-key kb-num" onclick="kbPress('8')">8</button>
      <button class="kb-key kb-num" onclick="kbPress('9')">9</button>
      <button class="kb-key kb-del" onclick="kbDel()" aria-label="Delete">⌫</button>
    </div>
    <!-- Row 2: 4 5 6 − -->
    <div class="kb-row">
      <button class="kb-key kb-num" onclick="kbPress('4')">4</button>
      <button class="kb-key kb-num" onclick="kbPress('5')">5</button>
      <button class="kb-key kb-num" onclick="kbPress('6')">6</button>
      <button class="kb-key kb-sym kb-sym-inactive" id="kbNegBtn" onclick="kbPressIfActive('kbNegBtn','-')">−</button>
    </div>
    <!-- Row 3: 1 2 3 . -->
    <div class="kb-row">
      <button class="kb-key kb-num" onclick="kbPress('1')">1</button>
      <button class="kb-key kb-num" onclick="kbPress('2')">2</button>
      <button class="kb-key kb-num" onclick="kbPress('3')">3</button>
      <button class="kb-key kb-sym kb-sym-inactive" id="kbDotBtn" onclick="kbPressIfActive('kbDotBtn','.')">.</button>
    </div>
    <!-- Row 4: 0  Next→  ✓Enter -->
    <div class="kb-row">
      <button class="kb-key kb-num kb-zero" onclick="kbPress('0')">0</button>
      <button class="kb-key kb-next kb-next-inactive" id="kbNextBtn" onclick="kbNextIfActive()">Next →</button>
      <button class="kb-key kb-submit" onclick="kbSubmit()">✓</button>
    </div>

  </div>

</div>

<!-- ══════════════ RESULTS ══════════════ -->
<div id="s-results" class="screen">
  <div style="padding-top:8px"></div>
  <div class="res-card">
    <!-- v49: scored sessions LEAD with the animal band (prominent) + the next-level
         target; the score moves into a 4th stat box below. Practice keeps the big
         score number + formula (no band applies to practice). -->
    <div class="res-band-hero" id="rBandHero" style="display:none">
      <div id="rBandChip"></div>
      <div class="rbh-next" id="rBandNext"></div>
    </div>
    <div class="res-score" id="rScore">0</div>
    <div class="res-label" id="rLabel">Challenge Score</div>
    <div class="res-stats" id="rStats">
      <div class="res-stat"><div class="val" id="rCorrect">–</div><div class="key">Correct</div></div>
      <div class="res-stat"><div class="val" id="rAcc">–</div><div class="key">Accuracy</div></div>
      <div class="res-stat"><div class="val" id="rCpm">–</div><div class="key">Per min</div></div>
      <div class="res-stat" id="rScoreBox" style="display:none"><div class="val" id="rScoreVal">–</div><div class="key">Score</div></div>
    </div>
    <div class="res-formula" id="rFormula" style="display:none"></div>
    <div class="res-verdict" id="rVerdict"></div>
    <div class="pb-banner" id="rPbBanner"></div>
    <div id="rSparkWrap">
      <div class="sl-label">Recent scores — <span id="rSparkSkill"></span></div>
      <div class="sparkline" id="rSpark"></div>
    </div>
  </div>
  <div class="ctrl-row">
    <button class="btn-primary" onclick="tryAgain()">↻ Try Again</button>
    <button class="btn-ghost" onclick="goHome()">Home</button>
  </div>
  <div style="height:8px"></div>
  <button class="btn-ghost" onclick="goToday()" id="resultsShareBtn" style="font-size:0.88rem;padding:10px;border-color:var(--accent);color:var(--accent)">
    📤 Share today's sessions with teacher
  </button>
  <div id="reviewWrap" style="display:none">
    <div class="review-hdr" id="reviewHdr"></div>
    <div id="reviewList"></div>
  </div>
</div>

<!-- ══════════════ LEADERBOARD ══════════════ -->
<div id="s-lb" class="screen">
  <div class="lb-hdr">
    <button class="back-btn" style="padding:0;margin-right:4px" onclick="goHome()">←</button>
    <h2>🏆 Personal Bests</h2>
  </div>
  <div class="lb-tabs" id="lbTabs"></div>
  <div id="lbContent"></div>
</div>

<!-- ══════════════ TODAY'S RESULTS ══════════════ -->
<div id="s-today" class="screen">
  <div class="today-header">
    <h2>📋 Today's Sessions</h2>
    <button class="back-btn" style="padding:0" onclick="goHome()">← Home</button>
  </div>
  <div id="todayEmpty" class="nothing-to-share" style="display:none">
    No sessions yet today.<br>Complete any session — Fluency, Challenge or Practice — to see your results here.
  </div>
  <div class="session-list" id="todayList"></div>
  <div id="todayShareWrap">
    <div class="share-card" id="todayShareCard">
      <h3>📤 Share with your teacher</h3>
      <p id="shareCardDesc">Sends your new sessions to your teacher. You can share multiple times — only unsent sessions are included each time.</p>
      <div class="share-preview" id="sharePreview"></div>
      <button class="btn-share" id="shareFormBtn" onclick="openShareForm()">
        <span>Open Microsoft Form</span>
        <span style="font-size:1.1rem">→</span>
      </button>
      <button class="btn-copy" onclick="copyShareText()">📋 Copy results text instead</button>
      <div class="share-success" id="shareSuccess">
        ✓ Sent! Come back after your next session to share again.
      </div>
    </div>
    <button class="btn-ghost" onclick="markAllSent()" style="font-size:0.85rem;padding:10px">
      ✓ Already submitted — mark all as sent
    </button>
  </div>
</div>

</div><!-- /app -->

<script>
/* ═══════════════════════════════════════════════
   SKILL / LEVEL DEFINITIONS
═══════════════════════════════════════════════ */
const COLORS = ['#4338CA','#DC2626','#059669','#D97706','#0891B2','#7C3AED','#DB2777'];

/* inputMode: 'number' | 'fraction' | 'mixed' | 'index' | 'sci' | 'ratio' | 'algebra' */
const CATS = {
  number: {
    label: '🔢 Number',
    skills: [
      { id:'numLine',     name:'Number Lines',           inputMode:'fraction', lvKey:'nline', levelModes:{2:'choice',3:'plotPts',4:'plotPts'} },
      { id:'numberBonds', name:'Number Bonds',           inputMode:'number', lvKey:'nb'  },
      { id:'addition',    name:'Addition',               inputMode:'number', lvKey:'as'  },
      { id:'subtraction', name:'Subtraction',            inputMode:'number', lvKey:'as'  },
      { id:'timesTables', name:'Times Tables',          inputMode:'number', lvKey:'tt'  },
      { id:'division',    name:'Division',               inputMode:'number', lvKey:'div' },
      { id:'writtenMult', name:'Written Multiplication',  inputMode:'number', lvKey:'wmul' },
      { id:'orderOps',    name:'Order of Operations',    inputMode:'number', lvKey:'oo'  },
      { id:'factorsMultiples', name:'Factors, Multiples &amp; Primes', inputMode:'number', lvKey:'fmp', levelModes:{1:'choice',2:'choice',3:'number',4:'choice',5:'choice'} },
      { id:'primeFactor', name:'Prime Factorisation', inputMode:'number', lvKey:'pfac', levelModes:{1:'choice',2:'number',3:'number',4:'choice'} },
      { id:'hcfLcm',      name:'Highest Common Factor &amp; Lowest Common Multiple', inputMode:'number', lvKey:'hcflcm', levelModes:{5:'choice'} },
      { id:'roundEst',    name:'Rounding &amp; Estimation', inputMode:'number', lvKey:'rest' },
      { id:'sigFigs',     name:'Significant Figures',    inputMode:'number', lvKey:'sf'  },
      { id:'numClass',    name:'Number Classification',  inputMode:'choice', lvKey:'ncl', levelModes:{1:'choice',2:'multiSel'} },
      { id:'absFact',     name:'Absolute Value &amp; Factorials', inputMode:'number', lvKey:'absf' },
    ]
  },
  integers: {
    label: '± Integers',
    skills: [
      { id:'intAddSub',    name:'Add / Subtract Integers',         inputMode:'number', lvKey:'int'  },
      { id:'intMultDiv',   name:'Multiply / Divide Integers',      inputMode:'number', lvKey:'intmd', levelModes:{4:'choice'}  },
      { id:'intSquareCube',name:'Squares &amp; Cubes of Integers', inputMode:'number', lvKey:'isc'  },
      { id:'intOrderOps',  name:'Order of Operations (Integers)',   inputMode:'number', lvKey:'ioo'  },
    ]
  },
  exponents: {
    label: 'x² Exponents',
    skills: [
      { id:'squares',    name:'Square Numbers',          inputMode:'number', lvKey:'sq', levelModes:{4:'gapFill'}   },
      { id:'roots',      name:'Square Roots',            inputMode:'number', lvKey:'sq', levelModes:{4:'gapFill'}   },
      { id:'cubes',      name:'Cube Numbers',            inputMode:'number', lvKey:'cu'   },
      { id:'cubeRoots',  name:'Cube Roots',              inputMode:'number', lvKey:'cu'   },
      { id:'indexExpand', name:'Index Notation &amp; Expanded Form', inputMode:'number', lvKey:'ixe', levelModes:{1:'gapFill',2:'choice'} },
      { id:'indexMult',  name:'Index Law (Multiplication Law)',  inputMode:'index',  lvKey:'imul', levelModes:{4:'choice'} },
      { id:'indexDiv',   name:'Index Law (Division Law)',        inputMode:'index',  lvKey:'idiv' },
      { id:'indexPow',   name:'Index Law (Power of a Power)',    inputMode:'index',  lvKey:'ipow' },
      { id:'negIndices', name:'Negative &amp; Zero Indices',  inputMode:'fraction', lvKey:'nidx' },
      { id:'sciTo',      name:'Number → Scientific Notation', inputMode:'sci', lvKey:'sci' },
      { id:'sciFrom',    name:'Scientific Notation → Number', inputMode:'number', lvKey:'sci' },
      { id:'surdSimplify', name:'Simplify Surds',            inputMode:'surd', lvKey:'ssim' },
      { id:'surdAddSub',   name:'Add &amp; Subtract Surds',  inputMode:'surd', lvKey:'sas'  },
      { id:'surdMultiply', name:'Multiply Surds',            inputMode:'surd', lvKey:'smul' },
      { id:'surdDivide',   name:'Divide Surds',              inputMode:'surd', lvKey:'sdiv' },
    ]
  },

  fractions: {
    label: '½ Fractions',
    skills: [
      { id:'fracSimplify',   name:'Simplify Fractions',                inputMode:'fraction', lvKey:'fs', levelModes:{4:'choice'}   },
      { id:'fracCompare',    name:'Compare &amp; Order Fractions',     inputMode:'choice',   lvKey:'fcmp', levelModes:{1:'choice',2:'arrange',3:'arrange'} },
      { id:'fracAddSub',     name:'Add &amp; Subtract Fractions',      inputMode:'fraction', lvKey:'fas', levelModes:{5:'mixed'}  },
      { id:'fracMultiply',   name:'Multiply Fractions',                inputMode:'fraction', lvKey:'fmu'  },
      { id:'fracDivide',     name:'Divide Fractions',                  inputMode:'fraction', lvKey:'fd'   },
      { id:'fracIdentify',   name:'Identify Fractions',                 inputMode:'fraction', lvKey:'fid'  },
      { id:'fracOfAmount',   name:'Fraction of an Amount',             inputMode:'number',   lvKey:'foa'  },
      { id:'mixedToImp',     name:'Mixed Number → Improper Fraction',  inputMode:'fraction', lvKey:'mi'   },
      { id:'impToMixed',     name:'Improper Fraction → Mixed Number',  inputMode:'mixed',    lvKey:'mi'   },
      { id:'fracOrderOps',   name:'Order of Operations (Fractions)',   inputMode:'fraction', lvKey:'foo'  },
    ]
  },
  decimals: {
    label: '0.1 Decimals',
    skills: [
      { id:'decPlaceValue',name:'Decimal Place Value',            inputMode:'number', lvKey:'dpv', levelModes:{1:'choice',2:'fraction',3:'number'} },
      { id:'decIdentify',  name:'Identify Decimals',              inputMode:'number', lvKey:'did'  },
      { id:'decExpand',    name:'Expanded Form of Decimals',      inputMode:'number', lvKey:'dxf', levelModes:{1:'choice',2:'choice',3:'number'} },
      { id:'decToFrac',    name:'Convert Decimals to Fractions',  inputMode:'number', lvKey:'dtf', levelModes:{1:'fraction',2:'fraction',3:'fraction'} },
      { id:'fracToDec',    name:'Convert Fractions to Decimals',  inputMode:'number', lvKey:'ftd'  },
      { id:'decRecurring', name:'Terminating &amp; Recurring Decimals', inputMode:'number', lvKey:'trd', levelModes:{1:'choice',2:'number',3:'fraction'} },
      { id:'compareDec',   name:'Compare &amp; Order Decimals',   inputMode:'choice', lvKey:'cmp', levelModes:{1:'choice',2:'arrange',3:'choice',4:'arrange',5:'arrange',6:'choice'} },
      { id:'decRound',     name:'Rounding Decimals',              inputMode:'number', lvKey:'dr'   },
      { id:'decAdd',       name:'Add Decimals',                  inputMode:'number', lvKey:'da'   },
      { id:'decSub',       name:'Subtract Decimals',             inputMode:'number', lvKey:'dsu'  },
      { id:'decAddSub',    name:'Add &amp; Subtract Decimals',   inputMode:'number', lvKey:'das'  },
      { id:'decAddSubNeg', name:'Add &amp; Subtract Decimals (Positive &amp; Negative)', inputMode:'number', lvKey:'dasn' },
      { id:'fdAddSub',     name:'Add &amp; Subtract Fractions &amp; Decimals', inputMode:'decFrac', lvKey:'fda' },
      { id:'decPow10',     name:'Multiply &amp; Divide by 10, 100, 1000', inputMode:'number', lvKey:'dp10' },
      { id:'decMultiply',  name:'Multiply Decimals',              inputMode:'number', lvKey:'dmu', levelModes:{5:'choice'}  },
      { id:'fdMultiply',   name:'Multiply Decimals &amp; Fractions', inputMode:'decFrac', lvKey:'fdm' },
      { id:'decSquareCube',name:'Squares &amp; Cubes of Decimals',inputMode:'number', lvKey:'dsc'  },
      { id:'decDivide',    name:'Divide Decimals',                inputMode:'number', lvKey:'dd'   },
      { id:'decMulDivNeg', name:'Multiply &amp; Divide Decimals (Positive &amp; Negative)', inputMode:'number', lvKey:'dmdn' },
      { id:'decLeadEst',   name:'Leading Digit Estimation',       inputMode:'number', lvKey:'dle'  },
      { id:'decSqCubeRoot',name:'Square Roots &amp; Cube Roots of Decimals', inputMode:'number', lvKey:'dscr' },
      { id:'decOrderOps',  name:'Order of Operations (Decimals)', inputMode:'number', lvKey:'doo'  },
    ]
  },
  percentages: {
    label: '% Percentages',
    skills: [
      { id:'pctIdentify',  name:'Identify Percentages',                inputMode:'number',   lvKey:'pid' },
      { id:'pctDecConv',   name:'Convert Percentages &amp; Decimals',   inputMode:'number',   lvKey:'pdc' },
      { id:'fracPctConv',  name:'Convert Fractions &amp; Percentages',  inputMode:'number',   lvKey:'fpc', levelModes:{3:'fraction',4:'fraction'} },
      { id:'pctFDP',       name:'Convert Fractions, Decimals &amp; Percentages', inputMode:'pctTable', lvKey:'pfdp' },
      { id:'pctOfAmount',  name:'Finding a Percentage of an Amount',    inputMode:'number',   lvKey:'poa' },
      { id:'pctExpress',   name:'One Amount as a Percentage of Another', inputMode:'number',  lvKey:'pex', levelModes:{4:'choice',5:'choice'} },
      { id:'pctChange',    name:'Percentage Increase &amp; Decrease',   inputMode:'number',   lvKey:'pcd' },
      { id:'pctReverse',   name:'Reverse Percentages',                 inputMode:'number',   lvKey:'prev' },
      { id:'pctProfitLoss',name:'Profit &amp; Loss',                    inputMode:'plToggle', lvKey:'ppl' },
    ]
  },
  ratiosrates: {
    label: '➡️ Ratios & Rates',
    skills: [
      { id:'ratioSimplify', name:'Simplifying Ratios',     inputMode:'ratio',  lvKey:'rsim', levelModes:{4:'gapFill',6:'gapFill'} },
      { id:'ratioEquiv',    name:'Equivalent Ratios',      inputMode:'number', lvKey:'req', levelModes:{4:'ratio'} },
      { id:'ratioShare',    name:'Sharing in a Ratio',     inputMode:'number', lvKey:'rsh', levelModes:{6:'fraction',7:'gapFill'}  },
      { id:'rateSimplify',  name:'Simplifying Rates',      inputMode:'number', lvKey:'rtsim' },
      { id:'rateConvert',   name:'Converting Rates',       inputMode:'number', lvKey:'rtcv'  },
      { id:'proportion',    name:'Direct &amp; Inverse Proportion', inputMode:'number', lvKey:'prop', levelModes:{1:'choice'} },
      { id:'bestBuy',       name:'Best Buys &amp; Unit Price', inputMode:'number', lvKey:'bbuy', levelModes:{2:'choice'} },
    ]
  },
  algebra: {
    label: '𝑥 Algebra',
    skills: [
      { id:'algWords',       name:'Writing Expressions from Words',       inputMode:'choice',  lvKey:'awords', levelModes:{5:'gapFill'} },
      { id:'algParts',       name:'Parts of Expressions',                 inputMode:'number',  lvKey:'aparts', levelModes:{4:'choice'} },
      { id:'algSub',         name:'Substitute into Expressions',          inputMode:'number',  lvKey:'asub'   },
      { id:'algLikeTerms',   name:'Add &amp; Subtract Like Terms',        inputMode:'algebra', lvKey:'alike'  },
      { id:'algMultiply',    name:'Multiply Terms',                       inputMode:'algebra', lvKey:'amul'   },
      { id:'algDivide',      name:'Divide Terms',                         inputMode:'algebra', lvKey:'adiv'   },
      { id:'algFrac',        name:'Algebraic Fractions',                  inputMode:'fraction', lvKey:'afrac', levelModes:{5:'choice',6:'choice'} },
      { id:'algExpand',      name:'Expand Single Brackets',               inputMode:'algebra', lvKey:'aexp'   },
      { id:'algExpandTwo',   name:'Expand &amp; Simplify (Two Brackets)', inputMode:'algPoly', lvKey:'aexp2'  },
      { id:'algExpandBinom', name:'Expanding Binomial Brackets',           inputMode:'algPoly', lvKey:'aeb'    },
      { id:'algFactorHCF',   name:'Factorise (Highest Common Factor)',    inputMode:'algFactored',  lvKey:'afh'    },
      { id:'algFactorMonic', name:'Factorise Monic Quadratics',           inputMode:'algFactored',  lvKey:'afm'    },
      { id:'algFactorGroup', name:'Factorise by Grouping',                inputMode:'algFactored',  lvKey:'afg'    },
      { id:'algPerim',       name:'Perimeter &amp; Area as an Expression', inputMode:'gapFill', lvKey:'aper', levelModes:{2:'number'} },
    ]
  },
  equations: {
    // v77.1 (Laura): renamed to "Linear Equations". The CATS KEY stays 'equations' and every
    // skill id is untouched, so this is display-only and storage-safe.
    label: '⚖️ Linear Equations',
    skills: [
      { id:'eqOneStepAddSub', name:'One-Step Equations (+ / −)', inputMode:'fraction', lvKey:'eq1', levelModes:{4:'number'} },
      { id:'eqOneStepMulDiv', name:'One-Step Equations (× / ÷)', inputMode:'fraction', lvKey:'eq2', levelModes:{4:'number'} },
      { id:'eqTwoStep',       name:'Two-Step Linear Equations',  inputMode:'fraction', lvKey:'eq3', levelModes:{4:'number'} },
      { id:'eqTwoStepFrac',   name:'Two-Step Equations with Fractions',    inputMode:'fraction', lvKey:'eq4' },
      { id:'eqVarDenom',      name:'Equations with x on the Denominator',  inputMode:'fraction', lvKey:'eq5' },
      { id:'eqBothSides',     name:'Variables on Both Sides',              inputMode:'fraction', lvKey:'eq6' },
      { id:'ineqLinear',      name:'Two &amp; Three-Step Inequalities',   inputMode:'ineq', lvKey:'ineq' },
      { id:'rearrange',       name:'Rearranging Formulas',                 inputMode:'choice', lvKey:'rear' },
    ]
  },
  quadratics: {
    label: '◡ Quadratics',
    skills: [
      { id:'quadVerify', name:'Verify Solutions to Quadratic Equations', inputMode:'choice',  lvKey:'qver' },
      { id:'quadSolve',  name:'Solve Quadratic Equations',               inputMode:'gapFill', lvKey:'qsol', levelModes:{2:'choice'} },
    ]
  },
  coordgeom: {
    label: '📈 Coordinate Geometry',
    skills: [
      { id:'cartesian',       name:'The Cartesian Plane',                 inputMode:'choice',   lvKey:'cart', levelModes:{2:'gapFill',4:'gapFill'} },
      { id:'linearNonlinear', name:'Linear or Non-Linear',                inputMode:'choice',   lvKey:'lnl'  },
      // v78.2 (Laura) — build a table, then plot it. Sits before the intercept work,
      // whose new L2 reads the intercepts straight off a table of values.
      { id:'tableValues',     name:'Table of Values',                     inputMode:'gapFill',  lvKey:'tov',  levelModes:{2:'plotPts',4:'plotPts'} },
      { id:'intercepts',      name:'x- and y-Intercepts of Linear Graphs', inputMode:'number',  lvKey:'xyint', levelModes:{1:'gapFill',5:'gapFill'} },
      { id:'gradientSeg',     name:'Gradient of a Line Segment',          inputMode:'fraction', lvKey:'grad', levelModes:{1:'choice'} },
      { id:'gradEqn',         name:'Gradient &amp; y-Intercept from an Equation', inputMode:'choice', lvKey:'gre', levelModes:{3:'plotPts'} },
      { id:'eqnGraph',        name:'Matching Equations &amp; Graphs',      inputMode:'choice',   lvKey:'egm' },
      { id:'sketchLinear',    name:'Sketching Linear Graphs',             inputMode:'plotPts',  lvKey:'skl' },
      // v78.3 (Laura) — the modelling half of linear relationships
      { id:'linearApps',      name:'Applications of Linear Graphs',       inputMode:'number',   lvKey:'lap',  levelModes:{2:'gapFill',3:'gapFill',4:'gapFill'} },
    ]
  },
  financepatterns: {
    label: '💰 Finance & Patterns',
    skills: [
      { id:'gst',            name:'GST (Goods &amp; Services Tax)', inputMode:'number', lvKey:'gst'  },
      { id:'simpleInterest', name:'Simple Interest',                inputMode:'number', lvKey:'sint', levelModes:{4:'gapFill',6:'gapFill'} },
      /* v78 (Laura) — three new Yr 7-9 pattern skills, then the original skill
         RENAMED to 'Arithmetic & Geometric Sequences'. The rename is display-only:
         the id stays 'sequences' and the lvKey stays 'seq', so every Personal Best,
         streak, .bas row and share-line is untouched. Laura keeps it because it is
         the higher-order one — the student has to decide WHICH kind it is. */
      { id:'seqWords',  name:'Sequence Rules in Words', inputMode:'number', lvKey:'sqw', levelModes:{2:'choice',4:'gapFill',5:'gapFill'} },
      { id:'arithSeq',  name:'Arithmetic Sequences',    inputMode:'number', lvKey:'ase', levelModes:{2:'gapFill',3:'gapFill'} },
      { id:'geoSeq',    name:'Geometric Sequences',     inputMode:'number', lvKey:'gse', levelModes:{2:'gapFill',3:'gapFill'} },
      { id:'sequences',      name:'Arithmetic &amp; Geometric Sequences', inputMode:'number', lvKey:'seq',  levelModes:{1:'choice',3:'gapFill',4:'gapFill'} },
      { id:'recurrence',     name:'Recurrence Relations',           inputMode:'number', lvKey:'rec',  levelModes:{1:'gapFill'} },
      { id:'flatDep',        name:'Flat Rate Depreciation',         inputMode:'number', lvKey:'fdep', levelModes:{4:'gapFill',6:'gapFill'} },
    ]
  },
  trig: {
    label: '📐 Trigonometry & Pythagoras',
    skills: [
      { id:'pythagoras',   name:'Pythagoras\u2019 Theorem',            inputMode:'surd', lvKey:'pyth', levelModes:{5:'choice'} },
      { id:'trigExactDeg', name:'Sin / Cos / Tan Exact Values (Degrees)', inputMode:'choice', lvKey:'tdeg' },
      { id:'trigExactRad', name:'Sin / Cos / Tan Exact Values (Radians)', inputMode:'choice', lvKey:'trad' },
    ]
  },
  geometry: {
    label: '△ Geometry',
    skills: [
      { id:'nameShapes', name:'Naming 2D &amp; 3D Shapes', inputMode:'choice', lvKey:'nsh', levelModes:{7:'number'} },
      { id:'nameAnglesLines', name:'Naming Angles, Lines &amp; Triangles', inputMode:'choice', lvKey:'nal' },
      { id:'eulerRule', name:"Euler's Rule — Edges, Faces &amp; Vertices", inputMode:'number', lvKey:'eul' },
      { id:'netsViews', name:'Nets, Plans &amp; Views of 3D Objects', inputMode:'choice', lvKey:'npv' },
      { id:'interiorAngles', name:'Interior Angles of a Triangle', inputMode:'number', lvKey:'iat' },
      { id:'angleRel', name:'Angle Relationships', inputMode:'number', lvKey:'arl', levelModes:{1:'choice'} },
      { id:'angleParallel', name:'Angles on Parallel Lines', inputMode:'number', lvKey:'apl', levelModes:{1:'choice',5:'choice'} },
      { id:'angleQuad', name:'Angles in Quadrilaterals', inputMode:'number', lvKey:'aqd' },
      { id:'anglePoly', name:'Angles in Polygons', inputMode:'number', lvKey:'apoly' },
      { id:'congruSimilar', name:'Congruence &amp; Similarity', inputMode:'number', lvKey:'cs', levelModes:{1:'choice',2:'choice',3:'choice'} },
    ]
  },
  /* v78.3 (Laura) — a home for the practical, everyday-maths skills that don't
     belong to any of the strands above. Deliberately last in the menu. */
  /* v79 (Laura): renamed from '🧩 Other' — the category now has a real subject.
     The CATS KEY stays 'other', which is what every stored key is built from, so
     the rename is display-only and no Personal Best moves. The dashboard .bas
     matches on SKILL names, not the category, so it is unaffected too. */
  other: {
    label: '🔄 Time & Transformations',
    skills: [
      { id:'timeConvert', name:'Converting Units of Time',   inputMode:'number', lvKey:'tcv', levelModes:{4:'gapFill'} },
      { id:'timetables',  name:'Train &amp; Bus Timetables', inputMode:'number', lvKey:'ttb', levelModes:{1:'choice',3:'choice',5:'choice'} },
      { id:'distTime',    name:'Distance-Time Graphs',       inputMode:'number', lvKey:'dtg', levelModes:{2:'choice',3:'plotPts'} },
      /* v79 — the transformations family. Levels 1–2 apply a transformation given
         in words, the middle levels move between words and mapping notation, and
         the last level runs the whole thing backwards. */
      { id:'translate',   name:'Translations',                   inputMode:'gapFill', lvKey:'trn', levelModes:{3:'choice',4:'choice'} },
      { id:'reflect',     name:'Reflections',                    inputMode:'gapFill', lvKey:'rfl', levelModes:{3:'choice',4:'choice'} },
      { id:'dilate',      name:'Dilations from the Origin',      inputMode:'gapFill', lvKey:'dil', levelModes:{2:'choice',3:'choice'} },
      { id:'rotate',      name:'Rotations about the Origin',     inputMode:'gapFill', lvKey:'rot', levelModes:{3:'choice',4:'choice'} },
      { id:'combine',     name:'Combinations of Transformations',inputMode:'gapFill', lvKey:'cmb', levelModes:{3:'choice'} },
      { id:'shapeTrans',  name:'Transformations of 2D Shapes',   inputMode:'plotPts', lvKey:'stf', levelModes:{3:'choice'} },
    ]
  },
  /* v84 (Laura) — 📊 DATA ANALYSIS, Release 1: the display engines plus the two
     skills that need no calculation, and one skill that reads a value off each
     display. Mean / mode / median / range / shape / outliers follow in later
     releases and re-use these same engines. */
  data: {
    label: '📊 Data Analysis',
    skills: [
      { id:'dataClassify', name:'Classifying Data',      inputMode:'choice', lvKey:'dcl' },
      { id:'freqTables',   name:'Frequency Tables',      inputMode:'number', lvKey:'fqt', levelModes:{3:'choice'} },
      { id:'dataRead',     name:'Reading Data Displays', inputMode:'number', lvKey:'drd' },
      /* v87 — Release 2. One level per display, in the same order every time
         (raw → dot plot → stem plot → frequency table → histogram → grouped or
         box plot), so a student always knows where they are in the family. */
      { id:'dataMean',     name:'Mean',   inputMode:'number', lvKey:'dmn' },
      { id:'dataMode',     name:'Mode',   inputMode:'number', lvKey:'dmo', levelModes:{6:'choice'} },
      { id:'dataMedian',   name:'Median', inputMode:'number', lvKey:'dmd' },
      { id:'dataRange',    name:'Range',  inputMode:'number', lvKey:'drg' },
      /* v88 — Release 3. Shape is the first skill here whose answer is a
         judgement, so every distribution is generated from a hand-checked
         count pattern (see genDataShape) rather than sampled. */
      { id:'dataShape',    name:'Shape of a Distribution', inputMode:'choice', lvKey:'dsh' },
      { id:'dataQuartiles', name:'Quartiles &amp; Interquartile Range', inputMode:'number', lvKey:'dqt' },
      { id:'dataOutliers', name:'Outliers &amp; Fences',   inputMode:'number', lvKey:'dou', levelModes:{4:'gapFill', 5:'choice'} },
    ]
  },
  /* ── v101 — PROBABILITY. The second missing strand, built from the 7MAT and
     7MAS (SEAL) Statistics & Probability booklets. Skills sit in teaching order:
     what CAN happen (sample space) → how likely (language) → work it out
     (theoretical) → the complement → from data (experimental) → how many to
     expect → two steps, and then the SEAL half. Conditional Probability is a
     Yr 10 skill built ahead of the year that needs it — the engines were
     already here. */
  prob: {
    label: '🎲 Probability',
    skills: [
      { id:'probSample',  name:'Sample Space',            inputMode:'number', lvKey:'pbss', levelModes:{2:'choice', 3:'choice', 5:'multiSel'} },
      { id:'probLang',    name:'Language of Chance',      inputMode:'choice', lvKey:'pbln', levelModes:{6:'arrange', 7:'plotPts'} },
      { id:'probTheory',  name:'Theoretical Probability', inputMode:'fraction', lvKey:'pbth', levelModes:{6:'number', 7:'number', 9:'number'} },
      { id:'probComp',    name:'Complement',              inputMode:'fraction', lvKey:'pbcm', levelModes:{2:'number', 3:'number', 4:'number', 5:'choice'} },
      { id:'probExp',     name:'Experimental Probability',inputMode:'fraction', lvKey:'pbxp', levelModes:{3:'number', 5:'choice', 6:'choice'} },
      { id:'probExpect',  name:'Expected Number of Outcomes', inputMode:'number', lvKey:'pbxn', levelModes:{6:'fraction'} },
      { id:'probTwoStep', name:'Two-Step Experiments',    inputMode:'fraction', lvKey:'pb2s', levelModes:{1:'number'} },
      { id:'probTree',    name:'Tree Diagrams',           inputMode:'fraction', lvKey:'pbtr', levelModes:{1:'number', 2:'choice'} },
      { id:'probTwoWay',  name:'Two-Way Tables',          inputMode:'fraction', lvKey:'pb2w', levelModes:{1:'gridFill', 4:'number'} },
      { id:'probVenn',    name:'Venn Diagrams',           inputMode:'number', lvKey:'pbvn', levelModes:{2:'gapFill', 3:'fraction', 4:'fraction', 5:'choice'} },
      { id:'probNotate',  name:'Probability Notation',    inputMode:'choice', lvKey:'pbnt', levelModes:{2:'fraction'} },
      { id:'probMutEx',   name:'Mutually Exclusive Events', inputMode:'choice', lvKey:'pbme', levelModes:{3:'fraction'} },
      { id:'probAddRule', name:'The Addition Rule',       inputMode:'fraction', lvKey:'pbar', levelModes:{4:'choice'} },
      { id:'probCond',    name:'Conditional Probability', inputMode:'fraction', lvKey:'pbcd', levelModes:{4:'choice'} },
    ]
  },
  /* v102 (Laura) · 📏 MEASUREMENT, Release A: length, perimeter, circles and
     area. Release B (surface area, volume, capacity) appends to this list. */
  meas: {
    label: '📏 Measurement',
    skills: [
      { id:'measLength',    name:'Units of Length',              inputMode:'number',  lvKey:'msln',   levelModes:{1:'choice', 5:'arrange'} },
      { id:'measPerim',     name:'Perimeter',                    inputMode:'number',  lvKey:'msper',  levelModes:{6:'gapFill', 7:'gapFill'} },
      { id:'measCirc',      name:'Circumference',                inputMode:'number',  lvKey:'mscc',   levelModes:{1:'choice', 3:'piExact', 4:'piExact'} },
      { id:'measArc',       name:'Perimeter of Circle Parts',    inputMode:'piExact', lvKey:'msarc',  levelModes:{2:'number', 6:'number', 7:'number'} },
      { id:'measAreaUnits', name:'Units of Area',                inputMode:'number',  lvKey:'msua',   levelModes:{1:'choice'} },
      { id:'measArea',      name:'Area of Rectangles, Parallelograms &amp; Triangles', inputMode:'number', lvKey:'msar' },
      { id:'measMissing',   name:'Missing Length from Area',     inputMode:'number',  lvKey:'msmis' },
      { id:'measQuad',      name:'Area of Rhombuses, Kites &amp; Trapeziums', inputMode:'number', lvKey:'msqd' },
      { id:'measCircArea',  name:'Area of Circles &amp; Sectors', inputMode:'number', lvKey:'msac',   levelModes:{1:'piExact', 3:'piExact', 4:'piExact'} },
      { id:'measComposite', name:'Composite Area',               inputMode:'number',  lvKey:'mscomp' },
      /* v103 · Release B: surface area, volume and capacity */
      { id:'measSA',        name:'Surface Area of Prisms',       inputMode:'number',  lvKey:'mssa' },
      { id:'measSACyl',     name:'Surface Area of Cylinders',    inputMode:'piExact', lvKey:'mssac',  levelModes:{3:'number', 5:'number'} },
      { id:'measVolUnits',  name:'Units of Volume &amp; Capacity', inputMode:'number', lvKey:'msvu',  levelModes:{1:'choice', 2:'choice', 7:'arrange'} },
      { id:'measVolRect',   name:'Volume of Rectangular Prisms', inputMode:'number',  lvKey:'msvr' },
      { id:'measVolPrism',  name:'Volume of Prisms',             inputMode:'number',  lvKey:'msvp' },
      { id:'measVolCyl',    name:'Volume of Cylinders',          inputMode:'number',  lvKey:'msvcy',  levelModes:{1:'piExact', 3:'piExact'} },
      { id:'measCap',       name:'Capacity of Containers',       inputMode:'number',  lvKey:'mscap' },
      { id:'measCompSolid', name:'Volume of Composite Solids',   inputMode:'number',  lvKey:'mscs' },
    ]
  }
};

/* ── Year-level guide (Victorian Curriculum 2.0) ──
   Informational chip shown beside each skill name. Purely a display hint —
   it is NOT a stored key and never gates anything. To add a skill, add its
   year here too. Primary-rooted number facts are floored at 'Yr 7' (the app's
   entry year); ranges are used where a skill's levels span two years. */
const SKILL_YEAR = {
  // Number  (foundational skills below high-school level carry no year chip)
  timesTables:'', division:'', addition:'', subtraction:'',
  orderOps:'Yr 7', sigFigs:'Yr 9',
  netsViews:'Yr 7', decRecurring:'Yr 8',
  fracIdentify:'Yr 7', indexExpand:'Yr 7', dataQuartiles:'Yr 8–9',
  /* v99 — the nine ALT-audit content gaps */
  numLine:'Yr 7', writtenMult:'', absFact:'Yr 7', algWords:'Yr 7',
  algFrac:'Yr 8–9', algPerim:'Yr 8', proportion:'Yr 8',
  gradEqn:'Yr 8', eqnGraph:'Yr 8', sketchLinear:'Yr 8',
  numberBonds:'', factorsMultiples:'Yr 7', primeFactor:'Yr 7–8', hcfLcm:'Yr 7–8', roundEst:'Yr 7',
  // Integers
  intAddSub:'Yr 7', intMultDiv:'Yr 7', intSquareCube:'Yr 7–8', intOrderOps:'Yr 7',
  // Exponents
  squares:'Yr 7', roots:'Yr 7', cubes:'Yr 8', cubeRoots:'Yr 8',
  indexMult:'Yr 8', indexDiv:'Yr 8', indexPow:'Yr 8', sciTo:'Yr 9', sciFrom:'Yr 9',
  negIndices:'Yr 9', surdSimplify:'Yr 10', surdAddSub:'Yr 10', surdMultiply:'Yr 10', surdDivide:'Yr 10',
  // Fractions
  fracSimplify:'Yr 7', fracAddSub:'Yr 7', fracMultiply:'Yr 7', fracDivide:'Yr 7',
  mixedToImp:'Yr 7', impToMixed:'Yr 7', fracOrderOps:'Yr 8',
  fracOfAmount:'Yr 7', fracCompare:'Yr 7',
  // Decimals  (decAddSub/decAdd/decSub are foundational — no year chip)
  decAddSub:'', decAdd:'', decSub:'', decMultiply:'Yr 7', decDivide:'Yr 7',
  decPow10:'Yr 7', decSquareCube:'Yr 7–8',
  decOrderOps:'Yr 7', decRound:'Yr 7', compareDec:'Yr 7', fdAddSub:'Yr 8',
  decAddSubNeg:'Yr 7–8', decMulDivNeg:'Yr 8', fdMultiply:'Yr 8', decLeadEst:'Yr 7–8', decSqCubeRoot:'Yr 8',
  decPlaceValue:'Yr 7', decExpand:'Yr 7–8', decIdentify:'Yr 7', decToFrac:'Yr 7–8', fracToDec:'Yr 7–8',
  // Percentages
  pctIdentify:'Yr 7', pctDecConv:'Yr 7–8', fracPctConv:'Yr 7–8', pctFDP:'Yr 7–8', pctExpress:'Yr 8', pctOfAmount:'Yr 7–8', pctChange:'Yr 8–9', pctProfitLoss:'Yr 9',
  pctReverse:'Yr 9–10',
  // Ratios & Rates
  ratioSimplify:'Yr 7–8', ratioEquiv:'Yr 7–8', ratioShare:'Yr 7–8',
  rateSimplify:'Yr 7–8', rateConvert:'Yr 8', bestBuy:'Yr 8',
  // Algebra
  algParts:'Yr 7', algSub:'Yr 7', algLikeTerms:'Yr 7–8', algMultiply:'Yr 7–9',
  algDivide:'Yr 7–9', algExpand:'Yr 8', algExpandTwo:'Yr 8–9',
  algFactorMonic:'Yr 10',
  algExpandBinom:'Yr 9–10', algFactorHCF:'Yr 8–9', algFactorGroup:'Yr 10',
  // Equations
  eqOneStepAddSub:'Yr 7', eqOneStepMulDiv:'Yr 7', eqTwoStep:'Yr 7–8',
  eqTwoStepFrac:'Yr 7–9', eqVarDenom:'Yr 8–9', eqBothSides:'Yr 8–9',
  ineqLinear:'Yr 8–9', rearrange:'Yr 9–10',
  // Trigonometry & Pythagoras
  pythagoras:'Yr 8', trigExactDeg:'Yr 10A', trigExactRad:'VCE',
  // Geometry
  interiorAngles:'Yr 7',
  nameShapes:'Yr 7', nameAnglesLines:'Yr 7', eulerRule:'Yr 7',
  angleRel:'Yr 7', angleParallel:'Yr 7', angleQuad:'Yr 8', anglePoly:'Yr 8',
  congruSimilar:'Yr 8',
  // v77 — Number Classification
  numClass:'Yr 8–9',
  // v77 — Quadratics
  quadVerify:'Yr 9–10', quadSolve:'Yr 10',
  // v77 — Coordinate Geometry
  cartesian:'Yr 7', linearNonlinear:'Yr 7–8', intercepts:'Yr 8–9', gradientSeg:'Yr 8–9',
  // v78.2 — Table of Values
  tableValues:'Yr 7–8',
  // v78.3
  linearApps:'Yr 8–9', timeConvert:'Yr 7', timetables:'Yr 7', distTime:'Yr 7–8',
  // v79 — transformations
  translate:'Yr 7–8', reflect:'Yr 7–8', dilate:'Yr 8–9', rotate:'Yr 8',
  combine:'Yr 8–9', shapeTrans:'Yr 7–8',
  // v84 — Data Analysis
  dataClassify:'Yr 7–8', freqTables:'Yr 7–9', dataRead:'Yr 7–10',
  // v87 — Release 2. The grouped/estimate levels are the Yr 9–10 end.
  dataMean:'Yr 7–10', dataMode:'Yr 7–10', dataMedian:'Yr 7–10', dataRange:'Yr 7–10',
  // v88 — Release 3
  dataShape:'Yr 8–10', dataOutliers:'Yr 10',
  // v77 — Finance & Patterns
  gst:'Yr 8–9', simpleInterest:'Yr 9–10', sequences:'Yr 10', recurrence:'Yr 10', flatDep:'Yr 10',
  // v78 — Yr 7–9 sequence work
  seqWords:'Yr 7', arithSeq:'Yr 7–8', geoSeq:'Yr 8–9',
  // v101 — Probability
  probSample:'Yr 7', probLang:'Yr 7', probTheory:'Yr 7', probComp:'Yr 7–8',
  probExp:'Yr 7', probExpect:'Yr 7', probTwoStep:'Yr 7–9', probTree:'Yr 7–9',
  probTwoWay:'Yr 8–10', probVenn:'Yr 8–10', probNotate:'Yr 8', probMutEx:'Yr 8–9',
  probAddRule:'Yr 9', probCond:'Yr 10'
};

/* Each level: title, description, examples shown on card */
const LEVEL_DEFS = {
  /* ── v96 — Identify Fractions (Yr 7 exam MC Q1 and Section B Q8) ── */
  nline: [
    { title:'Level 1 — Read the Number Line', desc:'The line between two whole numbers is split into equal parts. Work out what each part is worth, then read the arrow. Answer as a fraction in simplest form.', examples:["0 to 1 in 8 parts, arrow at the 6th → 3/4"] },
    { title:'Level 2 — Which Arrow Is Closest?', desc:'Four arrows are marked A–D. Work out where the given fraction sits, then tap the arrow nearest to it.', examples:["closest to 3/4 on a line of eighths"] },
    { title:'Level 3 — Mark Every Integer', desc:'Tap every whole number on the line that fits BOTH conditions. Watch the difference between "greater than" and "greater than or equal to".', examples:["greater than −7 and less than −3"] },
    { title:'Level 4 — Show an Inequality', desc:'Solve the inequality first, then tap every integer on the line that satisfies it. The boundary value itself never counts.', examples:["2x − 1 > 7 → mark 5, 6, 7, …"] },
  ],

  wmul: [
    { title:'Level 1 — Three Digits × One Digit', desc:'Set it out in columns and multiply by the single digit, carrying as you go.', examples:["324 × 7","586 × 4"] },
    { title:'Level 2 — Three Digits × Two Digits', desc:'Two rows: multiply by the units digit, then by the tens digit — and do not forget the place-value zero on the second row.', examples:["132 × 29","407 × 63"] },
    { title:'Level 3 — A Zero in the Multiplier', desc:'A zero in the multiplier still needs its row. It is what keeps the next row in the right column.', examples:["246 × 305","178 × 120"] },
  ],

  absf: [
    { title:'Level 1 — Absolute Value', desc:'The bars mean "how far from zero", so the answer is never negative. Work out what is inside the bars first.', examples:["|−7| → 7","|−10 + 4| → 6"] },
    { title:'Level 2 — Factorials', desc:'n! means multiply every whole number from n down to 1.', examples:["4! = 4 × 3 × 2 × 1 = 24","6! = 720"] },
    { title:'Level 3 — Both Together', desc:'Factorials are worked out first, then what is inside each pair of bars, then the subtraction.', examples:["|−10 + 4!| − |3| → 11"] },
  ],

  awords: [
    { title:'Level 1 — Words → Expression', desc:'Turn the phrase into algebra. Watch "less than" and "subtracted from" — both reverse the order.', examples:["\"5 less than x\" → x − 5"] },
    { title:'Level 2 — Expression → Words', desc:'The reverse: the expression is shown and you choose what it says. This is the "what does 3n mean" question.', examples:["3n → \"n multiplied by 3\""] },
    { title:'Level 3 — Two Operations', desc:'Two things happen to the number, so the order and the brackets both matter.', examples:["\"quadrupled then subtracted from 21\" → 21 − 4n"] },
    { title:'Level 4 — Generalise a Pattern', desc:'Three number sentences with the same structure. Replace the part that changes with a pronumeral.', examples:["2 × 3.5 + 7, 0 × 3.5 + 7 → x × 3.5 + 7"] },
    { title:'Level 5 — Story → Equation → Answer', desc:'Write the rule from the story, then use it. Three boxes: the starting amount, the rate, and the answer.', examples:["fee $12 plus $5/hour, total $62 → h = 10"] },
  ],

  afrac: [
    { title:'Level 1 — Same Denominator', desc:'The denominators already match, so just add or subtract the coefficients. Enter the coefficient on top and the number underneath.', examples:["5r/8 − 2r/8 → 3r/8"] },
    { title:'Level 2 — Different Denominators', desc:'Find a common denominator first, convert both, then add or subtract and cancel down.', examples:["5r/6 − 12r/18 → r/6"] },
    { title:'Level 3 — Multiply', desc:'Multiply straight across the top and straight across the bottom, then cancel.', examples:["3x/4 × 8/9 → 2x/3"] },
    { title:'Level 4 — Divide', desc:'Dividing by a fraction means multiplying by its reciprocal — flip the second fraction, then multiply and cancel.', examples:["6x/14 ÷ 18/7 → x/6"] },
    { title:'Level 5 — With Indices', desc:'Divide algebraic fractions carrying powers, including a negative index. A negative index on the bottom becomes a positive one on the top.', examples:["2x⁵/3y⁻² ÷ 8x⁸/15y³ → 5y⁵/4x³"] },
    { title:'Level 6 — Simplify by Factorising', desc:'Factorise the top and the bottom. Only a WHOLE bracket can cancel — never one term out of a sum.', examples:["(12x + 8y)/(14y + 21x) → 4/7"] },
  ],

  aper: [
    { title:'Level 1 — Perimeter as an Expression', desc:'Add the labelled sides of the rectangle and collect the like terms. Fill in the coefficient and the number.', examples:["sides (2x + 3) and (x + 1) → 6x + 8"] },
    { title:'Level 2 — Find x from the Perimeter', desc:'Write the perimeter expression, set it equal to the perimeter given, and solve.', examples:["P = 6x + 8 = 32 → x = 4"] },
    { title:'Level 3 — Substitute One Variable', desc:'The sides use two letters and you are told how they are related. Substitute, then collect the terms.', examples:["sides 2x and 3y with x = 2y → P = 14y"] },
  ],

  prop: [
    { title:'Level 1 — Direct, Inverse or Neither?', desc:'Direct: y ÷ x is the same every time. Inverse: y × x is the same every time. Otherwise, neither.', examples:["1,2,3,4 → 5,10,15,20 = direct"] },
    { title:'Level 2 — Find the Constant k', desc:'For direct proportion k = y ÷ x; for inverse proportion k = x × y. Every column gives the same k.', examples:["y = 5x → k = 5"] },
    { title:'Level 3 — Use the Rule', desc:'Find k from the pair you are given, then use it to find the missing value.', examples:["y ∝ x, x = 3 → y = 12; find y when x = 7"] },
  ],

  fid: [
    { title:'Level 1 — Shaded Shapes', desc:'A circle or bar is split into equal parts and some are shaded. Write the fraction shaded. On this level the fraction is already in simplest form.', examples:['3 of 7 slices \u2192 3/7', '2 of 5 parts \u2192 2/5', '5 of 9 \u2192 5/9'] },
    { title:'Level 2 — Grids', desc:'A grid of 10, 20, 25, 50 or 100 squares with some shaded. Write the fraction shaded. Still already in simplest form.', examples:['7 of 10 \u2192 7/10', '9 of 20 \u2192 9/20', '33 of 100 \u2192 33/100'] },
    { title:'Level 3 — In Simplest Form', desc:'Now the shaded count and the answer are different \u2014 count the shaded parts, write the fraction, then simplify it.', examples:['6 of 8 \u2192 3/4', '15 of 20 \u2192 3/4', '8 of 12 \u2192 2/3'] },
  ],
  /* ── v96 — Index Notation & Expanded Form (VC2M7N02) ── */
  ixe: [
    { title:'Level 1 — Write in Index Form', desc:'A repeated multiplication is shown. Type the base and the power. The base is the number being multiplied; the power is how many of them there are.', examples:['2 \u00d7 2 \u00d7 2 \u00d7 2 \u2192 base 2, power 4', '5 \u00d7 5 \u00d7 5 \u2192 base 5, power 3'] },
    { title:'Level 2 — Write in Expanded Form', desc:'Tap the expanded form of a product of two powers. Watch for the classic trap of multiplying the base by the power instead.', examples:['2\u2074 \u00d7 3\u00b2 \u2192 2\u00d72\u00d72\u00d72 \u00d7 3\u00d73'] },
    { title:'Level 3 — Evaluate', desc:'Work out the value of a product of two powers. Evaluate each power first, then multiply.', examples:['2\u2074 \u00d7 3\u00b2 = 144', '5\u00b2 \u00d7 3 = 75', '3\u00b3 \u00d7 2\u00b2 = 108'] },
  ],
  /* ── v96 — Quartiles & Interquartile Range (SEAL exam Section B Q9) ── */
  dqt: [
    { title:'Level 1 — Lower Quartile (Q1)', desc:'Order the data, split it at the median (leaving the median out if there is an odd number), and find the median of the LOWER half.', examples:['11 values \u2192 Q1 is the 3rd', '7 values \u2192 Q1 is the 2nd'] },
    { title:'Level 2 — Upper Quartile (Q3)', desc:'The same split, but the median of the UPPER half.', examples:['11 values \u2192 Q3 is the 9th', '7 values \u2192 Q3 is the 6th'] },
    { title:'Level 3 — Interquartile Range', desc:'IQR = Q3 \u2212 Q1. The spread of the middle half of the data \u2014 unaffected by an outlier at either end, which is why it beats the range.', examples:['Q1 = 63, Q3 = 85 \u2192 IQR 22'] },
    { title:'Level 4 — From a Dot Plot', desc:'The same job, but read off a dot plot. A dot plot is already in order, so count in from each end.', examples:['count in to Q1 and Q3, then subtract'] },
    { title:'Level 5 — From a Stem Plot', desc:'The IQR from a stem-and-leaf plot. Also already in order \u2014 count the leaves.', examples:['count in to Q1 and Q3, then subtract'] },
    { title:'Level 6 — From a Box Plot', desc:'A box plot draws the quartiles: the BOX runs from Q1 to Q3, so its width is the IQR. Read Q1, Q3 or the IQR straight off the scale.', examples:['box from 30 to 55 \u2192 IQR 25'] },
  ],
  /* ── v96 — Gradient & y-Intercept from an Equation (SEAL exam MC Q7) ── */
  gre: [
    { title:'Level 1 — From y = mx + c', desc:'The equation is already in y = mx + c form. Tap the gradient and y-intercept. The number in front of x is m; the number on its own is c.', examples:['y = 3x \u2212 2 \u2192 gradient 3, (0, \u22122)'] },
    { title:'Level 2 — Rearrange First', desc:'The equation is in the form ax + by = c. Get y on its own \u2014 divide EVERY term by the number in front of y \u2014 then read the gradient and intercept.', examples:['4y + 8x = 12 \u2192 y = \u22122x + 3 \u2192 gradient \u22122, (0, 3)'] },
    { title:'Level 3 — Sketch It', desc:'Sketch the line by the gradient\u2013intercept method: tap the y-intercept, then step across 1 and up or down by the gradient and tap that point.', examples:['y = 2x \u2212 1 \u2192 tap (0, \u22121) then (1, 1)'] },
  ],
  /* ── v96 — Matching Equations & Graphs (SEAL exam MC Q10, Section B Q5c) ── */
  egm: [
    { title:'Level 1 — Which Equation? (positive gradients)', desc:'A line is drawn on the plane. Tap its equation. Read the y-intercept off the axis first, then count the rise over the run.', examples:['crosses at (0, 2), goes up 3 across 1 \u2192 y = 3x + 2'] },
    { title:'Level 2 — Which Equation? (negatives)', desc:'The same job with negative gradients and a wider spread of intercepts. A line going DOWN left to right has a negative gradient.', examples:['crosses at (0, 4), goes down 2 across 1 \u2192 y = \u22122x + 4'] },
    { title:'Level 3 — Which Point Lies on the Line?', desc:'Four coordinates and one equation. Substitute each x and see which one gives the matching y. Only one of the four works.', examples:['y = 2x \u2212 1 \u2192 (3, 5) works'] },
  ],
  /* ── v96 — Sketching Linear Graphs (Laura) ── */
  skl: [
    { title:'Level 1 — Horizontal &amp; Vertical Lines', desc:'y = a number is horizontal; x = a number is vertical. Tap the two points where the line meets the edges of the grid.', examples:['y = 3 \u2192 (\u22125, 3) and (5, 3)', 'x = \u22122 \u2192 (\u22122, \u22125) and (\u22122, 5)'] },
    { title:'Level 2 — Using the Intercepts', desc:'Put x = 0 to get the y-intercept, then y = 0 to get the x-intercept, and tap both. Two points are all a straight line needs.', examples:['y = 2x \u2212 4 \u2192 (0, \u22124) and (2, 0)'] },
    { title:'Level 3 — Through the Origin', desc:'With no + c the line passes through the origin. Tap (0, 0), then use the gradient to find the point where x = 1.', examples:['y = 3x \u2192 (0, 0) and (1, 3)'] },
    { title:'Level 4 — Mixed', desc:'All three kinds mixed together, so you have to decide which method the equation calls for before you plot.', examples:['x = 4', 'y = \u2212x + 3', 'y = 2x'] },
  ],
  /* ── v93 — Nets, Plans & Views of 3D Objects (VC2M7SP01) ── */
  npv: [
    { title:'Level 1 — Name the Solid from its Net', desc:'A flattened net is drawn. Tap the solid it folds up into. Count the faces and look at their shapes.', examples:['6 squares \u2192 cube', '2 circles + a rectangle \u2192 cylinder', '1 square + 4 triangles \u2192 square pyramid'] },
    { title:'Level 2 — What is the Net Made From?', desc:'A solid is drawn. Tap the description of the faces its net is made from. The reverse of Level 1.', examples:['triangular prism \u2192 3 rectangles + 2 triangles', 'cube \u2192 6 identical squares', 'sphere \u2192 cannot be flattened'] },
    { title:'Level 3 — Front, Side or Top?', desc:'A rectangular prism is drawn with its three lengths labelled. Decide which view is the rectangle described. Front is width \u00d7 height, side is depth \u00d7 height, top is width \u00d7 depth.', examples:['5 by 3 \u2192 front view', '2 by 3 \u2192 side view', '5 by 2 \u2192 top view'] },
    { title:'Level 4 — Shape of the View', desc:'A solid stands upright on its base. Tap the shape of its front, side or top view. This is the plan-and-elevation idea in its simplest form.', examples:['cylinder from the top \u2192 circle', 'cone from the front \u2192 triangle', 'square pyramid from the top \u2192 square'] },
  ],
  /* ── v93 — Terminating & Recurring Decimals (VC2M8N03) ── */
  trd: [
    { title:'Level 1 — Terminating or Recurring?', desc:'Four fractions are shown. Tap the one that gives the kind of decimal named in the question. Simplify first, then strip every 2 and every 5 from the denominator \u2014 if 1 is left it terminates.', examples:['3/8 \u2192 terminating', '5/12 \u2192 recurring', '7/20 \u2192 terminating'] },
    { title:'Level 2 — Write the Decimal', desc:'Write a terminating fraction as a decimal. Every fraction on this level does stop \u2014 type the exact decimal.', examples:['3/8 = 0.375', '7/20 = 0.35', '9/16 = 0.5625'] },
    { title:'Level 3 — Recurring Decimal \u2192 Fraction', desc:'A dot above a digit means it repeats forever. One repeating digit sits over 9, two repeating digits over 99. Give the fraction in simplest form.', examples:['0.4\u0307 = 4/9', '0.2\u03077\u0307 = 3/11', '0.6\u0307 = 2/3'] },
  ],
  /* ── v77 — Number Classification ── */
  ncl: [
    { title:'Level 1 — Rational or Irrational', desc:'Decide whether a number can be written as a fraction of two whole numbers (rational) or not (irrational).', examples:['7', '√2', '0.75'] },
    { title:'Level 2 — Tick Every Set',         desc:'Tick every set the number belongs to: natural, whole, integer, rational, irrational, real. Natural starts at 1; whole includes 0.', examples:['0', '−4', '√9'] },
  ],
  /* ── v77 — Quadratics ── */
  qver: [
    { title:'Level 1 — x² = k',              desc:'Substitute the value and decide whether it satisfies a simple squared equation. Remember there are two square roots.', examples:['x² = 36, x = −6?', 'x² − 49 = 0, x = 7?'] },
    { title:'Level 2 — Factorised Form',     desc:'Use the Null Factor Law to check a value against a factorised quadratic.', examples:['(x − 3)(x + 5) = 0, x = 5?'] },
    { title:'Level 3 — Trinomials',          desc:'Substitute into x² + bx + c = 0 and check whether the left side equals zero.', examples:['x² + 5x + 6 = 0, x = −2?'] },
  ],
  qsol: [
    { title:'Level 1 — x² = k',              desc:'Square-root both sides. Always give BOTH solutions — the positive and the negative.', examples:['x² = 36', 'x² − 81 = 0'] },
    { title:'Level 2 — Exact Values',        desc:'The same idea, but the answers are fractions or surds. Choose the correct exact solution pair.', examples:['x² = 9/25', 'x² = 12'] },
    { title:'Level 3 — Null Factor Law',     desc:'A product is zero when one of its factors is zero. Set each bracket to zero and solve.', examples:['(x − 2)(x + 2) = 0', '(2x − 1)(x + 5) = 0'] },
    { title:'Level 4 — Monic Trinomials',    desc:'Factorise x² + bx + c, then use the Null Factor Law. Find two numbers that multiply to c and add to b.', examples:['x² + 5x + 6 = 0', 'x² − 3x − 10 = 0'] },
  ],
  /* ── v77 — Coordinate Geometry ── */
  cart: [
    { title:'Level 1 — Which Quadrant? (from a graph)', desc:'A point is plotted for you. Name the quadrant it sits in. (+,+) is the 1st and they run anticlockwise.', examples:['point up and right → 1st', 'point up and left → 2nd'] },
    { title:'Level 2 — Write the Coordinate',desc:'Read a plotted point off the grid. Across the x-axis first, then up or down the y-axis.', examples:['P at 3 right, 2 up → (3, 2)'] },
    { title:'Level 3 — Which Quadrant? (from a coordinate)', desc:'No picture this time — work it out from the signs of x and y alone.', examples:['(3, 4) → 1st', '(−2, 5) → 2nd'] },
    { title:'Level 4 — The Missing Corner', desc:'Three corners of a rectangle, square or parallelogram are plotted. Write the coordinates of the fourth.', examples:['(1, 1), (4, 1), (4, 3) → (1, 3)'] },
  ],
  lnl: [
    { title:'Level 1 — From a Graph',        desc:'A straight line is linear; anything that bends is non-linear.', examples:['straight line → Linear', 'parabola → Non-linear'] },
    { title:'Level 2 — From an Equation',    desc:'Linear equations have x (and y) to the power 1 only — no squares, cubes, roots, or x on the bottom.', examples:['y = 3x + 2 → Linear', 'y = x² + 1 → Non-linear'] },
  ],
  /* ── v78.2 — Table of Values ── */
  tov: [
    { title:'Level 1 — Build a Linear Table',   desc:'Substitute each x value into the rule and fill in the y row.', examples:['y = 2x + 1 → −3, −1, 1, 3, 5'] },
    { title:'Level 2 — Plot a Linear Table',    desc:'Tap the grid to plot every point in the table. Across first, then up or down.', examples:['(−2, −3), (−1, −1), (0, 1), (1, 3), (2, 5)'] },
    { title:'Level 3 — Build a Non-Linear Table', desc:'Same idea, but the rule now has a square, a cube or a power. Do the power FIRST.', examples:['y = x² − 1 → 3, 0, −1, 0, 3'] },
    { title:'Level 4 — Plot a Non-Linear Table', desc:'Plot every point of a non-linear table. The points make a curve, not a straight line.', examples:['(−2, 4), (−1, 1), (0, 0), (1, 1), (2, 4)'] },
  ],
  xyint: [
    { title:'Level 1 — Read it off the Graph', desc:'A line is drawn for you. Write the coordinates of where it crosses the x-axis or the y-axis.', examples:['crosses the x-axis at 3 → (3, 0)', 'crosses the y-axis at −2 → (0, −2)'] },
    { title:'Level 2 — From a Table of Values', desc:'The x-intercept is the x where y = 0. The y-intercept is the y where x = 0. Read them straight off the table.', examples:['x: −1 0 1 2 3 · y: −4 −2 0 2 4 → x-int 1, y-int −2'] },
    { title:'Level 3 — y-Intercept',         desc:'The y-intercept is where x = 0. In y = mx + c it is simply c.', examples:['y = 3x − 7 → −7'] },
    { title:'Level 4 — x-Intercept',         desc:'The x-intercept is where y = 0. Set y to zero and solve for x.', examples:['y = 2x − 8 → 4'] },
    { title:'Level 5 — Both, from ax + by = c', desc:'Find both intercepts from the general form. Let y = 0 for one, x = 0 for the other.', examples:['3x + 2y = 12 → x = 4, y = 6'] },
  ],
  /* ── v78.3 — Applications of Linear Graphs ── */
  lap: [
    { title:'Level 1 — Rate or Starting Amount?', desc:'In P = a + bc, a is the starting amount and b is the rate — the number multiplying the variable.', examples:['P = −35 + 4c → rate 4, start −35'] },
    { title:'Level 2 — Write the Rule',           desc:'Turn a worded situation into y = a + bx. Starting amount first, then the rate.', examples:['starts 15 km away, rides 12 km/h → d = 15 + 12h'] },
    { title:'Level 3 — Build the Table',          desc:'Substitute 0, 1, 2, 3, 4 into the rule for the situation and fill in the table.', examples:['C = 20 + 5h → 20, 25, 30, 35, 40'] },
    { title:'Level 4 — Two Items: ax + by = d',   desc:'Two things with different prices and one total. Write the equation in ax + by = d form.', examples:['pens $8, pencils $3, total $88 → 8x + 3y = 88'] },
  ],
  /* ── v78.3 — 🧩 Other ── */
  tcv: [
    { title:'Level 1 — Seconds, Minutes & Hours', desc:'60 seconds in a minute, 60 minutes in an hour. Going to a smaller unit multiplies; to a bigger unit divides.', examples:['4 minutes → 240 seconds', '180 minutes → 3 hours'] },
    { title:'Level 2 — Hours, Days & Weeks',      desc:'24 hours in a day, 7 days in a week.', examples:['3 days → 72 hours', '35 days → 5 weeks'] },
    { title:'Level 3 — Weeks, Months & Years',    desc:'12 months, 52 weeks and 365 days in a year.', examples:['4 years → 48 months', '104 weeks → 2 years'] },
    { title:'Level 4 — Both Units at Once',       desc:'Swap between a single number and a compound time such as 3 hours 25 minutes.', examples:['2 h 45 min → 165 min', '200 min → 3 h 20 min'] },
  ],
  ttb: [
    { title:'Level 1 — Read the Timetable',   desc:'Find the right stop row and the right service column, and read off the time.', examples:['Train 2 at Hampton → 8:19 am'] },
    { title:'Level 2 — How Long Is the Trip?',desc:'Subtract the departure time from the arrival time. Answer in minutes.', examples:['leaves 8:05, arrives 8:32 → 27 minutes'] },
    { title:'Level 3 — Which Service?',       desc:'You must arrive by a certain time. Find the latest service that still gets you there.', examples:['must arrive by 9:10 → leave at 8:35'] },
    { title:'Level 4 — How Long to Wait?',    desc:'You arrive at the stop at a given time. How many minutes until the next service?', examples:['you arrive 8:12, next is 8:20 → 8 minutes'] },
    { title:'Level 5 — Working Backwards', desc:'Something must be finished BY a given time and you know how long it takes. Count backwards from the finish time to find when to start.', examples:['ready by 6:20 am, takes 45 min \u2192 start 5:35 am'] },
  ],
  dtg: [
    { title:'Level 1 — Distance Travelled', desc:'Read up from the time axis to the line, then across to the distance axis.', examples:['after 3 hours → 40 km'] },
    { title:'Level 2 — Which Stage?',       desc:'A flat section means stationary. The steepest section is the fastest.', examples:['flat stage → stationary', 'steepest stage → fastest'] },
    { title:'Level 3 — Build the Graph',    desc:'Read the journey, then tap the corner at the end of each stage in order.', examples:['30 km in 1 h, rests 1 h, 20 km in 2 h'] },
    { title:'Level 4 — Speed of a Stage',   desc:'speed = distance ÷ time. Use just the one labelled stage.', examples:['30 km in 2 hours → 15 km/h'] },
  ],
  /* ── v79 — Transformations. Every skill runs the same six ideas so the family
     feels like one thing: apply it from words · describe it · read the mapping ·
     apply the mapping · run it backwards. ── */
  trn: [
    { title:'Level 1 — One Step',          desc:'Slide the point along one axis only. Right adds to x, left subtracts. Up adds to y, down subtracts.', examples:['A(2, 1), 3 units right → (5, 1)', 'A(0, 4), 2 units down → (0, 2)'] },
    { title:'Level 2 — Two Steps',         desc:'Across AND up or down. Do the x move and the y move separately.', examples:['A(−1, 2), 3 right and 2 down → (2, 0)'] },
    { title:'Level 3 — Describe It',       desc:'A point and its image are drawn. Work out how far across, and how far up or down, it moved.', examples:['(1, 1) → (4, 3) is 3 units right and 2 units up'] },
    { title:'Level 4 — From the Mapping',  desc:'Read the mapping notation. On x, + is right and − is left. On y, + is up and − is down.', examples:['(x, y) → (x + 2, y − 3) is 2 right and 3 down'] },
    { title:'Level 5 — Apply the Mapping', desc:'Substitute the x and the y of the point into the rule.', examples:['(x, y) → (x − 4, y + 1) with A(3, 2) → (−1, 3)'] },
    { title:'Level 6 — Find the Original', desc:'You are given the IMAGE. Undo the translation to find where the point started.', examples:['A′(5, 1) after 3 units right → A(2, 1)'] },
  ],
  rfl: [
    { title:'Level 1 — In the Axes',       desc:'Reflect in the x-axis or the y-axis. In the x-axis the y changes sign; in the y-axis the x changes sign.', examples:['(3, 2) in the x-axis → (3, −2)', '(3, 2) in the y-axis → (−3, 2)'] },
    { title:'Level 2 — Including y = x',   desc:'Also reflect in the line y = x, which swaps the two coordinates over.', examples:['(3, 2) in y = x → (2, 3)'] },
    { title:'Level 3 — Describe It',       desc:'A point and its image are drawn. Which line was it reflected in?', examples:['(4, 1) → (−4, 1) is the y-axis'] },
    { title:'Level 4 — From the Mapping',  desc:'Read the mapping. A minus on y is the x-axis, a minus on x is the y-axis, and swapped letters mean y = x.', examples:['(x, y) → (y, x) is the line y = x'] },
    { title:'Level 5 — Apply the Mapping', desc:'Substitute the x and the y of the point into the rule.', examples:['(x, y) → (−x, y) with A(3, 2) → (−3, 2)'] },
    { title:'Level 6 — Find the Original', desc:'You are given the IMAGE. Reflect it back — a reflection undoes itself.', examples:['A′(3, −2) in the x-axis → A(3, 2)'] },
  ],
  dil: [
    { title:'Level 1 — Apply the Dilation', desc:'Multiply BOTH coordinates by the factor. A factor bigger than 1 enlarges; a fraction makes it smaller.', examples:['(2, 3) by 3 → (6, 9)', '(6, −4) by ½ → (3, −2)'] },
    { title:'Level 2 — Describe It',        desc:'A point and its image are drawn. Divide the image by the original to find the factor.', examples:['(2, 3) → (4, 6) is a factor of 2'] },
    { title:'Level 3 — From the Mapping',   desc:'The number in front of BOTH x and y is the dilation factor.', examples:['(x, y) → (3x, 3y) is a factor of 3'] },
    { title:'Level 4 — Apply the Mapping',  desc:'Substitute the x and the y of the point into the rule.', examples:['(x, y) → (½x, ½y) with A(8, −2) → (4, −1)'] },
    { title:'Level 5 — Find the Original',  desc:'You are given the IMAGE. Divide by the factor instead of multiplying.', examples:['A′(6, 9) after a factor of 3 → A(2, 3)'] },
  ],
  rot: [
    { title:'Level 1 — Half Turns',        desc:'180° about the origin sends (x, y) to (−x, −y). A half turn is the same whichever way you go round.', examples:['(3, 2) → (−3, −2)'] },
    { title:'Level 2 — Quarter Turns',     desc:'90° and 270°, clockwise and anticlockwise. Swap the two coordinates over, then fix one sign.', examples:['(3, 2) 90° anticlockwise → (−2, 3)', '(3, 2) 90° clockwise → (2, −3)'] },
    { title:'Level 3 — Describe It',       desc:'A point and its image are drawn. Which turn about the origin takes one to the other?', examples:['(3, 2) → (−2, 3) is 90° anticlockwise'] },
    { title:'Level 4 — From the Mapping',  desc:'Read the mapping. Both signs flipped is 180°; swapped letters mean a quarter turn.', examples:['(x, y) → (−y, x) is 90° anticlockwise'] },
    { title:'Level 5 — Apply the Mapping', desc:'Substitute the x and the y of the point into the rule.', examples:['(x, y) → (y, −x) with A(1, 4) → (4, −1)'] },
    { title:'Level 6 — Find the Original', desc:'You are given the IMAGE. Turn it back the other way.', examples:['A′(−2, 3) after 90° anticlockwise → A(3, 2)'] },
  ],
  cmb: [
    { title:'Level 1 — Two Transformations',   desc:'Do them in the order written. Finish the first one completely before starting the second.', examples:['Reflect in the y-axis, then translate 3 units up'] },
    { title:'Level 2 — Three Transformations', desc:'Same idea with a third step. Keep track of the point after each one.', examples:['Rotate 180°, then reflect in the x-axis, then translate 2 units right'] },
    { title:'Level 3 — From the Mapping',      desc:'One mapping can describe a whole chain. Match it to the combination that produces it.', examples:['(x, y) → (−x + 3, y) is reflect in the y-axis, then 3 units right'] },
    { title:'Level 4 — Apply the Mapping',     desc:'Substitute the x and the y of the point into the rule — the chain is already done for you.', examples:['(x, y) → (−y, x + 2) with A(1, 3) → (−3, 3)'] },
    { title:'Level 5 — Find the Original',     desc:'You are given the IMAGE. Undo each step, in reverse order.', examples:['undo the translation first, then the reflection'] },
  ],
  stf: [
    { title:'Level 1 — Translate a Shape',      desc:'Move EVERY corner the same way, then tap the corners of the image.', examples:['a triangle 3 units right and 1 unit down'] },
    { title:'Level 2 — Reflect a Shape',        desc:'Reflect each corner in the line, then tap the corners of the image.', examples:['a rectangle reflected in the y-axis'] },
    { title:'Level 3 — Which Transformation?',  desc:'Two shapes are drawn. Follow ONE corner across to work out what happened.', examples:['A → B is a reflection in the x-axis'] },
    { title:'Level 4 — Dilate a Shape',         desc:'Multiply every corner by the factor. The shape keeps its shape but changes size.', examples:['a triangle dilated by a factor of 2 from the origin'] },
    { title:'Level 5 — Rotate a Shape',         desc:'Turn every corner about the origin, then tap the corners of the image.', examples:['a rectangle rotated 90° clockwise'] },
    { title:'Level 6 — Find the Original Shape',desc:'The IMAGE is drawn. Work backwards and tap the corners of the original shape.', examples:['undo the transformation, corner by corner'] },
  ],
  grad: [
    { title:'Level 1 — Positive, Negative, Zero or Undefined?', desc:'Just the sign. Uphill left-to-right is positive, downhill is negative, flat is zero, and a vertical line is undefined.', examples:['↗ → Positive', '↘ → Negative', '— → Zero', '| → Undefined'] },
    { title:'Level 2 — From a Diagram',      desc:'Read the two points off the grid, then work out rise ÷ run.', examples:['count up, count across'] },
    { title:'Level 3 — Whole-Number Gradients', desc:'Gradient = rise ÷ run from two given points. These ones come out as whole numbers.', examples:['A(1, 2), B(4, 11) → 3'] },
    { title:'Level 4 — Fractions & Negatives', desc:'Any two points. The gradient may be a fraction or negative — give it fully simplified.', examples:['A(−3, 5), B(3, 1) → −2/3'] },
  ],
  /* ── v77 — Finance & Patterns ── */
  gst: [
    { title:'Level 1 — GST Added',           desc:'Australian GST is 10%. Find the GST added to a price — just divide by 10.', examples:['$80 → $8 GST'] },
    { title:'Level 2 — Price Including GST', desc:'Adding 10% makes the price 110% of the original — multiply by 1.1.', examples:['$80 → $88'] },
    { title:'Level 3 — GST Removed',         desc:'Working backwards from a price that already includes GST — divide by 1.1.', examples:['$308 → $280 before GST'] },
  ],
  sint: [
    { title:'Level 1 — Identify V₀ and r',   desc:'Pick the starting value V₀ and the interest rate r out of the question.', examples:['$4000 at 6% p.a. → V₀ = 4000, r = 6'] },
    { title:'Level 2 — Interest Each Year (D)', desc:'Calculate the interest added each year using D = r/100 × V₀.', examples:['6/100 × 4000 = 240'] },
    { title:'Level 3 — Read V₀, D or r off the Rule', desc:'You are given the rule or the recurrence relation. Pick out V₀ or D — or work r back out with r = D/V₀ × 100.', examples:['Vₙ = 4000 + 240n → V₀ = 4000, D = 240, r = 6%'] },
    { title:'Level 4 — Write the Rule',      desc:'Fill in the gaps to write Vₙ = V₀ + nD for the investment.', examples:['Vₙ = 4000 + 240n'] },
    { title:'Level 5 — Value After n Years', desc:'Use the rule to find the value after n years. Best in Practice mode — take your time.', examples:['V₇ = 4000 + 7 × 240 = 5680'] },
    { title:'Level 6 — Recurrence Relation', desc:'Write the recurrence relation: V₀ = …, Vₙ₊₁ = Vₙ + D.', examples:['V₀ = 4000, Vₙ₊₁ = Vₙ + 240'] },
  ],
  /* ── v78 — Yr 7–9 sequences (Laura) ── */
  sqw: [
    { title:'Level 1 — First Term',          desc:'Write down the first term of the sequence.', examples:['18, 24, 30, 36, … → 18'] },
    { title:'Level 2 — The Rule in Words',   desc:'Choose the term-to-term rule in words: add, subtract, multiply, divide — or square numbers.', examples:['18, 24, 30, 36 → Add 6'] },
    { title:'Level 3 — Term Notation',       desc:'aₙ means the nth term. Read the term the question asks for straight off the sequence.', examples:['5, 8, 11, 14, 17 → a₃ = 11'] },
    { title:'Level 4 — Next Two Terms',      desc:'Work out the rule, then fill in the next two terms.', examples:['18, 24, 30, 36, ▢, ▢ → 42, 48'] },
    { title:'Level 5 — First Five Terms',    desc:'You are given a starting value and a rule in words. Write down the first five terms.', examples:['Start at 5, add 3 → 5, 8, 11, 14, 17'] },
    { title:'Level 6 — Two-Step Rules', desc:'The rule takes TWO steps \u2014 multiply, then add or subtract. These patterns are neither arithmetic nor geometric, so look at what happens between each pair of terms.', examples:['3, 7, 15, 31, 63 (\u00d72 + 1)', '2, 7, 22, 67 (\u00d73 + 1)'] },
  ],
  ase: [
    { title:'Level 1 — Common Difference (d)', desc:'Subtract any term from the one after it to find the common difference d.', examples:['5, 8, 11, 14 → d = 3'] },
    { title:'Level 2 — Next Three Terms',      desc:'Keep adding the common difference to find the next three terms.', examples:['5, 8, 11, 14 → 17, 20, 23'] },
    { title:'Level 3 — Write the nth Term Rule', desc:'Fill in the boxes for aₙ = a₁ + (n − 1)d.', examples:['5, 8, 11 → aₙ = 5 + (n − 1) × 3'] },
    { title:'Level 4 — Find a Required Term',  desc:'Use aₙ = a₁ + (n − 1)d to find the term the question asks for.', examples:['a₁ = 5, d = 3 → a₁₂ = 5 + 11 × 3 = 38'] },
    { title:'Level 5 — Find the Term Number', desc:'You are told a number IS in the sequence \u2014 work out which term it is. Put the value into the rule and solve for n.', examples:['3, 7, 11, \u2026 and 488 \u2192 n = 123'] },
  ],
  gse: [
    { title:'Level 1 — Common Ratio (r)',      desc:'Divide any term by the one before it to find the common ratio r.', examples:['2, 6, 18, 54 → r = 3'] },
    { title:'Level 2 — Next Three Terms',      desc:'Keep multiplying by the common ratio to find the next three terms.', examples:['2, 6, 18 → 54, 162, 486'] },
    { title:'Level 3 — Write the nth Term Rule', desc:'Fill in the boxes for aₙ = a₁ × rⁿ⁻¹.', examples:['2, 6, 18 → aₙ = 2 × 3ⁿ⁻¹'] },
    { title:'Level 4 — Find a Required Term',  desc:'Use aₙ = a₁ × rⁿ⁻¹ to find the term the question asks for.', examples:['a₁ = 2, r = 3 → a₅ = 2 × 3⁴ = 162'] },
  ],
  seq: [
    { title:'Level 1 — Arithmetic, Geometric or Neither?', desc:'Same difference each time = arithmetic. Same multiplier each time = geometric. Otherwise neither.', examples:['5, 8, 11, 14 → Arithmetic', '2, 6, 18, 54 → Geometric'] },
    { title:'Level 2 — Next Term',           desc:'Find the pattern, then write the next term of the sequence.', examples:['5, 8, 11, 14, ▢'] },
    { title:'Level 3 — Arithmetic Rule',     desc:'Fill in the gaps for tₙ = a + (n − 1)d.', examples:['5, 8, 11 → tₙ = 5 + (n − 1) × 3'] },
    { title:'Level 4 — Geometric Rule',      desc:'Fill in the gaps for tₙ = a × rⁿ⁻¹.', examples:['2, 6, 18 → tₙ = 2 × 3ⁿ⁻¹'] },
  ],
  rec: [
    { title:'Level 1 — Write the Relation',  desc:'Given a sequence, fill in the first term and the step to write its recurrence relation.', examples:['t₁ = 5, tₙ₊₁ = tₙ + 3'] },
    { title:'Level 2 — Find a Term',         desc:'Apply a recurrence relation step by step to find a later term.', examples:['t₁ = 6, tₙ₊₁ = tₙ + 4 → t₅ = 22'] },
  ],
  fdep: [
    { title:'Level 1 — Identify V₀ and D',   desc:'Read the initial value and the yearly depreciation straight off a rule or a recurrence relation.', examples:['Vₙ = 24000 − 3000n'] },
    { title:'Level 2 — Depreciation Each Year (D)', desc:'Calculate the amount lost each year using D = r/100 × V₀.', examples:['12.5/100 × 24000 = 3000'] },
    { title:'Level 3 — Read V₀, D or r off the Rule', desc:'Pick out V₀ or D from the rule or recurrence — or work the rate r back out with r = D/V₀ × 100.', examples:['Vₙ = 24000 − 3000n → r = 12.5%'] },
    { title:'Level 4 — Write the Rule',      desc:'Fill in the gaps to write Vₙ = V₀ − nD.', examples:['Vₙ = 24000 − 3000n'] },
    { title:'Level 5 — Value After n Years', desc:'Use the rule to find the value after n years. Best in Practice mode — take your time.', examples:['V₅ = 24000 − 5 × 3000 = 9000'] },
    { title:'Level 6 — Recurrence Relation', desc:'Write the recurrence relation: V₀ = …, Vₙ₊₁ = Vₙ − D.', examples:['V₀ = 24000, Vₙ₊₁ = Vₙ − 3000'] },
  ],
  tt: [
    { title:'Level 1 — Core Tables',   desc:'2s, 4s, 5s and 10s times tables. Great starting point for building speed.', examples:['2 × 5', '4 × 6', '10 × 7'] },
    { title:'Level 2 — Full Tables',   desc:'All times tables from 2 to 12. The standard school times tables set.', examples:['7 × 8', '9 × 11', '12 × 6'] },
    { title:'Level 3 — Extended',      desc:'Tables from 2 to 20 for an extra challenge beyond the standard set.', examples:['13 × 7', '17 × 4', '19 × 8'] },
  ],
  div: [
    { title:'Level 1 — Divide by 1–5',   desc:'Division facts using divisors up to 5. Ideal for building the basics.', examples:['20 ÷ 4', '15 ÷ 3', '18 ÷ 2'] },
    { title:'Level 2 — Divide by 1–12',  desc:'Division facts using divisors up to 12, matching the full times tables.', examples:['72 ÷ 9', '48 ÷ 6', '132 ÷ 11'] },
    { title:'Level 3 — Divide by 1–20',  desc:'Division facts using divisors up to 20 for a demanding challenge.', examples:['119 ÷ 17', '260 ÷ 13', '360 ÷ 18'] },
    { title:'Level 4 — How Many Are Needed?', desc:'Divide, then round UP \u2014 leftovers still need one more box, tray or bus. Rounding the ordinary way gets these wrong every time.', examples:['152 \u00f7 36 = 4 r 8 \u2192 5 trays', '50 people, 12 per bus \u2192 5 buses'] },
    { title:'Level 5 — Long Division', desc:'Four digits divided by one, set out as a long division. Work left to right, carrying each remainder into the next digit. Every one divides exactly.', examples:["5932 ÷ 4 = 1483"] },
  ],
  as: [
    { title:'Level 1 — Single Digit',  desc:'Add or subtract single-digit numbers (1–9). Focus on instant recall.', examples:['7 + 8', '9 − 4', '6 + 7'] },
    { title:'Level 2 — Two Digit',     desc:'Add or subtract numbers up to 99. Includes carrying and borrowing.', examples:['47 + 36', '82 − 57', '63 + 29'] },
    { title:'Level 3 — Three Digit',   desc:'Add or subtract numbers up to 999. Mental arithmetic challenge.', examples:['347 + 256', '801 − 463', '592 + 317'] },
    { title:'Level 4 — Four Digits', desc:'Four-digit column addition and subtraction, the way the exam sets it out. Line up the columns, work from the right, and carry or borrow as you go.', examples:['1009 + 882 = 1891', '4879 \u2212 2988 = 1891', '6431 \u2212 4879 = 1552'] },
  ],
  nb: [
    { title:'Level 1 — Make 10',       desc:'Find the number that completes the pair to 10. The building block for all mental addition.', examples:['7 + ▢ = 10', '3 + ▢ = 10', '6 + ▢ = 10'] },
    { title:'Level 2 — Make 20 & 100', desc:'Complete the pair to 20 (and friendly hundreds). Extends the make-10 idea.', examples:['13 + ▢ = 20', '8 + ▢ = 20', '60 + ▢ = 100'] },
    { title:'Level 3 — Doubles',       desc:'Instant recall of doubles up to 12 + 12. Great for two-digit mental addition.', examples:['8 + 8', '12 + 12', '7 + 7'] },
  ],
  int: [
    { title:'Level 1 — Range ±10',   desc:'Integers from −10 to +10. Covers basic negative number operations.', examples:['−6 + 4', '3 − (−2)', '−5 + 8'] },
    { title:'Level 2 — Range ±20',   desc:'Integers from −20 to +20 for a more demanding range.', examples:['−14 + 9', '7 − (−11)', '−18 + 5'] },
    { title:'Level 3 — Range ±50',   desc:'Integers from −50 to +50. Builds strong mental number line skills.', examples:['−37 + 24', '−45 − (−18)', '29 − 41'] },
    { title:'Level 4 — Word Problems', desc:'Real-life negative numbers \u2014 temperatures, lifts below ground, overdrawn accounts and divers. Decide whether to add or subtract, and remember the answer can be negative.', examples:['\u22125\u00b0C rises 8 degrees \u2192 3\u00b0C', 'floor 4, down 9 \u2192 \u22125', 'overdrawn $30, deposit $50 \u2192 20'] },
  ],
  /* v45: dedicated levels for Multiply / Divide Integers (was sharing the
     add/sub 'int' levels, which showed the wrong examples). Ranges match the
     generator's factors of 6 / 10 / 15. */
  intmd: [
    { title:'Level 1 — Factors to 6',  desc:'Multiply and divide integers with factors up to 6. Watch the signs: − × − = +.', examples:['(−4) × 3', '(−18) ÷ 6', '5 × (−2)'] },
    { title:'Level 2 — Factors to 10', desc:'Factors up to 10. Apply the sign rule first, then the times-table fact.', examples:['(−7) × 8', '(−54) ÷ 9', '6 × (−5)'] },
    { title:'Level 3 — Factors to 15', desc:'Factors up to 15 for a tougher challenge. Mind the signs throughout.', examples:['(−13) × 4', '(−120) ÷ 12', '11 × (−9)'] },
    { title:'Level 4 — Which Sign?', desc:'A sign is missing from the statement. Tap the operation (+ − × ÷) that makes it true. Only one ever works.', examples:["−2 ? −2 = 4 → ×","−12 ? 3 = −4 → ÷"] },
  ],
  sq: [
    { title:'Level 1 — Squares 1–10',  desc:'Square numbers and roots from 1² to 10². The essential set.', examples:['3²', '√64', '7²'] },
    { title:'Level 2 — Squares 1–15',  desc:'Extends to 15² = 225. Adds the trickier values above 100.', examples:['11²', '√169', '14²'] },
    { title:'Level 3 — Squares 1–20',  desc:'Up to 20² = 400. For students aiming for fluent recall of all common squares.', examples:['17²', '√256', '19²'] },
    { title:'Level 4 — Estimating a Square Root', desc:'A square root that is not exact. Type the two consecutive whole numbers it lies between — the two squares it falls between. (Square Numbers and Square Roots share this level.)', examples:["√34 → 5 and 6","√128 → 11 and 12"] },
  ],
  oo: [
    { title:'Level 1 — No Brackets',   desc:'Two operations, no brackets. Focuses on multiplication before addition/subtraction.', examples:['3 + 4 × 2', '6 × 5 − 8', '2 + 9 × 3'] },
    { title:'Level 2 — With Brackets', desc:'Brackets change the order — work out what is inside first, then apply the operation.', examples:['(3 + 4) × 2', '5 × (6 + 3)', '(8 − 3) × 4'] },
    { title:'Level 3 — Mixed Challenge',desc:'Three or more operations mixed together. Tests full BODMAS understanding.', examples:['2 + 3 × 4 − 1', '(5 + 2) × 3 − 4', '4 × 3 + 2 × 5'] },
    { title:'Level 4 — Indices & Brackets', desc:'Now with powers and nested brackets. Do indices right after brackets, before × ÷ + −.', examples:['2 + 3² × 2', '(2 + 3)² − 4', '5² − 4 × 3'] },
    { title:'Level 5 — Word Problems', desc:'Read the story, write it as ONE calculation, then use the order of operations. Multiplying and dividing happen before adding and subtracting.', examples:['4 pens at $3 and 2 books at $7 \u2192 4\u00d73 + 2\u00d77', 'change from $50 for 3 tickets at $12', '5 boxes of 8, minus 6 eaten'] },
  ],
  /* ── FRACTION LEVELS ── */
  fs: [
    { title:'Level 1 — Factors of 2 and 5',  desc:'Simplify fractions whose numerator and denominator share a factor of 2 or 5 only. Good entry point.', examples:['6/10', '4/8', '15/20'] },
    { title:'Level 2 — Any Common Factor',    desc:'Simplify any fraction by finding the highest common factor (HCF). Numbers up to 12.', examples:['8/12', '9/15', '14/21'] },
    { title:'Level 3 — Algebraic Fractions',  desc:'Simplify fractions with the variable x. Enter the numeric coefficient of x on top, and the denominator below.', examples:['6x/10 → 3/5', '4x/12 → x/3', '15x/25 → 3/5'] },
    { title:'Level 4 — Which Is in Simplest Form?', desc:'Four fractions, one of them already in lowest terms. Cancel each of the others to see why it is not the one.', examples:["6/21 · 16/48 · 9/36 · 7/22 → 7/22"] },
  ],

  fas: [
    { title:'Level 1 — Same Denominator',    desc:'Add or subtract fractions that already have the same denominator. Always simplify your answer.', examples:['1/5 + 2/5', '7/8 − 3/8', '2/9 + 4/9'] },
    { title:'Level 2 — Related Denominators',desc:'One denominator is a multiple of the other — convert just one fraction before adding or subtracting.', examples:['1/2 + 1/4', '5/6 − 1/3', '3/4 + 1/8'] },
    { title:'Level 3 — All Fractions',       desc:'Any combination including unrelated denominators and negative fractions. Find the LCM to add or subtract.', examples:['2/3 + 3/4', '5/6 − 2/5', '−1/3 + 3/4'] },
    { title:'Level 4 — Mixed Numbers',       desc:'Add or subtract mixed numbers. Convert to improper fractions, find the LCM, then give the answer as a simplified improper fraction.', examples:['1½ + 2⅓', '3¾ − 1½', '2⅔ + 1¼'] },
    { title:'Level 5 — Mixed Numbers', desc:'Add or subtract MIXED numbers. Convert to improper fractions, find a common denominator, then write the answer back as a mixed number in simplest form.', examples:["3 4/5 − 1 2/3"] },
  ],
  fmu: [
    { title:'Level 1 — Multiply (No Simplifying)',  desc:'Multiply numerators together and denominators together. Answers will not need simplifying.', examples:['2/3 × 3/5', '1/4 × 3/7', '2/5 × 5/6'] },
    { title:'Level 2 — Multiply with Simplifying',  desc:'Multiply fractions and then simplify the answer to its lowest terms using the HCF.', examples:['2/3 × 3/4', '4/5 × 5/8', '3/7 × 7/9'] },
    { title:'Level 3 — Negatives Included',         desc:'Multiply fractions that may include negative values. Apply the sign rules before simplifying.', examples:['−2/3 × 3/4', '−1/2 × −4/5', '3/7 × −7/9'] },
    { title:'Level 4 — With Negatives', desc:'Multiply fractions where one or both are negative. Decide the sign first, then multiply across and simplify.', examples:["−30/27 × 18/15"] },
  ],
  fd: [
    { title:'Level 1 — Divide (No Simplifying)',  desc:'Flip the second fraction (find its reciprocal) then multiply. Answers will not need simplifying.', examples:['2/3 ÷ 4/5', '1/2 ÷ 3/7', '3/5 ÷ 6/7'] },
    { title:'Level 2 — Divide with Simplifying',  desc:'Keep–Change–Flip, then simplify the result to its lowest terms.', examples:['2/3 ÷ 4/9', '5/6 ÷ 5/8', '3/4 ÷ 9/10'] },
    { title:'Level 3 — Negatives Included',       desc:'Division of fractions including negative values. Apply sign rules after the Keep–Change–Flip step.', examples:['−2/3 ÷ 4/5', '−1/2 ÷ −3/4', '3/7 ÷ −7/9'] },
    { title:'Level 4 — With Negatives', desc:'Divide fractions where one or both are negative. Flip the second fraction, decide the sign, then multiply and simplify.', examples:["−6/14 ÷ 18/7"] },
  ],
    /* ── NEW EXPONENT LEVELS ── */
  cu: [
    { title:'Level 1 — Cubes 1–5',   desc:'Cube numbers from 1³ to 5³ and their cube roots. Builds the core set of 5 values.', examples:['2³', '∛27', '4³'] },
    { title:'Level 2 — Cubes 1–10',  desc:'Extends to 10³ = 1000. Covers the full set students encounter in Years 7–10.', examples:['6³', '∛512', '9³'] },
    { title:'Level 3 — Cubes 1–15',  desc:'Up to 15³ = 3375 for students who want a real challenge beyond the standard set.', examples:['11³', '∛1728', '14³'] },
  ],
  imul: [
    { title:'Level 1 — Numbers Only',    desc:'Add the indices when multiplying powers with the same base. Enter the resulting power.', examples:['2³ × 2⁴ = 2?'] },
    { title:'Level 2 — One Variable',    desc:'Multiply expressions with one variable. Multiply the coefficients and add the powers of x. Enter the coefficient and power.', examples:['2x² × 3x³ = ?'] },
    { title:'Level 3 — Two Variables',   desc:'Multiply expressions with two variables x and y. Enter the coefficient and power of x (power of y shown in hint).', examples:['2x²y × 3xy² = ?'] },
    { title:'Level 4 — True or False?', desc:'An index-law statement is shown. Decide whether it is true. Each false one is a classic slip — multiplying the indices instead of adding, or thinking a power of 0 gives 0.', examples:["5² × 5³ = 5⁶ → False"] },
  ],
  idiv: [
    { title:'Level 1 — Numbers Only',    desc:'Subtract the indices when dividing powers with the same base. Enter the resulting power.', examples:['5⁶ ÷ 5² = 5?'] },
    { title:'Level 2 — One Variable',    desc:'Divide expressions with one variable. Divide the coefficients and subtract the powers of x. Enter the coefficient and power.', examples:['6x⁵ ÷ 3x² = ?'] },
    { title:'Level 3 — Two Variables',   desc:'Divide expressions with two variables x and y. Enter the coefficient and power of x (power of y shown in hint).', examples:['6x⁴y³ ÷ 2x²y = ?'] },
  ],

  /* ── SIG FIGS (2 levels only) ── */
  sf: [
    { title:'Level 1 — Count Significant Figures', desc:'Count how many significant figures are in a given number. Zeros can be tricky — learn the rules.', examples:['sig figs in 0.0043', 'sig figs in 4700', 'sig figs in 3.05'] },
    { title:'Level 2 — Round to Significant Figures', desc:'Round a number to a given number of significant figures. Enter the rounded value.', examples:['4756 to 2 s.f.', '0.003862 to 2 s.f.', '12.74 to 3 s.f.'] },
  ],
  /* ── INTEGER SQUARES & CUBES ── */
  isc: [
    { title:'Level 1 — Squares of Integers',   desc:'Square positive and negative integers. Watch the brackets: (−3)² = 9, but −(3)² = −9.', examples:['(−3)²', '7²', '−(5)²'] },
    { title:'Level 2 — Cubes of Integers',     desc:'Cube positive and negative integers. A negative cubed stays negative.', examples:['(−2)³', '4³', '−(3)³'] },
    { title:'Level 3 — Mixed Squares & Cubes', desc:'A random mix of squaring and cubing, with positive and negative integers — apply the correct power and watch the sign.', examples:['(−5)²', '6³', '−(2)²'] },
  ],
  /* ── OO WITH INTEGERS ── */
  ioo: [
    { title:'Level 1 — No Brackets',   desc:'Apply BODMAS with negative integers. Multiplication and division before addition and subtraction.', examples:['−3 + 4 × 2', '6 × (−2) + 5', '−8 ÷ 2 + 3'] },
    { title:'Level 2 — With Brackets', desc:'Brackets with negative integers — work inside brackets first, then apply remaining operations.', examples:['(−3 + 4) × 2', '5 × (−2 + 6)', '−2 × (3 − 7)'] },
    { title:'Level 3 — Mixed Challenge',desc:'Three or more operations with negative numbers and brackets. Tests full BODMAS with integers.', examples:['−2 + 3 × (−4)', '(−5 + 2) × (−3)', '4 × (−2) + (−3) × 2'] },
    { title:'Level 4 — Indices & Brackets', desc:'Powers with negative integers and brackets. A bracketed negative squared is positive: (−2)² = 4.', examples:['(−2)² + 3 × (−4)', '(−5 + 2)² − 4', '−3² + 20'] },
  ],
  /* ── MIXED ↔ IMPROPER ── */
  mi: [
    { title:'Level 1 — Simple Denominators',  desc:'Convert between mixed numbers and improper fractions with denominators 2–5. Build the core method.', examples:['2½ → 5/2', '7/3 → 2⅓', '3¼ → 13/4'] },
    { title:'Level 2 — Any Denominator',       desc:'Denominators up to 12. Practise the algorithm fluently across a wider range.', examples:['4⅔ → 14/3', '17/5 → 3⅖', '5⅞ → 47/8'] },
    { title:'Level 3 — Larger Values',         desc:'Larger whole parts and denominators. Demands fast mental multiplication.', examples:['8 7/9 → 79/9', '53/7 → 7⁴⁄₇', '12⅗ → 63/5'] },
  ],
  mim: [
    { title:'Level 1 — Mixed → Improper',   desc:'Convert a mixed number to an improper fraction. Multiply the whole number by the denominator then add the numerator. Simplify if needed.', examples:['2½ → 5/2', '3¼ → 13/4', '4⅔ → 14/3'] },
    { title:'Level 2 — Improper → Mixed',   desc:'Convert an improper fraction to a mixed number. Divide the numerator by the denominator to find the whole number and remainder.', examples:['7/2 → 3½', '11/4 → 2¾', '17/5 → 3⅖'] },
    { title:'Level 3 — Mixed Directions',   desc:'A random mix of both directions. Read the question carefully — some show mixed numbers and some show improper fractions.', examples:['9/4 → ?', '3⅗ → ?', '13/5 → ?'] },
  ],
  /* ── OO WITH FRACTIONS ── */
  foo: [
    { title:'Level 1 — Add & Multiply',   desc:'Apply BODMAS to fractions: multiply before adding. Same denominator fractions only.', examples:['½ + ¼ × 2', '⅓ × 3 + ½', '¾ + ¼ × 4'] },
    { title:'Level 2 — With Brackets',    desc:'Brackets containing fractions — work inside first, then apply the outer operation.', examples:['(½ + ¼) × 2', '⅓ × (1 + ½)', '(¾ − ¼) × 4'] },
    { title:'Level 3 — Mixed Operations', desc:'Three operations including division with fractions and brackets. Full BODMAS challenge.', examples:['½ + ¼ × ⅔', '(⅓ + ½) ÷ ¼', '⅔ × ¾ + ⅙'] },
    { title:'Level 4 — Squared Fractions', desc:'Now with a squared fraction. Do the power first, then the rest of BODMAS.', examples:['(½)² + ¼', '(⅓)² × 3', '¾ − (½)²'] },
  ],
  /* ── DECIMALS ── */
  das: [
    { title:'Level 1 — 1 Decimal Place',  desc:'Add or subtract numbers with 1 decimal place. Focus on aligning decimal points correctly.', examples:['3.4 + 2.7', '8.1 − 3.6', '5.5 + 4.8'] },
    { title:'Level 2 — 2 Decimal Places', desc:'Add or subtract numbers with up to 2 decimal places. Includes regrouping across the decimal point.', examples:['4.37 + 2.85', '9.20 − 3.47', '6.08 + 1.95'] },
    { title:'Level 3 — Mixed Decimals',   desc:'Add or subtract numbers with different numbers of decimal places. Align carefully before computing.', examples:['3.4 + 1.85', '7.2 − 3.45', '12.05 + 4.7'] },
    { title:'Level 4 — Word Problems',    desc:'Real-life money and bank-balance problems. Pick out the numbers, decide whether to add or subtract, and type the answer. Balances can finish below zero — use the − key for a negative amount.', examples:['A book costs $4.20 and a pen costs $3.50 — total?', 'Balance −$24.75, deposit $56.80, then withdraw $18.95 — new balance?', 'You have $50 and spend $18.65 and $12.40 — how much is left?'] },
  ],
  fda: [
    { title:'Level 1 — Tenths',                  desc:'Add or subtract a decimal and a fraction over 10. Change one to match the other — either turn the fraction into a decimal (7/10 = 0.7) or the decimal into tenths — then combine. Type your answer as a decimal OR a fraction.', examples:['0.3 + 7/10', '9/10 − 0.4', '0.6 + 3/10'] },
    { title:'Level 2 — Quarters, Fifths & Hundredths', desc:'Now with halves, quarters and fifths alongside decimals to hundredths. Convert to the same form first (¼ = 0.25, ⅗ = 0.6). Every answer still stops, so a decimal or a fraction is fine.', examples:['0.25 + 3/4', '4/5 − 0.3', '0.35 + 1/2'] },
    { title:'Level 3 — Mixed & Recurring',       desc:'Harder mixes including thirds, sixths and ninths, with adding and subtracting. Some answers are recurring decimals (they never stop) — for those you MUST give your answer as a fraction.', examples:['0.5 + 1/3', '5/6 − 0.2', '1/3 + 0.25'] },
  ],
  fdm: [
    { title:'Level 1 — Tenths',                  desc:'Multiply a decimal by a fraction over 10. Change one to match the other, then multiply. Type your answer as a decimal OR a fraction.', examples:['0.6 × 5/10', '3/10 × 0.4', '0.8 × 7/10'] },
    { title:'Level 2 — Quarters, Fifths & Halves', desc:'Now with halves, quarters and fifths. Convert to the same form first (¼ = 0.25), then multiply. Every answer still stops, so a decimal or a fraction is fine.', examples:['0.4 × 3/4', '2/5 × 0.5', '0.75 × 1/2'] },
    { title:'Level 3 — Mixed & Recurring',       desc:'Harder mixes including thirds, sixths and ninths. Some answers are recurring decimals — for those you MUST give your answer as a fraction.', examples:['0.6 × 1/3', '5/6 × 0.4', '2/3 × 0.9'] },
  ],
  da: [
    { title:'Level 1 — 1 Decimal Place',  desc:'Add numbers with 1 decimal place. Focus on aligning decimal points correctly.', examples:['3.4 + 2.7', '8.1 + 3.6', '5.5 + 4.8'] },
    { title:'Level 2 — 2 Decimal Places', desc:'Add numbers with up to 2 decimal places. Includes regrouping across the decimal point.', examples:['4.37 + 2.85', '9.20 + 3.47', '6.08 + 1.95'] },
    { title:'Level 3 — Mixed Decimals',   desc:'Add numbers with different numbers of decimal places. Align carefully before computing.', examples:['3.4 + 1.85', '7.2 + 3.45', '12.05 + 4.7'] },
  ],
  dsu: [
    { title:'Level 1 — 1 Decimal Place',  desc:'Subtract numbers with 1 decimal place. Focus on aligning decimal points correctly.', examples:['8.1 − 3.6', '5.5 − 2.7', '9.4 − 4.8'] },
    { title:'Level 2 — 2 Decimal Places', desc:'Subtract numbers with up to 2 decimal places. Includes regrouping across the decimal point.', examples:['9.20 − 3.47', '6.08 − 1.95', '7.34 − 2.85'] },
    { title:'Level 3 — Mixed Decimals',   desc:'Subtract numbers with different numbers of decimal places. Align carefully before computing.', examples:['7.2 − 3.45', '12.05 − 4.7', '8.4 − 1.85'] },
  ],
  dmu: [
    { title:'Level 1 — Decimal × Whole',    desc:'Multiply a decimal by a single-digit whole number. Use mental methods or the grid approach.', examples:['0.6 × 4', '1.3 × 5', '2.4 × 3'] },
    { title:'Level 2 — Decimal × Decimal',  desc:'Multiply two decimals together. Count decimal places in factors to place the decimal correctly.', examples:['0.3 × 0.4', '1.2 × 0.5', '2.4 × 1.3'] },
    { title:'Level 3 — Harder Products',    desc:'Multiply decimals with more digits. Demands careful place-value thinking.', examples:['3.6 × 2.5', '0.12 × 0.4', '4.5 × 1.8'] },
    { title:'Level 4 — Word Problems',      desc:'Real-life multiplying problems — areas, total costs and rates. Pick out the two numbers, multiply, and type the answer.', examples:['A rug is 2.4 m by 3.5 m — what area?', '6 tickets at $12.50 each — total?', 'Petrol is $1.80 a litre — cost of 15 L?'] },
    { title:'Level 5 — How Many Decimal Places?', desc:'Do not multiply — just count. The number of decimal places in the answer is the number in the first factor plus the number in the second.', examples:["2.456 × 3.1234 → 7"] },
  ],
  dd: [
    { title:'Level 1 — Decimal ÷ Whole',    desc:'Divide a decimal by a single-digit whole number. Think of sharing into equal parts.', examples:['0.8 ÷ 4', '3.6 ÷ 3', '2.4 ÷ 6'] },
    { title:'Level 2 — Decimal ÷ Decimal',  desc:'Divide by a decimal by converting to an equivalent whole-number division first.', examples:['0.6 ÷ 0.3', '1.8 ÷ 0.6', '2.4 ÷ 0.4'] },
    { title:'Level 3 — Harder Quotients',   desc:'Division with multi-digit decimals. May require rounding to 1 decimal place.', examples:['7.2 ÷ 2.4', '0.36 ÷ 0.09', '4.5 ÷ 1.5'] },
    { title:'Level 4 — Word Problems',      desc:'Real-life dividing problems — sharing, unit price and how-many-fit. Pick out the numbers, divide, and type the answer.', examples:['$45.60 shared among 4 people — each?', '3.6 m of ribbon cut into 0.4 m pieces — how many?', '$7.50 for 5 apples — price of one?'] },
  ],
  /* ── NEW DECIMALS SKILLS (v74.7, Laura) ── */
  dasn: [
    { title:'Level 1 — 1 Decimal Place',   desc:'Add and subtract positive and negative decimals with 1 decimal place. Adding a negative is subtracting; subtracting a negative is adding.', examples:['−3.4 + 2.7', '5.1 − 6.8', '4.2 + (−1.5)'] },
    { title:'Level 2 — 2 Decimal Places',  desc:'Now with up to 2 decimal places and both signs. Work out the sign of the answer first, then the size.', examples:['−4.35 + 1.80', '2.06 − 5.47', '−3.20 − 1.65'] },
    { title:'Level 3 — Mixed Decimals',    desc:'Different numbers of decimal places, positive and negative. Line up the points and mind the signs.', examples:['−7.2 + 3.45', '1.8 − (−2.65)', '−0.9 − 4.25'] },
  ],
  dmdn: [
    { title:'Level 1 — Multiply with Signs',  desc:'Multiply positive and negative decimals. Same signs give a positive, different signs give a negative.', examples:['−0.6 × 4', '0.3 × (−0.5)', '−1.2 × −0.4'] },
    { title:'Level 2 — Divide with Signs',    desc:'Divide positive and negative decimals. Apply the sign rule, then divide the numbers.', examples:['−1.8 ÷ 0.6', '2.4 ÷ (−0.3)', '−3.6 ÷ −0.4'] },
    { title:'Level 3 — Mixed × and ÷',        desc:'A random mix of multiplying and dividing signed decimals. Read the operation and the signs carefully.', examples:['−0.8 × 0.5', '4.2 ÷ (−0.7)', '−1.5 × −0.6'] },
  ],
  dle: [
    { title:'Level 1 — Round to the Leading Digit', desc:'Round a decimal to its leading (first) non-zero digit — 1 significant figure. Keep that first digit and make the rest zeros.', examples:['4.83 → 5', '0.062 → 0.06', '27.4 → 30'] },
    { title:'Level 2 — Estimate a Calculation',     desc:'Round each number to its leading digit, then do the one operation to estimate the answer.', examples:['4.83 × 7.1 → 5 × 7 = 35', '61.2 + 18.7 → 60 + 20 = 80', '0.58 ÷ 0.19 → 0.6 ÷ 0.2 = 3'] },
    { title:'Level 3 — Estimate with BODMAS',       desc:'Round each number to its leading digit, then estimate a calculation with more than one operation — do × and ÷ before + and −.', examples:['4.83 × 7.1 + 2.2 → 5 × 7 + 2 = 37', '58.4 − 2.1 × 3.6 → 60 − 2 × 4 = 52'] },
  ],
  dscr: [
    { title:'Level 1 — Square Roots',   desc:'Find the square root of a decimal that is a perfect square. Think: what number times itself gives this? The answer has half as many decimal places.', examples:['√0.49 → 0.7', '√0.04 → 0.2', '√1.44 → 1.2'] },
    { title:'Level 2 — Cube Roots',     desc:'Find the cube root of a decimal that is a perfect cube. Think: what number cubed gives this?', examples:['∛0.008 → 0.2', '∛0.027 → 0.3', '∛0.125 → 0.5'] },
    { title:'Level 3 — Mixed Roots',    desc:'A random mix of square roots and cube roots of decimals. Read the root symbol carefully.', examples:['√0.81 → 0.9', '∛0.064 → 0.4', '√2.25 → 1.5'] },
  ],
  dp10: [
    { title:'Level 1 — Multiply by 10, 100, 1000, 10 000', desc:'Multiply a decimal by 10, 100, 1000 or 10 000. Every digit shifts LEFT — one place for 10, two for 100, three for 1000.', examples:['3.4 × 10', '0.62 × 100', '5.7 × 1000'] },
    { title:'Level 2 — Divide by 10, 100, 1000, 10 000',   desc:'Divide by 10, 100, 1000 or 10 000. Every digit shifts RIGHT — one place for 10, two for 100, three for 1000.', examples:['34 ÷ 10', '6.2 ÷ 100', '380 ÷ 1000'] },
    { title:'Level 3 — Mixed × and ÷',             desc:'A random mix of multiplying and dividing by 10, 100 or 1000. Read the sign carefully before you shift the digits.', examples:['4.5 × 100', '80 ÷ 10', '0.9 × 1000'] },
    { title:'Level 4 — Multiples of 10',           desc:'Multiply and divide by multiples like 20, 50 or 400. Split it up: shift for the power of ten, then multiply or divide by the leading digit.', examples:['3.2 × 40', '84 ÷ 20', '0.5 × 400'] },
  ],
  dsc: [
    { title:'Level 1 — Squares of Decimals',    desc:'Square decimals with 1 decimal place. Remember: answer has twice as many decimal places.', examples:['0.3²', '1.2²', '0.5²'] },
    { title:'Level 2 — Cubes of Decimals',      desc:'Cube decimals with 1 decimal place. Careful with place value as you multiply three times.', examples:['0.2³', '0.5³', '1.1³'] },
    { title:'Level 3 — Mixed Squares & Cubes',  desc:'A mix of squaring and cubing decimals, including 2 d.p. inputs.', examples:['0.12²', '0.4³', '1.5²'] },
  ],
  doo: [
    { title:'Level 1 — No Brackets',    desc:'Apply BODMAS with decimals. Multiply and divide before adding and subtracting.', examples:['0.5 + 0.2 × 3', '1.2 × 2 + 0.4', '3.6 ÷ 4 + 0.1'] },
    { title:'Level 2 — With Brackets',  desc:'Use brackets with decimal calculations — work inside first.', examples:['(0.5 + 0.3) × 4', '0.6 × (1 + 0.5)', '(1.2 − 0.4) × 5'] },
    { title:'Level 3 — Mixed Challenge',desc:'Three or more operations with decimals and brackets.', examples:['0.5 + 0.2 × (3 − 1)', '(0.4 + 0.6) × 0.5 ÷ 0.2'] },
    { title:'Level 4 — Indices & Brackets', desc:'Now with a squared decimal and nested brackets. Do the power straight after brackets.', examples:['0.2² + 0.5', '(0.5 + 0.1)² × 2', '1.1² − 0.2'] },
  ],
  cmp: [
    { title:'Level 1 — Which Sign?', desc:'Two decimals are shown. Tap the statement with the correct sign (< , > or =) between them. Watch the classic trap: more digits does not mean bigger (0.45 is less than 0.5).', examples:['0.45 < 0.5', '0.7 > 0.68', '0.30 = 0.3'] },
    { title:'Level 2 — Order 4 Decimals (Ascending)', desc:'Tap the four decimals into ascending order — smallest first. Line up the place values, not the number of digits (0.45 comes before 0.5).', examples:['0.4, 0.45, 0.5, 0.54', '0.09, 0.7, 0.72, 0.9'] },
    { title:'Level 3 — Compare Mixed Numbers', desc:'Compare a mix of fractions, decimals and whole numbers with the correct sign. Convert to the same form first (usually decimals) so you are comparing like with like.', examples:['3/4 > 0.7', '1/2 = 0.5', '2 > 1.75'] },
    { title:'Level 4 — Order Mixed Numbers (Descending)', desc:'Tap fractions, decimals and whole numbers into descending order — largest first. Convert each to a decimal in your head, then arrange.', examples:['2, 1.5, 3/4, 0.4', '1, 0.75, 1/2, 0.3'] },
    { title:'Level 5 — Order Positive & Negative', desc:'Order a mix of positive AND negative integers, fractions and decimals. The question says ascending or descending. Remember: with negatives, the number furthest from zero is the smallest (−2 is less than −0.5).', examples:['ascending: −2, −0.5, 1/4, 1.5', 'descending: 2, 0.3, −3/4, −1.2'] },
    { title:'Level 6 — Which Is Closest?', desc:'Four decimals and a target value. Work out how far each one is from the target — more digits does not mean further away.', examples:["closest to 7.5 → 7.515"] },
  ],
  dr: [
    { title:'Level 1 — Round to 1 d.p.',       desc:'Round a decimal to 1 decimal place. Look at the second decimal place to decide.', examples:['3.47 → 3.5', '8.23 → 8.2', '6.75 → 6.8'] },
    { title:'Level 2 — Round to 1, 2 or 3 d.p.',  desc:'A mix of rounding to 1, 2 or 3 decimal places. The question tells you how many — look at the digit one place further along.', examples:['3.467 to 2 d.p.', '8.235 to 1 d.p.', '12.744 to 2 d.p.'] },
    { title:'Level 3 — Round then Estimate',   desc:'Round BOTH numbers to the place shown in the brackets, then add or subtract the rounded values to estimate the answer. The bracket tells you the place — whole number, tenths or hundredths.', examples:['4.81 + 3.2231 (tenths) → 4.8 + 3.2 = 8', '7.36 − 2.91 (whole) → 7 − 3 = 4', '5.267 + 1.482 (hundredths) → 5.27 + 1.48 = 6.75'] },
  ],

  dpv: [
    { title:'Level 1 — Name the Place Value', desc:'Tap the place value of the highlighted digit — tenths, hundredths, thousandths or ten-thousandths. The wrong options are the classic slip of being one place out.', examples:['9 in 5.7839 → ten-thousandths', '9 in 0.981 → tenths', '9 in 12.693 → hundredths'] },
    { title:'Level 2 — Value as a Fraction', desc:'Write the value of the highlighted digit as a fraction — the digit over its place value. Either form is accepted: the place-value fraction (8 hundredths = 8/100) or its simplest form (2/25).', examples:['9 in 5.7839 → 9/10000', '8 in 0.28 → 8/100 or 2/25', '5 in 0.5 → 5/10 or 1/2'] },
    { title:'Level 3 — Rename Decimals', desc:'Rename a decimal using a smaller place value: how many tenths, hundredths or thousandths is it? Multiply by 10, 100 or 1000.', examples:['0.62 = 620 thousandths', '0.4 = 40 hundredths', '0.7 = 700 thousandths'] },
  ],
  dxf: [
    { title:'Level 1 — Standard Expanded Form', desc:'Tap the correct expanded form — each digit written as its own value and added. The wrong options drop the place value (e.g. 3 + 4 + 6).', examples:['3.46 = 3 + 0.4 + 0.06', '5.2 = 5 + 0.2', '0.78 = 0.7 + 0.08'] },
    { title:'Level 2 — Exponent Notation', desc:'Tap the expanded form written with powers of ten: tenths are 1/10, hundredths 1/10², thousandths 1/10³.', examples:['0.245 = 2×1/10 + 4×1/10² + 5×1/10³'] },
    { title:'Level 3 — Evaluate the Expanded Form', desc:'Add the expanded form back together and write the decimal it makes.', examples:['3 + 0.4 + 0.06 = 3.46', '2×1/10 + 4×1/100 = 0.24'] },
  ],
  did: [
    { title:'Level 1 — Decimal on a Number Line', desc:'Read the value shown by the arrow on the number line and write it as a decimal.', examples:['point at 0.6 between 0 and 1', 'point at 2.3 between 2 and 3'] },
    { title:'Level 2 — Decimal from a Grid', desc:'A whole is split into 10 or 100 equal parts and some are shaded. Write the shaded amount as a decimal.', examples:['37 of 100 shaded → 0.37', '4 of 10 shaded → 0.4'] },
    { title:'Level 3 — Other Equal-Part Grids', desc:'The whole is split into 5, 4, 20 or 25 equal parts (still fitting into 100). Work out the decimal each shaded part makes.', examples:['3 of 5 shaded → 0.6', '3 of 4 shaded → 0.75', '7 of 20 shaded → 0.35'] },
  ],
  dtf: [
    { title:'Level 1 — Tenths, Hundredths, Thousandths', desc:'Base level — decimals that are already in simplest form over 10, 100 or 1000 (nothing to cancel). Just write the digits over the place value.', examples:['0.7 → 7/10', '0.09 → 9/100', '0.137 → 137/1000'] },
    { title:'Level 2 — Factors of 100', desc:'Decimals whose fraction lands over a factor of 100 (2, 4, 5, 20, 25, 50). Write over 100, then simplify.', examples:['0.75 → 3/4', '0.6 → 3/5', '0.36 → 9/25'] },
    { title:'Level 3 — Wider Denominators', desc:'Trickier terminating decimals (eighths, sixteenths, fortieths, …), still exact. Write as a fraction in simplest form.', examples:['0.625 → 5/8', '0.075 → 3/40', '0.4375 → 7/16'] },
  ],
  ftd: [
    { title:'Level 1 — Tenths, Hundredths, Thousandths', desc:'Write a fraction with a denominator of 10, 100 or 1000 as a decimal (already in simplest form).', examples:['7/10 → 0.7', '9/100 → 0.09', '137/1000 → 0.137'] },
    { title:'Level 2 — Factors of 100', desc:'Denominators that divide into 100 (2, 4, 5, 20, 25, 50). Rewrite over 100 or divide top by bottom.', examples:['3/4 → 0.75', '3/5 → 0.6', '9/25 → 0.36'] },
    { title:'Level 3 — Wider Denominators', desc:'Trickier terminating conversions (eighths, sixteenths, fortieths, …). Every answer still stops — no recurring decimals.', examples:['5/8 → 0.625', '3/40 → 0.075', '7/16 → 0.4375'] },
    { title:'Level 4 — Mixed Numbers', desc:'Write a mixed number as a decimal. The whole number stays as it is — divide the fraction part out.', examples:["2 6/48 → 2.125"] },
  ],

  /* ── PERCENTAGES (v74, Laura) ── */
  pid: [
    { title:'Level 1 — Tens &amp; Hundreds Grids', desc:'Read the percentage shaded on a 100-square grid or a strip of ten. Type your answer as a percentage.', examples:['37 of 100 shaded → 37%', '4 of 10 shaded → 40%', '80 of 100 → 80%'] },
    { title:'Level 2 — Factor Grids', desc:'Grids whose size divides into 10 or 100 (5, 20, 25, 50 parts). Every answer is a whole percentage.', examples:['3 of 5 → 60%', '9 of 20 → 45%', '13 of 25 → 52%'] },
    { title:'Level 3 — Other Grids', desc:'Grids of other sizes (eighths, fortieths, …) — answers can go to one or two decimal places.', examples:['3 of 8 → 37.5%', '5 of 16 → 31.25%', '7 of 40 → 17.5%'] },
  ],
  pdc: [
    { title:'Level 1 — Nice Values', desc:'Convert between a percentage and a decimal for friendly values. Each question goes one way — read the prompt. Type the number only (no % sign).', examples:['25% → 0.25', '0.4 → 40%', '75% → 0.75'] },
    { title:'Level 2 — Any Whole Percent', desc:'Trickier whole percentages and two-place decimals, both directions. To go %→decimal move the point two places left; decimal→% move it two places right.', examples:['16% → 0.16', '0.37 → 37%', '8% → 0.08'] },
    { title:'Level 3 — Thirds &amp; Over 100%', desc:'Recurring values like 33⅓% (a rounded decimal such as 0.33 is fine) and amounts over 100%.', examples:['33⅓% → 0.33…', '120% → 1.2', '2.5 → 250%'] },
  ],
  fpc: [
    { title:'Level 1 — Fractions → Percentages', desc:'Write a fraction as a percentage. Divide top by bottom, then × 100. Type the number only (no % sign).', examples:['½ → 50%', '3/5 → 60%', '4/25 → 16%'] },
    { title:'Level 2 — Fractions → Percentages: Thirds &amp; Over 100%', desc:'Recurring fractions like ⅓ (33⅓% — a rounded 33.3% is fine), eighths, and fractions over 1.', examples:['⅓ → 33⅓%', '3/8 → 37.5%', '5/4 → 125%'] },
    { title:'Level 3 — Percentages → Fractions', desc:'Write a percentage as a fraction in simplest form. Put it over 100 and cancel down.', examples:['25% → ¼', '60% → 3/5', '16% → 4/25'] },
    { title:'Level 4 — Percentages → Fractions: Thirds &amp; Over 100%', desc:'Recurring percentages like 33⅓% → ⅓, eighths like 12.5% → ⅛, and percentages over 100%.', examples:['33⅓% → ⅓', '12.5% → ⅛', '150% → 3/2'] },
  ],
  pfdp: [
    { title:'Level 1 — Nice Values', desc:'Fill the blanks in the table. Convert between fraction, decimal and percentage for friendly values. You score 1 point for every box you fill in correctly.', examples:['½ = 0.5 = 50%', '¼ = 0.25 = 25%', '1/5 = 0.2 = 20%'] },
    { title:'Level 2 — Less Nice Values', desc:'The same table, with trickier values like 16% or 24%. One point per correct box.', examples:['4/25 = 0.16 = 16%', '3/20 = 0.15 = 15%', '9/25 = 0.36 = 36%'] },
    { title:'Level 3 — Thirds &amp; Over 100%', desc:'Recurring values like 1/3 (accept 33.3%) and amounts over 100%. One point per correct box.', examples:['1/3 = 0.33… = 33⅓%', '2/3 ≈ 66.7%', '6/5 = 1.2 = 120%'] },
    { title:'Level 4 — Harder Values', desc:'The widest pool: elevenths and ninths as well as thirds and sixths, and values well over 100% such as 164%. A rounded decimal is accepted for a recurring value.', examples:["164% · 6/11 · 9/4"] },
  ],
  pex: [
    { title:'Level 1 — Friendly Totals', desc:'Write one amount as a percentage of another when the total divides neatly. Type your answer as a percentage.', examples:['35 as a % of 50 → 70%', '18 as a % of 25 → 72%', '9 as a % of 20 → 45%'] },
    { title:'Level 2 — Round to the Nearest Percent', desc:'The division does not come out exactly — round your answer to the nearest whole percent.', examples:['17 out of 30 → 57%', '25 out of 40 → 63%', '11 out of 60 → 18%'] },
    { title:'Level 3 — Different Units', desc:'The two amounts use different units — convert to the same unit first (cents/dollars, grams/kilograms, mm/cm).', examples:['20c as a % of $2 → 10%', '300 g as a % of 2 kg → 15%', '15 mm as a % of 60 cm → 2.5%'] },
    { title:'Level 4 — Pick the Working Line', desc:'Do not work it out — choose the correct working line for writing one amount as a percentage of another.', examples:["27 out of 93 → 27/93 × 100"] },
    { title:'Level 5 — Which Is the Greater Percentage?', desc:'Two amounts out of two different totals. Work out both percentages and tap the higher (or lower) one.', examples:["50g of 250g vs 57g of 300g"] },
  ],
  poa: [
    { title:'Level 1 — Friendly Percentages', desc:'Find 10%, 20%, 25%, 50% and other easy percentages of an amount.', examples:['10% of 80 → 8', '25% of 60 → 15', '20% of 45 → 9'] },
    { title:'Level 2 — Any Whole Percent', desc:'Find trickier whole-number percentages such as 11% or 18% of an amount.', examples:['11% of 200 → 22', '18% of 50 → 9', '35% of 80 → 28'] },
    { title:'Level 3 — Decimals &amp; Over 100%', desc:'Percentages like 12.5%, or more than 100% of an amount.', examples:['12.5% of 80 → 10', '150% of 40 → 60', '7.5% of 200 → 15'] },
    { title:'Level 4 — Word Problems', desc:'Find a percentage of an amount from a story \u2014 savings, discounts and how many out of a group.', examples:['25% off an $80 jacket \u2192 saves $20', '15% of 60 students \u2192 9', '30% of $140 saved \u2192 $42'] },
  ],
  pcd: [
    { title:'Level 1 — Friendly Increase / Decrease', desc:'Increase or decrease an amount by an easy percentage (10%, 20%, 25%, …).', examples:['Increase 80 by 10% → 88', 'Decrease 60 by 25% → 45', 'Increase 50 by 20% → 60'] },
    { title:'Level 2 — Any Whole Percent', desc:'Increase or decrease an amount by a trickier whole percentage (11%, 18%, …).', examples:['Increase 200 by 11% → 222', 'Decrease 50 by 18% → 41', 'Increase 80 by 35% → 108'] },
    { title:'Level 3 — Real-World Words', desc:'Spot the change word — marked up, inflated, appreciation and rise all mean increase; discount, reduction, depreciated and decline all mean decrease.', examples:['$60 marked up 20% → $72', '$80 discounted 25% → $60', '$50 depreciated 10% → $45'] },
    { title:'Level 4 — Percentage Error', desc:'Percentage error = (size of the error \u00f7 the TRUE value) \u00d7 100. Compare a measurement or estimate with the true value. Answers are exact whole percentages \u2014 type the number without the % sign.', examples:['true 200, measured 210 \u2192 5', 'true 50, measured 48 \u2192 4', 'true 80, estimate 100 \u2192 25'] },
    { title:'Level 5 — Word Problems', desc:'Increase or decrease an amount by a percentage in a real context \u2014 sale prices and price rises. Work out the new total, not the change.', examples:['$40 shirt up 15% \u2192 $46', '$80 bike, 25% off \u2192 $60', '$60 plan up 10% \u2192 $66'] },
  ],
  ppl: [
    { title:'Level 1 — Profit or Loss', desc:'An item is bought and sold — work out the profit or loss in dollars, then tap Profit or Loss.', examples:['Buy $60, sell $25 → $35 loss', 'Buy $40, sell $70 → $30 profit', 'Buy $18, sell $30 → $12 profit'] },
    { title:'Level 2 — Percentage Profit or Loss', desc:'Work out the percentage profit or loss on the cost price, then tap Profit or Loss.', examples:['Buy $200, sell $40 → 80% loss', 'Buy $50, sell $60 → 20% profit', 'Buy $80, sell $100 → 25% profit'] },
  ],

  /* ── NEW BASE-FACT & METHOD SKILLS (v74.2, Laura) ── */
  fmp: [
    { title:'Level 1 — Prime or Not?', desc:'Tap whether a number is prime (only factors 1 and itself) or not prime.', examples:['17 → Prime', '21 → Not prime', '2 → Prime'] },
    { title:'Level 2 — Is It a Factor?', desc:'Tap whether the first number is a factor of the second (divides it exactly).', examples:['6 a factor of 24? Yes', '7 a factor of 20? No', '9 a factor of 54? Yes'] },
    { title:'Level 3 — Multiples', desc:'Type the multiple asked for — the Nth multiple of a number.', examples:['4th multiple of 7 → 28', '6th multiple of 8 → 48', '3rd multiple of 12 → 36'] },
    { title:'Level 4 — Describe the Number', desc:'Tap the description that fits: odd or even, and prime, square or a multiple of something. Two facts about the same number at once.', examples:['51 \u2192 odd and a multiple of 3', '49 \u2192 odd and square', '23 \u2192 odd and prime'] },
    { title:'Level 5 — Which Set Is All Prime?', desc:'Four sets of numbers. Only one contains nothing but primes — watch for 1, and for odd numbers that are not prime.', examples:["2, 11, 31, 37, 53"] },
  ],
  hcflcm: [
    { title:'Level 1 — Highest Common Factor', desc:'Type the largest number that divides into both — the HCF.', examples:['HCF of 12 & 18 → 6', 'HCF of 20 & 30 → 10', 'HCF of 9 & 24 → 3'] },
    { title:'Level 2 — Lowest Common Multiple', desc:'Type the smallest number both go into — the LCM.', examples:['LCM of 4 & 6 → 12', 'LCM of 3 & 5 → 15', 'LCM of 6 & 8 → 24'] },
    { title:'Level 3 — Harder Pairs', desc:'HCF or LCM of trickier pairs with larger numbers.', examples:['HCF of 36 & 48 → 12', 'LCM of 8 & 12 → 24', 'LCM of 9 & 15 → 45'] },
    { title:'Level 4 — Word Problems', desc:'Decide whether the story needs the highest common factor or the lowest common multiple, then find it. "Next time together" is LCM; "identical groups, nothing left over" is HCF.', examples:['buses every 12 and 18 min \u2192 LCM', '24 pencils and 36 erasers into equal bags \u2192 HCF'] },
    { title:'Level 5 — In Index Form', desc:'Both numbers are given as products of prime powers. For the HCF take the LOWEST power of each prime; for the LCM take the HIGHEST. Tap the answer in index form.', examples:["HCF of 3³ × 7² and 3² × 7 → 3² × 7"] },
  ],
  rest: [
    { title:'Level 1 — Round to 10 or 100', desc:'Round a whole number to the nearest 10 or 100.', examples:['67 to 10 → 70', '340 to 100 → 300', '85 to 10 → 90'] },
    { title:'Level 2 — Round to 100 or 1000', desc:'Round larger whole numbers to the nearest 100 or 1000.', examples:['4 620 to 1000 → 5000', '2 480 to 100 → 2500', '7 350 to 1000 → 7000'] },
    { title:'Level 3 — Round to the Leading Digit', desc:'Round to 1 significant figure — keep the first digit and make the rest zeros.', examples:['3 470 → 3000', '68 → 70', '820 → 800'] },
    { title:'Level 4 — Estimate a Calculation', desc:'Round each number to its leading digit first, then estimate the answer.', examples:['39 × 21 ≈ 800', '612 + 288 ≈ 900', '81 ÷ 19 ≈ 4'] },
  ],
  foa: [
    { title:'Level 1 — Unit Fractions', desc:'Find a unit fraction of an amount (½, ⅓, ¼, ⅕…) — just divide by the denominator.', examples:['½ of 30 → 15', '¼ of 20 → 5', '⅓ of 18 → 6'] },
    { title:'Level 2 — Non-Unit Fractions', desc:'Find a fraction of an amount — divide by the bottom, multiply by the top.', examples:['¾ of 20 → 15', '⅖ of 30 → 12', '⅚ of 24 → 20'] },
    { title:'Level 3 — Harder Amounts', desc:'Larger amounts and trickier fractions; answers stay whole.', examples:['⅜ of 64 → 24', '⁴⁄₇ of 84 → 48', '⅚ of 90 → 75'] },
    { title:'Level 4 — Word Problems', desc:'Find a fraction of an amount from a story. Divide by the denominator to find one part, then multiply by the numerator.', examples:['2/5 of 30 students walk \u2192 12', '3/4 of $60 spent \u2192 45', '5/8 of 24 games won \u2192 15'] },
  ],
  fcmp: [
    { title:'Level 1 — Which Sign?', desc:'Tap the correct sign (< > =) between two fractions. Compare by a common denominator or by converting to decimals.', examples:['½ ? ⅗', '¾ ? ⅔', '⅖ ? 0.4'] },
    { title:'Level 2 — Order Ascending', desc:'Tap the fractions into order, smallest first.', examples:['½, ¼, ⅝, ⅓', '⅔, ½, ¾, ⅚'] },
    { title:'Level 3 — Order Descending', desc:'Tap the fractions into order, largest first (includes some over 1).', examples:['¾, ⅞, ½, 5⁄4', '⅗, ⅘, ⅔, 1'] },
  ],
  nidx: [
    { title:'Level 1 — Zero & Unit Index', desc:'Anything to the power 0 is 1; to the power 1 is itself; a⁻¹ is 1 over a.', examples:['7⁰ → 1', '5⁻¹ → 1/5', '(−3)⁰ → 1'] },
    { title:'Level 2 — Negative Indices', desc:'A negative index means one over the positive power. Type the answer as a fraction.', examples:['2⁻³ → 1/8', '3⁻² → 1/9', '10⁻² → 1/100'] },
    { title:'Level 3 — Fraction Bases', desc:'Negative indices of fractions — flip and apply the power.', examples:['(⅔)⁻¹ → 3/2', '(¾)⁻² → 16/9', '(⅖)⁻² → 25/4'] },
  ],
  ssim: [
    { title:'Level 1 — Simplify a Surd', desc:'Take out the largest square factor. Type using √ (e.g. 2√3).', examples:['√12 → 2√3', '√18 → 3√2', '√50 → 5√2'] },
    { title:'Level 2 — Larger Radicands', desc:'Bigger numbers under the root — find the largest square factor.', examples:['√72 → 6√2', '√98 → 7√2', '√200 → 10√2'] },
    { title:'Level 3 — With a Coefficient', desc:'Simplify a surd that already has a number in front.', examples:['2√8 → 4√2', '3√12 → 6√3', '2√27 → 6√3'] },
  ],
  sas: [
    { title:'Level 1 — Same Surd', desc:'Add or subtract surds that already have the same root. Combine the numbers in front.', examples:['3√2 + 5√2 → 8√2', '7√5 − 2√5 → 5√5', '√3 + 4√3 → 5√3'] },
    { title:'Level 2 — Simplify First', desc:'One surd must be simplified before you can combine them.', examples:['2√3 + √12 → 4√3', '√8 + √2 → 3√2', '√27 − √3 → 2√3'] },
    { title:'Level 3 — Harder', desc:'Larger numbers; simplify each surd, then combine.', examples:['√50 + √8 → 7√2', '√75 − √12 → 3√3', '√20 + √45 → 5√5'] },
  ],
  smul: [
    /* v86 (Laura): L1 is the RULE ONLY — nothing here ever simplifies, so a
       student can master √a × √b = √(ab) before meeting square factors. */
    { title:'Level 1 — The Rule Only', desc:'√a × √b = √(ab). These answers never simplify — except when the roots match, where √k × √k = k.', examples:['√5 × √2 → √10', '2√3 × 3√5 → 6√15', '3√2 × 2√2 → 12'] },
    { title:'Level 2 — Multiply & Simplify', desc:'√a × √b = √(ab). Now the answer may have a square factor — simplify it.', examples:['√3 × √6 → 3√2', '√2 × √5 → √10', '√6 × √2 → 2√3'] },
    { title:'Level 3 — With Coefficients', desc:'Multiply the numbers in front and the roots separately, then simplify.', examples:['2√3 × 4√2 → 8√6', '3√2 × √6 → 6√3', '2√5 × 3√5 → 30'] },
    { title:'Level 4 — Harder', desc:'Bigger numbers; the answer may simplify to a whole number.', examples:['√8 × √6 → 4√3', '2√6 × 3√8 → 24√3', '√12 × √3 → 6'] },
  ],
  sdiv: [
    { title:'Level 1 — Divide Roots', desc:'√a ÷ √b = √(a÷b). Simplify your answer.', examples:['√18 ÷ √2 → 3', '√12 ÷ √3 → 2', '√20 ÷ √5 → 2'] },
    { title:'Level 2 — Surd Answers', desc:'The quotient is itself a surd — simplify it.', examples:['√24 ÷ √2 → 2√3', '√54 ÷ √3 → 3√2', '√40 ÷ √2 → 2√5'] },
    { title:'Level 3 — With Coefficients', desc:'Divide the numbers in front and the roots separately.', examples:['6√8 ÷ 2√2 → 6', '8√6 ÷ 2√3 → 4√2', '10√12 ÷ 5√3 → 4'] },
  ],
  prev: [
    { title:'Level 1 — After an Increase', desc:'A price grew by a percentage — work back to the original. Divide by (100% + rate).', examples:['+10% → $88, was $80', '+20% → $60, was $50', '+25% → $100, was $80'] },
    { title:'Level 2 — After a Decrease', desc:'A price was reduced by a percentage — work back to the original. Divide by (100% − rate).', examples:['−20% → $80, was $100', '−10% → $45, was $50', '−25% → $60, was $80'] },
    { title:'Level 3 — Mixed', desc:'A mix of increase and decrease, with less friendly numbers.', examples:['−15% → $68, was $80', '+12% → $56, was $50', '−40% → $90, was $150'] },
  ],
  bbuy: [
    { title:'Level 1 — Unit Price', desc:'Find the price per unit (per 100 g, per item, per litre) so you can compare.', examples:['$6 for 3 kg → $2/kg', '$4.50 for 5 → 90c each', '$8 for 2 L → $4/L'] },
    { title:'Level 2 — Which Is Better Value?', desc:'Tap the option with the lower unit price — the better buy.', examples:['500g $4 vs 1kg $7', '3 for $5 vs 5 for $9', '2L $6 vs 3L $8'] },
    { title:'Level 3 — How Much You Save', desc:'Work out the saving per unit (or overall) by buying the better-value option.', examples:['per-kg saving', 'cents saved each', 'saving per litre'] },
  ],

  /* ── FINAL THREE SKILLS (v74.3, Laura) ── */
  pfac: [
    { title:'Level 1 — Recognise It', desc:'Tap the correct prime factorisation (in index form) of the number.', examples:['36 → 2² × 3²', '60 → 2² × 3 × 5', '72 → 2³ × 3²'] },
    { title:'Level 2 — Missing Power', desc:'The prime factorisation is given with one power missing — type it in.', examples:['72 = 2^▢ × 3² → 3', '48 = 2^▢ × 3 → 4', '200 = 2³ × 5^▢ → 2'] },
    { title:'Level 3 — Count the Factors', desc:'How many prime factors does the number have, counting repeats?', examples:['120 = 2³×3×5 → 5', '36 = 2²×3² → 4', '90 = 2×3²×5 → 4'] },
    { title:'Level 4 — Write in Prime Factor Form', desc:'Tap the number written as a product of primes, with repeats collected as powers \u2014 the answer a factor tree is built to give.', examples:['60 = 2\u00b2 \u00d7 3 \u00d7 5', '72 = 2\u00b3 \u00d7 3\u00b2', '45 = 3\u00b2 \u00d7 5'] },
  ],
  rear: [
    { title:'Level 1 — One Step', desc:'Rearrange a one-step formula to make the named letter the subject. Tap the correct new formula.', examples:['P = 4s → s = P/4', 'A = lw → w = A/l', 'C = πd → d = C/π'] },
    { title:'Level 2 — Two Steps', desc:'Rearrange a two-step formula. Undo the operations in reverse order.', examples:['v = u + at → a = (v−u)/t', 'y = mx + c → x = (y−c)/m', 'P = 2(l+w) → w = P/2 − l'] },
    { title:'Level 3 — Squares & Roots', desc:'Rearrange formulas that involve a square — you will need a square root.', examples:['A = πr² → r = √(A/π)', 'a²+b²=c² → b = √(c²−a²)', 'E = mc² → c = √(E/m)'] },
  ],
  apoly: [
    { title:'Level 1 — Angle Sum', desc:'Find the sum of the interior angles of the polygon: (n − 2) × 180°.', examples:['pentagon → 540°', 'hexagon → 720°', 'octagon → 1080°'] },
    { title:'Level 2 — Find the Missing Angle', desc:'The interior angles are given except one — use the angle sum to find x.', examples:['quadrilateral: 90,100,80, x → 90', 'pentagon: find x'] },
    { title:'Level 3 — Regular Polygons', desc:'Find each interior angle, or each exterior angle, of a regular polygon.', examples:['regular hexagon interior → 120°', 'regular pentagon exterior → 72°', 'regular decagon interior → 144°'] },
    { title:'Level 4 — Angles in Terms of a', desc:'The interior angles are written using a (e.g. a, 2a, 3a). Use the angle sum to solve for a.', examples:['quad a,2a,3a,4a → a = 36°', 'pentagon 2a,3a,4a,5a,6a → a = 27°'] },
  ],

  ipow: [
    { title:'Level 1 — Numbers Only',    desc:'Multiply the indices when raising a power to another power. Enter the resulting power.', examples:['(3²)⁴ = 3?'] },
    { title:'Level 2 — One Variable',    desc:'Raise an expression with one variable to a power. Raise the coefficient and multiply the index of x. Enter both.', examples:['(2x²)³ = ?'] },
    { title:'Level 3 — Two Variables',   desc:'Raise expressions with two variables to a power. Enter the coefficient and power of x (power of y shown in hint).', examples:['(xy²)³ = ?'] },
  ],

  sci: [
    { title:'Level 1 — Powers of 10 (1–6)',   desc:'Convert between standard form and scientific notation using powers of 10 from 10¹ to 10⁶. Positive powers only.', examples:['3 200 000', '4.5 × 10⁴', '72 000'] },
    { title:'Level 2 — All Positive Powers',   desc:'Any positive power of 10. Includes decimals like 3.75 × 10⁵. Builds fluency with the standard form.', examples:['0.000 045', '6.02 × 10⁵', '3.14 × 10⁸'] },
    { title:'Level 3 — Positive & Negative',   desc:'Both positive and negative powers of 10, including very small numbers like 3 × 10⁻⁴.', examples:['0.0032', '4.1 × 10⁻³', '5 × 10⁻⁶'] },
  ],

  /* ── RATIOS & RATES (v22) ── */
  rsim: [
    { title:'Level 1 — Whole Numbers',  desc:'Simplify ratios using the highest common factor (HCF). Both parts are whole numbers.', examples:['8 : 10 → 4 : 5', '24 : 54 → 4 : 9', '12 : 18 → 2 : 3'] },
    { title:'Level 2 — Decimals',       desc:'Simplify ratios that involve decimals. First multiply both sides to clear the decimals, then divide by the HCF.', examples:['1.2 : 3.2 → 3 : 8', '0.6 : 1.5 → 2 : 5', '2.5 : 4.0 → 5 : 8'] },
    { title:'Level 3 — Fractions',      desc:'Simplify ratios that involve fractions or mixed numbers. Convert to whole numbers using a common denominator, then simplify.', examples:['½ : ¾ → 2 : 3', '1½ : 2 → 3 : 4', '⅔ : ⅖ → 10 : 6 → 5 : 3'] },
    { title:'Level 4 — Ratio from a Diagram', desc:'Count each kind of shape in the picture, then write the ratio in simplest form. Two or three parts.', examples:["4 squares : 6 circles → 2 : 3"] },
    { title:'Level 5 — Different Units', desc:'The two amounts use different units — convert to the SAME unit first, then simplify.', examples:["40 cents to $2 → 1 : 5"] },
    { title:'Level 6 — Three &amp; Four Parts', desc:'Simplify a three- or four-part ratio by dividing every part by their highest common factor.', examples:["10 : 55 : 110 → 2 : 11 : 22"] },
  ],
  req: [
    { title:'Level 1 — Two Parts',        desc:'Find the missing value in a two-part equivalent ratio. Multiplier or divisor is always a whole number.', examples:['2 : 5 = 8 : ?', '3 : 7 = ? : 21', '4 : 9 = 12 : ?'] },
    { title:'Level 2 — Three Parts',      desc:'Find the missing value in a three-part equivalent ratio. Multiplier or divisor is always a whole number.', examples:['1 : 2 : 3 = 4 : 8 : ?', '2 : 3 : 5 = ? : 9 : 15', '3 : 4 : 6 = 9 : 12 : ?'] },
    { title:'Level 3 — Decimal Multiplier',desc:'Three-part equivalent ratios where the multiplier is not a whole number (e.g. ×1.5 or ×2.5). Answer is always a whole number.', examples:['2 : 4 : 6 = 3 : 6 : ?', '4 : 6 : 8 = ? : 9 : 12', '2 : 3 : 5 = 5 : 7.5 : ?'] },
    { title:'Level 4 — Combining Two Ratios', desc:'Two ratios share a middle quantity. Scale both so the shared part matches, then read off the outer pair and simplify.', examples:['R:B = 3:2 and B:W = 3:4 \u2192 R:W = 9:8'] },
  ],
  rsh: [
    { title:'Level 1 — Two-Part Share',   desc:'Share a total in a two-part ratio. All arithmetic stays within the 12× tables — focus is on the sharing method, not big multiplication.', examples:['Share $24 in 1 : 2 — larger?', 'Share 35 in 3 : 4 — smaller?', 'Share $60 in 5 : 7 — larger?'] },
    { title:'Level 2 — Three-Part Share', desc:'Share a total in a three-part ratio. Question tells you which share (smallest, middle or largest).', examples:['Share 60 kg in 2 : 3 : 5 — smallest?', 'Share $120 in 1 : 2 : 3 — middle?', 'Share 240 in 3 : 4 : 5 — largest?'] },
    { title:'Level 3 — Larger Numbers',   desc:'Three-part shares with larger totals and ratios. Same forward-share method, bigger numbers test fluency.', examples:['Share $840 in 4 : 7 : 9 — middle?', 'Share 1500 in 2 : 5 : 8 — largest?', 'Share $660 in 3 : 4 : 4 — smallest?'] },
    { title:'Level 4 — Given One Part', desc:'You are told one share or the difference between shares — work back to the amount asked for.', examples:['3 : 5, smaller is 18 — larger?', '2 : 7, difference is 20 — total?', '4 : 9, larger is 63 — smaller?'] },
    { title:'Level 5 — Word Problems', desc:'Share an amount in a ratio from a story, and give the LARGER share. Add the parts, divide to find one part, then multiply.', examples:['$120 in 2:3 \u2192 larger share $72', '450 g in 4:5 \u2192 250 g', '$84 in 1:6 \u2192 $72'] },
    { title:'Level 6 — Ratio as a Fraction', desc:'Add the parts to find the total, then write the named part over that total and simplify.', examples:["blue : green : yellow = 2 : 3 : 5 → green is 3/10"] },
    { title:'Level 7 — Four-Part Share', desc:'Share a total in a FOUR-part ratio. Add the parts, divide to find one part, then multiply out each share in order.', examples:["240 in 6 : 7 : 8 : 9"] },
  ],
  rtsim: [
    { title:'Level 1 — Simplify Rates',   desc:'Express a quantity as a unit rate by dividing. Whole-number answers.', examples:['$28 for 4 kg → $?/kg', '180 km in 3 h → ?km/h', '$45 for 5 L → $?/L'] },
    { title:'Level 2 — Decimal Rates',    desc:'Simplify rates where the unit rate is a decimal. Round to 2 d.p. if needed.', examples:['$17 for 4 kg → $?/kg', '90 km in 4 h → ?km/h', '$22.50 for 5 L → $?/L'] },
  ],
  rtcv: [
    { title:'Level 1 — Whole-Number Answers', desc:'Convert between metric units (km/h ↔ m/s, m/s ↔ km/h, $/kg ↔ cents/g). Numbers chosen so answers are whole.', examples:['72 km/h → ?m/s (= 20)', '15 m/s → ?km/h (= 54)', '$3/kg → ?c/g (= 0.3)'] },
    { title:'Level 2 — Decimal Answers',      desc:'Convert rates including dollars per litre to cents per millilitre. Answers may be decimals to 2 d.p.', examples:['$1.20/L → ?c/mL (= 0.12)', '54 km/h → ?m/s (= 15)', '$2.50/kg → ?c/g (= 0.25)'] },
    { title:'Level 3 — Word Problems', desc:'Rates in context \u2014 speed, price per kilogram and litres per minute. Decide whether to multiply or divide, then answer in the unit asked for.', examples:['240 km in 3 h \u2192 80 km/h', '$18 for 6 kg \u2192 $3/kg', '7 L/min for 5 min \u2192 35 L'] },
    { title:'Level 4 — Currency Conversion', desc:'One Australian dollar buys a fixed amount of the other currency. Multiply going out, divide coming back — the direction is the whole question.', examples:["A$1 = US$0.7370; A$50 → US$36.85"] },
  ],
  /* ── ALGEBRA LEVELS ── */
  aparts: [
    { title:'Level 1 — Two Terms',        desc:'Read the coefficient of a pronumeral, or the constant term, in a two-term expression. Type just the number.', examples:['3x + 5 — coeff of x?', '7 + 4y — constant?', '2a + 9 — coeff of a?'] },
    { title:'Level 2 — Three Terms',      desc:'Three-term expressions with two pronumerals. Read off the coefficient of the named pronumeral, or the constant.', examples:['4x + 7y + 2 — coeff of y?', '5a + 3b + 8 — coeff of a?', '6m + 2n + 5 — constant?'] },
    { title:'Level 3 — Negatives & Unit Coefficients', desc:'Coefficients can be negative or 1 (e.g. the coefficient of x in x + 7 is 1, and in 8 − 5x is −5).', examples:['8 − 5x — coeff of x?', 'x + 7 — coeff of x?', '4 − y — coeff of y?'] },
    { title:'Level 4 — Count the Terms &amp; Pronumerals', desc:'Terms are the parts separated by + or −; pronumerals are the different letters. Tap the expression with the counts named.', examples:["3 terms, 2 pronumerals → 3m + 6n + 2p"] },
  ],
  asub: [
    { title:'Level 1 — One Variable',     desc:'Substitute one whole-number value and evaluate. Answers stay positive.', examples:['x = 4: 2x + 5', 'x = 3: 4x − 2', 'a = 5: 3a + 1'] },
    { title:'Level 2 — Two Variables',    desc:'Substitute two whole-number values and evaluate. Answers stay positive.', examples:['a=3, b=2: 4a + 2b', 'x=5, y=1: 2x + 3y', 'm=4, n=6: m + 2n'] },
    { title:'Level 3 — Negatives & Squares', desc:'Negative values and a squared term. Answers may be negative — mind the order of operations.', examples:['x = −2: x² + 3x', 'x = −3: 2x + 5', 'x = −4: x² − 1'] },
    { title:'Level 4 — Substitute into Formulas', desc:'Substitute values into a real formula and evaluate — area, perimeter, speed and more.', examples:['A = ½bh, b=6 h=4', 'v = u + at, u=3 a=2 t=5', 'P = 2(l + w), l=8 w=3'] },
    { title:'Level 5 — Word Problems', desc:'A formula is given in a real context. Substitute the values from the story and work out the answer.', examples:['C = 15 + 8h, h = 5 \u2192 55', 'P = 2(l + w), l = 9, w = 4 \u2192 26', 'd = vt, v = 12, t = 3 \u2192 36'] },
    { title:'Level 6 — Decimal Values', desc:'Substitute decimal values and evaluate. Answers to 2 decimal places — multiplying still happens before adding or subtracting.', examples:["a = 2.46, b = 11.31 → b − 2a"] },
  ],
  alike: [
    { title:'Level 1 — One Variable, Add', desc:'Collect like terms in one variable. Type the coefficient; the variable is shown for you.', examples:['3x + 5x', '4y + 2y', '6a + a'] },
    { title:'Level 2 — Mixed + / −',      desc:'Add and subtract like terms in one variable. Results stay positive.', examples:['2a + 6a − 3a', '9x − 4x', '5m + 2m − m'] },
    { title:'Level 3 — Two Variables',    desc:'Collect like terms across two variables, with negatives. Answer has two terms.', examples:['3x + 2y + 5x', '5a − 2b − 3a + 4b', '7p + q − 2p'] },
  ],
  amul: [
    { title:'Level 1 — Number × Term',    desc:'Multiply a number by an algebraic term. Type the whole answer, e.g. 12x.', examples:['4 × 3x = 12x', '7 × 2x = 14x', '6 × m = 6m'] },
    { title:'Level 2 — Two Terms',         desc:'Multiply two terms with different letters. Type the whole answer including every letter.', examples:['3xy × 4z = 12xyz', '7y × 4p = 28py', '2x × 5y = 10xy'] },
    { title:'Level 3 — Answers with Powers', desc:'A letter appears in both terms, so the answer carries a power. Type the letters and powers (use the ² key).', examples:['5xy × 2yz = 10xy²z', '3x × 4x = 12x²', '2ab × 3b = 6ab²'] },
    { title:'Level 4 — Negatives & Three Terms', desc:'Three terms multiplied, with negatives. Answers can reach a cube (use the ³ key). Best played in Practice or Challenge.', examples:['−3x × 2y × 4x = −24x²y', '2x × 3x × x = 6x³', '−2a × −3a × b = 6a²b'] },
    { title:'Level 5 — Find the Missing Term', desc:'One term of a true statement has been blanked out. Work backwards to find it, then type the whole term.', examples:["? × 3y = 12xy → 4x","4x + ? = 7x → 3x"] },
  ],
  adiv: [
    { title:'Level 1 — Term ÷ Number',     desc:'Divide an algebraic term by a number that goes in evenly. Type the whole answer, e.g. 3x.', examples:['12x ÷ 4 = 3x', '20m ÷ 5 = 4m', '18y ÷ 3 = 6y'] },
    { title:'Level 2 — A Letter Cancels',  desc:'Divide one term by another so a letter cancels. Type the whole answer.', examples:['28xy ÷ 7y = 4x', '20ab ÷ 5a = 4b', '18pq ÷ 6q = 3p'] },
    { title:'Level 3 — Answers with Powers', desc:'The top carries a higher power, so the answer keeps one. Type the letters and powers (use the ² key).', examples:['10x³y ÷ 2x = 5x²y', '12a³ ÷ 3a = 4a²', '15m³n ÷ 5m = 3m²n'] },
    { title:'Level 4 — Divide then Multiply', desc:'Work left to right: divide first, then multiply. Negatives allowed. Best played in Practice or Challenge.', examples:['24x²y ÷ 6x × 2y = 8xy²', '20a²b ÷ 5a × 3b = 12ab²', '18m²n ÷ 3m × 2n = 12mn²'] },
    { title:'Level 5 — Find the Missing Term', desc:'A division statement with one part missing. Divide the other way, or multiply back up, then type the whole term.', examples:["8x² ÷ ? = 2x → 4x"] },
  ],
  aexp: [
    { title:'Level 1 — k(x + a)',         desc:'Expand a single bracket with a number outside. Fill the coefficient of each term in the template.', examples:['3(x + 2)', '5(y + 1)', '2(a + 6)'] },
    { title:'Level 2 — k(ax ± b)',        desc:'Expand a single bracket where the x-term has a coefficient and the bracket may subtract.', examples:['2(3x − 4)', '4(2x + 3)', '3(5x − 1)'] },
    { title:'Level 3 — Variable Multiplier', desc:'Expand a bracket multiplied by a pronumeral — this produces an x² term.', examples:['2x(x − 3)', '3x(x + 2)', 'x(4x − 5)'] },
  ],
  aexp2: [
    { title:'Level 1 — Add Two Brackets', desc:'Expand two brackets and collect like terms. All terms stay positive. Best played in Challenge mode.', examples:['2(x+3) + 3(x+2)', '4(x+1) + 2(x+5)', '3(x+2) + (x+4)'] },
    { title:'Level 2 — Subtract a Bracket', desc:'Expand two brackets where the second is subtracted — distribute the minus carefully.', examples:['5(x+2) − 3(x+1)', '4(x+3) − 2(x+1)', '6(x+1) − 4(x+2)'] },
    { title:'Level 3 — Quadratic Result', desc:'A pronumeral outside the first bracket gives an x² term, so the simplified answer has three terms.', examples:['x(2x−3) − 4(x−1)', 'x(x+5) − 3(x−2)', '2x(x−1) + 3(x+4)'] },
  ],
  eq1: [
    { title:'Level 1 — Whole-Number Answers', desc:'Undo one addition or subtraction. Every solution is a positive whole number.', examples:['x + 7 = 12', '15 + x = 23', 'x − 4 = 9'] },
    { title:'Level 2 — Negative Answers', desc:'The same one step, but the solution can be a negative number now.', examples:['x + 9 = 4', 'x − 3 = −8', '6 + x = 1'] },
    { title:'Level 3 — Bigger Numbers', desc:'Larger numbers, positive or negative solutions. Take care with the signs.', examples:['28 + x = 12', 'x − 15 = −23', 'x + 31 = 17'] },
    { title:'Level 4 — Decimal Values', desc:'One-step equations where the numbers are decimals. Undo the + or − exactly as you would with whole numbers.', examples:["x + 4.3 = −3 → x = −7.3"] },
  ],
  eq2: [
    { title:'Level 1 — Whole-Number Answers', desc:'Undo one multiplication or division. Every solution is a positive whole number.', examples:['4x = 20', 'x ÷ 3 = 6', '7x = 56'] },
    { title:'Level 2 — Negative Answers', desc:'The same one step with negatives — the coefficient or the solution can be negative.', examples:['−3x = 18', '−5x = −35', 'x ÷ 4 = −6'] },
    { title:'Level 3 — Fraction Answers', desc:'The number does not divide evenly, so the solution is a fraction in simplest form.', examples:['2x = 7  (x = 7/2)', '5x = −12', '4x = 9'] },
    { title:'Level 4 — Decimal Values', desc:'One-step equations with a decimal coefficient or divisor. Divide (or multiply) to undo it — watch the signs.', examples:["−3.2y = 27.2 → y = −8.5"] },
  ],
  eq3: [
    { title:'Level 1 — Whole-Number Answers', desc:'Two steps: undo the + or − first, then the × or ÷. Positive whole-number solutions.', examples:['2x + 3 = 11', '5x − 4 = 21', '3x + 7 = 19'] },
    { title:'Level 2 — Negative Answers', desc:'Two-step equations with negative coefficients or negative solutions.', examples:['3x − 7 = −1', '4 − 3x = 19', '6x + 14 = 2'] },
    { title:'Level 3 — Fraction Answers', desc:'Two steps where the solution is a fraction in simplest form.', examples:['4x + 1 = 8  (x = 7/4)', '6x + 5 = 1', '3x − 2 = 6'] },
    { title:'Level 4 — Word Problems', desc:'Form the equation from the story, then solve it. Every answer is a whole number \u2014 type it in the single box.', examples:['\u00d74 then +7 gives 35 \u2192 7', '$5 flagfall + $3/km, trip $26 \u2192 7 km', '8 per box + 5 loose = 61 \u2192 7 boxes'] },
  ],
  eq4: [
    { title:'Level 1 — Whole-Number Answers', desc:'The variable is inside a fraction. Undo the + or − first, then multiply both sides by the denominator. Positive whole-number solutions.', examples:['x/3 + 5 = 8', '(x − 2)/3 = 12', 'x/4 + 1 = 6'] },
    { title:'Level 2 — Negative Answers', desc:'The same forms, but the solution can be negative now. Watch the signs.', examples:['x/5 − 4 = −2', '(x + 6)/2 = −1', 'x/3 + 7 = 4'] },
    { title:'Level 3 — Fraction Answers', desc:'A coefficient on x means the solution is a fraction in simplest form. Multiply out, then divide.', examples:['(2x + 1)/3 = 2  (x = 5/2)', '(3x − 1)/2 = 4', '(2x + 3)/5 = 1'] },
  ],
  eq5: [
    { title:'Level 1 — Whole-Number Answers', desc:'The variable is on the bottom of a fraction. Multiply both sides by x, then solve. Positive whole-number solutions.', examples:['8/x = 4', '12/x = 3', '20/x = 5'] },
    { title:'Level 2 — Bracket on the Bottom', desc:'The denominator is x ± a number. Multiply out, then solve. Solutions can be negative.', examples:['8/(x + 1) = 1', '10/(x − 2) = 5', '6/(x + 4) = 2'] },
    { title:'Level 3 — Fraction Answers', desc:'The numbers do not divide evenly, so the solution is a fraction in simplest form.', examples:['8/x = 3  (x = 8/3)', '5/(x − 1) = 2', '7/x = 4'] },
  ],
  eq6: [
    { title:'Level 1 — Whole-Number Answers', desc:'The variable appears on both sides. Collect the x terms on one side and the numbers on the other. Positive whole-number solutions.', examples:['5x + 2 = 3x + 10', '7x + 1 = 4x + 13', '6x = 2x + 12'] },
    { title:'Level 2 — Negative Answers', desc:'Variables on both sides where the solution can be negative. Take care moving terms across.', examples:['4x + 3 = 2x − 7', '2x + 10 = 5x + 1', '3x − 4 = 5x + 2'] },
    { title:'Level 3 — Fraction Answers', desc:'Variables on both sides where the solution is a fraction in simplest form.', examples:['3x + 1 = x + 4  (x = 3/2)', '5x − 2 = 2x + 3', '4x + 1 = x + 6'] },
  ],
  ineq: [
    { title:'Level 1 — Integer Answers', desc:'Solve two- and three-step inequalities. Rearrange just like an equation, then type your answer with an inequality sign — e.g. x &gt; 5. Positive or negative whole-number answers.', examples:['3x + 4 > 19  →  x > 5', 'x/2 − 3 ≤ 1  →  x ≤ 8', '(2x + 1)/3 ≥ 3  →  x ≥ 4'] },
    { title:'Level 2 — Integers &amp; Fractions', desc:'A mix of the three forms, now with values that can be fractions in simplest form. Type the inequality sign and the value — e.g. x ≥ 3/2.', examples:['2x + 1 > 4  →  x > 3/2', 'x/3 + 2 < 3  →  x < 3', '(3x − 1)/4 ≤ 2  →  x ≤ 3'] },
    { title:'Level 3 — Flip the Sign', desc:'Some inequalities have a negative coefficient on x. When you multiply or divide both sides by a negative, you must reverse the inequality sign. Watch the direction carefully.', examples:['−2x + 1 > 7  →  x < −3', '4 − x ≥ 1  →  x ≤ 3', '(5 − 2x)/3 < 1  →  x > 1'] },
  ],
  afm: [
    { title:'Level 1 — Positive Numbers', desc:'Factorise x² + bx + c where both numbers in the brackets are positive. Find two numbers that multiply to c and add to b.', examples:['x² + 5x + 6 = (x + 2)(x + 3)', 'x² + 7x + 12', 'x² + 8x + 15'] },
    { title:'Level 2 — Mixed Signs', desc:'Factorise x² + bx + c where the constant is negative, so one bracket adds and the other subtracts.', examples:['x² + 2x − 15 = (x + 5)(x − 3)', 'x² − 3x − 10', 'x² + 4x − 12'] },
    { title:'Level 3 — Negative Middle Term', desc:'Factorise x² − bx + c where both numbers in the brackets are negative, plus harder mixed-sign cases.', examples:['x² − 5x + 6 = (x − 2)(x − 3)', 'x² − 7x + 10', 'x² − x − 20'] },
  ],
  aeb: [
    { title:'Level 1 — (x ± b)(x ± c)', desc:'Expand two brackets using FOIL, then collect like terms. Fill the coefficient of each term in the template.', examples:['(x + 2)(x + 3)', '(x − 4)(x + 5)', '(x − 3)(x − 6)'] },
    { title:'Level 2 — (ax ± c)(bx ± d)', desc:'Both brackets have a coefficient on x, so the x² term has a coefficient too.', examples:['(2x + 3)(x − 4)', '(3x − 1)(2x + 5)', '(4x + 1)(x − 2)'] },
    { title:'Level 3 — Perfect Squares', desc:'Square a bracket: (A + B)² = A² + 2AB + B². Includes a coefficient on x.', examples:['(x + 5)²', '(x − 3)²', '(2x + 1)²'] },
    { title:'Level 4 — Coefficient in Front', desc:'Expand the brackets first, then multiply every term by the number in front (which may be negative).', examples:['2(x − 3)(x + 4)', '−3(x − 4)²', '5(2x − 7)(x − 3)'] },
  ],
  afh: [
    { title:'Level 1 — Number Factor', desc:'Take out the highest common factor (a number) from two terms. Type the HCF, then the bracket contents.', examples:['4x + 8 = 4(x + 2)', '6x + 15 = 3(2x + 5)', '10x − 25'] },
    { title:'Level 2 — Factor with a Variable', desc:'The highest common factor includes an x. Take out both the number and the x.', examples:['8x² − 20x = 4x(2x − 5)', '6x² + 9x = 3x(2x + 3)', '12x² − 8x'] },
    { title:'Level 3 — Three Terms', desc:'Take the highest common factor out of three terms, including an x² term inside the bracket.', examples:['8x² − 4x + 12 = 4(2x² − x + 3)', '6x² + 9x − 15 = 3(2x² + 3x − 5)', '10x² − 15x + 20'] },
  ],
  afg: [
    { title:'Level 1 — Common Bracket', desc:'The same bracket appears in both parts. Factor it out and collect what is left in the second bracket.', examples:['4(x + 3) + 2x(x + 3) = (x + 3)(4 + 2x)', '3(x − 2) + x(x − 2)', '5(2x + 1) + 3x(2x + 1)'] },
    { title:'Level 2 — Grouping (Two Variables)', desc:'Four terms in two letters. Group them in pairs, factor each pair, then take out the common bracket.', examples:['3pq + 6p + q + 2 = (3p + 1)(q + 2)', '2ab + 8a + 3b + 12', 'xy − 4x + 5y − 20'] },
    { title:'Level 3 — Grouping (Cubic)', desc:'Four terms in one letter, up to x³. Group in pairs and factor, leaving an x² term in a bracket.', examples:['x³ − 2x² + 5x − 10 = (x² + 5)(x − 2)', 'x³ + 3x² + 4x + 12', '2x³ − 6x² + x − 3'] },
  ],
  pyth: [
    { title:'Level 1 — Whole-Number Triples', desc:'Use a² + b² = c² on a labelled right-angled triangle. The unknown may be the hypotenuse or a shorter side. Answers are whole numbers.', examples:['legs 3, 4 → 5', 'c 13, leg 5 → 12', 'legs 8, 15 → 17'] },
    { title:'Level 2 — Larger Triples', desc:'Same idea, larger whole-number triangles. The unknown is still mixed between the hypotenuse and a shorter side.', examples:['legs 7, 24 → 25', 'c 29, leg 20 → 21', 'legs 9, 12 → 15'] },
    { title:'Level 3 — Exact Surds', desc:'Answers are exact surds. Type the exact value using √ (e.g. √13 or 2√5) — no rounded decimals. Any equivalent exact form is accepted.', examples:['legs 2, 3 → √13', 'legs 2, 4 → 2√5', 'c 6, leg 2 → 4√2'] },
    { title:'Level 4 — Surds, Varied', desc:'Exact surds with larger numbers and varied orientations, plus the occasional clean triple. Type the exact value using √.', examples:['legs 5, 6 → √61', 'c 9, leg 3 → 6√2', 'legs 4, 7 → √65'] },
    { title:'Level 5 — Is It Right-Angled?', desc:'Three side lengths are given. Use the CONVERSE of Pythagoras: square the two shorter sides, add them, and compare with the longest side squared.', examples:["8, 15, 17 → Yes","8, 15, 18 → No"] },
  ],
  iat: [
    { title:'Level 1 — Acute Triangles', desc:'Two angles are given; find the third using angles in a triangle add to 180°. Round numbers, all angles acute.', examples:['60°, 70° → 50°', '45°, 55° → 80°', '30°, 90°… → uses acute only'] },
    { title:'Level 2 — Includes Obtuse', desc:'One of the angles may be obtuse. Two angles are given; find the missing one. Answers are whole degrees.', examples:['110°, 40° → 30°', '35°, 25° → 120°', '100°, 45° → 35°'] },
    { title:'Level 3 — Awkward Angles', desc:'Two angles given with awkward whole-degree values and varied orientations. Find the third.', examples:['37°, 84° → 59°', '52°, 61° → 67°', '113°, 28° → 39°'] },
  ],
  nsh: [
    { title:'Level 1 — Common 2D Shapes', desc:'Name the flat (2D) shape shown in the diagram. Tap the correct name. Triangles, quadrilaterals and other polygons plus the circle.', examples:['triangle', 'rectangle', 'pentagon', 'hexagon'] },
    { title:'Level 2 — 3D Solids', desc:'Name the solid (3D) shape shown in the diagram. Tap the correct name. Cubes, prisms, pyramids, cylinders, cones and spheres.', examples:['cube', 'cylinder', 'square pyramid', 'triangular prism'] },
    { title:'Level 3 — Mixed &amp; Tricky', desc:'A mix of 2D and 3D shapes, including the easily-confused ones: parallelogram vs rhombus vs trapezium vs kite, and prism vs pyramid vs cuboid.', examples:['parallelogram vs rhombus', 'trapezium vs kite', 'cuboid vs triangular prism'] },
    { title:'Level 4 — Regular or Irregular?', desc:'A regular polygon has all sides and all angles equal. Tap whether the polygon shown is regular or irregular.', examples:['regular hexagon → Regular', 'lopsided pentagon → Irregular'] },
    { title:'Level 5 — Convex or Concave?', desc:'A concave polygon has a corner that caves in (an angle over 180°). Tap whether the polygon is convex or concave.', examples:['all corners out → Convex', 'a dart / arrow → Concave'] },
    { title:'Level 6 — Polygon or Not?', desc:'A polygon is a closed, FLAT shape made only of straight sides. Anything curved, or any solid, is not one.', examples:['hexagon \u2192 yes', 'circle \u2192 no (curved)', 'cylinder \u2192 no (3D)'] },
    { title:'Level 7 — Count the Sides or Vertices', desc:'Count the sides, or the vertices (corners), of the polygon shown. In any polygon the two counts are always the same.', examples:['pentagon \u2192 5', 'octagon \u2192 8', 'trapezium \u2192 4'] },
  ],
  nal: [
    { title:'Level 1 — Points, Rays &amp; Lines', desc:'Tap whether it is a point, a ray, a line segment or a line — shown either as a diagram or in symbols. In symbols a bar (AB) is a segment, one arrow is a ray, and a double arrow is a line; a single letter is a point.', examples:['one dot / a letter → point', 'one arrow → ray', 'double arrow → line'] },
    { title:'Level 2 — Parallel, Perpendicular or Neither', desc:'Tap whether the two lines are parallel, perpendicular, or neither — shown as a diagram, or in symbols (∥ means parallel, ⊥ means perpendicular). Perpendicular lines cross at a right angle; parallel lines never meet.', examples:['∥ or never meet → parallel', '⊥ or cross at 90° → perpendicular', 'cross at a slant → neither'] },
    { title:'Level 3 — Types of Angle', desc:'Name the angle: acute (&lt;90°), right (90°), obtuse (90–180°), straight (180°), reflex (180–360°) or revolution (360°). Shown either as a marked diagram (the orange arc shows the angle) or as a size in degrees to classify.', examples:['&lt;90° → acute', '90–180° → obtuse', '&gt;180° → reflex'] },
    { title:'Level 4 — Types of Triangle', desc:'Name the triangle either by its angles (acute, right, obtuse) or by its sides (equilateral, isosceles, scalene) — the question tells you which. The three angles or side lengths are shown on the triangle. Isosceles means exactly two equal sides.', examples:['one 90° angle → right', '3 equal sides → equilateral', 'all different → scalene'] },
  ],
  eul: [
    { title:'Level 1 — Count from the Solid', desc:'A 3D solid is shown. Count how many faces, edges or vertices it has. Prisms, pyramids, cubes and cuboids.', examples:['cube → 12 edges', 'square pyramid → 5 faces', 'triangular prism → 6 vertices'] },
    { title:'Level 2 — Use Euler\'s Rule', desc:'Two of faces, vertices and edges are given. Find the third using V + F = E + 2.', examples:['F=6, V=8 → E=12', 'V=6, E=9 → F=5', 'F=7, E=15 → V=10'] },
  ],
  arl: [
    { title:'Level 1 — Identify the Relationship', desc:'Tap whether the marked angles are complementary, supplementary, vertically opposite, or angles at a point.', examples:['add to 90° → complementary', 'add to 180° → supplementary', 'equal → vertically opposite'] },
    { title:'Level 2 — Find the Angle', desc:'One relationship, friendly numbers. Use it to find the unknown angle x.', examples:['complementary, 35° → 55°', 'supplementary, 130° → 50°', 'vertically opposite 70° → 70°'] },
    { title:'Level 3 — Harder &amp; Angles at a Point', desc:'Mixed relationships with harder numbers, including several angles around a point (sum 360°).', examples:['at a point: 120°, 95° → 145°', 'supplementary 113° → 67°'] },
    { title:'Level 4 — Solve for x', desc:'Angles given as algebraic expressions. Form an equation from the relationship and solve for x.', examples:['(2x+10)°+(x−4)° = 180° → x = 58', '(2x)°=(x+40)° → x = 40'] },
  ],
  apl: [
    { title:'Level 1 — Identify the Relationship', desc:'Two parallel lines cut by a transversal. Tap whether the marked angles are corresponding, alternate, co-interior, or vertically opposite.', examples:['F-shape → corresponding', 'Z-shape → alternate', 'C-shape → co-interior'] },
    { title:'Level 2 — Find the Angle', desc:'One step. Use the relationship (equal, or add to 180° for co-interior) to find x.', examples:['corresponding 70° → 70°', 'co-interior 110° → 70°'] },
    { title:'Level 3 — Two-Step', desc:'The unknown is two hops away — combine two relationships to reach x.', examples:['co-interior then vertically opposite', 'alternate then vertically opposite'] },
    { title:'Level 4 — Solve for x', desc:'Angles given as algebraic expressions. Use the relationship to form an equation and solve for x.', examples:['(3x+10)°=(x+50)° → x = 20', 'co-interior (2x+30)°+(x+30)° = 180° → x = 40'] },
    { title:'Level 5 — Are the Lines Parallel?', desc:'Two angles are marked at a transversal. Decide whether the rule for that pair is satisfied — if it is not, the lines are not parallel.', examples:["co-interior 110° and 65° → No"] },
  ],
  aqd: [
    { title:'Level 1 — Missing Angle', desc:'Three angles of a quadrilateral are given (they add to 360°). Find the fourth. Friendly numbers.', examples:['90°, 100°, 80° → 90°', '120°, 60°, 100° → 80°'] },
    { title:'Level 2 — Harder Numbers', desc:'Same 360° rule, with less friendly whole-number angles.', examples:['112°, 76°, 95° → 77°'] },
    { title:'Level 3 — Use a Property', desc:'Parallelograms (opposite equal / adjacent add to 180°), isosceles trapeziums (equal base angles) and kites (one equal pair). Use the property to find x.', examples:['parallelogram opposite 70° → 70°', 'parallelogram adjacent 70° → 110°'] },
    { title:'Level 4 — Solve for x', desc:'Some angles given as expressions in x. Use the 360° sum to form an equation and solve for x.', examples:['x°, 2x°, 85°, 95° → x = 60'] },
  ],
  cs: [
    { title:'Level 1 — Congruent, Similar or Neither', desc:'Tap whether the two shapes are congruent (identical size and shape), similar (same shape, scaled) or neither. Judge from the labelled measurements — congruent is the answer even though congruent shapes are also similar.', examples:['same side lengths → congruent', 'sides in a constant ratio → similar', 'ratios differ → neither'] },
    { title:'Level 2 — Congruence Test', desc:'Two triangles are marked (tick marks = equal sides, arcs = equal angles, a square = a right angle). Tap the test that proves them congruent: SSS, SAS, AAS or RHS — "Not congruent" if the given side lengths differ, or "Not enough information" (e.g. AAA or SSA).', examples:['3 equal sides → SSS', 'right angle + hyp + side → RHS', 'side lengths differ → not congruent', 'AAA → not enough'] },
    { title:'Level 3 — Similarity Test', desc:'Two triangles carry equal-angle arcs and/or side lengths in a constant ratio. Tap the test that proves them similar: SSS, AAA, SAS or RHS — "Not similar" if the sides aren\'t in a constant ratio, or "Not enough information" (e.g. two sides with a non-included angle).', examples:['two equal angles → AAA', 'sides in equal ratio → SSS', 'ratios differ → not similar', 'one angle only → not enough'] },
    { title:'Level 4 — Find x', desc:'The two triangles are congruent or similar (the question tells you which). Find the missing side using the scale factor, or the missing angle from matching equal angles. Whole-number answers.', examples:['similar, factor 2, side 7 → 14', 'congruent, matching side 9 → 9', 'matching angle 58° → 58'] },
  ],
  tdeg: [
    { title:'Level 1 — First Quadrant', desc:'Exact values of sin, cos and tan for the special angles 0°, 30°, 45°, 60°, 90°. Tap the correct value.', examples:['sin 30°', 'cos 60°', 'tan 45°'] },
    { title:'Level 2 — Up to 180°', desc:'Adds the second-quadrant angles 120°, 135°, 150°, 180°, where some values become negative.', examples:['cos 120°', 'sin 135°', 'tan 150°'] },
    { title:'Level 3 — Full Circle', desc:'Special angles all the way around to 360°, including negative values and tan being undefined.', examples:['sin 210°', 'tan 270°', 'cos 300°'] },
  ],
  trad: [
    { title:'Level 1 — First Quadrant', desc:'Exact values for 0, π/6, π/4, π/3, π/2 (radians). Tap the correct value.', examples:['sin(π/6)', 'cos(π/3)', 'tan(π/4)'] },
    { title:'Level 2 — Up to π', desc:'Adds 2π/3, 3π/4, 5π/6, π, where some values become negative.', examples:['cos(2π/3)', 'sin(3π/4)', 'tan(5π/6)'] },
    { title:'Level 3 — Full Circle', desc:'All special angles to 2π, including negative values and tan being undefined.', examples:['sin(7π/6)', 'tan(3π/2)', 'cos(5π/3)'] },
  ],
  /* ── v84 — Data Analysis (Release 1) ── */
  dcl: [
    { title:'Level 1 — Categorical or Numerical?', desc:'Categorical data is labels or names. Numerical data is counts or measurements.', examples:['eye colour → Categorical', 'number of pets → Numerical'] },
    { title:'Level 2 — Nominal or Ordinal?',       desc:'Both are categorical. Ordinal categories have a natural ORDER; nominal ones do not.', examples:['favourite sport → Nominal', 'T-shirt size → Ordinal'] },
    { title:'Level 3 — Discrete or Continuous?',   desc:'Both are numerical. Discrete data is counted in whole numbers; continuous data is measured.', examples:['number of goals → Discrete', 'height in cm → Continuous'] },
    { title:'Level 4 — Name the Type',             desc:'All four types together. Decide categorical or numerical first, then the sub-type.', examples:['time to run 100 m → Continuous'] },
  ],
  fqt: [
    { title:'Level 1 — Read a Frequency Table', desc:'Read a frequency straight off the table, find the total, or compare two categories.', examples:['How many chose Netball?', 'How many were surveyed?'] },
    { title:'Level 2 — Frequency from a List',  desc:'Count how many times a value appears in a raw list of data.', examples:['frequency of 3 in the list'] },
    { title:'Level 3 — Grouped Data',           desc:'Data grouped into class intervals. Decide which interval a value belongs to.', examples:['27 → the 20–29 interval'] },
    { title:'Level 4 — Percentage Frequency',   desc:'What percentage of the group chose this category? frequency ÷ total × 100.', examples:['9 out of 25 → 36%'] },
  ],
  drd: [
    { title:'Level 1 — Dot Plots',        desc:'Each dot is one data value. Count the dots above a value, or count them all.', examples:['How many scored 4?'] },
    { title:'Level 2 — Stem-and-Leaf Plots', desc:'Each leaf is one value — always read the KEY first, because it sets the place value.', examples:['key 3 | 7 means 37', 'key 4 | 7 means 4.7'] },
    { title:'Level 3 — Histograms & Column Graphs', desc:'Read a bar height off the frequency axis. Grouped data touches (a histogram); single values are separated (a column graph).', examples:['the 15–19 bar → 6'] },
    { title:'Level 4 — Box Plots',        desc:'Read the five-number summary: minimum, Q1, median, Q3 and maximum.', examples:['the line in the box → the median'] },
  ],
  /* ── v87 — Data Analysis Release 2 ── */
  dmn: [
    { title:'Level 1 — From a List',        desc:'mean = total ÷ how many. Add every value, then divide by the number of values.', examples:['4, 7, 3, 6 → 5'] },
    { title:'Level 2 — From a Dot Plot',    desc:'Each dot is one value. Add them all, then divide by the number of dots.', examples:['count the dots, then divide'] },
    { title:'Level 3 — From a Stem Plot',   desc:'Read every value off the plot (stem × 10 + leaf), then find the mean.', examples:['stem 3, leaf 7 → 37'] },
    { title:'Level 4 — From a Frequency Table', desc:'Multiply each value by its frequency, add those, then divide by the total frequency.', examples:['Σfx ÷ Σf'] },
    { title:'Level 5 — From a Histogram',   desc:'Read each bar as a frequency, then the same Σfx ÷ Σf.', examples:['bar height = frequency'] },
    { title:'Level 6 — Estimate from Grouped Data', desc:'Grouped data has lost the individual values, so use each class MIDPOINT. Answer to 1 decimal place.', examples:['150 < h ≤ 160 → midpoint 155'] },
  ],
  dmo: [
    { title:'Level 1 — From a List',        desc:'The mode is the value that appears most often.', examples:['3, 5, 3, 7, 3 → 3'] },
    { title:'Level 2 — From a Dot Plot',    desc:'The mode is the value with the tallest stack of dots.', examples:['tallest column → the mode'] },
    { title:'Level 3 — From a Stem Plot',   desc:'Look for a repeated leaf on the same stem.', examples:['3 | 4 4 7 → 34'] },
    { title:'Level 4 — From a Frequency Table', desc:'The mode is the VALUE with the highest frequency — not the frequency itself.', examples:['a common slip: answering the frequency'] },
    { title:'Level 5 — From a Histogram',   desc:'The mode is the value under the tallest bar — not the height of the bar.', examples:['tallest bar → read the axis'] },
    { title:'Level 6 — Modal Class',        desc:'Grouped data has no single mode. Name the class interval with the highest frequency.', examples:['160 < h ≤ 170'] },
  ],
  dmd: [
    { title:'Level 1 — Odd Number of Values', desc:'Put the values in order, then take the middle one.', examples:['3, 8, 5 → 5'] },
    { title:'Level 2 — Even Number of Values', desc:'Order them, then take the halfway point between the two middle values. The answer may end in .5.', examples:['3, 5, 8, 9 → 6.5'] },
    { title:'Level 3 — From a Dot Plot',    desc:'A dot plot is already in order — count in from both ends.', examples:['count in to the middle dot'] },
    { title:'Level 4 — From a Stem Plot',   desc:'A stem-and-leaf plot is already in order — count in to the middle.', examples:['count leaves from the top'] },
    { title:'Level 5 — From a Frequency Table', desc:'Add the frequencies to find how many values there are, then count down the column to the middle one.', examples:['Σf = 15 → the 8th value'] },
    { title:'Level 6 — From a Histogram',   desc:'Read each bar as a frequency, then count in to the middle value.', examples:['bar height = frequency'] },
  ],
  drg: [
    { title:'Level 1 — From a List',        desc:'range = largest − smallest.', examples:['4, 19, 7 → 15'] },
    { title:'Level 2 — From a Dot Plot',    desc:'Use the first and last values that have a dot — not the ends of the number line.', examples:['dots from 1 to 6 → 5'] },
    { title:'Level 3 — From a Stem Plot',   desc:'Smallest is the first leaf on the top stem; largest is the last leaf on the bottom stem.', examples:['12 to 47 → 35'] },
    { title:'Level 4 — From a Frequency Table', desc:'Use only the values whose frequency is not zero.', examples:['a common slip: using the table’s end rows'] },
    { title:'Level 5 — From a Histogram',   desc:'Use only the values that actually have a bar.', examples:['ignore the empty gaps'] },
    { title:'Level 6 — From a Box Plot',    desc:'The whiskers mark the smallest and largest values. The box is the middle half, not the range.', examples:['max − min'] },
  ],
  /* ── v88 — Data Analysis Release 3 ── */
  dsh: [
    { title:'Level 1 — From a Dot Plot',   desc:'Symmetric, positively skewed, negatively skewed — or bimodal (two separate humps).', examples:['one peak in the middle → symmetric', 'tail to the right → positively skewed'] },
    { title:'Level 2 — From a Stem Plot',  desc:'Turn the plot on its side: the leaf rows make the shape.', examples:['longest rows at the top → negatively skewed'] },
    { title:'Level 3 — From a Histogram',  desc:'Symmetric, positively skewed, negatively skewed — or bimodal.', examples:['two humps with a gap → bimodal'] },
    { title:'Level 4 — From a Box Plot',   desc:'Where does the median sit in the box, and which whisker is longer?', examples:['median near Q1 + long right whisker → positively skewed'] },
  ],
  dou: [
    { title:'Level 1 — Spot the Outlier',  desc:'One value sits far away from all the others. Read it off the dot plot.', examples:['cluster at 3–6, one point at 14 → 14'] },
    { title:'Level 2 — Lower Fence',       desc:'Lower fence = Q1 − 1.5 × IQR. Work out the IQR first.', examples:['Q1 = 20, Q3 = 30 → 20 − 15 = 5'] },
    { title:'Level 3 — Upper Fence',       desc:'Upper fence = Q3 + 1.5 × IQR.', examples:['Q1 = 20, Q3 = 30 → 30 + 15 = 45'] },
    { title:'Level 4 — Both Fences',       desc:'Find the lower and the upper fence from Q1 and Q3.', examples:['Q1 = 12, Q3 = 20 → 0 and 32'] },
    { title:'Level 5 — Is It an Outlier?', desc:'Work out both fences, then decide whether the value falls outside them.', examples:['fences 5 and 45; is 48 an outlier? → Yes'] },
    { title:'Level 6 — Find the Outlier',  desc:'Use the fences to decide which value in the list is the outlier.', examples:['fences 5 and 45; the 51 is the outlier'] },
  ],

  /* ══════════ v101 — PROBABILITY ══════════ */
  pbss: [
    { title:'Level 1 — How Many Outcomes?', desc:'Count every result that could happen in one trial.', examples:['a coin → 2', 'a die → 6', 'a day of the week → 7'] },
    { title:'Level 2 — Which Set Is the Sample Space?', desc:'Every outcome, listed once each — none missing, none that cannot happen.', examples:['a die → { 1, 2, 3, 4, 5, 6 }'] },
    { title:'Level 3 — Is It a Possible Outcome?', desc:'Spot the result that is not in the sample space at all.', examples:['spinner A, B, C, D — could it land on Z?'] },
    { title:'Level 4 — Count the Favourable Outcomes', desc:'How many of the outcomes fit the description?', examples:['cards 1–10, even → 5 outcomes'] },
    { title:'Level 5 — List the Sample Space', desc:'Tap every outcome that belongs — and none that does not.', examples:['two coins → HH, HT, TH, TT'] },
    { title:'Level 6 — Two-Step Sample Space Size', desc:'Multiply the outcomes of the two steps.', examples:['coin and die → 2 × 6 = 12'] },
  ],
  pbln: [
    { title:'Level 1 — Describe the Event', desc:'Impossible, unlikely, even chance, likely or certain.', examples:['3 red out of 12 → unlikely'] },
    { title:'Level 2 — Value to Word', desc:'Turn a probability into the word that describes it.', examples:['0.9 → likely', '0 → impossible'] },
    { title:'Level 3 — Word to Value', desc:'Which probability best matches the word?', examples:['"unlikely" → 0.1'] },
    { title:'Level 4 — Equally Likely or Not?', desc:'Do all the outcomes have the same chance?', examples:['a fair die → equally likely'] },
    { title:'Level 5 — Which Is More Likely?', desc:'Compare two events and pick the more likely one.', examples:['7 out of 20 beats 4 out of 20'] },
    { title:'Level 6 — Order the Probabilities', desc:'Tap fractions, decimals and percentages into order.', examples:['10%, 1/4, 0.6, 3/4'] },
    { title:'Level 7 — Mark the Probability Line', desc:'Tap the 0–1 line where the probability sits.', examples:['P = 1/4 → the quarter mark'] },
  ],
  pbth: [
    { title:'Level 1 — One Event, Equally Likely', desc:'One favourable outcome over the total. Any equivalent fraction is accepted here.', examples:['P(3) on a die = 1/6'] },
    { title:'Level 2 — From a Collection', desc:'Favourable colour over the total. Any equivalent fraction is accepted here.', examples:['5 red of 20 → 5/20'] },
    { title:'Level 3 — From a Number Set', desc:'Even, odd, prime or a multiple — count them first. Simplest form from here on.', examples:['P(even) from 1–10 = 1/2'] },
    { title:'Level 4 — Combined Favourables', desc:'"Red or blue" — add both counts, then divide.', examples:['(5 + 7)/24 = 1/2'] },
    { title:'Level 5 — Letters in a Word', desc:'How many of the letters fit? Careful with repeats.', examples:['P(vowel) in CHANCE = 1/3'] },
    { title:'Level 6 — As a Decimal', desc:'Divide instead of leaving it as a fraction.', examples:['3/4 → 0.75'] },
    { title:'Level 7 — As a Percentage', desc:'Divide, then multiply by 100.', examples:['7/20 → 35%'] },
    { title:'Level 8 — Probabilities Add to 1', desc:'Find the missing probability on a spinner.', examples:['1 − (3/10 + 4/10) = 3/10'] },
    { title:'Level 9 — Work Backwards', desc:'From the probability and the total, find the count.', examples:['P = 2/5 of 20 → 8'] },
  ],
  pbcm: [
    { title:'Level 1 — P(not A) from a Fraction', desc:'The two probabilities add to 1.', examples:['1 − 3/8 = 5/8'] },
    { title:'Level 2 — P(not A) from a Decimal', desc:'Subtract from 1.', examples:['1 − 0.35 = 0.65'] },
    { title:'Level 3 — P(not A) from a Percentage', desc:'Subtract from 100%.', examples:['100 − 15 = 85%'] },
    { title:'Level 4 — In Context', desc:'The same idea wrapped in words.', examples:['P(rain) = 0.15 → P(no rain) = 0.85'] },
    { title:'Level 5 — Which Event Is the Complement?', desc:'The complement is EVERYTHING else — not just the opposite-sounding event.', examples:['not "greater than 4" → "4 or less"'] },
  ],
  pbxp: [
    { title:'Level 1 — From a Frequency Table', desc:'How often it happened ÷ how many trials. Any equivalent fraction is accepted here.', examples:['15 twos in 90 rolls → 15/90'] },
    { title:'Level 2 — From Results', desc:'Add the results to get the total first. Any equivalent fraction is accepted here.', examples:['12 beef of 50 orders'] },
    { title:'Level 3 — As a Percentage', desc:'Relative frequency written as a percentage.', examples:['44 of 800 → 5.5%'] },
    { title:'Level 4 — Combined Event', desc:'Add the frequencies that count, then divide. Simplest form.', examples:['P(even) from a results table'] },
    { title:'Level 5 — Experimental vs Theoretical', desc:'Compare what happened with what you would expect.', examples:['expected 10, got 16 → more often'] },
    { title:'Level 6 — The Long Run', desc:'What more and more trials do to the relative frequency.', examples:['500 flips beats 10 flips'] },
  ],
  pbxn: [
    { title:'Level 1 — Probability × Trials', desc:'Expected number = probability × number of trials.', examples:['1/6 × 60 = 10'] },
    { title:'Level 2 — From a Collection', desc:'Work out the probability first, then multiply.', examples:['6/20 × 300 = 90'] },
    { title:'Level 3 — From a Percentage or Decimal', desc:'Same rule, different form of the probability.', examples:['0.2 × 80 = 16'] },
    { title:'Level 4 — In Context', desc:'"1 in every 4" is a probability of 1/4.', examples:['5060 ÷ 4 = 1265'] },
    { title:'Level 5 — Expect the Complement', desc:'Find P(not A) first, then multiply.', examples:['P(late) = 0.15 → 0.85 × 20 = 17'] },
    { title:'Level 6 — Work Backwards', desc:'From the expected number and the trials, find the probability.', examples:['12 of 60 → 1/5'] },
  ],
  pb2s: [
    { title:'Level 1 — How Many Outcomes?', desc:'Multiply the two steps together.', examples:['4 × 6 = 24'] },
    { title:'Level 2 — From a Two-Way Grid', desc:'Count the cells that fit, over the total number of cells.', examples:['P(H and 6) = 1/12'] },
    { title:'Level 3 — Two Coins', desc:'HH, HT, TH, TT — "at least one" and "exactly one" are different.', examples:['P(exactly one head) = 1/2'] },
    { title:'Level 4 — Dice Totals', desc:'Count the cells in the 6 × 6 grid with that total.', examples:['P(total 7) = 6/36 = 1/6'] },
    { title:'Level 5 — Dice Totals, Inequalities', desc:'"Greater than", "at least", "a multiple of" — count carefully.', examples:['P(total > 9) = 6/36 = 1/6'] },
    { title:'Level 6 — With Replacement', desc:'The item goes back, so the second probability is the same. Multiply.', examples:['3/8 × 3/8 = 9/64'] },
    { title:'Level 7 — Without Replacement', desc:'Nothing goes back, so BOTH numbers change on the second draw.', examples:['4/10 × 3/9 = 2/15'] },
  ],
  pbtr: [
    { title:'Level 1 — How Many Branches?', desc:'Outcomes per step, to the power of the number of steps.', examples:['2 steps × 3 outcomes → 9'] },
    { title:'Level 2 — Read the Outcomes', desc:'Follow every path from left to right.', examples:['HH, HT, TH, TT'] },
    { title:'Level 3 — Equal Branches', desc:'Multiply the probabilities along one path.', examples:['1/4 × 1/4 = 1/16'] },
    { title:'Level 4 — Unequal Branches', desc:'A biased coin — each branch has its own probability.', examples:['3/5 × 2/5 = 6/25'] },
    { title:'Level 5 — Add the Paths', desc:'"Exactly one" needs two paths added together.', examples:['HT + TH'] },
    { title:'Level 6 — Without Replacement', desc:'The second-step branches change because nothing goes back.', examples:['5/8 × 4/7'] },
  ],
  pb2w: [
    { title:'Level 1 — Complete the Table', desc:'Every row and column adds to its total. One point per correct box.', examples:['row total − known cell'] },
    { title:'Level 2 — Read a Probability', desc:'The cell you need, over the grand total.', examples:['12/40 = 3/10'] },
    { title:'Level 3 — Both, Either, Neither', desc:'"Both" is one cell; "or" is a whole row plus a column, minus the overlap.', examples:['neither → the bottom-right cell'] },
    { title:'Level 4 — Build It from Words', desc:'Draw the table from the sentence, then read it.', examples:['80 students, 45 girls, 30 study French'] },
    { title:'Level 5 — Given That …', desc:'The total changes — only that row or column counts now.', examples:['30 of the 45 girls → 2/3'] },
  ],
  pbvn: [
    { title:'Level 1 — Read the Regions', desc:'Only A, both, only B, or neither.', examples:['"A in total" = A only + both'] },
    { title:'Level 2 — Complete the Venn', desc:'Fill the overlap FIRST, then take it off each total.', examples:['18 French, 6 both → 12 French only'] },
    { title:'Level 3 — Probability from a Venn', desc:'The region you need, over everyone.', examples:['P(both) = 6/30 = 1/5'] },
    { title:'Level 4 — P(neither)', desc:'Outside both circles, over the total.', examples:['4/30 = 2/15'] },
    { title:'Level 5 — Which Region Is Shaded?', desc:'Match the picture to the set notation.', examples:['the overlap → A ∩ B'] },
    { title:'Level 6 — Three Sets', desc:'Start in the middle and work outwards.', examples:['5 play all three'] },
  ],
  pbnt: [
    { title:'Level 1 — What Does P(A) Mean?', desc:'The language behind the symbols.', examples:['P(A) = 0 → impossible'] },
    { title:'Level 2 — The Complement A′', desc:'A′ is everything that is not A.', examples:["P(A') = 1 − P(A)"] },
    { title:'Level 3 — ∩ and ∪', desc:'∩ means AND, ∪ means OR.', examples:['A ∩ B = A and B'] },
    { title:'Level 4 — Set Language', desc:'ξ, n(A) and the empty set.', examples:['n(A) = 5 → 5 outcomes in A'] },
  ],
  pbme: [
    { title:'Level 1 — Are These Mutually Exclusive?', desc:'Can both happen on the same trial? If not, they are mutually exclusive.', examples:['even and odd → yes'] },
    { title:'Level 2 — Which Pair Cannot Happen Together?', desc:'Find the one pair with no outcome in common.', examples:['"a 6" and "less than 3"'] },
    { title:'Level 3 — P(A or B) When Mutually Exclusive', desc:'No overlap, so you can simply add.', examples:['3/6 + 2/6 = 5/6'] },
    { title:'Level 4 — When You Cannot Just Add', desc:'Spot the overlap that adding would count twice.', examples:['even and greater than 4 share the 6'] },
  ],
  pbar: [
    { title:'Level 1 — The Addition Rule', desc:'P(A ∪ B) = P(A) + P(B) − P(A ∩ B).', examples:['5/12 + 4/12 − 2/12 = 7/12'] },
    { title:'Level 2 — Rearranged', desc:'Find the overlap from the other three.', examples:['P(A ∩ B) = P(A) + P(B) − P(A ∪ B)'] },
    { title:'Level 3 — From a Venn', desc:'Read the four regions, then apply the rule.', examples:['(nA + nB − both)/total'] },
    { title:'Level 4 — Pick the Correct Working Line', desc:'Which line takes the overlap off exactly once?', examples:['add, then subtract the overlap'] },
  ],
  pbcd: [
    { title:'Level 1 — Given That … from a Table', desc:'The row or column becomes the new total.', examples:['30 of 45 girls → 2/3'] },
    { title:'Level 2 — Given That … from a Venn', desc:'Only the chosen circle counts.', examples:['both ÷ n(A)'] },
    { title:'Level 3 — Given That … from a Draw', desc:'The first item has gone, so both numbers drop.', examples:['4/9 after one red is taken'] },
    { title:'Level 4 — Independent or Not?', desc:'Does the first step change the second?', examples:['with replacement → independent'] },
    { title:'Level 5 — P(A ∩ B) = P(A) × P(B | A)', desc:'Multiply, with the second probability conditional on the first.', examples:['5/10 × 4/9 = 2/9'] },
  ],
};

/* ── Per-level "best played in" recommendations (v23) ──
   Keyed by lvKey, then level number → 'challenge' | 'practice'.
   Label-only: this never blocks any mode, it just guides students away from
   sprinting multi-step questions on a 60-second clock. Edit freely. */
const LEVEL_REC = {
  /* v101: reading a Venn, completing a two-way table, ordering four probabilities
     and any without-replacement chain are all a minute of work each. */
  pbss: { 5:'practice' },
  pbln: { 6:'practice', 7:'practice' },
  pb2s: { 6:'practice', 7:'practice' },
  pbtr: { 4:'practice', 5:'practice', 6:'practice' },
  pb2w: { 1:'practice', 4:'practice', 5:'practice' },
  pbvn: { 2:'practice', 6:'practice' },
  pbar: { 1:'practice', 2:'practice', 3:'practice' },
  pbcd: { 5:'practice' },
  /* v99: a long division, a written multiplication and the story-to-equation
     level are all a minute of work each — the clock measures nothing here. */
  wmul:  { 1: 'practice', 2: 'practice', 3: 'practice' },
  div:   { 5: 'practice' },
  awords:{ 5: 'practice' },
  afrac: { 2: 'practice', 4: 'practice', 5: 'practice', 6: 'practice' },
  aper:  { 1: 'practice', 2: 'practice', 3: 'practice' },
  nline: { 3: 'practice', 4: 'practice' },
  oo:    { 3: 'challenge', 5: 'challenge' },   // Order of Operations — Mixed Challenge · word problems
  /* v93 — every word-problem level is multi-step reading, so it is nudged to
     Challenge rather than a 60-second sprint. Label only; Fluency still works. */
  hcflcm:{ 4: 'challenge' }, int: { 4: 'challenge' }, foa: { 4: 'challenge' },
  poa:   { 4: 'challenge' }, pcd: { 4: 'challenge', 5: 'challenge' },
  rsh:   { 5: 'challenge' }, rtcv:{ 3: 'challenge' }, asub:{ 5: 'challenge' },
  eq3:   { 4: 'challenge' },
  npv:   { 3: 'challenge' },   // reading three labelled lengths off a diagram
  /* v96 — multi-step reading or plotting, so nudged to Challenge. Label only. */
  as:    { 4: 'challenge' }, div: { 4: 'challenge' }, fmp: { 4: 'challenge' },
  pfac:  { 4: 'challenge' }, req: { 4: 'challenge' }, sqw: { 6: 'challenge' },
  ase:   { 5: 'challenge' }, ttb: { 5: 'challenge' },
  fid:   { 3: 'challenge' }, ixe: { 3: 'challenge' },
  dqt:   { 3: 'challenge', 4: 'challenge', 5: 'challenge', 6: 'challenge' },
  gre:   { 2: 'challenge', 3: 'practice' },
  egm:   { 2: 'challenge', 3: 'challenge' },
  skl:   { 2: 'practice', 3: 'practice', 4: 'practice' },
  trd:   { 3: 'challenge' },   // recurring decimal to a fraction, then simplify
  ioo:   { 3: 'challenge' },   // Order of Operations (Integers)
  foo:   { 3: 'challenge' },   // Order of Operations (Fractions)
  doo:   { 3: 'challenge' },   // Order of Operations (Decimals)
  das:   { 4: 'challenge' },   // Add & Subtract Decimals — word problems (multi-step)
  dr:    { 3: 'challenge' },   // Rounding Decimals — round then estimate (multi-step)
  fda:   { 3: 'challenge' },   // Add & Subtract Fractions & Decimals — mixed & recurring
  dmu:   { 4: 'challenge' },   // Multiply Decimals — word problems
  dd:    { 4: 'challenge' },   // Divide Decimals — word problems
  dle:   { 3: 'challenge' },   // Leading Digit Estimation — with BODMAS
  fdm:   { 3: 'challenge' },   // Multiply Decimals & Fractions — mixed & recurring
  aexp:  { 3: 'challenge' },   // Expand Single Brackets — variable multiplier (x²)
  aexp2: { 1: 'challenge', 2: 'challenge', 3: 'practice' }, // Expand & Simplify (Two Brackets)
  amul:  { 4: 'practice' },    // Multiply Terms — three-term, negatives
  adiv:  { 4: 'practice' },    // Divide Terms — divide-then-multiply
  // v58 (Laura): Pythagoras & angle skills now playable in Fluency. L1 is quick
  // enough to band from 60s (left off this list, so no hint); L2 onwards nudges
  // toward Challenge for a steadier band — label only, never blocks Fluency.
  pyth:  { 2: 'challenge', 3: 'challenge', 4: 'challenge' },
  iat:   { 2: 'challenge', 3: 'challenge' },
  arl:   { 2: 'challenge', 3: 'challenge', 4: 'challenge' },
  apl:   { 2: 'challenge', 3: 'challenge', 4: 'challenge' },
  aqd:   { 2: 'challenge', 3: 'challenge', 4: 'challenge' },
  // v59 (Laura): Euler's Rule — L1 counts from a diagram (fast enough to band
  // from 60s, no hint); L2 applies V+F=E+2, nudged toward Challenge. Label only.
  eul:   { 2: 'challenge' },
  // v77 (Laura): the multi-step "value after n years" levels are Practice-mode work.
  sint:  { 4: 'practice', 5: 'practice', 6: 'practice' },
  fdep:  { 4: 'practice', 5: 'practice', 6: 'practice' },
  seq:   { 3: 'practice', 4: 'practice' },
  // v78 — the write-out-five-terms and use-the-rule levels are steadier work.
  sqw:   { 5: 'practice' },
  ase:   { 4: 'practice' },
  gse:   { 2: 'practice', 4: 'practice' },
  rec:   { 1: 'practice', 2: 'challenge' },
  qsol:  { 3: 'challenge', 4: 'practice' },
  xyint: { 5: 'challenge' },
  // v78.2
  cart:  { 4: 'practice' },
  tov:   { 1: 'practice', 2: 'practice', 3: 'practice', 4: 'practice' },
  // v78.3
  lap:   { 2: 'practice', 3: 'practice', 4: 'challenge' },
  ttb:   { 3: 'challenge' },
  dtg:   { 3: 'practice', 4: 'challenge' },
  /* v79 — the backwards levels and the shape-tapping levels are deliberate work,
     not sprints, so they point at Practice; the chain levels at Challenge. */
  trn:   { 6: 'practice' },
  rfl:   { 6: 'practice' },
  dil:   { 5: 'practice' },
  rot:   { 5: 'practice', 6: 'practice' },
  cmb:   { 1: 'practice', 2: 'practice', 5: 'challenge' },
  stf:   { 1: 'practice', 2: 'practice', 4: 'practice', 5: 'practice', 6: 'practice' },
  gst:   { 3: 'challenge' },
};
function getLevelRec(key, lv) {
  return (LEVEL_REC[key] && LEVEL_REC[key][lv]) || null;
}

/* ── Skill kinds (v25): 'recall' = fast fact recall, speed is the point;
   'method' = multi-step procedure, accuracy & understanding come first. ── */
const RECALL_SKILLS = [
  'timesTables','division','addition','subtraction',
  'squares','roots','cubes','cubeRoots',
  'intAddSub','intMultDiv','intSquareCube',
  'decAddSub','decAdd','decSub','decMultiply','decDivide','decPow10','decSquareCube',
  'trigExactDeg','trigExactRad',
  // v56: promoted to recall (Fluent-eligible) with Laura's signed-off targets
  'nameShapes','nameAnglesLines','angleRel','angleParallel','pythagoras',
  'congruSimilar',
  // v68 (Laura): the four Decimals understanding skills as recall / Fluent-eligible
  'decPlaceValue','decExpand','decIdentify','decToFrac','fracToDec',
  // v74 (Laura): two Percentages skills as recall / Fluent-eligible (the rest are method)
  'pctIdentify','pctOfAmount',
  // v75 (Laura): the single-question conversion skills as recall / Fluent-eligible
  'pctDecConv','fracPctConv',
  // v74.2 (Laura): base-fact skills as recall / Fluent-eligible
  'factorsMultiples','hcfLcm','roundEst','fracOfAmount','numberBonds',
  // v74.7 (Laura): signed decimal arithmetic + roots of decimals as recall / Fluent-eligible
  'decAddSubNeg','decMulDivNeg','decSqCubeRoot',
  // v77 — quick classification / plane-reading skills are Fluent-eligible
  'numClass','cartesian','linearNonlinear',
  // v78.3 — unit-of-time conversion is a quick recall job
  'timeConvert',
  // v77.1 (Laura) — Verify Solutions is Fluent-eligible on L1/L2 (L3 stays method)
  'quadVerify',
  /* v90 (Laura, from the v88 band review): Multiply Terms and Divide Terms are
     Fluent-eligible on L1 ONLY — a single-variable product like 2x × 3x is
     recall. L2-L4 stay accuracy-first via METHOD_LEVEL_OVERRIDE below. */
  'algMultiply', 'algDivide',
  /* v101 (probability): the single-step levels — naming the chance word, counting
     the outcomes, taking a complement, reading the notation — are genuine recall.
     Everything else in the strand is accuracy-first METHOD (see the override). */
  'probSample', 'probLang', 'probTheory', 'probComp', 'probExpect', 'probTwoStep',
  'probTree', 'probNotate'
];
function getSkillKind(id) { return RECALL_SKILLS.includes(id) ? 'recall' : 'method'; }
/* v74 (Laura): a few recall skills are Fluent-eligible on the lower levels but METHOD
   (accuracy-first, no Fluent) on the top level. List those method levels here — the
   skill stays in RECALL_SKILLS (so it still counts as a Fluent skill overall), but the
   listed levels behave as method (no fluency target, 🐆 Cheetah goal, "accuracy first"). */
const METHOD_LEVEL_OVERRIDE = {
  /* v93: a word problem is never fact recall, however quick the arithmetic in
     it is. These levels band accuracy-first like every other method level. */
  intAddSub:[4], hcfLcm:[4], fracOfAmount:[4], pctIdentify:[3], pctOfAmount:[3, 4],
  /* v96: four-digit column work, "how many are needed" and the describe-the-number
     tap are all reasoning, not fact recall, on skills that are otherwise recall. */
  addition:[4], subtraction:[4], division:[4], factorsMultiples:[4, 5], decAddSub:[4], decMultiply:[4, 5], decDivide:[4],
  // v77 — ticking six boxes is slower than a single tap, so L2 is accuracy-first
  numClass:[2],
  // v77.1 (Laura) — Verify Solutions L3 (substitute into a trinomial) stays accuracy-first
  quadVerify:[3],
  // v78.2 — The Cartesian Plane L4 (find the missing corner) is reasoning, not recall
  cartesian:[4],
  // v78.3 — compound times (3 h 25 min) are a two-step method, not a single recall
  timeConvert:[4],
  /* v90 — only L1 of Multiply/Divide Terms is recall; two-variable and
     power-of-a-power questions are multi-step. */
  algMultiply:[2, 3, 4, 5], algDivide:[2, 3, 4, 5],
  /* v98: the ALT-audit levels. Every one of these is recognition, a converse or a
     backwards step on a skill that is otherwise fact recall — none of them is
     something a student should be racing a 60-second clock to do. */
  roots:[4], squares:[4], intMultDiv:[4], pythagoras:[5], angleParallel:[5], fracToDec:[4],
  /* v101: the method levels of the eight recall probability skills. Anything that
     needs a picture read, a table built or two probabilities combined is method. */
  probSample:[5, 6],
  probLang:[5, 6, 7],
  probTheory:[3, 4, 5, 6, 7, 8, 9],
  probComp:[4, 5],
  probExpect:[2, 3, 4, 5, 6],
  probTwoStep:[2, 3, 4, 5, 6, 7],
  probTree:[2, 3, 4, 5, 6],
  probNotate:[4] };
function getLevelKind(id, lv) {
  if (RECALL_SKILLS.includes(id) && !((METHOD_LEVEL_OVERRIDE[id] || []).includes(lv))) return 'recall';
  return 'method';
}

/* Fluency targets (correct answers per minute) for recall skills. A session is
   "Fluent" when CPM ≥ target AND accuracy ≥ 90%.
   - An ARRAY gives an explicit target per level: [L1, L2, L3]. Use this when the
     levels aren't a simple difficulty ramp (e.g. add/sub L1 is fact recall but
     L2/L3 are multi-digit mental computation).
   - A NUMBER is treated as the Level-1 target and scaled down for higher levels.
   Anchored on Brian Poncy's ~30/min basic-fact fluency benchmark:
     • times tables / division → 30/min on Level 2 (the standard 2–12 set)
     • addition / subtraction  → 30/min on Level 1 (single-digit recall)
   Edit freely. */
const FLUENCY_TARGET = {
  /* v101 — probability recall levels. THE ZEROS ARE LOAD-BEARING: bandCeil() reads
     this table first and only falls through to METHOD_BAND_CEIL on a zero, so a
     single number here would silently re-band every method level of the skill. */
  probSample:[15, 14, 13, 12, 0, 0],
  probLang:[14, 15, 13, 13, 0, 0, 0],
  probTheory:[12, 11, 0, 0, 0, 0, 0, 0, 0],
  probComp:[16, 16, 16, 0, 0],
  probExpect:[12, 0, 0, 0, 0, 0],
  probTwoStep:[14, 0, 0, 0, 0, 0, 0],
  probTree:[13, 0, 0, 0, 0, 0],
  probNotate:[13, 14, 14, 0],
  /* v90 (Laura): Multiply/Divide Terms L1 = 20/min, which is the Lion max in the
     reviewed sheet (7 / 13 / 20 / 29), so "Fluent" starts at 21 — the top of
     Lion — exactly as it does for every other recall skill. The ZEROS matter:
     bandCeil() reads this table first, so a non-zero value here would override
     METHOD_BAND_CEIL for L2-L4 and silently re-band them. Zero falls through. */
  algMultiply:[20, 0, 0, 0], algDivide:[20, 0, 0, 0],
  timesTables:[30, 30, 25],   // v45: L1 now matches L2 (full-set band, 30)
  division:   [30, 30, 25],   // v45: L1 = L2 = 30
  addition:   [30, 18, 10],   // L1 single-digit recall (30) → L2 two-digit → L3 three-digit mental
  subtraction:[30, 18, 10],   // (L3 bands are custom-overridden — see BAND_OVERRIDE)
  numberBonds:[30, 25, 30],   // v74.2 (Laura): standalone base-fact skill — make 10 / make 20 / doubles
  // v45: squares/roots/cubes/cubeRoots L1 & L2 now match L2 times-tables (30); L3 unchanged.
  squares:[30, 30, 18], roots:[30, 30, 15], cubes:[30, 30, 14], cubeRoots:[30, 30, 13],
  intAddSub:25, intMultDiv:22, intSquareCube:18,
  // v74.8 (Laura): band targets lowered so quick, accurate students reach higher animals.
  // Add/Subtract Decimals −3; all ×/÷ decimal operations −4. L4 (word problems) stays METHOD.
  decAddSub:[15, 12, 10, 0], decAdd:[15, 12, 10], decSub:[15, 12, 10],
  decMultiply:[11, 9, 7, 0], decDivide:[10, 8, 6, 0], decSquareCube:[10, 8, 6],
  // v74.7 signed decimal arithmetic + roots of decimals; ×/÷ family lowered −4 in v74.8.
  decAddSubNeg:[16, 14, 12], decMulDivNeg:[10, 8, 6], decSqCubeRoot:[10, 8, 6],
  // Multiply & Divide by 10/100/1000 — lowered −4 in v74.8 (was [18,16,14,10]).
  decPow10:[14, 12, 10, 6],
  // Exact trig values — tap-to-answer, so recall speed is the bottleneck.
  // Per level: first quadrant (core drill) → +quadrant 2 → full circle w/ signs & undefined.
  trigExactDeg:[22, 18, 14],
  trigExactRad:[20, 16, 12],
  // v56 (Laura sign-off; students on ≤v49 so no score disruption):
  //   nameShapes all levels = Trig Exact Values L2 (18)
  //   angle skills L1 = Trig Exact L2 (18); L2/L3 = Multiply Integers L3 (15);
  //   L4 (algebra) left at 5 = its old method band (unspecified — confirm).
  //   pythagoras L1 = Multiply Integers L3 (15); L2–L4 kept at 5 (old bands).
  nameShapes:[18, 18, 18, 18, 18],   // v74.4: +L4 regular/irregular, +L5 convex/concave
  nameAnglesLines:[18, 18, 18, 18],
  angleRel:[18, 15, 15, 5],
  angleParallel:[18, 15, 15, 5],
  pythagoras:[15, 5, 5, 5],
  // v64 (Laura sign-off): L1-L3 = Naming Angles/Lines (18); L4 = Angle Relationships L2 (15, the method level).
  congruSimilar:[18, 18, 18, 15],
  // v68 (Laura) — Decimals as recall. PROPOSED targets (correct-per-minute), tweak freely:
  //   Place Value: L1 tap-fast (18), L2 type a fraction (12), L3 type a number (15)
  //   Expanded: L1/L2 tap-read (16), L3 type (14) · Identify: read+type (15/15/12)
  //   Convert: slower two-step conversion (12/10/8)
  decPlaceValue:[18, 12, 15],
  // v74.8 (Laura): Identify / Expanded Form / Convert D→F lowered −2 (students were landing
  // on Greyhound/Kangaroo while quick and accurate). Convert F→D (fracToDec) left as-is.
  decExpand:[14, 14, 12],
  decIdentify:[13, 13, 10],
  decToFrac:[10, 8, 6],    // decimal → fraction (num/den boxes)
  fracToDec:[14, 12, 10],   // fraction → decimal (typing a decimal is a touch quicker)
  // v74 (Laura) — Percentages recall skills. L1/L2 are Fluent-eligible; L3 is METHOD
  // (target 0 → no fluency badge; banded via BAND_OVERRIDE + METHOD_LEVEL_OVERRIDE).
  //   Identify %:          L1 12/min · L2 7/min · L3 method  (v74.1: dropped from 15/10 per Laura)
  //   Finding % of amount: L1 15/min · L2 10/min · L3 method
  pctIdentify:[12, 7, 0],
  pctOfAmount:[15, 10, 0],
  // v75 (Laura): single-question conversion skills. PLACEHOLDER per-level targets
  // (correct-per-minute) — recalibrate with class data via the CPM method.
  //   %⇄decimal: quick two-step. Fractions & Percentages: L1 frac→% (fast), L2 frac→% thirds
  //   (slower), L3 %→fraction num/den boxes, L4 %→fraction thirds (slowest).
  pctDecConv:[16, 13, 9],
  fracPctConv:[14, 9, 11, 6],
  // v74.2 (Laura): base-fact recall skills. PROPOSED per-level targets — recalibrate with class data.
  factorsMultiples:[20, 15, 12],   // L1 prime? (fast tap) · L2 factor? · L3 multiples (typed)
  hcfLcm:[12, 10, 8],              // L1 HCF · L2 LCM · L3 harder
  roundEst:[18, 15, 12, 10],      // L1 round 10/100 · L2 round 100/1000 · L3 leading digit · L4 estimate
  fracOfAmount:[15, 12, 8],       // L1 friendly · L2 non-unit · L3 harder
  // v77 (Laura) — PLACEHOLDER fluency targets, recalibrate with class data.
  // v77.1 (Laura): numClass L1, quadVerify L1-L2 and linearNonlinear all mirror the
  // Naming Shapes bands exactly — target 18 here plus BAND_OVERRIDE [8,17,25,37] below.
  numClass:[18, 7],          // L1 rational/irrational tap · L2 is a METHOD level (see METHOD_LEVEL_OVERRIDE)
  quadVerify:[18, 18, 9],    // L1 x²=k · L2 factorised · L3 is a METHOD level
  cartesian:[20, 20, 12],    // L1 quadrant from a picture · L2 read a coordinate · L3 quadrant from a coordinate
  // v78.3 — Converting Units of Time is a recall skill; L4 (compound times) is its
  // method level. PLACEHOLDERS.
  timeConvert:[16, 14, 12, 6],
  linearNonlinear:[18, 18]   // L1 from a graph · L2 from an equation
};
const FLUENT_ACC = 0.90;   // accuracy floor to count as fluent
function getFluencyTarget(s, lv) {
  const t = FLUENCY_TARGET[s];
  if (t == null) return 0;
  if (Array.isArray(t)) return t[(lv || 1) - 1] || t[t.length - 1];
  const scale = [1, 0.85, 0.7][(lv || 1) - 1] || 0.7;
  return Math.max(5, Math.round(t * scale));
}

/* Method tips — the "show me how" fallback for method skills that don't build a
   numeric worked example. Algebra skills build precise steps in their generators. */
const METHOD_TIP = {
  // v79 — transformations
  translate:'A translation adds to the coordinates: right/left changes x, up/down changes y. Do the two moves separately.',
  reflect:'Reflecting in the x-axis changes the sign of y; in the y-axis it changes the sign of x; in the line y = x it swaps the two coordinates over.',
  dilate:'A dilation from the origin multiplies BOTH coordinates by the same factor. Bigger than 1 enlarges, a fraction reduces.',
  rotate:'About the origin: 180° flips both signs, 90° anticlockwise sends (x, y) to (−y, x), and 90° clockwise sends it to (y, −x). Swap, then fix one sign.',
  combine:'Do the transformations strictly in the order written, finishing one before starting the next. To go backwards, undo them in reverse order.',
  shapeTrans:'Transform a shape one corner at a time — every corner moves by the same rule — then join them back up.',
  orderOps:'Work left to right, but do brackets first, then × and ÷, then + and −.',
  intOrderOps:'Brackets first, then × and ÷, then + and −. Watch the signs: − × − = +.',
  fracOrderOps:'Brackets first, then × and ÷, then + and −. Keep fractions over a common denominator to add or subtract.',
  decOrderOps:'Brackets first, then × and ÷, then + and −. Line up decimal points when adding.',
  sigFigs:'Count from the first non-zero digit. Leading zeros don\'t count; zeros between/after significant digits usually do.',
  decRound:'Look at the digit just past where you\'re rounding: 5 or more rounds up, less than 5 rounds down.',
  compareDec:'Compare place value from the left: line the numbers up on the decimal point and check tenths first, then hundredths — more digits does NOT mean bigger (0.45 is smaller than 0.5). With fractions or whole numbers, turn everything into decimals first, then order them. With negatives, the further a number is below zero the SMALLER it is (−2 is less than −0.5), so on a number line the most negative value comes first when going smallest-to-largest.',
  decPlaceValue:'After the decimal point each place is ten times smaller: tenths, hundredths, thousandths, ten-thousandths. A digit\'s value is that digit over its place — write it over the place value, unsimplified, e.g. the 8 in 0.28 is 8 hundredths = 8/100. To rename, 0.62 = 62 hundredths = 620 thousandths.',
  decExpand:'Expanded form splits a number into the value of each digit: 3.46 = 3 + 0.4 + 0.06. Using powers of ten, 0.4 = 4 × 1/10 and 0.06 = 6 × 1/10². To go back, just add the parts.',
  decIdentify:'Count the equal parts the whole is split into (that is the denominator) and how many are shaded, or where the point sits, then write it as a decimal — e.g. 3 out of 5 parts = 6/10 = 0.6.',
  decToFrac:'Decimal → fraction: write it over its place value (0.35 = 35/100) then simplify (= 7/20).',
  fracToDec:'Fraction → decimal: make the bottom 10, 100 or 1000, or divide the top by the bottom (3/4 = 0.75).',
  indexMult:'Same base: add the powers. Multiply the numbers in front separately.',
  indexDiv:'Same base: subtract the powers. Divide the numbers in front separately.',
  indexPow:'Power of a power: multiply the powers. Raise the number in front to the outer power.',
  sciTo:'Move the decimal so there is one non-zero digit in front. The number of places moved is the power of 10.',
  sciFrom:'A positive power moves the decimal right (bigger); a negative power moves it left (smaller).',
  fracSimplify:'Divide the top and bottom by the highest number that goes into both (the HCF).',
  fracAddSub:'Make the denominators the same first, then add or subtract only the numerators.',
  fracMultiply:'Multiply the tops together and the bottoms together, then simplify.',
  fracDivide:'Keep the first fraction, change ÷ to ×, and flip the second fraction (reciprocal).',
  mixedToImp:'Multiply the whole number by the denominator, add the numerator — that\'s the new top.',
  impToMixed:'Divide the top by the bottom: the whole-number answer is the whole part, the remainder is the new top.',
  ratioSimplify:'Divide every part of the ratio by the highest common factor.',
  ratioEquiv:'Find what one side was multiplied (or divided) by, then do the same to the other side.',
  ratioShare:'Add the parts to get the total number of shares, find the value of one share, then multiply.',
  rateSimplify:'Divide to find the amount for ONE unit (per kg, per hour, per litre).',
  rateConvert:'km/h → m/s: divide by 3.6. m/s → km/h: multiply by 3.6.',
  algParts:'The coefficient is the number multiplying the letter. The constant is the term with no letter at all.',
  algSub:'Replace each letter with its value, then work it out — do any powers and × before + and −.',
  algMultiply:'Multiply the numbers in front, then the letters: a × a = a² (add the powers of the same letter).',
  algDivide:'Divide the numbers in front, then subtract the powers of the matching letter: a² ÷ a = a.',
  eqOneStepAddSub:'Do the opposite operation to both sides: if the equation adds, subtract; if it subtracts, add.',
  eqOneStepMulDiv:'Do the opposite to both sides: if it multiplies, divide both sides; if it divides, multiply both sides.',
  eqTwoStep:'Undo the + or − first, then undo the × or ÷. Always do the same thing to both sides.',
  eqTwoStepFrac:'Undo the + or − outside the fraction first, then multiply both sides by the denominator to free x.',
  eqVarDenom:'Multiply both sides by the bottom (the denominator) to bring x up, then solve the simple equation that\'s left.',
  eqBothSides:'Collect the x terms on one side and the numbers on the other, then divide. Always do the same thing to both sides.',
  ineqLinear:'Solve it just like an equation — but if you multiply or divide BOTH sides by a negative number, reverse the inequality sign (< becomes >, ≤ becomes ≥).',
  nameShapes:'Count the sides and check the angles. Parallelogram: two pairs of parallel sides. Trapezium: just one pair. Rhombus: four equal sides. Kite: two pairs of adjacent equal sides. For solids: a prism has two identical ends joined by rectangles; a pyramid rises to a single apex.',
  nameAnglesLines:'A ray has one arrow, a line segment has two endpoints, and a line has an arrow at each end. In symbols: a single letter is a point, a bar over two letters is a segment, one arrow over them is a ray, and a double arrow is a line. Parallel lines never meet (symbol ∥); perpendicular lines cross at a right angle, 90° (symbol ⊥). Angles: acute is under 90°, right is exactly 90°, obtuse is between 90° and 180°, straight is 180°, reflex is between 180° and 360°, and a revolution is a full turn (360°) — so classify a given size by which band it falls in. Triangles by angles: acute (all under 90°), right (one 90°), obtuse (one over 90°). By sides: equilateral (3 equal), isosceles (exactly 2 equal), scalene (all different).',
  eulerRule:'Faces (F) are the flat surfaces, vertices (V) are the corners, edges (E) are where two faces meet. Euler\'s rule links them: V + F = E + 2. Rearrange to find a missing one — V = E + 2 − F, F = E + 2 − V, E = V + F − 2.',
  angleRel:'Complementary angles add to 90°, supplementary angles add to 180°, vertically opposite angles are equal, and angles at a point add to 360°.',
  angleParallel:'On parallel lines cut by a transversal: corresponding angles are equal (F-shape), alternate angles are equal (Z-shape), and co-interior angles add to 180° (C-shape). Vertically opposite angles are always equal.',
  angleQuad:'The four interior angles of any quadrilateral add to 360°. In a parallelogram opposite angles are equal and adjacent angles add to 180°; an isosceles trapezium has equal base angles; a kite has one pair of equal opposite angles.',
  algFactorMonic:'Find two numbers that MULTIPLY to the last number and ADD to the middle number. Those two numbers go in the brackets with x.',
  algExpandBinom:'FOIL: multiply First, Outer, Inner, Last terms, then collect like terms. (A + B)² = A² + 2AB + B².',
  algFactorHCF:'Find the HIGHEST common factor of every term (number and any common letter), take it out the front, and write what is left inside the bracket.',
  algFactorGroup:'Group the terms in pairs, factor each pair, then take out the common bracket that appears in both.',
  pythagoras:'a² + b² = c², where c is the hypotenuse (the longest side, opposite the right angle). To find a shorter side, rearrange: a² = c² − b².',
  trigExactDeg:'Use the special triangles (30-60-90 and 45-45-90) or the unit circle. Watch the sign: sin is positive above the x-axis, cos is positive to the right.',
  trigExactRad:'Same special angles in radians: π/6 = 30°, π/4 = 45°, π/3 = 60°, π/2 = 90°. Use the unit circle and watch the quadrant for the sign.',
  congruSimilar:'Congruent shapes are identical in size and shape (matching sides and angles equal); similar shapes are the same shape but scaled (angles equal, sides in a constant ratio). Congruence tests: SSS, SAS, AAS (incl. ASA), RHS. Similarity tests: SSS (sides in equal ratio), AAA (equal angles), SAS, RHS. To find a missing length in similar triangles, multiply by the scale factor; matching angles are always equal.',
  // v47: recall facts that DO have a teachable rule get a short "Show me how" tip.
  // (The genuinely step-free facts — times tables, division, plain add/subtract,
  // squares, roots, cubes, cube roots — are intentionally left with no tip.)
  intAddSub:'Subtracting a negative is the same as adding: − (−2) becomes + 2. Adding a negative is the same as subtracting.',
  intMultDiv:'Work out the numbers as normal, then fix the sign: same signs make a positive, different signs make a negative (− × − = +, − × + = −).',
  intSquareCube:'Squaring always gives a positive: (−3)² = 9. But −(3)² means square first, then make it negative: −9. Cubing keeps the sign: (−2)³ = −8.',
  decAddSub:'Line up the decimal points (and the place columns) before adding or subtracting — fill any gaps with zeros.',
  decAdd:'Line up the decimal points (and the place columns) before adding — fill any gaps with zeros.',
  decSub:'Line up the decimal points (and the place columns) before subtracting — fill any gaps with zeros, and regroup (borrow) where you need to.',
  decMultiply:'Ignore the points and multiply as whole numbers, then count the total decimal places in the question and put that many in the answer.',
  decDivide:'Shift the decimal point in BOTH numbers until you are dividing by a whole number, then divide as normal.',
  decPow10:'Multiplying by 10, 100 or 1000 shifts every digit LEFT (1, 2 or 3 places); dividing shifts them RIGHT the same number of places — fill any gaps with zeros. For a multiple like 20 or 400, split it: ×40 is ×4 then ×10; ÷20 is ÷2 then ÷10.',
  decSquareCube:'Work it out ignoring the point, then place the decimal: squaring doubles the decimal places, cubing triples them. e.g. 0.2² = 0.04.'
};

/* Per-(profile,skill,level) "fluent achieved" flag — additive storage, never
   touches existing PB/trend keys. */
function fluentKey(s, lv) { return `ff_fl_${pidx}_${s}_L${lv}`; }
function getFluent(s, lv)  { return localStorage.getItem(fluentKey(s, lv)) === '1'; }
function setFluent(s, lv)  { localStorage.setItem(fluentKey(s, lv), '1'); }
function skillIsFluent(sid) { return [1,2,3].some(lv => getFluent(sid, lv)); }

/* ═══════════════════════════════════════════════
   SANDY FAST FACTS ANIMAL BANDS (v43) — display layer
   ------------------------------------------------------------------
   The band is derived from the Fluency Score (CPM × accuracy², the SAME
   number the app already computes in endSession and stores as the PB), so
   "best animal" is just the band of the stored PB — NO new storage key.
   It is PURELY a display layer: changes no stored score, no share line.

   Calibration follows the classroom CPM method: the per-skill-per-level
   "Lion ceiling" T is the automaticity target; the lower three bands are
   even thirds of T and Cheetah stretches to 1.5·T. For RECALL skills T is
   the existing FLUENCY_TARGET (so the shared skills reproduce the classroom
   pyramid exactly, e.g. times tables T=30 → 0–10/11–20/21–30/31–44/45+).
   METHOD skills have no speed target, so they take a low ceiling from
   METHOD_BAND_CEIL below (grouped by complexity; edit freely — one-line
   tweaks, display-only, storage-safe). No animal is shown in Practice mode.
═══════════════════════════════════════════════ */
const ANIMALS = [
  { key:'kangaroo',  emoji:'🦘', name:'Kangaroo',  bg:'#A8C8E8', fg:'#0B2A45' },
  { key:'greyhound', emoji:'🐕', name:'Greyhound', bg:'#50BFD8', fg:'#06303A' },
  { key:'lion',      emoji:'🦁', name:'Lion',      bg:'#F5A623', fg:'#3D2600' },
  { key:'antelope',  emoji:'🦌', name:'Antelope',  bg:'#F06040', fg:'#FFFFFF' },
  { key:'cheetah',   emoji:'🐆', name:'Cheetah',   bg:'#E03020', fg:'#FFFFFF' },
];

/* Method-skill Lion-ceiling targets. Recall skills are NOT listed here — they
   use FLUENCY_TARGET. A value may be a NUMBER (same for all levels) or an ARRAY
   [L1, L2, L3, …] for per-level ceilings. Lower bands are thirds of the Lion
   ceiling; Cheetah is round(1.5·ceiling) unless overridden in METHOD_BAND_CHEETAH.
   Display-only, storage-safe — edit freely. */
const METHOD_BAND_CEIL = {
  /* v101 — probability. Placeholders; every value is pinned again in BAND_OVERRIDE. */
  probSample:[0, 0, 0, 0, 6, 10],
  probLang:[0, 0, 0, 0, 10, 6, 7],
  probTheory:[0, 0, 9, 8, 8, 10, 9, 8, 8],
  probComp:[0, 0, 0, 12, 10],
  probExp:[8, 8, 8, 7, 9, 9],
  probExpect:[0, 9, 10, 9, 8, 9],
  probTwoStep:[0, 8, 9, 7, 7, 6, 5],
  probTree:[0, 10, 8, 7, 6, 5],
  probTwoWay:[4, 8, 7, 6, 6],
  probVenn:[9, 5, 7, 7, 9, 4],
  probNotate:[0, 0, 0, 11],
  probMutEx:[11, 9, 8, 8],
  probAddRule:[6, 6, 5, 8],
  probCond:[6, 6, 7, 10, 5],
  /* ── v77 — ALL PLACEHOLDERS. Recalibrate with class data (CPM method). ──
     Number Classification L2 is the method level of a recall skill (see
     METHOD_LEVEL_OVERRIDE); only its L2 slot is read.                        */
  numClass:[15, 7],                  // only L2 is read (L1 is recall — see FLUENCY_TARGET)
  quadVerify:[14, 11, 9],            // only L3 is read (L1-L2 are recall)
  quadSolve:[8, 7, 6, 5],
  // v77.1 — level counts grew; L1 of each is the new easier level
  // v78.2 — L2 (read the intercepts off a table) inserted; the rest shift down one.
  intercepts:[12, 12, 10, 8, 5],     // L1 off a graph · L2 off a table · L3 y-int · L4 x-int · L5 both
  // v78.2 — The Cartesian Plane gained L4 (the missing corner). Only its L4 slot is
  // read: L1-L3 are recall and take their bands from FLUENCY_TARGET.
  cartesian:[20, 20, 12, 6],
  // v78.2 — Table of Values. Building a five-value table and tapping five points on a
  // grid are both slow, deliberate jobs. PLACEHOLDERS.
  tableValues:[6, 5, 5, 4],
  // v78.3 — PLACEHOLDERS. Reading a timetable and reading a graph are quick;
  // building a graph or an equation is not.
  linearApps:[10, 7, 5, 5],
  timeConvert:[16, 14, 12, 6],   // only L4 is read (L1-L3 are recall — see FLUENCY_TARGET)
  timetables:[10, 8, 6, 8],
  distTime:[12, 12, 4, 8],
  /* v79 — transformations. ALL PLACEHOLDERS: recalibrate with class data.
     The point skills are quick two-number jobs; the shape skill involves three or
     four taps a question, so it is banded much lower — closer to Table of Values
     L2/L4 than to anything typed. */
  /* v84 — Data Analysis, Release 1. ALL PLACEHOLDERS: recalibrate with class
     data (CPM method). Every level here is METHOD (accuracy-first, no Fluent
     badge) on purpose — inventing a fluency target would tell a student they
     are "fluent" against a number nobody has measured. Promote the quick
     levels to RECALL_SKILLS once a class has run them. */
  dataClassify:[16, 14, 14, 10],
  freqTables:[12, 10, 10, 8],
  dataRead:[14, 12, 12, 10],
  /* v87 — Release 2. ALL PLACEHOLDERS, all METHOD (accuracy-first): finding a
     mean off a stem plot is a multi-step job, not recall. The ramp reflects how
     much reading each display needs before the arithmetic starts — a list is
     quick, a stem plot or a grouped estimate is not. */
  dataMean:[10, 7, 5, 6, 6, 4],
  dataMode:[16, 14, 10, 14, 14, 10],
  dataMedian:[12, 10, 9, 8, 7, 7],
  dataRange:[16, 12, 10, 12, 12, 12],
  /* v88 — Release 3. PLACEHOLDERS, METHOD. Shape is a one-tap judgement so it
     bands higher than the calculating skills; the fence levels are two-step
     arithmetic and band lower. */
  dataShape:[14, 12, 14, 12],
  dataOutliers:[14, 9, 9, 6, 8, 7],
  translate:[14, 11, 12, 12, 12, 8],
  reflect:[14, 11, 12, 12, 12, 8],
  dilate:[12, 12, 12, 11, 8],
  rotate:[12, 8, 10, 10, 9, 6],
  combine:[7, 5, 8, 8, 5],
  shapeTrans:[5, 5, 8, 4, 4, 3],
  gradientSeg:[15, 7, 8, 5],         // L1 sign only · L2 diagram · L3 two points · L4 fractions
  gst:[10, 10, 6],
  simpleInterest:[10, 9, 8, 6, 5, 6],  // L3 = new "read it off the rule" level
  sequences:[12, 10, 6, 6],
  // v78 — PLACEHOLDERS. seqWords L1/L5 are quick reads, L4 writes five terms.
  seqWords:[20, 16, 16, 10, 6],   // v78.1: L3 and L5 swapped, so the ceilings swap with them
  arithSeq:[14, 8, 8, 6],
  geoSeq:[12, 7, 7, 5],
  recurrence:[7, 6],
  flatDep:[10, 9, 8, 6, 5, 6],
  // very quick single-step method — Lion 20, Cheetah 30
  algLikeTerms:20, algParts:20, sigFigs:20,
  // Rounding Decimals — lowered −3 in v74.8 (Laura); was [20,20,12].
  decRound:[17, 17, 9],
  // Add & Subtract / Multiply / Divide Decimals — only L4 (word problems) is a METHOD level
  // (see METHOD_LEVEL_OVERRIDE); L1–L3 are recall and read FLUENCY_TARGET, so those slots are
  // ignored. PLACEHOLDER — recalibrate with class data.
  decAddSub:[18, 18, 18, 6], decMultiply:[15, 15, 15, 5], decDivide:[14, 14, 14, 5],
  // Add & Subtract Fractions & Decimals; Multiply Decimals & Fractions lowered −4 in v74.8.
  fdAddSub:[12, 10, 8], fdMultiply:[8, 6, 4],
  // Leading Digit Estimation — round to 1 s.f. then estimate. PLACEHOLDER — recalibrate.
  decLeadEst:[16, 12, 8],
  // quick single-step — Lion 15, Cheetah 23
  eqOneStepAddSub:15, eqOneStepMulDiv:15, fracSimplify:15,
  // remaining single-step method — Lion 8, Cheetah 12  (PENDING Laura's "rest of row 1")
  algSub:8, mixedToImp:8, impToMixed:8, rateConvert:8,
  // index laws — v45: L1 matches L2 times-tables (30); L2/L3 stay at 8
  indexMult:[30, 8, 8], indexDiv:[30, 8, 8], indexPow:[30, 8, 8],
  // scientific notation — v45: all levels match L2 Add/Subtract Integers (21)
  sciTo:21, sciFrom:21,
  // ratios/rates — v45: simplify & equivalent ratios + simplify-rates L1 match
  // Simplify Fractions (15); simplify-rates L2 stays at 8
  ratioSimplify:15, ratioEquiv:15, rateSimplify:[15, 8],
  // fraction arithmetic — Lion 9, Cheetah 13 (overridden below)
  fracAddSub:9, fracMultiply:9, fracDivide:9,
  // multiply / divide terms — Lion 10, Cheetah 15
  algMultiply:10, algDivide:10,
  // two-step / multi-step computation, BODMAS & Pythagoras — Lion 5, Cheetah 8
  eqTwoStep:5, eqTwoStepFrac:5, eqVarDenom:5, eqBothSides:5, ineqLinear:5,
  fracOrderOps:5, orderOps:5, intOrderOps:5, decOrderOps:5, ratioShare:5,
  interiorAngles:5, angleQuad:5,   // (nameShapes/angleRel/angleParallel/pythagoras are now recall — see FLUENCY_TARGET)
  /* v93 PLACEHOLDERS — recalibrate with class data (see the v74.9 spreadsheet
     process). Nets/views are a read-the-diagram tap; recurring decimals L3 is a
     convert-then-simplify job, so it is the slowest of the three. */
  netsViews:[10, 10, 7, 10], decRecurring:[10, 9, 6],
  /* v96 PLACEHOLDERS — recalibrate with class data. The plotting levels
     (gre L3, skl) are deliberately the lowest: two taps and a check is slower
     than a tap on a four-option grid. */
  fracIdentify:[12, 12, 8], indexExpand:[10, 10, 8], dataQuartiles:[8, 8, 7, 6, 6, 8],
  /* v99 — placeholders, all method (accuracy-first) until class data exists */
  numLine:[10, 12, 8, 6], writtenMult:[6, 4, 3], absFact:[12, 12, 8],
  algWords:[12, 12, 9, 9, 5], algFrac:[9, 7, 8, 7, 6, 8], algPerim:[7, 6, 6],
  proportion:[12, 9, 8],
  gradEqn:[10, 7, 5], eqnGraph:[9, 8, 8], sketchLinear:[7, 5, 6, 5],
  eulerRule:8,   // v59 placeholder — Lion 8 / Cheetah 12 (K3 G5 L8 A11 C12), PENDING Laura's Euler calibration
  // v71/v72 (Laura) — Compare & Order Decimals, METHOD skill. PROPOSED placeholders (recalibrate
  // with class data): L1 quick sign-tap (12), L2 order 4 decimals ascending (6), L3 mixed compare
  // (10), L4 order mixed descending (5), L5 order +/− mix (4, hardest). Cheetah = round(1.5×Lion).
  compareDec:[12, 6, 10, 5, 4],
  // expand single brackets & factorise HCF — Lion 7, Cheetah 10 (overridden below)
  algExpand:7, algFactorHCF:7,
  // heavy multi-step expand / factorise — Lion 4, Cheetah 6
  algExpandTwo:4, algExpandBinom:4, algFactorMonic:4, algFactorGroup:4,
  // v74 (Laura) — Percentages METHOD skills. Exact per-level Antelope cut-offs for pctFDP and
  // the L3 (method) levels of pctIdentify/pctOfAmount are set in BAND_OVERRIDE below; the Lion
  // values here are only a fallback.
  pctIdentify:[15, 10, 6], pctOfAmount:[15, 10, 6],   // only L3 is read (L1/L2 are recall)
  pctFDP:[11, 9, 6], pctExpress:[6, 5, 4], pctChange:[6, 5, 4], pctProfitLoss:[5, 4],
  // v74.2 (Laura) — new METHOD skills. PROPOSED placeholders — recalibrate with class data.
  fracCompare:[12, 6, 5],          // L1 sign-tap · L2 order asc · L3 order desc (mirrors Compare Decimals)
  negIndices:[10, 8, 6],           // evaluate zero/negative indices
  /* v95: surdAddSub/surdDivide L1 fallbacks follow the v95 overrides (which are
     what actually apply); L2/L3 unchanged. */
  surdSimplify:[10, 8, 6], surdAddSub:[7, 6, 5],
  /* v86: Multiply Surds gained a new L1 (rule only, no simplifying), so the old
     three ceilings shift down one and the new level takes an easier one.
     PLACEHOLDER for the new L1 — recalibrate with class data. */
  /* L1/L2 Lion ceilings follow the v94 overrides above (which are what actually
     apply); L3/L4 are unchanged. */
  surdMultiply:[7, 6, 6, 5], surdDivide:[7, 6, 5],
  pctReverse:[6, 5, 4],            // reverse percentages (multi-step)
  bestBuy:[6, 5, 4],               // unit price / best buy
  // v74.3 (Laura) — the final three skills. PROPOSED placeholders — recalibrate with class data.
  primeFactor:[8, 6, 6],           // L1 recognise · L2 missing power · L3 count factors
  rearrange:[7, 6, 5],             // recognise the correct rearrangement
  anglePoly:[8, 6, 8, 6],          // L1 angle sum · L2 find missing · L3 regular polygon angle · L4 algebra
};
/* Explicit Cheetah thresholds where Laura's value differs from round(1.5·Lion). */
const METHOD_BAND_CHEETAH = {
  fracAddSub:13, fracMultiply:13, fracDivide:13,   // Lion 9 (rule → 14, set 13)
  algExpand:10, algFactorHCF:10,                   // Lion 7 (rule → 11, set 10)
};
/* Full custom band sets for skill+level combos that don't fit the thirds rule.
   Keyed "skillId_Llv" → [Kangaroo max, Greyhound max, Lion max, Antelope max];
   Cheetah = Antelope max + 1. v45: L3 add/sub per Laura. */
const BAND_OVERRIDE = {
  addition_L3:    [3, 6, 10, 15],   // K 0-3, G 4-6, L 7-10, A 11-15, C 16+
  subtraction_L3: [3, 6, 10, 15],
  // v74 (Laura) — Percentages. Format [Kangaroo max, Greyhound max, Lion max, Antelope max];
  // Cheetah = Antelope max + 1. "Fluent" = start of Antelope (Lion max + 1).
  // Identify %: L1 Fluent at 12, L2 Fluent at 7, L3 METHOD (Antelope at 7). (v74.1 per Laura)
  // Finding % of an amount: L1 Fluent at 15, L2 Fluent at 10, L3 METHOD (Antelope at 7).
  pctIdentify_L1: [4, 8, 11, 16],   // Fluent (Antelope) at 12
  pctIdentify_L2: [2, 4, 6, 10],    // Fluent (Antelope) at 7
  pctIdentify_L3: [2, 4, 6, 9],     // method — Antelope at 7
  pctOfAmount_L1: [5, 10, 14, 19],  // Fluent (Antelope) at 15
  pctOfAmount_L2: [3, 6, 9, 13],    // Fluent (Antelope) at 10
  pctOfAmount_L3: [2, 4, 6, 9],     // method — Antelope at 7
  // Convert FDP (method, scored per box): Antelope at L1 12, L2 10, L3 7.
  pctFDP_L1: [4, 8, 11, 15],        // Antelope at 12
  pctFDP_L2: [3, 6, 9, 13],         // Antelope at 10
  pctFDP_L3: [2, 4, 6, 9],          // Antelope at 7
};
/* v74.9 (Laura) — band cut-offs revised from the reviewed spreadsheet (min-to-reach −1 →
   [Kangaroo max, Greyhound max, Lion max, Antelope max]; Cheetah = Antelope max + 1).
   Applied as explicit per-level overrides so each row matches Laura's sheet exactly. */
Object.assign(BAND_OVERRIDE, {
  // 🔢 Number
  numberBonds_L2: [10, 20, 30, 44],   // Number Bonds L2
  timesTables_L1: [9, 19, 29, 44],   // Times Tables L1
  timesTables_L2: [9, 19, 29, 44],   // Times Tables L2
  division_L1: [9, 19, 29, 44],   // Division L1
  division_L2: [9, 19, 29, 44],   // Division L2
  factorsMultiples_L1: [10, 20, 30, 44],   // Factors, Multiples & Primes L1
  factorsMultiples_L2: [10, 20, 30, 44],   // Factors, Multiples & Primes L2
  factorsMultiples_L3: [9, 19, 29, 44],   // Factors, Multiples & Primes L3
  primeFactor_L2: [3, 5, 8, 11],   // Prime Factorisation L2
  roundEst_L2: [6, 12, 18, 26],   // Rounding & Estimation L2
  sigFigs_L1: [6, 12, 18, 26],   // Significant Figures L1
  sigFigs_L2: [6, 12, 18, 26],   // Significant Figures L2
  // ± Integers
  intAddSub_L1: [7, 14, 21, 31],   // Add / Subtract Integers L1
  intMultDiv_L2: [7, 15, 22, 32],   // Multiply / Divide Integers L2
  intMultDiv_L3: [7, 15, 22, 32],   // Multiply / Divide Integers L3
  intSquareCube_L1: [9, 19, 29, 44],   // Squares & Cubes of Integers L1
  intSquareCube_L2: [7, 15, 22, 32],   // Squares & Cubes of Integers L2
  // x² Exponents
  squares_L1: [9, 19, 29, 44],   // Square Numbers L1
  squares_L2: [9, 19, 29, 44],   // Square Numbers L2
  squares_L3: [9, 19, 29, 44],   // Square Numbers L3
  roots_L1: [9, 19, 29, 44],   // Square Roots L1
  roots_L2: [9, 19, 29, 44],   // Square Roots L2
  roots_L3: [7, 15, 22, 32],   // Square Roots L3
  cubes_L3: [7, 15, 22, 32],   // Cube Numbers L3
  cubeRoots_L3: [7, 15, 22, 32],   // Cube Roots L3
  indexMult_L1: [9, 19, 29, 44],   // Index Law (Multiplication Law) L1
  indexMult_L2: [7, 15, 22, 32],   // Index Law (Multiplication Law) L2
  indexMult_L3: [6, 12, 18, 26],   // Index Law (Multiplication Law) L3
  indexDiv_L1: [9, 19, 29, 44],   // Index Law (Division Law) L1
  indexDiv_L2: [7, 15, 22, 32],   // Index Law (Division Law) L2
  indexDiv_L3: [6, 12, 18, 26],   // Index Law (Division Law) L3
  indexPow_L1: [9, 19, 29, 44],   // Index Law (Power of a Power) L1
  indexPow_L2: [7, 15, 22, 32],   // Index Law (Power of a Power) L2
  indexPow_L3: [6, 12, 18, 26],   // Index Law (Power of a Power) L3
  negIndices_L1: [7, 15, 22, 32],   // Negative & Zero Indices L1
  negIndices_L2: [7, 15, 22, 32],   // Negative & Zero Indices L2
  negIndices_L3: [7, 15, 22, 32],   // Negative & Zero Indices L3
  sciTo_L1: [6, 12, 18, 26],   // Number → Scientific Notation L1
  sciTo_L2: [6, 12, 18, 26],   // Number → Scientific Notation L2
  sciTo_L3: [6, 12, 18, 26],   // Number → Scientific Notation L3
  sciFrom_L1: [6, 12, 18, 26],   // Scientific Notation → Number L1
  sciFrom_L2: [6, 12, 18, 26],   // Scientific Notation → Number L2
  sciFrom_L3: [6, 12, 18, 26],   // Scientific Notation → Number L3
  surdAddSub_L1: [6, 12, 18, 26],   // Add & Subtract Surds L1 — superseded, see the v95 block
  /* v94/v95: the surd bands are set in the LAURA'S SURD CALLS block at the end
     of this file, which is assigned last and therefore wins over anything here. */
  surdDivide_L1: [6, 12, 18, 26],   // Divide Surds L1 — superseded, see the v95 block
  // ½ Fractions
  fracAddSub_L1: [6, 12, 18, 26],   // Add & Subtract Fractions L1
  fracMultiply_L1: [6, 12, 18, 26],   // Multiply Fractions L1
  fracDivide_L1: [6, 12, 18, 26],   // Divide Fractions L1
  // 0.1 Decimals
  decPlaceValue_L2: [6, 12, 18, 26],   // Decimal Place Value L2
  decPlaceValue_L3: [6, 12, 18, 26],   // Decimal Place Value L3
  decIdentify_L1: [2, 3, 5, 7],   // Identify Decimals L1
  decIdentify_L2: [2, 3, 5, 7],   // Identify Decimals L2
  decIdentify_L3: [2, 3, 5, 7],   // Identify Decimals L3
  decExpand_L1: [2, 3, 5, 7],   // Expanded Form of Decimals L1
  decExpand_L2: [2, 3, 5, 7],   // Expanded Form of Decimals L2
  decExpand_L3: [2, 3, 5, 7],   // Expanded Form of Decimals L3
  decToFrac_L1: [2, 3, 5, 7],   // Convert Decimals to Fractions L1
  decToFrac_L2: [2, 3, 5, 7],   // Convert Decimals to Fractions L2
  fracToDec_L1: [4, 8, 12, 17],   // Convert Fractions to Decimals L1
  compareDec_L4: [2, 4, 6, 8],   // Compare & Order Decimals L4
  compareDec_L5: [2, 4, 6, 8],   // Compare & Order Decimals L5
  decAddSubNeg_L1: [4, 8, 12, 17],   // Add & Subtract Decimals (Positive & Negative) L1
  decAddSubNeg_L2: [4, 8, 12, 17],   // Add & Subtract Decimals (Positive & Negative) L2
  decPow10_L2: [5, 9, 14, 20],   // Multiply & Divide by 10, 100, 1000 L2
  decPow10_L3: [5, 9, 14, 20],   // Multiply & Divide by 10, 100, 1000 L3
  decMultiply_L1: [2, 4, 6, 8],   // Multiply Decimals L1
  decMultiply_L2: [2, 4, 6, 8],   // Multiply Decimals L2
  decMultiply_L3: [2, 4, 6, 8],   // Multiply Decimals L3
  fdMultiply_L1: [2, 4, 6, 8],   // Multiply Decimals & Fractions L1
  decSquareCube_L1: [2, 4, 6, 8],   // Squares & Cubes of Decimals L1
  decSquareCube_L2: [2, 4, 6, 8],   // Squares & Cubes of Decimals L2
  decDivide_L1: [2, 4, 6, 8],   // Divide Decimals L1
  decDivide_L2: [1, 3, 4, 5],   // Divide Decimals L2
  decDivide_L3: [1, 3, 4, 5],   // Divide Decimals L3
  decDivide_L4: [1, 3, 4, 5],   // Divide Decimals L4
  decLeadEst_L1: [6, 12, 18, 26],   // Leading Digit Estimation L1
  // % Percentages
  pctIdentify_L1: [2, 3, 5, 7],   // Identify Percentages L1
  pctIdentify_L2: [2, 3, 5, 7],   // Identify Percentages L2
  pctIdentify_L3: [2, 3, 5, 7],   // Identify Percentages L3
  pctFDP_L1: [3, 6, 9, 13],   // Convert Fractions, Decimals & Percentages L1
  pctOfAmount_L1: [3, 6, 9, 13],   // Finding a Percentage of an Amount L1
  pctReverse_L1: [1, 3, 4, 5],   // Reverse Percentages L1
  pctReverse_L2: [1, 3, 4, 5],   // Reverse Percentages L2
  pctProfitLoss_L1: [1, 3, 4, 5],   // Profit & Loss L1
  // △ Geometry
  /* v77.1 (Laura): mirror the Naming Shapes bands exactly. */
  numClass_L1:        [8, 17, 25, 37],
  quadVerify_L1:      [8, 17, 25, 37],
  quadVerify_L2:      [8, 17, 25, 37],
  linearNonlinear_L1: [8, 17, 25, 37],
  linearNonlinear_L2: [8, 17, 25, 37],
  nameShapes_L1: [8, 17, 25, 37],   // Naming 2D & 3D Shapes L1
  nameShapes_L2: [8, 17, 25, 37],   // Naming 2D & 3D Shapes L2
  nameShapes_L3: [8, 17, 25, 37],   // Naming 2D & 3D Shapes L3
  nameShapes_L4: [8, 17, 25, 37],   // Naming 2D & 3D Shapes L4
  nameShapes_L5: [8, 17, 25, 37],   // Naming 2D & 3D Shapes L5
  nameAnglesLines_L1: [8, 17, 25, 37],   // Naming Angles, Lines & Triangles L1
  nameAnglesLines_L2: [8, 17, 25, 37],   // Naming Angles, Lines & Triangles L2
  nameAnglesLines_L3: [8, 17, 25, 37],   // Naming Angles, Lines & Triangles L3
  angleRel_L1: [8, 17, 25, 37],   // Angle Relationships L1
  angleParallel_L1: [8, 17, 25, 37],   // Angles on Parallel Lines L1
});
/* ── REVIEWED BANDS (from the spreadsheet) — BEGIN ── */
/* 11 level(s) re-banded from the reviewed sheet, 2026-08-28.
   Applied as the LAST assignment to BAND_OVERRIDE so these values win
   over both the literal above and the v74.9 spreadsheet block. Format is
   [Kangaroo max, Greyhound max, Lion max, Antelope max]; Cheetah = Antelope + 1. */
Object.assign(BAND_OVERRIDE, {
  algDivide_L1:              [7, 13, 20, 29],   // Divide Terms L1
  algMultiply_L1:            [7, 13, 20, 29],   // Multiply Terms L1
  distTime_L3:               [1, 3, 6, 7],   // Distance-Time Graphs L3
  surdAddSub_L1:             [5, 10, 15, 22],   // Add & Subtract Surds L1
  surdDivide_L1:             [5, 10, 15, 22],   // Divide Surds L1
  surdSimplify_L1:           [2, 3, 5, 7],   // Simplify Surds L1
  surdSimplify_L2:           [2, 3, 5, 7],   // Simplify Surds L2
  surdSimplify_L3:           [1, 2, 4, 6],   // Simplify Surds L3
  timetables_L2:             [3, 7, 10, 14],   // Train & Bus Timetables L2
  timetables_L3:             [3, 7, 10, 14],   // Train & Bus Timetables L3
  timetables_L4:             [3, 7, 10, 14],   // Train & Bus Timetables L4
});
/* ── REVIEWED BANDS — END ── */

/* ══════════════════════════════════════════════════════════════════
   v95 (Laura) — LAURA'S SURD CALLS.  ASSIGNED LAST, SO THESE WIN.
   ------------------------------------------------------------------
   Every surd band Laura has called from the classroom lives here, in
   one place, assigned after BOTH the literal above and the reviewed-
   spreadsheet block. Two earlier maps already set some of these keys,
   and "which one wins" was decided by line order — a trap for whoever
   next runs a spreadsheet pass. Now it is decided by this block.

   The whole family, in the order a student meets it:

     Simplify Surds      Cheetah  8 ·  8 ·  7   (unchanged — already sane)
     Add & Subtract      Cheetah 10 ·  9 ·  8   (L1 was 23)
     Multiply Surds      Cheetah 10 · 10 ·  9 · 8   (v94: L1 was 31, L2 was 27)
     Divide Surds        Cheetah 10 ·  9 ·  8   (L1 was 23)

   The two L1s fixed here came from the 2026-08-28 reviewed spreadsheet at
   [5, 10, 15, 22], not from a placeholder — so this is Laura revising her
   own earlier call after seeing the skill run in class, and a future
   spreadsheet pass must not silently undo it.

   Why 10 and not something else: every answer in this family has to be
   WRITTEN as an exact surd, which is slower than any of the arithmetic
   skills banded above 20. The four cut-offs below Cheetah are rescaled in
   the same proportions as the ladder they replace rather than squashed
   under an unchanged one — a Lion ceiling of 15 beneath a Cheetah of 10
   would be nonsense.
══════════════════════════════════════════════════════════════════ */
Object.assign(BAND_OVERRIDE, {
  surdAddSub_L1:   [3, 5, 7, 9],    // Same Surd            → Cheetah 10 (was 23)
  surdMultiply_L1: [3, 5, 7, 9],    // The Rule Only        → Cheetah 10 (was 31)
  surdMultiply_L2: [2, 4, 6, 9],    // Multiply & Simplify  → Cheetah 10 (was 27)
  surdDivide_L1:   [3, 5, 7, 9],    // Divide Roots         → Cheetah 10 (was 23)
});

const DEFAULT_METHOD_CEIL = 5;

/* The Lion ceiling T for a skill+level. Recall → FLUENCY_TARGET; method → map
   (number or per-level array). */

/* ═══════════════════════════════════════════════════════════════════
   v98 (Laura) — ALT-AUDIT LEVELS. ASSIGNED LAST, LIKE EVERY OTHER BLOCK.
   ALL PLACEHOLDERS pending class data. They are written as EXPLICIT rows
   rather than left to the thirds-of-Lion formula so that every one of the
   27 new levels has a number somebody can see and argue with, and so the
   .bas regeneration has something real to mirror. Recognition levels band
   higher (one tap); the multi-step ones — mixed numbers, four-part shares,
   signed fractions — band low.
═══════════════════════════════════════════════════════════════════ */
Object.assign(BAND_OVERRIDE, {
  fracSimplify_L4: [5, 10, 15, 22],
  intMultDiv_L4: [5, 10, 15, 22],
  pctExpress_L4: [5, 10, 15, 22],
  pctExpress_L5: [3, 6, 9, 13],
  angleParallel_L5: [4, 8, 12, 17],
  pythagoras_L5: [4, 8, 12, 17],
  factorsMultiples_L5: [4, 8, 12, 17],
  roots_L4: [4, 8, 12, 17],
  squares_L4: [4, 8, 12, 17],
  decMultiply_L5: [5, 10, 15, 22],
  compareDec_L6: [4, 8, 12, 17],
  algParts_L4: [4, 8, 12, 17],
  indexMult_L4: [5, 10, 15, 22],
  algMultiply_L5: [4, 8, 12, 17],
  algDivide_L5: [4, 8, 12, 17],
  ratioShare_L6: [4, 8, 12, 17],
  ratioShare_L7: [2, 4, 6, 9],
  ratioSimplify_L4: [3, 6, 9, 13],
  ratioSimplify_L5: [3, 6, 9, 13],
  ratioSimplify_L6: [3, 6, 9, 13],
  algSub_L6: [3, 6, 9, 13],
  eqOneStepAddSub_L4: [4, 8, 12, 17],
  eqOneStepMulDiv_L4: [3, 6, 9, 13],
  fracAddSub_L5: [2, 4, 6, 9],
  fracMultiply_L4: [3, 6, 9, 13],
  fracDivide_L4: [3, 6, 9, 13],
  fracToDec_L4: [4, 8, 12, 17],
  pctFDP_L4: [6, 12, 18, 26],
});


/* ═══════════════════════════════════════════════════════════════════
   v99 (Laura) — THE NINE CONTENT GAPS. ASSIGNED LAST, LIKE EVERY OTHER
   BLOCK. ALL PLACEHOLDERS pending class data. Written as explicit rows so
   every one of the 30 new levels has a number somebody can see and argue
   with. The written algorithms and the algebraic fractions band LOW — one
   long division is a minute of work — while the recognition levels (words
   to expressions, direct or inverse) band higher.
═══════════════════════════════════════════════════════════════════ */
Object.assign(BAND_OVERRIDE, {
  numLine_L1: [3, 6, 9, 13],
  numLine_L2: [4, 8, 12, 17],
  numLine_L3: [2, 5, 7, 10],
  numLine_L4: [2, 4, 6, 9],
  writtenMult_L1: [2, 4, 6, 9],
  writtenMult_L2: [1, 3, 4, 6],
  writtenMult_L3: [1, 2, 3, 5],
  absFact_L1: [4, 8, 12, 17],
  absFact_L2: [4, 8, 12, 17],
  absFact_L3: [3, 5, 8, 11],
  algWords_L1: [4, 8, 12, 17],
  algWords_L2: [4, 8, 12, 17],
  algWords_L3: [3, 6, 9, 13],
  algWords_L4: [3, 6, 9, 13],
  algWords_L5: [2, 3, 5, 7],
  algFrac_L1: [3, 6, 9, 13],
  algFrac_L2: [2, 5, 7, 10],
  algFrac_L3: [3, 5, 8, 11],
  algFrac_L4: [2, 5, 7, 10],
  algFrac_L5: [2, 4, 6, 8],
  algFrac_L6: [3, 5, 8, 11],
  algPerim_L1: [2, 5, 7, 10],
  algPerim_L2: [2, 4, 6, 8],
  algPerim_L3: [2, 4, 6, 8],
  proportion_L1: [4, 8, 12, 17],
  proportion_L2: [3, 6, 9, 13],
  proportion_L3: [3, 5, 8, 11],
  division_L5: [1, 3, 4, 6],
  hcfLcm_L5: [3, 6, 9, 13],
  rateConvert_L4: [3, 5, 8, 11],
});

function bandCeil(s, lv) {
  const t = getFluencyTarget(s, lv);          // 0 for method skills
  if (t > 0) return t;
  const m = METHOD_BAND_CEIL[s];
  if (Array.isArray(m)) return m[lv - 1] || m[m.length - 1];
  return m || DEFAULT_METHOD_CEIL;
}
/* The four band cutoffs {k,g,l,a} for a skill+level. Custom override if present,
   else thirds of the Lion ceiling with Antelope filling up to Cheetah-1. */
function bandCutoffs(s, lv) {
  const ov = BAND_OVERRIDE[`${s}_L${lv}`];
  if (ov) return { k: ov[0], g: ov[1], l: ov[2], a: ov[3] };
  const T = bandCeil(s, lv);
  const C = cheetahThreshold(s, lv);
  return { k: Math.round(T / 3), g: Math.round(2 * T / 3), l: T, a: C - 1 };
}
/* The Cheetah threshold (lowest Fluency Score that earns Cheetah). Override →
   Antelope max + 1; explicit METHOD_BAND_CHEETAH; else round(1.5·Lion ceiling). */
function cheetahThreshold(s, lv) {
  const ov = BAND_OVERRIDE[`${s}_L${lv}`];
  if (ov) return ov[3] + 1;
  const m = METHOD_BAND_CHEETAH[s];
  if (m) return m;
  return Math.round(1.5 * bandCeil(s, lv));
}
/* Band index 0–4 (Kangaroo…Cheetah) for a Fluency Score at this skill+level. */
function animalIndexFor(score, s, lv) {
  const { k, g, l, a } = bandCutoffs(s, lv);
  if (score >= a + 1) return 4;   // Cheetah
  if (score >= l + 1) return 3;   // Antelope
  if (score >= g + 1) return 2;   // Lion
  if (score >= k + 1) return 1;   // Greyhound
  return 0;                       // Kangaroo
}
function animalForScore(score, s, lv) { return ANIMALS[animalIndexFor(score, s, lv)]; }

/* v49 (DISPLAY-ONLY): the next band up from a score and the lowest Fluency Score
   that reaches it. Reads the SAME cutoffs the bands already use — it introduces
   no new thresholds. Returns { next: ANIMALS entry, at: score } or null at top. */
function nextBandInfo(score, s, lv) {
  const bi = animalIndexFor(score, s, lv);
  if (bi >= 4) return null;                  // already Cheetah (top band)
  const { k, g, l, a } = bandCutoffs(s, lv);
  const ats = [k + 1, g + 1, l + 1, a + 1];  // → Greyhound, Lion, Antelope, Cheetah
  return { next: ANIMALS[bi + 1], at: ats[bi] };
}

/* ── FLUENT (re-added v45) ──
   "Fluent" is reaching the start of Antelope (band index ≥ 3) and only applies
   to RECALL ("skill") types, not method types. Derived from the stored PB (so
   it's sticky and needs no extra storage), exactly like the animal. */
const FLUENT_BAND_INDEX = 3;   // Antelope
function isRecallFluent(s, lv) {
  if (getLevelKind(s, lv) !== 'recall') return false;
  const pb = getPB(s, lv);
  return pb > 0 && animalIndexFor(pb, s, lv) >= FLUENT_BAND_INDEX;
}
function skillHasFluentLevel(s) {
  if (getSkillKind(s) !== 'recall') return false;
  return [1, 2, 3, 4].some(lv => isRecallFluent(s, lv));
}

/* Best animal index across a skill's levels, from each level's stored PB.
   Returns -1 if the skill has no PB yet. Band depends on level (T differs),
   so we band each level's PB and take the highest — not the max PB. */
function bestAnimalIndexForSkill(sid) {
  let best = -1;
  [1, 2, 3, 4].forEach(lv => {
    const pb = getPB(sid, lv);
    if (pb > 0) { const i = animalIndexFor(pb, sid, lv); if (i > best) best = i; }
  });
  return best;
}
/* Small inline chip / larger pill HTML for an animal. */
function animalChipHTML(a, cls) {
  if (!a) return '';
  return `<span class="${cls || 'animal-chip'}" style="background:${a.bg};color:${a.fg}">`
       + `<span class="ac-emoji">${a.emoji}</span>${a.name}</span>`;
}
/* Set in endSession when a scored session lifts the stored PB into a higher band. */
let sessionBandUp = false;

/* ═══════════════════════════════════════════════
   APP STATE
═══════════════════════════════════════════════ */
let profiles = [];
let pidx = 0;
let sessionMode = 'fluency';   // 'fluency' | 'challenge' | 'practice'
let skill = null;      // current skill id
let skillMeta = null;  // current skill object
let lvKey = null;
let level = null;
let currentCat = null;
let lbPidx = 0;

let score = 0, attempts = 0, streak = 0, bestStreak = 0;
let missed = [];   // v25: missed questions this session, for end-of-session review
let startTime = null;
let timer = null;
let timeLeft = 60, elapsedSec = 0;
let gameOver = false;

// Question state
let qData = {}; // stores answer details for fraction questions

/* ═══════════════════════════════════════════════
   STORAGE
═══════════════════════════════════════════════ */
function loadProfiles() {
  try { profiles = JSON.parse(localStorage.getItem('ff_profiles') || '[]'); }
  catch { profiles = []; }
}
function saveProfiles() { localStorage.setItem('ff_profiles', JSON.stringify(profiles)); }
function ap() { return profiles[pidx]; }

function pbKey(s, lv, pi) { return `ff_pb_${pi ?? pidx}_${s}_L${lv}`; }
function getPB(s, lv, pi)  { const v = localStorage.getItem(pbKey(s, lv, pi)); return v ? +v : 0; }
function setPB(s, lv, v)   { localStorage.setItem(pbKey(s, lv), v); }
function trendKey(s, lv)   { return `ff_tr_${pidx}_${s}_L${lv}`; }
function getTrend(s, lv)   { try { return JSON.parse(localStorage.getItem(trendKey(s,lv)) || '[]'); } catch { return []; } }
function pushTrend(s, lv, v) {
  const t = getTrend(s, lv); t.push(v);
  if (t.length > 8) t.shift();
  localStorage.setItem(trendKey(s, lv), JSON.stringify(t));
}
function bestAllSkills(pi) {
  let b = 0;
  Object.values(CATS).forEach(c => c.skills.forEach(s => [1,2,3,4].forEach(lv => {
    const v = getPB(s.id, lv, pi); if (v > b) b = v;
  })));
  return b;
}
function bestForSkill(sid) {
  let b = 0; [1,2,3,4].forEach(lv => { const v = getPB(sid, lv); if (v > b) b = v; }); return b;
}

/* ── v27: session-history layer (powers the streak, daily goal, Daily Mix).
   All keys are new and per-profile — nothing existing is touched. ── */
function ymd(d) { d = d || new Date(); return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`; }
function lastKey(s, lv)    { return `ff_last_${pidx}_${s}_L${lv}`; }
function getLast(s, lv)    { const v = localStorage.getItem(lastKey(s, lv)); return v ? +v : 0; }
function lastAccKey(s, lv) { return `ff_acc_${pidx}_${s}_L${lv}`; }
function getLastAcc(s, lv) { const v = localStorage.getItem(lastAccKey(s, lv)); return v == null ? -1 : +v; }
function playedToday(s, lv){ const t = getLast(s, lv); return t > 0 && ymd(new Date(t)) === ymd(); }

function dayKey(date)  { return `ff_day_${pidx}_${date || ymd()}`; }
function getDay(date)  { try { return JSON.parse(localStorage.getItem(dayKey(date)) || '{"sessions":0,"secs":0}'); } catch { return {sessions:0,secs:0}; } }
function daysKey()     { return `ff_days_${pidx}`; }
function getDays()     { try { return JSON.parse(localStorage.getItem(daysKey()) || '[]'); } catch { return []; } }

/* Called at the end of EVERY session (fluency, challenge, practice). */
/* v92: stamping a LEVEL and counting a SESSION used to be the same call. A
   Mixed Practice round touches a dozen levels but is still one session, so the
   two halves are now separate and recordActivity simply calls both. */
function recordLevelAcc(s, lv, accPct) {
  localStorage.setItem(lastKey(s, lv), String(Date.now()));
  if (accPct != null && !isNaN(accPct)) localStorage.setItem(lastAccKey(s, lv), String(Math.round(accPct)));
}
function recordDayActivity(secs) {
  const today = ymd();
  const d = getDay(today);
  d.sessions += 1;
  d.secs += Math.max(0, Math.round(secs || 0));
  localStorage.setItem(dayKey(today), JSON.stringify(d));
  const days = getDays();
  if (!days.includes(today)) { days.push(today); if (days.length > 400) days.shift(); localStorage.setItem(daysKey(), JSON.stringify(days)); }
}
function recordActivity(s, lv, accPct, secs) {
  recordLevelAcc(s, lv, accPct);
  recordDayActivity(secs);
}

/* Daily goal: 3 sessions OR 5 minutes of practice today (either counts). */
const GOAL_SESSIONS = 5, GOAL_SECS = 300;
function goalProgress() {
  const d = getDay();
  return { sessions: d.sessions, secs: d.secs, done: d.sessions >= GOAL_SESSIONS || d.secs >= GOAL_SECS };
}

/* Streak: consecutive calendar days with activity, ending today or yesterday. */
function getStreak() {
  const set = new Set(getDays());
  if (set.size === 0) return 0;
  let d = new Date();
  if (!set.has(ymd(d))) { d.setDate(d.getDate() - 1); if (!set.has(ymd(d))) return 0; }
  let streak = 0;
  while (set.has(ymd(d))) { streak++; d.setDate(d.getDate() - 1); }
  return streak;
}

/* ── Daily Mix: 4 skills picked for the student, weighting recent work but
   allowing others. Stable for the whole day (cached per date). ── */
function findSkillMeta(id) {
  for (const c of Object.values(CATS)) for (const s of c.skills) if (s.id === id) return s;
  return null;
}
function mixKey() { return `ff_mix_${pidx}_${ymd()}`; }
function allCandidates() {
  const out = [];
  Object.entries(CATS).forEach(([catKey, c]) => c.skills.forEach(s => {
    const defs = LEVEL_DEFS[s.lvKey] || [];
    defs.forEach((_, i) => out.push({ skill: s.id, level: i + 1, cat: catKey }));
  }));
  return out;
}
/* v74.1 (Laura): the Daily Mix must only ever suggest skills a student should be
   attempting. Eligible = a "basics" skill (Number/Integers/Exponents fundamentals),
   OR a skill+level the student has already attempted, OR the very next level up from
   one they've attempted (natural progression). New advanced skills a student has
   never touched are never dropped into the mix. */
const MIX_BASICS = new Set([
  'timesTables', 'division', 'addition', 'subtraction',   // Number fundamentals
  'intAddSub', 'intMultDiv', 'intSquareCube',             // Integers (not Order of Operations)
  'squares', 'roots', 'cubes', 'cubeRoots'                // Exponents fundamentals
]);
function mixEligible(c) {
  if (MIX_BASICS.has(c.skill)) return true;                        // always allow the basics
  if (getLast(c.skill, c.level) > 0) return true;                  // already attempted this level
  if (c.level > 1 && getLast(c.skill, c.level - 1) > 0) return true; // ready for the next step
  return false;
}
function buildDailyMix() {
  const cand = allCandidates().filter(mixEligible);
  const now = Date.now();
  const recentCats = new Set();
  cand.forEach(c => { const t = getLast(c.skill, c.level); if (t && (now - t) < 14 * 864e5) recentCats.add(c.cat); });

  function weight(c) {
    const last = getLast(c.skill, c.level);
    const acc  = getLastAcc(c.skill, c.level);
    let w = 1;
    if (recentCats.has(c.cat)) w += 4;          // relevance: a topic they're working on
    w += (last > 0) ? 2 : 0.5;                  // weight recent work; allow others at low weight
    if (last > 0) w += Math.min(5, (now - last) / 864e5); // due: spaced practice
    if (acc >= 0 && acc < 70) w += 4;           // weak: needs practice
    else if (acc >= 0 && acc < 85) w += 2;
    if (playedToday(c.skill, c.level)) w *= 0.15;            // avoid repeating today
    if (c.level > 1 && last === 0 && getLast(c.skill, c.level - 1) === 0) w *= 0.05; // don't drop beginners into L3
    return Math.max(0.01, w);
  }
  const pool = cand.map(c => ({ c, w: weight(c) }));
  const picks = [], used = new Set();
  while (picks.length < 4 && pool.some(p => !used.has(p.c.skill))) {
    const avail = pool.filter(p => !used.has(p.c.skill));
    const total = avail.reduce((a, p) => a + p.w, 0);
    let r = Math.random() * total, chosen = avail[avail.length - 1];
    for (const p of avail) { r -= p.w; if (r <= 0) { chosen = p; break; } }
    picks.push({ skill: chosen.c.skill, level: chosen.c.level });
    used.add(chosen.c.skill);
  }
  try { localStorage.setItem(mixKey(), JSON.stringify(picks)); } catch (e) {}
  return picks;
}
function getDailyMix() {
  try { const v = localStorage.getItem(mixKey()); if (v) { const m = JSON.parse(v); if (Array.isArray(m) && m.length) return m; } } catch (e) {}
  return buildDailyMix();
}

/* ═══════════════════════════════════════════════
   SCREEN NAV
═══════════════════════════════════════════════ */
function show(screenId) {
  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
  document.getElementById(screenId).classList.add('active');
  // Hide the mobile keypad on any screen except the game screen
  if (screenId !== 's-game') kbHide();
}

/* ═══════════════════════════════════════════════
   WELCOME / PROFILE
═══════════════════════════════════════════════ */
let editPidx = null;
let selColor = COLORS[0];

function goWelcome() {
  clearInterval(timer);
  // Always reset profileGrid visibility (may have been hidden during edit)
  const grid = document.getElementById('profileGrid');
  if (grid) grid.style.display = '';
  document.getElementById('nameFormWrap').classList.add('hide');
  editFromHome = false;
  show('s-welcome');
  renderProfiles();
}
function renderProfiles() {
  document.getElementById('nameFormWrap').classList.add('hide');
  const g = document.getElementById('profileGrid');
  g.innerHTML = '';
  profiles.forEach((p, i) => {
    const c = document.createElement('div');
    c.className = 'p-card';
    const b = bestAllSkills(i);
    c.innerHTML = `
      <div class="avatar" style="background:${p.color}18;color:${p.color}">${ini(p.name)}</div>
      <div class="p-name">${p.name}</div>
      <div class="p-sub">Best score: ${b || '–'}</div>
      <div style="margin-top:8px">
        <span class="ob-replay-btn" data-idx="${i}">? Replay intro</span>
      </div>`;
    c.onclick = (e) => {
      if (e.target.classList.contains('ob-replay-btn')) {
        pidx = parseInt(e.target.dataset.idx);
        obStart();
        return;
      }
      pidx = i; goHome();
    };
    g.appendChild(c);
  });
  if (profiles.length < 4) {
    const a = document.createElement('div');
    a.className = 'p-card add-card';
    a.innerHTML = `
      <div class="avatar" style="background:var(--surface2);color:var(--muted);font-size:1.8rem">+</div>
      <div class="p-name" style="color:var(--muted)">Add Profile</div>`;
    a.onclick = showNameForm;
    g.appendChild(a);
  }
}
function ini(name) { return name.trim().split(/\s+/).map(w => w[0]).join('').toUpperCase().slice(0,2); }

function showNameForm() {
  editPidx = null;
  editFromHome = false;
  selColor = COLORS[profiles.length % COLORS.length];
  document.getElementById('nameFormTitle').textContent = 'New Profile';
  document.getElementById('nameInputFirst').value = '';
  document.getElementById('nameInputLast').value = '';
  document.getElementById('classCodeInput').value = '';
  document.getElementById('nameFormWrap').classList.remove('hide');
  renderSwatches();
  document.getElementById('nameInputFirst').focus();
}

let editFromHome = false;  // tracks whether edit was triggered from home screen

function editCurrentProfile() {
  editPidx = pidx;
  editFromHome = true;
  const p = ap();
  selColor = p.color;
  document.getElementById('nameFormTitle').textContent = 'Edit Profile';
  document.getElementById('nameInputFirst').value = p.firstName || p.name || '';
  document.getElementById('nameInputLast').value  = p.lastName  || '';
  document.getElementById('classCodeInput').value = p.classCode || '';
  // Navigate to welcome screen so nameFormWrap is visible, then show it
  show('s-welcome');
  document.getElementById('profileGrid').style.display = 'none';
  document.getElementById('nameFormWrap').classList.remove('hide');
  renderSwatches();
  document.getElementById('nameInputFirst').focus();
}

function cancelNameForm() {
  document.getElementById('nameFormWrap').classList.add('hide');
  document.getElementById('profileGrid').style.display = '';
  if (editFromHome) { editFromHome = false; goHome(); }
}
function renderSwatches() {
  const r = document.getElementById('colorRow');
  r.innerHTML = '';
  COLORS.forEach(c => {
    const sw = document.createElement('div');
    sw.className = 'swatch' + (c === selColor ? ' sel' : '');
    sw.style.background = c;
    sw.onclick = () => { selColor = c; document.querySelectorAll('.swatch').forEach(s => s.classList.remove('sel')); sw.classList.add('sel'); };
    r.appendChild(sw);
  });
}

function saveProfile() {
  const firstName = document.getElementById('nameInputFirst').value.trim();
  const lastName  = document.getElementById('nameInputLast').value.trim();
  const classCode = document.getElementById('classCodeInput').value.trim().toUpperCase();

  if (!firstName) { document.getElementById('nameInputFirst').focus(); return; }

  const displayName = lastName ? `${firstName} ${lastName}` : firstName;
  const profileData = { name: displayName, firstName, lastName, classCode, color: selColor };

  if (editPidx !== null) {
    profiles[editPidx] = { ...profiles[editPidx], ...profileData };
  } else {
    profiles.push(profileData);
    pidx = profiles.length - 1;
  }
  saveProfiles();
  document.getElementById('nameFormWrap').classList.add('hide');
  document.getElementById('profileGrid').style.display = '';
  if (editPidx === null) {
    editFromHome = false;
    obStart();
  } else {
    const wasHome = editFromHome;
    editFromHome = false;
    if (wasHome) goHome();
    else goHome();
  }
}

/* ═══════════════════════════════════════════════
   HOME
═══════════════════════════════════════════════ */
function goHome() {
  clearInterval(timer);
  show('s-home');
  const p = ap();
  const av = document.getElementById('homeAv');
  av.style.background = p.color + '18'; av.style.color = p.color;
  av.textContent = ini(p.name);
  document.getElementById('homeGreeting').textContent = `Hey, ${p.firstName || p.name}!`;
  const h = new Date().getHours();
  document.getElementById('homeSub').textContent =
    `Good ${h < 12 ? 'morning' : h < 17 ? 'afternoon' : 'evening'} — ready to train?`;

  // Class code chip
  const chip = document.getElementById('homeClassCode');
  if (chip) chip.textContent = p.classCode || 'No class code — tap Edit profile';

  // Today button — show unsent count badge
  const unsent = getTodaySessions().filter(s => !s.sent).length;
  const todayBtn = document.getElementById('todayBtn');
  if (todayBtn) {
    todayBtn.innerHTML = unsent > 0
      ? `📋  Today's Sessions &amp; Share <span style="background:var(--red);color:#fff;border-radius:20px;padding:1px 8px;font-size:0.75rem;margin-left:4px">${unsent} unsent</span>`
      : `📋  Today's Sessions &amp; Share`;
  }

  syncModeUI();
  renderHabitCard();
  syncBackupNudge();
  mixQueue = null;

  const c = getCourse();
  const sub = id('examBtnSub');
  if (sub) {
    if (!c) sub.textContent = 'Choose your class to get started';
    else {
      const r = readyCount(examPairs(c));
      sub.textContent = c.short + ' · ' + r.green + '/' + r.total + ' exam levels ready';
    }
  }
}
function setMode(m) { sessionMode = m; syncModeUI(); }
function syncModeUI() {
  ['fluency','challenge','practice'].forEach(m => {
    const b = document.getElementById('btn-' + m);
    if (b) b.classList.toggle('active', sessionMode === m);
  });
}

/* ── v27: habit card (streak + daily goal) on the home screen ── */
function renderHabitCard() {
  const el = document.getElementById('habitCard');
  if (!el) return;
  const g = goalProgress();
  const streak = getStreak();
  const mins = Math.floor(g.secs / 60), secs = g.secs % 60;
  const timeStr = `${mins}:${String(secs).padStart(2,'0')}`;
  const pct = Math.min(100, Math.max(g.sessions / GOAL_SESSIONS, g.secs / GOAL_SECS) * 100);
  const fire = streak > 0 ? `🔥 <b>${streak}</b> day${streak === 1 ? '' : 's'} in a row` : 'Start a streak today!';
  // last 7 days strip
  const days = new Set(getDays());
  let dots = '';
  for (let i = 6; i >= 0; i--) {
    const d = new Date(); d.setDate(d.getDate() - i);
    const on = days.has(ymd(d));
    const isToday = i === 0;
    dots += `<span class="hb-dot${on ? ' on' : ''}${isToday ? ' today' : ''}" title="${ymd(d)}"></span>`;
  }
  el.innerHTML = `
    <div class="hb-top">
      <span class="hb-streak">${fire}</span>
      <span class="hb-goal ${g.done ? 'done' : ''}">${g.done ? '🎯 Goal done!' : `${g.sessions}/5 today · ${timeStr}`}</span>
    </div>
    <div class="hb-bar"><div class="hb-fill" style="width:${pct}%"></div></div>
    <div class="hb-dots">${dots}</div>`;
}

/* ── v27: Daily Mix ── */
function openDailyMix() { show('s-mix'); renderMix(); }
function reshuffleMix() { buildDailyMix(); renderMix(); }
function renderMix() {
  const mix = getDailyMix();
  const done = mix.filter(m => playedToday(m.skill, m.level)).length;
  const prog = document.getElementById('mixProgress');
  if (prog) prog.textContent = `${done} of ${mix.length} done today`;
  const list = document.getElementById('mixList');
  if (!list) return;
  list.innerHTML = '';
  mix.forEach(m => {
    const meta = findSkillMeta(m.skill);
    if (!meta) return;
    const isDone = playedToday(m.skill, m.level);
    const kind = getSkillKind(m.skill);
    const row = document.createElement('div');
    row.className = 'mix-card' + (isDone ? ' done' : '');
    row.innerHTML = `
      <div class="mix-info">
        <div class="mix-name">${meta.name.replace(/&amp;/g,'&')}</div>
        <div class="mix-meta">Level ${m.level} · ${kind === 'recall' ? 'speed' : 'method'}${isDone ? ' · ✓ done today' : ''}</div>
      </div>
      <button class="mix-go">${isDone ? 'Again' : 'Start'}</button>`;
    row.querySelector('.mix-go').onclick = () => startMixItem(m.skill, m.level);
    list.appendChild(row);
  });
}
function startMixItem(sid, lv) {
  const meta = findSkillMeta(sid);
  if (!meta) return;
  skill = sid; skillMeta = meta; lvKey = meta.lvKey; level = lv;
  if (!sessionMode) sessionMode = 'fluency';
  beginGame();
}

/* ── v27: backup / restore progress (this device only) ── */
function openBackup() {
  stampBackup();
  show('s-backup');
  const ta = document.getElementById('backupOut');
  if (ta) ta.value = buildBackup();
  const inp = document.getElementById('backupIn');
  if (inp) inp.value = '';
  const msg = document.getElementById('backupMsg');
  if (msg) msg.textContent = '';
}
function buildBackup() {
  const data = {};
  const re = new RegExp('_' + pidx + '(?=_|$)');
  for (let i = 0; i < localStorage.length; i++) {
    const k = localStorage.key(i);
    if (!k || !k.startsWith('ff_') || k === 'ff_profiles' || k === 'ff_theme') continue;
    if (re.test(k)) data[k.replace(re, '_{P}')] = localStorage.getItem(k);
  }
  const payload = { v: 1, profile: ap(), keys: data };
  try { return btoa(unescape(encodeURIComponent(JSON.stringify(payload)))); }
  catch (e) { return JSON.stringify(payload); }
}
function copyBackup() {
  const ta = document.getElementById('backupOut');
  if (!ta) return;
  ta.select();
  try { document.execCommand('copy'); } catch (e) {}
  const msg = document.getElementById('backupMsg');
  if (msg) { msg.textContent = '✓ Backup code copied — paste it somewhere safe.'; msg.className = 'backup-msg ok'; }
}
function restoreBackup() {
  const inp = document.getElementById('backupIn');
  const msg = document.getElementById('backupMsg');
  const setMsg = (t, ok) => { if (msg) { msg.textContent = t; msg.className = 'backup-msg ' + (ok ? 'ok' : 'bad'); } };
  if (!inp || !inp.value.trim()) { setMsg('Paste a backup code first.', false); return; }
  let payload;
  try { payload = JSON.parse(decodeURIComponent(escape(atob(inp.value.trim())))); }
  catch (e) { try { payload = JSON.parse(inp.value.trim()); } catch (e2) { setMsg('That code could not be read — paste the full code.', false); return; } }
  if (!payload || payload.v !== 1 || !payload.keys) { setMsg('That doesn\'t look like a Sandy Fast Facts backup.', false); return; }
  if (!confirm('Restore will overwrite THIS profile\'s current progress with the backup. Continue?')) return;
  if (payload.profile) { profiles[pidx] = { ...profiles[pidx], ...payload.profile }; saveProfiles(); }
  Object.entries(payload.keys).forEach(([rk, val]) => {
    try { localStorage.setItem(rk.replace('_{P}', '_' + pidx), val); } catch (e) {}
  });
  setMsg('✓ Progress restored!', true);
  goHome();
}

/* ═══════════════════════════════════════════════
   SKILL SELECT
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v92 (Laura) — EXAM / ALT TRAINING
   -------------------------------------------------------------------
   A SECOND way into the same content. The app is organised by
   mathematical topic, which is how a curriculum writer thinks;
   students think in upcoming assessments. COURSES is pure METADATA —
   it names skill ids and level numbers that already exist and adds
   nothing to CATS, so adding a skill later is one edit here and
   nothing to un-pick. test_courses.js proves every id and level
   below is real, so a rename can never leave a student on a blank
   screen.
═══════════════════════════════════════════════════════════════════ */
const COURSES = {
  y7: {
    label: "Year 7 Mathematics", short: "Year 7",
    prereq: [["timesTables",[1,2,3]], ["division",[1,2,3]]],
    alts: [
      { n: 1, title: "Number Theory", exam: true, skills: [["orderOps",[1,2,3,4,5]], ["absFact",[1,2,3]], ["factorsMultiples",[1,2,3,4,5]], ["primeFactor",[1,2,3,4]], ["hcfLcm",[1,2,3,4,5]], ["intAddSub",[1,2,3,4]], ["numLine",[3]], ["compareDec",[5]], ["intMultDiv",[1,2,3,4]], ["intSquareCube",[1]], ["intOrderOps",[1,2,3]], ["squares",[1,2,3]], ["roots",[1,2,3,4]], ["indexExpand",[1,2,3]], ["indexMult",[1]], ["indexDiv",[1]], ["addition",[4]], ["subtraction",[4]], ["writtenMult",[1,2,3]], ["division",[5]]] },
      { n: 2, title: "Fractions & Ratios", exam: true, skills: [["fracSimplify",[1,2,4]], ["fracCompare",[1,2,3]], ["numLine",[1,2]], ["fracAddSub",[1,2,3,4,5]], ["fracMultiply",[1,2,3,4]], ["fracDivide",[1,2,3,4]], ["fracOfAmount",[1,2,3,4]], ["mixedToImp",[1,2,3]], ["impToMixed",[1,2,3]], ["fracOrderOps",[1,2,3,4]], ["ratioSimplify",[1,2,3,4,6]], ["ratioEquiv",[1,2,3]], ["ratioShare",[1,2,3,4,5,6]], ["bestBuy",[1,2,3]], ["fracIdentify",[1,2,3]]] },
      { n: 3, title: "Algebra & Equations", exam: true, skills: [["fracSimplify",[3]], ["algParts",[1,2,3,4]], ["algWords",[1,2,3,4,5]], ["algSub",[1,2,3,4,5]], ["algLikeTerms",[1,2,3]], ["algMultiply",[1,2,3,4,5]], ["algDivide",[1,2,3,4,5]], ["algFrac",[1,2]], ["algExpand",[1,2]], ["eqOneStepAddSub",[1,2,3]], ["eqOneStepMulDiv",[1,2,3]], ["eqTwoStep",[1,2,3,4]], ["eqTwoStepFrac",[1,2,3]], ["linearApps",[1,2]]] },
      { n: 4, title: "Geometry", exam: true, skills: [["pythagoras",[1]], ["nameShapes",[1,2,3,4,5,6,7]], ["nameAnglesLines",[1,2,3,4]], ["eulerRule",[1,2]], ["interiorAngles",[1,2,3]], ["angleRel",[1,2,3,4]], ["angleParallel",[1,2,3,4,5]], ["angleQuad",[1,2,3,4]], ["anglePoly",[1,2]], ["netsViews",[1,2,3,4]]] },
      { n: 5, title: "Decimals & Percentages", exam: true, skills: [["decPlaceValue",[1,2,3]], ["decIdentify",[1,2,3]], ["decExpand",[1,2,3]], ["decToFrac",[1,2,3]], ["fracToDec",[1,2,3]], ["compareDec",[1,2,3,4,5,6]], ["decRound",[1,2,3]], ["decAdd",[1,2,3]], ["decSub",[1,2,3]], ["decAddSub",[1,2,3,4]], ["decAddSubNeg",[1,2,3]], ["fdAddSub",[1]], ["decPow10",[1,2,3,4]], ["decMultiply",[1,2,3,4,5]], ["fdMultiply",[1,2]], ["decSquareCube",[1]], ["decDivide",[1,2,3,4]], ["decLeadEst",[1,2,3]], ["decSqCubeRoot",[1]], ["decOrderOps",[1,2,3,4]], ["pctIdentify",[1,2,3]], ["pctDecConv",[1,2,3]], ["fracPctConv",[1,2,3,4]], ["pctFDP",[1,2,3]], ["pctOfAmount",[1,2,3,4]], ["pctExpress",[1,2,3,4,5]], ["pctChange",[1,2,3,5]], ["pctProfitLoss",[1]], ["algSub",[4,6]]] },
      { n: 6, title: "Linear — Coordinates, Transformations & Patterns", exam: true, skills: [["cartesian",[1,2,3,4]], ["linearNonlinear",[1,2]], ["tableValues",[1,2]], ["intercepts",[1,2]], ["linearApps",[1,2,3]], ["seqWords",[1,2,3,4,5,6]], ["arithSeq",[1,2,3,4]], ["timeConvert",[1,2,3,4]], ["timetables",[1,2,3,4,5]], ["distTime",[1,2,3,4]], ["translate",[1,2,3,4,5,6]], ["reflect",[1,2,3,4,5]], ["dilate",[1,2,3,4]], ["rotate",[1,2,3,4,5]], ["shapeTrans",[1,2,3,4,5]]] },
      { n: 7, title: "Statistics & Probability", exam: true, prereq: [["fracSimplify",[1,3]], ["pctFDP",[1,2]]], skills: [["dataClassify",[1,2,3,4]], ["freqTables",[1,2,3,4]], ["dataRead",[1,2,3]], ["dataMean",[1,2,3,4,5]], ["dataMode",[1,2,3,4,5,6]], ["dataMedian",[1,2,3,4]], ["dataRange",[1,2,3,4]], ["dataShape",[1,2,3]], ["dataOutliers",[1]], ["probSample",[1,2,3,4,5,6]], ["probLang",[1,2,3,4,5,6,7]], ["probTheory",[1,2,3,4,5,6,7,8,9]], ["probComp",[1,2,3,4]], ["probExp",[1,2,3,4,5,6]], ["probExpect",[1,2,3,4,5,6]], ["probTwoStep",[1,2,3,4,5]]] },
      { n: 8, title: "Measurement", exam: false, note: "This topic is taught after the exam, so it is never on the exam.", prereq: [["timesTables",[1,2,3]], ["decPow10",[1,2,3]], ["squares",[1,2]]], skills: [["measLength",[1,2,3,4,5]], ["measPerim",[1,2,3,4,5,6]], ["measCirc",[1,2,3,4,5]], ["measArc",[1,2]], ["measAreaUnits",[1]], ["measArea",[1,2,3,4,5]], ["measMissing",[1,2,3,4]], ["measComposite",[1,2,3]], ["measVolUnits",[1,2,4,5]], ["measVolRect",[1,2,3,4,5]], ["measVolPrism",[1,2,4]], ["measCap",[1,2,4,5]]] },
    ],
  },
  y7seal: {
    label: "Year 7 SEAL Mathematics", short: "Year 7 SEAL",
    prereq: [["timesTables",[1,2,3]], ["division",[1,2,3]]],
    alts: [
      { n: 1, title: "Integers & Indices", exam: true, skills: [["orderOps",[2,3,4,5]], ["absFact",[1,2,3]], ["division",[5]], ["primeFactor",[2,3,4]], ["hcfLcm",[1,2,3,4,5]], ["roundEst",[1,2,3,4]], ["sigFigs",[1,2]], ["intAddSub",[1,2,3,4]], ["numLine",[3]], ["intMultDiv",[1,2,3,4]], ["intSquareCube",[1,2,3]], ["intOrderOps",[1,2,3,4]], ["squares",[1,2,3]], ["roots",[1,2,3]], ["cubes",[1,2,3]], ["cubeRoots",[1,2,3]], ["indexMult",[1,2,3,4]], ["indexDiv",[1,2,3]], ["indexPow",[1,2,3]], ["negIndices",[1,2,3]], ["sciTo",[1,2,3]], ["sciFrom",[1,2,3]], ["surdAddSub",[3]], ["indexExpand",[1,2,3]], ["algFrac",[5]]] },
      { n: 2, title: "Fractions, Decimals, Rates & Ratios", exam: true, skills: [["fracSimplify",[1,2,4]], ["fracCompare",[1,2,3]], ["fracAddSub",[1,2,3,4,5]], ["fracMultiply",[1,2,3,4]], ["fracDivide",[1,2,3,4]], ["fracOfAmount",[1,2,3,4]], ["mixedToImp",[1,2,3]], ["impToMixed",[1,2,3]], ["fracOrderOps",[1,2,3,4]], ["decExpand",[1,2,3]], ["decToFrac",[1,2,3]], ["fracToDec",[1,2,3,4]], ["compareDec",[4,5]], ["decRound",[1,2,3]], ["sigFigs",[1,2]], ["decAdd",[1,2,3]], ["decSub",[1,2,3]], ["decAddSub",[1,2,3,4]], ["decAddSubNeg",[1,2,3]], ["fdAddSub",[1,2,3]], ["decPow10",[3,4]], ["decMultiply",[1,2,3,4]], ["fdMultiply",[1,2,3]], ["decSquareCube",[1,2,3]], ["decDivide",[1,2,3,4]], ["decMulDivNeg",[1,2,3]], ["decSqCubeRoot",[1,2,3]], ["decOrderOps",[1,2,3,4]], ["ratioSimplify",[1,2,3,5,6]], ["ratioEquiv",[1,2,3,4]], ["ratioShare",[1,2,3,4,5,6,7]], ["rateSimplify",[1,2]], ["rateConvert",[1,2,3,4]], ["proportion",[1,2,3]], ["bestBuy",[1,2,3]], ["distTime",[1,2,3,4]], ["tableValues",[1,2]], ["decRecurring",[1,2,3]], ["fracIdentify",[1,2,3]], ["division",[4]], ["timetables",[5]], ["timeConvert",[1,2,3,4]]] },
      { n: 3, title: "Algebra & Equations", exam: true, skills: [["fracSimplify",[3]], ["algParts",[1,2,3,4]], ["algWords",[1,2,3,4,5]], ["algSub",[1,2,3,4,5]], ["algLikeTerms",[1,2,3]], ["algMultiply",[1,2,3,4,5]], ["algDivide",[1,2,3,4,5]], ["algFrac",[1,2,3,4,5,6]], ["algExpand",[1,2,3]], ["algExpandTwo",[1,2,3]], ["algExpandBinom",[1,2]], ["algFactorHCF",[1,2]], ["eqOneStepAddSub",[1,2,3,4]], ["eqOneStepMulDiv",[1,2,3,4]], ["eqTwoStep",[1,2,3,4]], ["eqTwoStepFrac",[1,2,3]], ["linearApps",[1,2]], ["eqVarDenom",[1,2,3]], ["eqBothSides",[1,2,3]], ["ineqLinear",[1,2]], ["numLine",[4]], ["algPerim",[1,2,3]], ["rearrange",[1,2]], ["seqWords",[1,2,3,4,5]], ["arithSeq",[1,2,3,4,5]], ["geoSeq",[1,2,3,4]], ["sequences",[1,2,3,4]]] },
      { n: 4, title: "Geometry", exam: true, skills: [["pythagoras",[1,2,3,5]], ["nameShapes",[1,4,5]], ["nameAnglesLines",[1,3,4]], ["eulerRule",[1,2]], ["interiorAngles",[1,2,3]], ["angleRel",[1,2,3,4]], ["angleParallel",[1,2,3,4,5]], ["angleQuad",[1,2,3,4]], ["anglePoly",[1,2,3,4]], ["congruSimilar",[1,2,3,4]]] },
      { n: 5, title: "Finance & Irrational", exam: true, skills: [["numClass",[1,2]], ["surdSimplify",[1,2,3]], ["surdAddSub",[1]], ["surdMultiply",[1]], ["surdDivide",[1]], ["pctDecConv",[2,3]], ["fracPctConv",[1,2,3,4]], ["pctFDP",[1,2,3,4]], ["pctOfAmount",[1,2,3,4]], ["pctExpress",[1,2,3,4,5]], ["pctChange",[1,2,3,4,5]], ["pctReverse",[1,2,3]], ["pctProfitLoss",[1,2]], ["rearrange",[3]], ["quadVerify",[1,2,3]], ["quadSolve",[1,2,3,4]], ["gst",[1,2,3]], ["simpleInterest",[1,2,3,4,5,6]], ["recurrence",[1,2]], ["flatDep",[1,2,3,4,5,6]]] },
      { n: 6, title: "Linear — Graphs & Transformations", exam: true, skills: [["cartesian",[1,2,3,4]], ["linearNonlinear",[1,2]], ["tableValues",[1,2,3,4]], ["intercepts",[1,2,3,4,5]], ["gradientSeg",[1,2,3,4]], ["linearApps",[1,2,3,4]], ["translate",[1,2,3,4,5,6]], ["reflect",[1,2,3,4,5,6]], ["dilate",[1,2,3,4,5]], ["rotate",[1,2,3,4,5,6]], ["combine",[1,2,3,4,5]], ["shapeTrans",[1,2,3,4,5,6]], ["gradEqn",[1,2,3]], ["eqnGraph",[1,2,3]], ["sketchLinear",[1,2,3,4]]] },
      { n: 7, title: "Statistics & Probability", exam: true, prereq: [["fracSimplify",[1,3]], ["pctFDP",[1,2]]], skills: [["dataClassify",[1,2,3,4]], ["freqTables",[1,2,3,4]], ["dataRead",[1,2,3]], ["dataMean",[1,2,3,4,5,6]], ["dataMode",[1,2,3,4,5,6]], ["dataMedian",[1,2,3,4,5,6]], ["dataRange",[1,2,3,4,5]], ["dataShape",[1,2,3]], ["dataOutliers",[1]], ["dataQuartiles",[1,2,3,4,5,6]], ["probSample",[1,2,3,4,5,6]], ["probLang",[1,2,3,4,5,6,7]], ["probTheory",[1,2,3,4,5,6,7,8,9]], ["probComp",[1,2,3,4]], ["probExp",[1,2,3,4,5,6]], ["probExpect",[1,2,3,4,5,6]], ["probTwoStep",[1,2,3,4,5]], ["probComp",[5]], ["probTwoStep",[6,7]], ["probTree",[1,2,3,4,5,6]], ["probTwoWay",[1,2,3,4]], ["probVenn",[1,2,3,4,5]], ["probNotate",[1,2,3,4]], ["probMutEx",[1,2,3,4]], ["probAddRule",[1,2,3]]] },
      { n: 8, title: "Measurement", exam: false, note: "This topic is taught after the exam, so it is never on the exam.", prereq: [["timesTables",[1,2,3]], ["decPow10",[1,2,3]], ["squares",[1,2]]], skills: [["measLength",[1,2,3,4,5]], ["measPerim",[2,3,4,5,6,7]], ["measCirc",[2,3,4,5,6]], ["measArc",[1,2,3,4,5,6]], ["measAreaUnits",[1,2,3]], ["measArea",[1,2,3,4,5]], ["measMissing",[1,2,3,4]], ["measQuad",[1,2,3]], ["measCircArea",[1,2,3,4,5,6]], ["measComposite",[1,2,3,4]], ["measSA",[1,2,3,4,5,6,7]], ["measSACyl",[1,2,3,4]], ["measVolUnits",[1,3,4,5,6,7]], ["measVolRect",[2,3,4,5,6]], ["measVolPrism",[1,2,3,4,5]], ["measVolCyl",[1,2,3,4,5]], ["measCap",[1,2,3,4,5]], ["measCompSolid",[1,2,3]]] },
    ],
  },
  /* v104 (Laura, 12 Oct 2026): YEAR 8 MATHEMATICS (8MAT), mapped from the
     2027 8MAT student booklet, ALT n = Topic n. ALT 7 Geometry is taught
     after the exam, so it is exam:false and stays out of Exam Practice.
     Release 1 used only levels that already existed; v105 adds the ALT 1
     to 3 gap levels, and v106 will add ALTs 4 to 7. Enrichment, Challenge
     and the booklet's Extension items (surface area of cylinders, simple
     interest, multiplying along tree branches) are in no 8MAT ALT until
     the 8MAS teaching order is confirmed. Written in OLD level numbers,
     like the two Year 7 courses: applyLevelOrder re-keys it at load. */
  y8: {
    label: "Year 8 Mathematics", short: "Year 8",
    prereq: [["timesTables",[1,2,3]], ["division",[1,2,3]]],
    alts: [
      { n: 1, title: "Number, Rates & Ratios", exam: true, skills: [["squares",[1,2,3,4]], ["roots",[1,2,3,4]], ["cubes",[1,2]], ["cubeRoots",[1,2]], ["indexExpand",[1,2,3]], ["factorsMultiples",[1,2,3,6]], ["primeFactor",[1,2,3,4]], ["hcfLcm",[1,2,3,5,4]], ["addition",[3,4]], ["subtraction",[3,4]], ["numLine",[3]], ["intAddSub",[1,2,3,4]], ["writtenMult",[1,2,3]], ["division",[5,6]], ["decPow10",[1,2,3]], ["intMultDiv",[1,2,4,3,5,6]], ["intSquareCube",[1,2,3]], ["orderOps",[2,3,4,5]], ["intOrderOps",[1,2,3,4]], ["algSub",[3]], ["roundEst",[3,4]], ["decLeadEst",[1,2,3]], ["ratioEquiv",[1,2,3]], ["ratioSimplify",[1,4,6,2,5,3]], ["ratioShare",[1,2,6,7,3,4,5]], ["mapScale",[1,2,3]], ["rateSimplify",[1,2,3]], ["bestBuy",[1,2,3]], ["rateConvert",[1,2,3,5]], ["speedDistTime",[1,2,3,4]], ["distTime",[1,2,3,4]]] },
      { n: 2, title: "Fractions, Decimals & Percentages", exam: true, skills: [["fracSimplify",[1,4,2,5]], ["fracAddSub",[1,2,3,4]], ["fracMultiply",[1,2,3]], ["fracDivide",[1,2,3]], ["mixedToImp",[1,2,3]], ["impToMixed",[1,2,3]], ["fracOfAmount",[1,2,3,4,5]], ["decAddSub",[1,2,3,4]], ["decAddSubNeg",[1,2,3]], ["decPow10",[1,2,3,4]], ["decMultiply",[5,1,2,3,4]], ["decDivide",[1,2,3,4]], ["decMulDivNeg",[1,2,3]], ["decToFrac",[1,2,3]], ["fracToDec",[1,2,3,4]], ["decRecurring",[1,2,3]], ["decRound",[1,2,3]], ["compareDec",[1,6,2,3,4,5]], ["fracCompare",[1,2,3]], ["fdAddSub",[1,2,3]], ["fdMultiply",[1,2,3,4]], ["fracOrderOps",[1,2,3,4]], ["decOrderOps",[1,2,3,4]], ["pctDecConv",[1,2,3]], ["fracPctConv",[1,2,3,4]], ["pctFDP",[1,2,3,4]], ["pctOfAmount",[1,2,3,4,5]], ["pctExpress",[1,2,3]], ["pctChange",[1,2,3,4,5,6]], ["pctProfitLoss",[1,2]], ["gst",[1,2,3]], ["pctReverse",[1,2,3]]] },
      { n: 3, title: "Algebra & Equations", exam: true, skills: [["algParts",[4,1,2,3]], ["algWords",[1,2,3,4,5,6]], ["algSub",[1,2,3,4,6]], ["algEquiv",[1,2]], ["algLikeTerms",[1,2,3,4]], ["algMultiply",[1,2,5,3,4]], ["algDivide",[1,2,5,3,4]], ["algFrac",[1,2,3,4,6,7]], ["fracSimplify",[3]], ["algExpand",[1,2,3,4,5]], ["algExpandTwo",[1,2,3]], ["algFactorHCF",[1,2,3,4]], ["algPerim",[1,2]], ["indexMult",[1,4,2,3]], ["indexDiv",[1,2,3,4]], ["indexPow",[1,2,3,4]], ["sciTo",[1,2,3]], ["sciFrom",[1,2,3]], ["eqVerify",[1,2]], ["eqOneStepAddSub",[1,2,3,4]], ["eqOneStepMulDiv",[1,2,4,3]], ["eqTwoStep",[1,2,3,4]], ["eqTwoStepFrac",[1,2,3]], ["eqBothSides",[1,2,3]], ["eqMulti",[1,2,3,4]], ["eqWord",[1,2]], ["quadVerify",[1]], ["quadSolve",[1,5]], ["rearrange",[1,2]], ["numLine",[4,5]], ["ineqLinear",[1,2,3,4]]] },
      { n: 4, title: "Measurement & Pythagoras", exam: true, prereq: [["timesTables",[1,2,3]], ["decPow10",[1,2,3]], ["squares",[1,2]], ["roots",[1,2]]], skills: [["measLength",[1,2,3,4,5]], ["measPerim",[1,2,3,4,5,6]], ["measAreaUnits",[1,2,3]], ["measArea",[1,2,3,4,5]], ["measQuad",[1,2,3]], ["measMissing",[1,2,3,4]], ["measCirc",[1,2,3,4,5,6]], ["measCircArea",[1,2,3,4,5]], ["measArc",[1,2,3,4,5,6]], ["measComposite",[1,2,3,4]], ["measSA",[1,2,3,4,5,6]], ["measVolUnits",[1,2,3,4,5]], ["measVolRect",[1,2,3,4,5]], ["measVolPrism",[1,2,4]], ["measVolCyl",[1,2,3]], ["measCap",[1,2]], ["pythagoras",[1,2,5,3]]] },
      { n: 5, title: "Linear Graphs", exam: true, skills: [["cartesian",[1,2,3,4]], ["tableValues",[1,2,3,4]], ["linearNonlinear",[1,2]], ["eqnGraph",[1,2,3]], ["sketchLinear",[1,2,3,4]], ["intercepts",[1,2,3,4,5]], ["gradientSeg",[1,2,3,4]], ["gradEqn",[1,2,3]], ["distTime",[1,2,3,4]], ["linearApps",[1,2,3,4]]] },
      { n: 6, title: "Probability & Statistics", exam: true, prereq: [["fracSimplify",[1,3]], ["pctFDP",[1,2]]], skills: [["dataRead",[1,2,3]], ["freqTables",[1,2,3,4]], ["dataClassify",[1,2,3,4]], ["dataMean",[1,2,3,4,5]], ["dataMedian",[1,2,3,4,5]], ["dataMode",[1,2,3,4,5]], ["dataOutliers",[1]], ["dataRange",[1,2,3,4,5]], ["dataQuartiles",[1,2,3,4,5]], ["dataShape",[1,2,3]], ["probSample",[1,2,3,4,5,6]], ["probLang",[1,2,3,4,5,6,7]], ["probTheory",[1,2,3,4,5,6,7,8,9]], ["probComp",[1,2,3,4,5]], ["probExp",[1,2,3,4,5,6]], ["probExpect",[1,2,3,4,5,6]], ["probTwoStep",[1,2,3,4,5]], ["probTree",[1,2]], ["probVenn",[1,2,3,4,5]], ["probTwoWay",[1,2,3,4]], ["probNotate",[1,2,3,4]], ["probMutEx",[1,2,3,4]]] },
      { n: 7, title: "Geometry", exam: false, note: "This topic is taught after the exam, so it is never on the exam.", skills: [["angleRel",[1,2,3,4]], ["angleParallel",[1,2,5,3,4]], ["interiorAngles",[1,2,3]], ["angleQuad",[1,2,3,4]], ["anglePoly",[1,2,3,4]], ["nameShapes",[2,4,5]], ["eulerRule",[1,2]], ["congruSimilar",[1,2,3,4]], ["translate",[1,2,3,4,5,6]], ["reflect",[1,2,3,4,5,6]], ["rotate",[1,2,3,4,5,6]], ["dilate",[1,2,3,4,5]], ["combine",[1,2,3,4,5]], ["shapeTrans",[1,2,3,4,5,6]], ["timeConvert",[1,2,3,4]]] },
    ],
  },
};



/* ═══════════════════════════════════════════════════════════════════
   v100 (Laura) — LEVELS IN ORDER, EASIEST TO HARDEST
   -------------------------------------------------------------------
   Levels had been APPENDED for four releases running, because appending
   is the storage-safe move: level number is part of the storage key, so
   inserting one re-points every recorded Personal Best on that skill.
   That kept the data safe and let the level cards drift out of order —
   "how many decimal places" (the rule, no arithmetic) sat at Level 5 of
   Multiply Decimals, and "which is in simplest form" sat after algebraic
   fractions.

   Laura's call: the classes have not used the app enough for the stored
   data to outweigh a sensible ladder, and most students start a fresh
   profile anyway. So the levels are reordered, and a student who DOES
   have an old Personal Best on a moved level will see it against a
   different question type. That is the known, accepted cost.

   HOW IT WORKS. LEVEL_ORDER[lvKey] lists the OLD level numbers in their
   NEW order. Everything a student or a teacher sees uses the NEW number:
   the level cards, the storage keys, the bands, the .bas rows and the ALT
   pools. Only the GENERATORS still speak the old numbering, and they are
   handed it for the length of one question by nextQCore. That is why the
   generators did not have to be reopened — the same discipline as every
   release since v93, applied to numbering instead of content.

   TO REORDER A SKILL LATER: add a line here. Nothing else changes.
═══════════════════════════════════════════════════════════════════ */

/* ── v101 PROBABILITY — PLACEHOLDER BANDS ───────────────────────────────
   Written out per level rather than left to the thirds-of-Lion formula, so
   every one is a number somebody can see and argue with. NONE of these has
   seen a class yet: they are first estimates of a Lion ceiling for each
   level (bands = thirds of it, Cheetah = Antelope + 1), and the whole strand
   needs a CPM recalibration once a class has run through it.
   Format [Kangaroo max, Greyhound max, Lion max, Antelope max].             */
Object.assign(BAND_OVERRIDE, {
  probSample_L1: [5, 10, 15, 21],
  probSample_L2: [5, 9, 14, 20],
  probSample_L3: [4, 9, 13, 18],
  probSample_L4: [4, 8, 12, 17],
  probSample_L5: [2, 4, 6, 8],
  probSample_L6: [3, 7, 10, 14],
  probLang_L1: [5, 9, 14, 20],
  probLang_L2: [5, 10, 15, 21],
  probLang_L3: [4, 9, 13, 18],
  probLang_L4: [4, 9, 13, 18],
  probLang_L5: [3, 7, 10, 14],
  probLang_L6: [2, 4, 6, 8],
  probLang_L7: [2, 5, 7, 10],
  probTheory_L1: [4, 8, 12, 17],
  probTheory_L2: [4, 7, 11, 15],
  probTheory_L3: [3, 6, 9, 13],
  probTheory_L4: [3, 5, 8, 11],
  probTheory_L5: [3, 5, 8, 11],
  probTheory_L6: [3, 7, 10, 14],
  probTheory_L7: [3, 6, 9, 13],
  probTheory_L8: [3, 5, 8, 11],
  probTheory_L9: [3, 5, 8, 11],
  probComp_L1: [5, 11, 16, 22],
  probComp_L2: [5, 11, 16, 22],
  probComp_L3: [5, 11, 16, 22],
  probComp_L4: [4, 8, 12, 17],
  probComp_L5: [3, 7, 10, 14],
  probExp_L1: [3, 5, 8, 11],
  probExp_L2: [3, 5, 8, 11],
  probExp_L3: [3, 5, 8, 11],
  probExp_L4: [2, 5, 7, 10],
  probExp_L5: [3, 6, 9, 13],
  probExp_L6: [3, 6, 9, 13],
  probExpect_L1: [4, 8, 12, 17],
  probExpect_L2: [3, 6, 9, 13],
  probExpect_L3: [3, 7, 10, 14],
  probExpect_L4: [3, 6, 9, 13],
  probExpect_L5: [3, 5, 8, 11],
  probExpect_L6: [3, 6, 9, 13],
  probTwoStep_L1: [5, 9, 14, 20],
  probTwoStep_L2: [3, 5, 8, 11],
  probTwoStep_L3: [3, 6, 9, 13],
  probTwoStep_L4: [2, 5, 7, 10],
  probTwoStep_L5: [2, 5, 7, 10],
  probTwoStep_L6: [2, 4, 6, 8],
  probTwoStep_L7: [2, 3, 5, 7],
  probTree_L1: [4, 9, 13, 18],
  probTree_L2: [3, 7, 10, 14],
  probTree_L3: [3, 5, 8, 11],
  probTree_L4: [2, 5, 7, 10],
  probTree_L5: [2, 4, 6, 8],
  probTree_L6: [2, 3, 5, 7],
  probTwoWay_L1: [1, 3, 4, 6],
  probTwoWay_L2: [3, 5, 8, 11],
  probTwoWay_L3: [2, 5, 7, 10],
  probTwoWay_L4: [2, 4, 6, 8],
  probTwoWay_L5: [2, 4, 6, 8],
  probVenn_L1: [3, 6, 9, 13],
  probVenn_L2: [2, 3, 5, 7],
  probVenn_L3: [2, 5, 7, 10],
  probVenn_L4: [2, 5, 7, 10],
  probVenn_L5: [3, 6, 9, 13],
  probVenn_L6: [1, 3, 4, 6],
  probNotate_L1: [4, 9, 13, 18],
  probNotate_L2: [5, 9, 14, 20],
  probNotate_L3: [5, 9, 14, 20],
  probNotate_L4: [4, 7, 11, 15],
  probMutEx_L1: [4, 7, 11, 15],
  probMutEx_L2: [3, 6, 9, 13],
  probMutEx_L3: [3, 5, 8, 11],
  probMutEx_L4: [3, 5, 8, 11],
  probAddRule_L1: [2, 4, 6, 8],
  probAddRule_L2: [2, 4, 6, 8],
  probAddRule_L3: [2, 3, 5, 7],
  probAddRule_L4: [3, 5, 8, 11],
  probCond_L1: [2, 4, 6, 8],
  probCond_L2: [2, 4, 6, 8],
  probCond_L3: [2, 5, 7, 10],
  probCond_L4: [3, 7, 10, 14],
  probCond_L5: [2, 3, 5, 7],
});

/* ═══════════════════════════════════════════════════════════════════
   v102 (Laura) · 📏 MEASUREMENT, RELEASE A: LENGTH, PERIMETER, CIRCLES & AREA
   -------------------------------------------------------------------
   Everything the ten Release A skills need OUTSIDE their generators, in one
   place: level cards, year chips, recall/method flags, mode
   recommendations and the placeholder bands. Release B (surface area,
   volume, capacity) adds a second block below this one.
   Every lvKey is ms…, checked against LEVEL_DEFS before use (rule 2d);
   test_v102.js asserts none of them collides with an existing key.
   Student-facing text avoids em dashes (Laura's house preference); the
   "Level n — Title" card format is the app-wide convention and is kept.
═══════════════════════════════════════════════════════════════════ */
const MS_PRE_KEYS = Object.keys(LEVEL_DEFS);
Object.assign(LEVEL_DEFS, {
  msln: [
    { title:'Level 1 — Choose the Unit', desc:'Pick the most sensible unit (millimetres, centimetres, metres or kilometres) to measure an everyday length.', examples:['an ant → mm', 'a pencil → cm', 'a swimming pool → m', 'Melbourne to Sydney → km'] },
    { title:'Level 2 — Convert to a Smaller Unit', desc:'Big unit to small unit means MORE of them, so multiply. 1 m = 100 cm, 1 cm = 10 mm, 1 km = 1000 m.', examples:['3.4 m → 340 cm', '6.2 cm → 62 mm', '0.85 km → 850 m'] },
    { title:'Level 3 — Convert to a Larger Unit', desc:'Small unit to big unit means FEWER of them, so divide. 100 cm = 1 m, 10 mm = 1 cm, 1000 m = 1 km.', examples:['850 mm → 0.85 m', '45 mm → 4.5 cm', '6500 m → 6.5 km'] },
    { title:'Level 4 — Two-Step Conversions', desc:'Kilometres to centimetres or millimetres and back. Go through metres: km → m (× 1000), then m → cm (× 100).', examples:['2.5 km → 250 000 cm', '185 000 cm → 1.85 km', '3 km → 3 000 000 mm'] },
    { title:'Level 5 — Order Mixed Units', desc:'Put four lengths in order from shortest to longest. Change them all to the same unit first.', examples:['280 mm, 35 cm, 4 m', '750 m, 0.6 km, 90 000 cm'] },
  ],
  msper: [
    { title:'Level 1 — Rectangles & Squares', desc:'Perimeter is the distance all the way around. A rectangle has two lengths and two widths; a square has four equal sides.', examples:['8 cm by 5 cm → 26 cm', 'square of side 7 m → 28 m'] },
    { title:'Level 2 — All Sides Labelled', desc:'Add every side length on the diagram. Count the sides as you go so none is missed.', examples:['triangle 5, 7, 9 → 21', 'trapezium 6, 5, 12, 5 → 28'] },
    { title:'Level 3 — Regular Polygons', desc:'The tick marks show every side is the same length. Perimeter = number of sides × side length.', examples:['pentagon of side 4 cm → 20 cm', 'hexagon of side 2.5 m → 15 m'] },
    { title:'Level 4 — Mixed Units', desc:'The sides are in different units. Convert them all to the unit asked for BEFORE you add.', examples:['1.2 m by 45 cm, in cm → 330 cm', '8 cm by 35 mm, in mm → 230 mm'] },
    { title:'Level 5 — Missing Side from the Perimeter', desc:'Work backwards: take the known sides away from the perimeter. For a regular shape, divide by the number of sides.', examples:['rectangle, P = 34, length 12 → width 5', 'regular pentagon, P = 45 → 9'] },
    { title:'Level 6 — Missing Sides on a Rectilinear Shape', desc:'On a shape made of right angles, the short sides on one side add up to the long side opposite. Find both missing lengths.', examples:['long side 10, short side 4 → 6', 'long side 8, short side 3 → 5'] },
    { title:'Level 7 — Sides in a Ratio', desc:'The sides are in a ratio and the perimeter is given. Add the ratio parts (count each side), find one part, then each side.', examples:['rectangle 3 : 2, P = 120 → 36 by 24', 'triangle 2 : 4 : 5, P = 33 → 6, 12, 15'] },
    { title:'Level 8 — Three Sides Known', desc:'Two people each measure three sides of the same rectangle. Together their totals hold every length three times. (Enrichment)', examples:['27 cm and 33 cm → P = 40 cm'] },
  ],
  mscc: [
    { title:'Level 1 — Parts of a Circle', desc:'Name the highlighted part: the centre, a radius, a diameter or the circumference.', examples:['centre to edge → radius', 'edge to edge through the centre → diameter', 'the distance around → circumference'] },
    { title:'Level 2 — Radius and Diameter', desc:'The diameter is twice the radius: d = 2r. The radius is half the diameter: r = d ÷ 2.', examples:['r = 6.5 cm → d = 13 cm', 'd = 18 m → r = 9 m'] },
    { title:'Level 3 — Exact Circumference from the Diameter', desc:'C = πd. Leave π in the answer; that makes it EXACT. Use the π key on the keypad.', examples:['d = 8 cm → 8π cm', 'd = 15 m → 15π m'] },
    { title:'Level 4 — Exact Circumference from the Radius', desc:'C = 2πr, or double the radius and use πd. Check whether you were given the radius or the diameter.', examples:['r = 6 cm → 12π cm', 'd = 10 m → 10π m'] },
    { title:'Level 5 — Circumference to 2 Decimal Places', desc:'Use the π key on your calculator, not 3.14, then round to two decimal places.', examples:['r = 3 cm → 18.85 cm', 'd = 7 m → 21.99 m'] },
    { title:'Level 6 — Radius or Diameter from the Circumference', desc:'Work backwards from C = πd: the number in front of π is the diameter. Halve it for the radius.', examples:['C = 18π cm → d = 18 cm, r = 9 cm'] },
    { title:'Level 7 — Laps & Paths', desc:'Circumference in context: how far is several laps, or the way around the outside of a path? Use the π key and round as asked. (Enrichment)', examples:['12 laps of an 80 m track → 3016 m', 'pond 8 m across with a 1 m path → 31.42 m'] },
  ],
  msarc: [
    { title:'Level 1 — The Curved Part Only', desc:'A semicircle’s curve is half a circumference; a quadrant’s is a quarter. Give the curved length exactly, in terms of π.', examples:['semicircle, d = 10 → 5π', 'quadrant, r = 8 → 4π'] },
    { title:'Level 2 — Semicircles & Quadrants to 2 d.p.', desc:'Perimeter = the curved part PLUS the straight edges. A semicircle has one straight edge (the diameter); a quadrant has two radii.', examples:['semicircle, d = 10 → 25.71', 'quadrant, r = 4 → 14.28'] },
    { title:'Level 3 — Semicircles & Quadrants, Exactly', desc:'Write the straight edges as a number and the curve in terms of π.', examples:['semicircle, d = 10 → 10 + 5π', 'quadrant, r = 8 → 16 + 4π'] },
    { title:'Level 4 — Arc Length of a Sector', desc:'An arc is a fraction of the circumference: θ/360 × 2πr. Give it exactly, in terms of π.', examples:['60°, r = 6 → 2π', '135°, r = 8 → 6π'] },
    { title:'Level 5 — Perimeter of a Sector', desc:'The arc plus the two radii: 2r + θ/360 × 2πr. Give it exactly.', examples:['90°, r = 6 → 12 + 3π', '120°, r = 9 → 18 + 6π'] },
    { title:'Level 6 — Straight and Curved Edges', desc:'Add the straight edges you can see to the curved parts. Only count the OUTSIDE edges. Give the answer to two decimal places.', examples:['10 by 6 rectangle with a semicircle on one end → 35.42'] },
    { title:'Level 7 — Angle from the Arc Length', desc:'Work backwards: θ = arc ÷ (2πr) × 360. Round to the nearest degree. (Enrichment)', examples:['r = 10 cm, arc = 15 cm → 86°'] },
  ],
  msua: [
    { title:'Level 1 — Choose the Unit of Area', desc:'Pick the most sensible unit: mm², cm², m², hectares or km².', examples:['a pinhead → mm²', 'a phone screen → cm²', 'a bedroom → m²', 'a farm → ha', 'Victoria → km²'] },
    { title:'Level 2 — mm², cm² and m²', desc:'Square the length conversion: 1 cm² = 10 × 10 = 100 mm², and 1 m² = 100 × 100 = 10 000 cm².', examples:['5 cm² → 500 mm²', '2.4 m² → 24 000 cm²', '630 mm² → 6.3 cm²'] },
    { title:'Level 3 — Hectares and km²', desc:'1 hectare = 10 000 m² (a 100 m by 100 m square). 1 km² = 100 ha = 1 000 000 m².', examples:['45 000 m² → 4.5 ha', '3 km² → 300 ha', '0.8 km² → 800 000 m²'] },
  ],
  msar: [
    { title:'Level 1 — Rectangles & Squares', desc:'A = l × w for a rectangle and A = s² for a square. Area is in SQUARE units.', examples:['8 cm by 5 cm → 40 cm²', 'square of side 7 m → 49 m²'] },
    { title:'Level 2 — Parallelograms', desc:'A = b × h, where h is the PERPENDICULAR height (the dashed line), not the slanted side.', examples:['base 10, height 4, slant 5 → 40'] },
    { title:'Level 3 — Triangles', desc:'A = ½ × b × h. The height is perpendicular to the base; on an obtuse triangle it falls outside the shape.', examples:['base 10, height 6 → 30', 'right-angled 6, 8, 10 → 24'] },
    { title:'Level 4 — Rectangles, Parallelograms & Triangles', desc:'A mix of all three. Choose the formula from the shape, and ignore any length you do not need.', examples:['parallelogram → b × h', 'triangle → ½ × b × h'] },
    { title:'Level 5 — Convert First', desc:'The lengths are in different units. Convert them to the unit the answer needs, THEN find the area.', examples:['90 cm by 1.2 m, in m² → 1.08 m²', 'square of side 0.6 m, in cm² → 3600 cm²'] },
  ],
  msmis: [
    { title:'Level 1 — Missing Side of a Rectangle', desc:'Area = length × width, so the missing side = area ÷ the side you know.', examples:['A = 54 cm², width 6 cm → 9 cm'] },
    { title:'Level 2 — Side of a Square', desc:'The side of a square is the square root of its area.', examples:['A = 81 m² → 9 m', 'A = 144 cm² → 12 cm'] },
    { title:'Level 3 — Height of a Parallelogram', desc:'A = b × h, so h = A ÷ b.', examples:['A = 72 cm², base 9 cm → 8 cm'] },
    { title:'Level 4 — Base or Height of a Triangle', desc:'A = ½ × b × h, so double the area first, then divide by the length you know.', examples:['A = 42 m², base 12 m → 7 m'] },
  ],
  msqd: [
    { title:'Level 1 — Rhombuses & Kites', desc:'A = ½ × x × y, where x and y are the two diagonals.', examples:['diagonals 10 and 6 → 30'] },
    { title:'Level 2 — Trapeziums', desc:'A = ½ × (a + b) × h: add the two PARALLEL sides, multiply by the height, halve.', examples:['parallel sides 4 and 10, height 6 → 42'] },
    { title:'Level 3 — Missing Measurement', desc:'Work backwards from the area formula to find a missing diagonal or the height.', examples:['kite, A = 30, one diagonal 10 → 6', 'trapezium, A = 42, sides 4 and 10 → height 6'] },
  ],
  msac: [
    { title:'Level 1 — Exact Area of a Circle', desc:'A = πr². Square the RADIUS (halve a diameter first) and leave π in the answer.', examples:['r = 5 → 25π', 'd = 12 → 36π'] },
    { title:'Level 2 — Area to 2 Decimal Places', desc:'Use the π key on your calculator, not 3.14, then round to two decimal places.', examples:['r = 3 → 28.27', 'd = 10 → 78.54'] },
    { title:'Level 3 — Semicircles & Quadrants', desc:'Half of πr² for a semicircle, a quarter for a quadrant. Give it exactly.', examples:['semicircle, r = 6 → 18π', 'quadrant, r = 8 → 16π'] },
    { title:'Level 4 — Area of a Sector', desc:'A sector is a fraction of the circle: θ/360 × πr². Give it exactly.', examples:['60°, r = 6 → 6π', '45°, r = 4 → 2π'] },
    { title:'Level 5 — Radius from the Area', desc:'Work backwards from A = πr²: the number in front of π is r², so take its square root.', examples:['A = 49π → r = 7', 'A = 64π → d = 16'] },
    { title:'Level 6 — Angle from the Sector Area', desc:'θ = A ÷ (πr²) × 360. Round to the nearest degree.', examples:['r = 15 cm, A = 100 cm² → 51°'] },
    { title:'Level 7 — Square of Equal Area', desc:'Find the circle’s area; the side of the square with that area is its square root. Two decimal places. (Enrichment)', examples:['r = 6 cm → 10.63 cm'] },
  ],
  mscomp: [
    { title:'Level 1 — L-Shapes by Splitting', desc:'Cut the shape into two rectangles, find each area and add them.', examples:['10 by 8 with a 4 by 3 step → 68'] },
    { title:'Level 2 — Subtract the Part Cut Out', desc:'Find the area of the whole rectangle, then take away the part that is missing: a hole, a corner or the pool inside a path.', examples:['12 by 8 card with a 5 by 3 hole → 81'] },
    { title:'Level 3 — Rectangles and Triangles', desc:'Add the rectangle (l × w) and the triangle (½ × b × h).', examples:['8 by 5 wall with a gable of height 3 → 52'] },
    { title:'Level 4 — With Circle Parts', desc:'Add or take away a semicircle, a quadrant or a circular hole. Use the π key and give two decimal places.', examples:['10 by 6 rectangle with a semicircle on the end → 74.14'] },
  ],
});

/* Year chips: best mapping to VC 2.0 (display only; for Laura to confirm). */
Object.assign(SKILL_YEAR, {
  measLength:'Yr 7', measPerim:'Yr 7', measCirc:'Yr 7–8', measArc:'Yr 8',
  measAreaUnits:'Yr 7–8', measArea:'Yr 7', measMissing:'Yr 7', measQuad:'Yr 8',
  measCircArea:'Yr 8', measComposite:'Yr 7–8'
});

/* Recall levels (🎯 Fluent-eligible): the two length conversions and r ↔ d.
   Everything else in the strand is method. THE ZEROS ARE LOAD-BEARING. */
RECALL_SKILLS.push('measLength', 'measCirc');
Object.assign(FLUENCY_TARGET, {
  measLength:[0, 16, 16, 0, 0],
  measCirc:[0, 20, 0, 0, 0, 0, 0]
});
Object.assign(METHOD_LEVEL_OVERRIDE, {
  measLength:[1, 4, 5],
  measCirc:[1, 3, 4, 5, 6, 7]
});

/* The slow levels: a calculator and two decimal places, or several steps.
   Recommendation only, never blocking. */
Object.assign(LEVEL_REC, {
  msper:  { 7:'practice', 8:'practice' },
  mscc:   { 5:'practice', 7:'practice' },
  msarc:  { 2:'practice', 6:'practice', 7:'practice' },
  msac:   { 2:'practice', 6:'practice', 7:'practice' },
  mscomp: { 4:'practice' }
});

/* ── PLACEHOLDER BANDS ─────────────────────────────────────────────────
   A first estimate of a Lion ceiling per level, written out so every one
   can be seen and argued with. Rows follow the house formula from that
   ceiling L: [round(L/3), round(2L/3), L, round(1.5L) − 1], Cheetah = the
   last + 1. The two recall rows equal their fluency target. None of these
   has seen a class.                                                        */
const MEAS_LION = {
  measLength:    [12, 16, 16, 9, 6],
  measPerim:     [10, 9, 10, 7, 8, 6, 4, 4],
  measCirc:      [14, 20, 10, 9, 5, 9, 4],
  measArc:       [9, 5, 6, 6, 5, 4, 4],
  measAreaUnits: [12, 9, 8],
  measArea:      [10, 8, 8, 8, 5],
  measMissing:   [9, 10, 8, 7],
  measQuad:      [8, 7, 6],
  measCircArea:  [9, 5, 7, 6, 8, 4, 4],
  measComposite: [6, 5, 5, 4]
};
Object.keys(MEAS_LION).forEach(function(s){
  METHOD_BAND_CEIL[s] = MEAS_LION[s].slice();
  MEAS_LION[s].forEach(function(L, i){
    BAND_OVERRIDE[s + '_L' + (i + 1)] = [Math.round(L / 3), Math.round(2 * L / 3), L, Math.round(1.5 * L) - 1];
  });
});

/* ── v102.1 TRANSFORMATION BANDS (Laura, 11 Oct 2026) ─────────────────
   Students and teachers were not getting past Greyhound on any transformation
   skill. Laura signed off on halving every Lion ceiling (floor 3), then the
   house thirds formula. Was: translate/reflect [14,11,12,12,12,8], dilate
   [12,12,12,11,8], rotate [12,8,10,10,9,6], combine [7,5,8,8,5], shapeTrans
   [5,5,8,4,4,3]. Bands are display-only, so no stored data changes.        */
const TRANSFORM_LION = {
  translate:  [7, 6, 6, 6, 6, 4],
  reflect:    [7, 6, 6, 6, 6, 4],
  dilate:     [6, 6, 6, 6, 4],
  rotate:     [6, 4, 5, 5, 5, 3],
  combine:    [4, 3, 4, 4, 3],
  shapeTrans: [3, 3, 4, 3, 3, 3]
};
Object.keys(TRANSFORM_LION).forEach(function(s){
  METHOD_BAND_CEIL[s] = TRANSFORM_LION[s].slice();
  TRANSFORM_LION[s].forEach(function(L, i){
    BAND_OVERRIDE[s + '_L' + (i + 1)] = [Math.round(L / 3), Math.round(2 * L / 3), L, Math.round(1.5 * L) - 1];
  });
});


/* ═══════════════════════════════════════════════════════════════════
   v103 (Laura) · 📏 MEASUREMENT, RELEASE B: SURFACE AREA, VOLUME & CAPACITY
   -------------------------------------------------------------------
   Everything the eight Release B skills need outside their generators.
   Every lvKey is ms…, checked against LEVEL_DEFS before use (rule 2d);
   test_v103.js asserts none collides with a key that existed before this
   block (MSB_PRE_KEYS). Student-facing text avoids em dashes; the
   "Level n — Title" card format is the app-wide convention and is kept.
═══════════════════════════════════════════════════════════════════ */
const MSB_PRE_KEYS = Object.keys(LEVEL_DEFS);
Object.assign(LEVEL_DEFS, {
  mssa: [
    { title:'Level 1 — Cubes', desc:'A cube has 6 identical square faces. Find one face (s × s), then multiply by 6.', examples:['side 5 cm → 150 cm²', 'side 2.5 m → 37.5 m²'] },
    { title:'Level 2 — Rectangular Prisms', desc:'Three pairs of matching faces: SA = 2(lw + lh + wh). Draw the net if it helps.', examples:['8 by 5 by 3 → 158', '10 by 4 by 6 → 248'] },
    { title:'Level 3 — Missing Edge from the Surface Area', desc:'Work backwards. For a cube, divide by 6 then take the square root. For a prism, take away the faces you know first.', examples:['cube, SA = 150 → 5', 'SA = 158, 8 by 3 base → height 5'] },
    { title:'Level 4 — Triangular Prisms', desc:'Two triangles plus three rectangles. The three rectangles are all as long as the prism, so add the triangle’s sides and multiply by the length.', examples:['3-4-5 triangle, length 10 → 132'] },
    { title:'Level 5 — Pythagoras First', desc:'One side of the triangle is not given. Find it with Pythagoras’ theorem, then find the total surface area.', examples:['legs 6 and 8, length 10 → 288'] },
    { title:'Level 6 — Open Boxes & Rooms', desc:'Read which faces are really there: a box with no lid, the four walls of a room, the inside of a pool with no top.', examples:['box with no lid', 'four walls only', 'base and four walls'] },
    { title:'Level 7 — Cost and Coverage', desc:'Find the area first, then the cost (area × price per m²) or the paint (area ÷ coverage, rounded UP to a whole litre).', examples:['48 m² at $46 per m² → $2208', '41.4 m² at 12 m² per L → 4 L'] },
  ],
  mssac: [
    { title:'Level 1 — Curved Surface, Exactly', desc:'The curved surface unrolls into a rectangle 2πr long and h high: curved SA = 2πrh. Give it in terms of π.', examples:['r = 3, h = 10 → 60π'] },
    { title:'Level 2 — Total Surface Area, Exactly', desc:'Two circles plus the curved surface: SA = 2πr² + 2πrh. Add the π terms.', examples:['r = 3, h = 10 → 18π + 60π = 78π'] },
    { title:'Level 3 — Surface Area to 2 Decimal Places', desc:'The total or the curved surface area, rounded to two decimal places. Use the π key, not 3.14.', examples:['r = 4, h = 9, total → 326.73'] },
    { title:'Level 4 — The Ends from the Curved Area', desc:'Use the curved area and the height to find the radius, then the area of one circular end, exactly.', examples:['curved area 80π, h = 10 → r = 4 → 16π'] },
    { title:'Level 5 — Equal Surface Areas', desc:'Two cylinders have the same total surface area. Find the missing height to two decimal places. (Enrichment)', examples:['r = 4, h = 6 and r = 2 → h = 18'] },
  ],
  msvu: [
    { title:'Level 1 — Length, Area or Volume?', desc:'The unit tells you. No power: a length. Squared (²) or hectares: an area. Cubed (³): a volume.', examples:['35 cm² → area', '8 m³ → volume', '1.4 km → length'] },
    { title:'Level 2 — Choose the Unit of Volume', desc:'Pick the most sensible unit: mm³, cm³ or m³.', examples:['a sugar cube → cm³', 'a swimming pool → m³', 'a grain of sand → mm³'] },
    { title:'Level 3 — mm³, cm³ and m³', desc:'Cube the length conversion: 1 cm³ = 10 × 10 × 10 = 1000 mm³, and 1 m³ = 100 × 100 × 100 = 1 000 000 cm³.', examples:['3 cm³ → 3000 mm³', '0.6 m³ → 600 000 cm³'] },
    { title:'Level 4 — Volume to Capacity', desc:'1 cm³ holds 1 mL, 1000 cm³ = 1 L, and 1 m³ = 1000 L = 1 kL.', examples:['250 cm³ → 250 mL', '5000 cm³ → 5 L', '2.5 m³ → 2500 L'] },
    { title:'Level 5 — mL, L and kL', desc:'Each step is × 1000 or ÷ 1000: 1 L = 1000 mL and 1 kL = 1000 L.', examples:['2.4 L → 2400 mL', '6500 L → 6.5 kL'] },
    { title:'Level 6 — Megalitres', desc:'A megalitre (ML) is 1000 kL, which is a million litres. Used for dams and reservoirs.', examples:['3.2 ML → 3200 kL', '4 000 000 L → 4 ML'] },
    { title:'Level 7 — Order Volumes and Capacities', desc:'Put four amounts in order from smallest to largest. Change them all to the same unit first.', examples:['2.5 L, 2400 cm³, 2600 mL', '0.9 kL, 950 L, 0.85 m³'] },
  ],
  msvr: [
    { title:'Level 1 — Count the Cubes', desc:'Each small cube is 1 cm³. Count the cubes in one layer, then multiply by the number of layers.', examples:['4 by 3 layer, 2 layers → 24 cm³'] },
    { title:'Level 2 — Rectangular Prisms', desc:'V = l × w × h. Volume is in CUBIC units.', examples:['8 by 5 by 3 → 120 cm³'] },
    { title:'Level 3 — Cubes', desc:'V = s³. To go backwards from the volume, find the cube root.', examples:['side 6 → 216', 'V = 343 → side 7'] },
    { title:'Level 4 — Decimal Dimensions', desc:'The same formula with decimals. Estimate first so the decimal point lands in the right place.', examples:['2.4 × 1.5 × 2 → 7.2 m³'] },
    { title:'Level 5 — Missing Measurement', desc:'Work backwards: missing length = volume ÷ (the other two lengths multiplied).', examples:['V = 120, 8 by 5 → 3'] },
    { title:'Level 6 — Convert First', desc:'The lengths are in different units. Convert them to the unit the answer needs, THEN multiply.', examples:['80 cm by 1.2 m by 0.5 m → 0.48 m³'] },
    { title:'Level 7 — How Many Different Blocks?', desc:'Count every whole-number block that uses exactly this many unit cubes. List them in order so none is missed. (Enrichment)', examples:['24 cubes → 6 blocks'] },
  ],
  msvp: [
    { title:'Level 1 — Volume = Area × Length', desc:'For ANY prism, V = the area of the end (the cross-section) × the length.', examples:['end area 24 cm², length 10 cm → 240 cm³'] },
    { title:'Level 2 — Triangular Prisms', desc:'Find the triangle first (½ × base × height), then multiply by the length. Ignore a side you do not need.', examples:['base 8, height 6, length 10 → 240'] },
    { title:'Level 3 — Trapezoidal Prisms', desc:'Find the trapezium first: ½ × (a + b) × h. Then multiply by the length.', examples:['sides 4 and 10, height 6, length 5 → 210'] },
    { title:'Level 4 — Missing Length or Area', desc:'V = A × length, so length = V ÷ A and A = V ÷ length.', examples:['V = 600, A = 40 → length 15', 'V = 96, length 8 → A = 12'] },
    { title:'Level 5 — Height of the Triangle', desc:'V = ½ × b × h × length. Put in what you know and solve for the height of the triangle.', examples:['V = 420, length 14, base 10 → height 6'] },
  ],
  msvcy: [
    { title:'Level 1 — Exact Volume', desc:'V = πr²h. Square the radius, multiply by the height, and leave π in the answer.', examples:['r = 3, h = 10 → 90π'] },
    { title:'Level 2 — Volume to 2 Decimal Places', desc:'Use the π key, not 3.14, then round to two decimal places. Halve a diameter first.', examples:['r = 5, h = 8 → 628.32'] },
    { title:'Level 3 — Exact Volume from the Diameter', desc:'Halve the diameter to get the radius, THEN use V = πr²h.', examples:['d = 8, h = 5 → 80π'] },
    { title:'Level 4 — Missing Height', desc:'V = πr²h, so the height = the number in front of π ÷ r².', examples:['V = 100π, r = 5 → h = 4'] },
    { title:'Level 5 — Missing Radius', desc:'Divide the number in front of π by the height to get r², then take the square root.', examples:['V = 100π, h = 4 → r = 5'] },
    { title:'Level 6 — Melted into a Cube', desc:'The volume stays the same. Find the cylinder’s volume, then the cube root for the cube’s side. (Enrichment)', examples:['r = 4, h = 4 → 5.86 cm'] },
  ],
  mscap: [
    { title:'Level 1 — Containers in Litres', desc:'Find the volume in cm³, then divide by 1000: 1000 cm³ = 1 L.', examples:['40 by 25 by 30 cm → 30 L'] },
    { title:'Level 2 — Tanks in Litres or Kilolitres', desc:'Find the volume in m³. 1 m³ = 1000 L = 1 kL.', examples:['2 by 1.5 by 1.2 m → 3.6 m³ → 3600 L'] },
    { title:'Level 3 — Cylindrical Containers', desc:'V = πr²h in cm³, then ÷ 1000 for litres. One decimal place, using the π key.', examples:['r = 25, h = 80 cm → 157.1 L'] },
    { title:'Level 4 — Cost of Filling', desc:'Find the volume in m³, then multiply by the price per cubic metre.', examples:['3 × 1.2 × 0.4 m at $65 per m³ → $93.60'] },
    { title:'Level 5 — How Many Fit?', desc:'Divide the big volume by the small one and round DOWN: only whole boxes or whole people count.', examples:['truck 17.6 m³, boxes 0.25 m³ → 70'] },
    { title:'Level 6 — Fill Time from a Rate', desc:'Find the capacity in litres, then divide by the litres per minute. (Filling and pouring: built for later, kept out of the ALT.)', examples:['3600 L at 30 L per min → 120 minutes'] },
    { title:'Level 7 — Pouring into Another Container', desc:'The volume of water stays the same. Depth in the new container = volume ÷ its base area. (Filling and pouring: built for later, kept out of the ALT.)', examples:['9000 cm³ into a 30 by 25 base → 12 cm'] },
  ],
  mscs: [
    { title:'Level 1 — Two Prisms Joined', desc:'Split the end into two rectangles, add their areas, then multiply by the length. Or find each prism and add.', examples:['L-shaped end of area 68, length 5 → 340'] },
    { title:'Level 2 — A Piece Cut Out', desc:'Find the volume of the whole block, then take away the part that has been cut out.', examples:['12 by 8 by 5 block with a 4 by 3 slot → 420'] },
    { title:'Level 3 — With a Cylinder Part', desc:'Add half a cylinder on top, or take away a round hole. Use the π key and give two decimal places.', examples:['8 by 5 end with a half circle on top, length 10 → 651.33'] },
  ],
});

/* Year chips: best mapping to VC 2.0 (display only; for Laura to confirm). */
Object.assign(SKILL_YEAR, {
  measSA:'Yr 8–9', measSACyl:'Yr 9', measVolUnits:'Yr 7–8', measVolRect:'Yr 7',
  measVolPrism:'Yr 7–8', measVolCyl:'Yr 8–9', measCap:'Yr 7–8', measCompSolid:'Yr 8–9'
});

/* Recall: mL, L and kL (Level 5 of Units of Volume & Capacity), the same
   × 1000 / ÷ 1000 fact as the length conversions. THE ZEROS ARE LOAD-BEARING. */
RECALL_SKILLS.push('measVolUnits');
Object.assign(FLUENCY_TARGET, { measVolUnits:[0, 0, 0, 0, 16, 0, 0] });
Object.assign(METHOD_LEVEL_OVERRIDE, { measVolUnits:[1, 2, 3, 4, 6, 7] });

/* The slow levels. Recommendation only, never blocking. */
Object.assign(LEVEL_REC, {
  mssa:  { 6:'practice', 7:'practice' },
  mssac: { 3:'practice', 5:'practice' },
  msvr:  { 7:'practice' },
  msvcy: { 2:'practice', 6:'practice' },
  mscap: { 3:'practice', 6:'practice', 7:'practice' },
  mscs:  { 3:'practice' }
});

/* ── PLACEHOLDER BANDS (the same formula as Release A) ─────────────── */
const MEASB_LION = {
  measSA:        [10, 7, 6, 5, 4, 5, 4],
  measSACyl:     [8, 6, 5, 5, 3],
  measVolUnits:  [14, 12, 12, 12, 16, 12, 6],
  measVolRect:   [10, 10, 10, 8, 9, 5, 4],
  measVolPrism:  [9, 7, 6, 8, 6],
  measVolCyl:    [8, 5, 7, 7, 6, 3],
  measCap:       [7, 6, 4, 5, 5, 4, 3],
  measCompSolid: [5, 4, 3]
};
Object.keys(MEASB_LION).forEach(function(s){
  METHOD_BAND_CEIL[s] = MEASB_LION[s].slice();
  MEASB_LION[s].forEach(function(L, i){
    BAND_OVERRIDE[s + '_L' + (i + 1)] = [Math.round(L / 3), Math.round(2 * L / 3), L, Math.round(1.5 * L) - 1];
  });
});

const LEVEL_ORDER = {
  div: [
    1,
    2,
    3,
    5,
    4
  ],
  fmp: [
    1,
    5,
    2,
    3,
    4
  ],
  hcflcm: [
    1,
    2,
    3,
    5,
    4
  ],
  intmd: [
    1,
    2,
    4,
    3
  ],
  imul: [
    1,
    4,
    2,
    3
  ],
  fs: [
    1,
    4,
    2,
    3
  ],
  fas: [
    1,
    2,
    3,
    4
  ],
  fmu: [
    1,
    2,
    3
  ],
  fd: [
    1,
    2,
    3
  ],
  cmp: [
    1,
    6,
    2,
    3,
    4,
    5
  ],
  dmu: [
    5,
    1,
    2,
    3,
    4
  ],
  pex: [
    4,
    1,
    2,
    3,
    5
  ],
  rsim: [
    1,
    4,
    6,
    2,
    5,
    3
  ],
  rsh: [
    1,
    2,
    6,
    7,
    3,
    4,
    5
  ],
  rtcv: [
    1,
    2,
    4,
    3
  ],
  aparts: [
    4,
    1,
    2,
    3
  ],
  asub: [
    1,
    2,
    3,
    4,
    6,
    5
  ],
  amul: [
    1,
    2,
    5,
    3,
    4
  ],
  adiv: [
    1,
    2,
    5,
    3,
    4
  ],
  eq2: [
    1,
    2,
    4,
    3
  ],
  nsh: [
    6,
    7,
    1,
    2,
    4,
    5,
    3
  ],
  apl: [
    1,
    2,
    5,
    3,
    4
  ],
  pyth: [
    1,
    2,
    5,
    3,
    4
  ]
};
/* new level number → the level number the GENERATORS use */
function genLevelOf(key, lv){
  const m = LEVEL_ORDER[key];
  return (m && m[lv - 1]) || lv;
}
/* the reverse, for anything expressed in old numbers that has to be moved */
function newLevelOf(key, oldLv){
  const m = LEVEL_ORDER[key];
  if (!m) return oldLv;
  const i = m.indexOf(oldLv);
  return i < 0 ? 0 : i + 1;
}
/* ═══════════════════════════════════════════════════════════════════
   v105 (Laura, Oct 2026) · 🎯 YEAR 8 GAP LEVELS, ALTs 1 TO 3
   -------------------------------------------------------------------
   The 8MAT booklet audit found skill lines in Topics 1 to 3 with nothing
   in the app behind them. This block adds 22 levels to the end of
   existing skills and six new skills (17 levels), all routed from ONE map
   (V105_APPEND for appended levels, V105_SKILLS for new skills) and ONE
   dispatcher (genV105Level), so no existing generator is reopened.
   Storage-safe: appended levels go on the END of their skill (and on the
   end of its LEVEL_ORDER entry, so the new card's display number and its
   generator number are the same); every new lvKey is checked against the
   keys that existed before this block (V105_PRE_KEYS). Student-facing text
   avoids em dashes; the "Level n — Title" card format is the convention.
   Every band here is a PLACEHOLDER (V105_LION, the house thirds formula).
═══════════════════════════════════════════════════════════════════ */
const V105_PRE_KEYS = Object.keys(LEVEL_DEFS);

/* appended levels: skill → { level: input mode } (level = display = generator number) */
const V105_APPEND = {
  factorsMultiples: { 6: 'multiSel' },
  division:         { 6: 'number' },
  intMultDiv:       { 5: 'number', 6: 'number' },
  rateSimplify:     { 3: 'number' },
  rateConvert:      { 5: 'number' },
  fracSimplify:     { 5: 'number' },
  fracOfAmount:     { 5: 'number' },
  pctOfAmount:      { 5: 'number' },
  pctChange:        { 6: 'number' },
  fdMultiply:       { 4: 'decFrac' },
  algLikeTerms:     { 4: 'choice' },
  algExpand:        { 4: 'algType', 5: 'algType' },
  algFrac:          { 7: 'gapFill' },
  algFactorHCF:     { 4: 'algProd' },
  algWords:         { 6: 'choice' },
  indexDiv:         { 4: 'number' },
  indexPow:         { 4: 'algProd' },
  quadSolve:        { 5: 'gapFill' },
  numLine:          { 5: 'choice' },
  ineqLinear:       { 4: 'number' }
};
const V105_APPEND_DEFS = {
  fmp:    [{ title:'Level 6 — Divisibility Tests', desc:'Use the rules, not a calculator: 2 (last digit even), 3 (digit sum divides by 3), 4 (last two digits), 5 (ends in 0 or 5), 6 (both 2 and 3), 9 (digit sum divides by 9), 10 (ends in 0). Tick every one that works.', examples:['528 → 2, 3, 4, 6', '315 → 3, 5, 9'] }],
  div:    [{ title:'Level 6 — Long Division by a Two-Digit Number', desc:'Divide by a number from 11 to 25. Work left to right: how many times does it go in, write the remainder, bring down the next digit.', examples:['4215 ÷ 15 → 281', '3496 ÷ 19 → 184'] }],
  intmd:  [{ title:'Level 5 — Three or More Integers', desc:'Work left to right. Count the negatives first: an even number of them gives a positive answer, an odd number gives a negative one.', examples:['(−2) × 3 × (−4) → 24', '(−48) ÷ (−2) ÷ 3 → 8'] },
           { title:'Level 6 — Word Problems', desc:'Falls, drops, losses and descents are negative. Decide whether to multiply or divide, then use the sign rules.', examples:['falls $3 a day for 5 days → −15', 'lost 42 points at 6 a wrong answer → 7'] }],
  rtsim:  [{ title:'Level 3 — Average Rates', desc:'An average rate is the TOTAL amount ÷ the TOTAL time. Add up every part of the trip first, never average the two rates.', examples:['30 km in 2 h, then 20 km in 1 h → 50 ÷ 3', '6, 4, 5 and 5 cm in 4 weeks → 5 cm per week'] }],
  rtcv:   [{ title:'Level 5 — Two Rates Together', desc:'Work out each rate on its own and add them, or find the combined rate first: two taps together fill at the SUM of their rates; a leak takes its rate away.', examples:['6 L/min and 9 L/min fill 300 L → 20 min', '$25/h for 30 h + $40/h for 8 h → $1070'] }],
  fs:     [{ title:'Level 5 — Equivalent Fractions', desc:'Whatever you multiply the bottom by, multiply the top by the same number (and the other way round). Find the multiplier first.', examples:['2/5 = ?/20 → 8', '3/4 = 27/? → 36'] }],
  foa:    [{ title:'Level 5 — Increase or Decrease by a Fraction', desc:'To increase by a fraction, multiply by (1 + the fraction). To decrease, multiply by (1 − the fraction).', examples:['increase $10 by 2/5 → $14', 'decrease 60 by 1/4 → 45'] }],
  poa:    [{ title:'Level 5 — Find the Whole from a Part', desc:'You know a percentage of the amount. Divide by the percentage to find 1%, then multiply by 100.', examples:['12% is $90 → $750', '30% of a year level is 66 students → 220'] }],
  pcd:    [{ title:'Level 6 — Find the Percentage Change', desc:'Percentage change = change ÷ ORIGINAL amount × 100. Always divide by the amount you started with.', examples:['$40 → $50 is a 25% increase', '25 000 → 22 000 is a 12% decrease'] }],
  fdm:    [{ title:'Level 4 — Divide Fractions & Decimals', desc:'Change the decimal to a fraction (0.4 = 2/5), then keep, change, flip. A recurring answer must be given as a fraction.', examples:['3/4 ÷ 0.5 → 1.5', '2/3 ÷ 0.4 → 5/3'] }],
  alike:  [{ title:'Level 4 — Spot the Like Terms', desc:'Like terms have exactly the same letters with exactly the same powers. The number in front does not matter.', examples:['like 3x²y: −5x²y, not 3xy²'] }],
  aexp:   [{ title:'Level 4 — Negative Outside the Bracket', desc:'Multiply the negative by EVERY term inside. A negative times a negative is a positive, and −(x + 8) means −1 × (x + 8).', examples:['−3(x + 2) → −3x − 6', '−4(2x − 3) → −8x + 12'] },
           { title:'Level 5 — Write and Expand', desc:'Write the story as a number times a bracket, then expand it. Type the expanded answer.', examples:['4 tickets at $(x + 5) → 4x + 20', 'rectangle (3x + 1) by 4 → 12x + 4'] }],
  afrac:  [{ title:'Level 7 — Bracketed Numerators', desc:'Write both fractions over the lowest common denominator, multiply out each top, collect like terms. When you subtract, the minus goes on EVERY term of the second top.', examples:['(x + 2)/3 + (x − 1)/4 → (7x + 5)/12'] }],
  afh:    [{ title:'Level 4 — HCF of Two Terms', desc:'Take the HCF of the numbers, then every letter that is in BOTH terms, to its lower power.', examples:['8ab and 12a → 4a', '6x and 9 → 3'] }],
  awords: [{ title:'Level 6 — Words → Equation', desc:'Choose the equation that says what the words say. "Is", "equals" and "the result is" all become =. Do not solve it.', examples:['three times a number, less 2, equals 13 → 3x − 2 = 13'] }],
  idiv:   [{ title:'Level 4 — The Zero Index', desc:'Anything (except 0) to the power 0 is 1. Watch the brackets: 5a⁰ = 5 × 1 = 5, but (5a)⁰ = 1.', examples:['5a⁰ → 5', '5a⁰ + (3b)⁰ → 6', 'x⁴ ÷ x⁴ → 1'] }],
  ipow:   [{ title:'Level 4 — Mixed Index Laws', desc:'Powers of a power first, then multiply (add the indices), then divide (subtract them). Deal with the numbers separately. Type the whole answer.', examples:['x² × x⁴ ÷ x³ → x³', '(2x²)³ ÷ 4x³ → 2x³'] }],
  qsol:   [{ title:'Level 5 — Rearrange First', desc:'Get x² on its own: undo the + or − first, then divide by the number in front. Then take the square root, positive AND negative.', examples:['x² − 4 = 21 → x = 5 or −5', '2x² − 3 = 29 → x = 4 or −4'] }],
  nline:  [{ title:'Level 5 — Read the Inequality', desc:'An open circle means the number is NOT included (< or >). A closed circle means it is (≤ or ≥). The arrow points to all the other values.', examples:['open circle at 3, arrow right → x > 3'] }],
  ineq:   [{ title:'Level 4 — Word Problems', desc:'"At least" is ≥, "at most" is ≤, "more than" is >, "fewer than" is <. Solve it, then give the whole number the question asks for.', examples:['$50 at $8 a ticket → 6 tickets'] }]
};

/* new skills: category, the skill it sits after (or before), and its levels */
const V105_SKILLS = [
  { cat:'ratiosrates', after:'ratioShare',  meta:{ id:'mapScale', name:'Scale Drawings &amp; Maps', inputMode:'number', lvKey:'rtscl' }, year:'Yr 7–8' },
  { cat:'ratiosrates', after:'rateConvert', meta:{ id:'speedDistTime', name:'Speed, Distance &amp; Time', inputMode:'number', lvKey:'sdt' }, year:'Yr 8' },
  { cat:'algebra',     after:'algSub',      meta:{ id:'algEquiv', name:'Expressions, Equations &amp; Identities', inputMode:'choice', lvKey:'aeqi' }, year:'Yr 8' },
  { cat:'equations',   before:'eqOneStepAddSub', meta:{ id:'eqVerify', name:'Checking Solutions', inputMode:'choice', lvKey:'eqv' }, year:'Yr 7–8' },
  { cat:'equations',   after:'eqBothSides', meta:{ id:'eqMulti', name:'Multi-Step Equations', inputMode:'number', lvKey:'eqm' }, year:'Yr 8' },
  { cat:'equations',   after:'eqMulti',     meta:{ id:'eqWord', name:'Equation Word Problems', inputMode:'number', lvKey:'eqw', levelModes:{ 2:'gapFill' } }, year:'Yr 8' }
];
const V105_SKILL_DEFS = {
  rtscl: [
    { title:'Level 1 — Scale to Real Length', desc:'A scale of 1 : 200 means 1 cm on the plan is 200 cm in real life. Multiply by the scale, then change cm to metres (÷ 100).', examples:['1 : 200, 6 cm → 12 m'] },
    { title:'Level 2 — Map Distances in Kilometres', desc:'Multiply the map distance by the scale to get centimetres, then ÷ 100 000 for kilometres (100 cm in a metre, 1000 m in a kilometre).', examples:['1 : 25 000, 8 cm → 2 km'] },
    { title:'Level 3 — Real Length to the Map', desc:'Work backwards: change the real distance to centimetres, then DIVIDE by the scale.', examples:['1 : 50 000, 3 km → 6 cm'] }
  ],
  sdt: [
    { title:'Level 1 — Find the Speed', desc:'Speed = distance ÷ time. km and hours give km/h; metres and seconds give m/s.', examples:['480 km in 6 h → 80 km/h', '200 m in 25 s → 8 m/s'] },
    { title:'Level 2 — Find the Distance', desc:'Distance = speed × time. Check the units match: km/h with hours, m/s with seconds.', examples:['90 km/h for 4 h → 360 km', '50 km/h for 2.5 h → 125 km'] },
    { title:'Level 3 — Find the Time', desc:'Time = distance ÷ speed.', examples:['300 km at 75 km/h → 4 h', '100 m at 5 m/s → 20 s'] },
    { title:'Level 4 — Hours and Minutes', desc:'Times that are not whole hours. Change minutes to hours (30 min = 0.5 h), or hours to minutes (× 60) when the answer is in minutes.', examples:['45 km at 18 km/h → 150 min', '9:00 am to 11:30 am at 70 km/h → 175 km'] }
  ],
  aeqi: [
    { title:'Level 1 — Expression, Equation, Formula or Identity?', desc:'An expression has no equals sign. An equation is true for particular values. A formula links two or more variables. An identity is true for EVERY value.', examples:['2a → expression', '2a + 4 = 10 → equation', 'A = lw → formula', '3(x + 2) = 3x + 6 → identity'] },
    { title:'Level 2 — Equivalent or Not?', desc:'Equivalent expressions give the same value for every value of the pronumeral. Simplify both, or try a number: one mismatch proves they are not equivalent.', examples:['2(x + 3) and 2x + 6 → equivalent', 'x × x and 2x → not'] }
  ],
  eqv: [
    { title:'Level 1 — True or False?', desc:'Substitute the value into the equation. If both sides come out equal, it is a solution.', examples:['x = 4 in 2x + 1 = 9 → yes', 'x = 3 in 5x − 2 = 12 → no'] },
    { title:'Level 2 — Which Value Is the Solution?', desc:'Four values, one equation. Substitute each one into BOTH sides; only one makes them equal.', examples:['3x + 2 = x + 10 → x = 4'] }
  ],
  eqm: [
    { title:'Level 1 — Collect Like Terms First', desc:'Simplify the side with several x terms first, then solve with inverse operations.', examples:['2x + 3x = 20 → 4', '4x + 2 − x = 11 → 3'] },
    { title:'Level 2 — Brackets on One Side', desc:'Expand the bracket first (or divide both sides by the number outside), then solve.', examples:['3(x + 2) = 15 → 3', '2(x − 4) + 5 = 13 → 8'] },
    { title:'Level 3 — Brackets on Both Sides', desc:'Expand every bracket, collect the x terms on one side and the numbers on the other, then solve.', examples:['2(x + 1) = x + 7 → 5', '3(2a − 3) = 5(a + 2) → 19'] },
    { title:'Level 4 — Fractions on Both Sides', desc:'Multiply EVERY term by the lowest common denominator to clear the fractions, then solve what is left.', examples:['x/2 = (x + 3)/4 → 3', 'x/3 + 1 = x/2 → 6'] }
  ],
  eqw: [
    { title:'Level 1 — Unknown on Both Sides', desc:'Two amounts that both contain the unknown. Write each side, set them equal, then solve.', examples:['5 times a number = the number + 12 → 3', 'Plan A $10 + $2/GB, Plan B $4 + $4/GB → 3 GB'] },
    { title:'Level 2 — Two Related Unknowns', desc:'Write one unknown in terms of the other, form ONE equation, solve it, then find both. Type the smaller first.', examples:['add to 20, one is 4 more → 8 and 12', 'father 3 times son, together 48 → 12 and 36'] }
  ]
};

/* placeholder Lion ceilings (house formula [L/3, 2L/3, L, 1.5L − 1]) */
const V105_LION = {
  factorsMultiples:{ 6:6 }, division:{ 6:4 }, intMultDiv:{ 5:10, 6:6 }, rateSimplify:{ 3:6 }, rateConvert:{ 5:5 },
  fracSimplify:{ 5:14 }, fracOfAmount:{ 5:7 }, pctOfAmount:{ 5:6 }, pctChange:{ 6:5 }, fdMultiply:{ 4:5 },
  algLikeTerms:{ 4:14 }, algExpand:{ 4:8, 5:6 }, algFrac:{ 7:4 }, algFactorHCF:{ 4:10 }, algWords:{ 6:9 },
  indexDiv:{ 4:14 }, indexPow:{ 4:7 }, quadSolve:{ 5:6 }, numLine:{ 5:14 }, ineqLinear:{ 4:5 },
  mapScale:{ 1:8, 2:6, 3:5 }, speedDistTime:{ 1:9, 2:9, 3:8, 4:5 },
  algEquiv:{ 1:12, 2:10 }, eqVerify:{ 1:10, 2:6 }, eqMulti:{ 1:8, 2:7, 3:5, 4:4 }, eqWord:{ 1:5, 2:4 }
};

(function v105Register(){
  /* rule 2b/2c/2d guards: an appended level must land exactly one past the end,
     on a key no other skill shares; a new key must be new. */
  const keyOf = {}; const keyCount = {};
  for (const ck in CATS) CATS[ck].skills.forEach(function(s){ keyOf[s.id] = s.lvKey; keyCount[s.lvKey] = (keyCount[s.lvKey] || 0) + 1; });
  Object.keys(V105_APPEND).forEach(function(sid){
    const key = keyOf[sid], defs = LEVEL_DEFS[key], add = V105_APPEND_DEFS[key];
    const first = Math.min.apply(null, Object.keys(V105_APPEND[sid]).map(Number));
    if (!defs || !add || keyCount[key] !== 1 || defs.length !== first - 1) throw new Error('v105: cannot append to ' + sid);
    add.forEach(function(d){ defs.push(d); });
    const meta = (function(){ for (const ck in CATS){ const f = CATS[ck].skills.find(function(s){ return s.id === sid; }); if (f) return f; } })();
    meta.levelModes = Object.assign({}, meta.levelModes || {}, V105_APPEND[sid]);
    if (LEVEL_ORDER[key]) Object.keys(V105_APPEND[sid]).forEach(function(lv){ LEVEL_ORDER[key].push(Number(lv)); });
    if (RECALL_SKILLS.indexOf(sid) >= 0) {
      METHOD_LEVEL_OVERRIDE[sid] = (METHOD_LEVEL_OVERRIDE[sid] || []).concat(Object.keys(V105_APPEND[sid]).map(Number));
    }
  });
  V105_SKILLS.forEach(function(n){
    if (V105_PRE_KEYS.indexOf(n.meta.lvKey) >= 0 || keyOf[n.meta.id]) throw new Error('v105: key or id already used ' + n.meta.lvKey);
    LEVEL_DEFS[n.meta.lvKey] = V105_SKILL_DEFS[n.meta.lvKey];
    const list = CATS[n.cat].skills;
    const at = n.after ? list.findIndex(function(s){ return s.id === n.after; }) + 1 : list.findIndex(function(s){ return s.id === n.before; });
    if (at < 0) throw new Error('v105: no anchor for ' + n.meta.id);
    list.splice(at, 0, n.meta);
    SKILL_YEAR[n.meta.id] = n.year;
  });
  Object.keys(V105_LION).forEach(function(sid){
    const isNew = V105_SKILLS.some(function(n){ return n.meta.id === sid; });
    if (isNew) METHOD_BAND_CEIL[sid] = Object.keys(V105_LION[sid]).map(function(lv){ return V105_LION[sid][lv]; });
    Object.keys(V105_LION[sid]).forEach(function(lv){
      const L = V105_LION[sid][lv];
      BAND_OVERRIDE[sid + '_L' + lv] = [Math.round(L / 3), Math.round(2 * L / 3), L, Math.round(1.5 * L) - 1];
    });
  });
  /* the slow levels: recommendation only, never blocking */
  Object.assign(LEVEL_REC, { rtscl:{ 2:'practice', 3:'practice' }, sdt:{ 4:'practice' }, eqm:{ 3:'practice', 4:'practice' }, eqw:{ 1:'practice', 2:'practice' } });
  [['div', 6], ['afrac', 7], ['rtcv', 5], ['qsol', 5], ['ineq', 4]].forEach(function(r){
    LEVEL_REC[r[0]] = Object.assign({}, LEVEL_REC[r[0]] || {}); LEVEL_REC[r[0]][r[1]] = 'practice';
  });
})();

function isV105Skill(s){ return V105_SKILLS.some(function(n){ return n.meta.id === s; }); }
function v105Mode(){ const m = V105_APPEND[skill]; return (m && m[level]) || null; }
function isV105Level(){ return isV105Skill(skill) || !!v105Mode(); }

/* ── shared helpers ─────────────────────────────────────────────────── */
function v105Br(n){ return n < 0 ? '(' + sgnNum(n) + ')' : String(n); }
function v105Big(n){ return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }
function v105Num(x){ return String(dp(x, 6)); }
function v105Story(el, text){ wpSetup(el); el.innerHTML = text; }
function v105Ans(v, work){ qData.ans = v; qData.ansDisplay = v105Num(v); qData.workSteps = work; }
function v105Pick(arr){ return arr[ri(arr.length)]; }

function genV105Level(el){
  const f = {
    factorsMultiples: v105Divisibility, division: v105LongDiv2, intMultDiv: v105IntMulti,
    rateSimplify: v105AvgRate, rateConvert: v105TwoRates, fracSimplify: v105EquivFrac,
    fracOfAmount: v105IncByFrac, pctOfAmount: v105WholeFromPart, pctChange: v105PctChange,
    fdMultiply: v105DivFracDec, algLikeTerms: v105SpotLike, algExpand: v105ExpandNeg,
    algFrac: v105BracketNumer, algFactorHCF: v105HcfTerms, algWords: v105WordsEq,
    indexDiv: v105ZeroIndex, indexPow: v105MixedIndex, quadSolve: v105QuadRearrange,
    numLine: v105ReadIneq, ineqLinear: v105IneqWords, mapScale: v105MapScale,
    speedDistTime: v105SDT, algEquiv: v105AlgEquiv, eqVerify: v105EqVerify,
    eqMulti: v105EqMulti, eqWord: v105EqWord
  }[skill];
  return f(el);
}

/* ── ALT 1 ──────────────────────────────────────────────────────────── */
const V105_DIVS = [2, 3, 4, 5, 6, 9, 10];
function v105Divisibility(el){
  let N, yes;
  do {
    N = rr(4, 999) * v105Pick([1, 2, 3, 4, 5, 6, 9, 10, 12, 15, 18, 20, 36, 45]);
    yes = V105_DIVS.filter(function(d){ return N % d === 0; });
  } while (N < 100 || N > 9999 || yes.length === 0 || yes.length === V105_DIVS.length);
  const s = String(N), dsum = s.split('').reduce(function(t, c){ return t + Number(c); }, 0), last2 = N % 100;
  qData.msOptions = V105_DIVS.map(function(d){ return { code:'d' + d, label:'÷ ' + d }; });
  qData.msAns = yes.map(function(d){ return 'd' + d; });
  qData.msInstr = 'Tick every number that divides ' + v105Big(N) + ' exactly.';
  const tick = function(ok){ return ok ? 'yes' : 'no'; };
  qData.workSteps = 'Last digit ' + s.slice(-1) + ': 2 ' + tick(N % 2 === 0) + ', 5 ' + tick(N % 5 === 0) + ', 10 ' + tick(N % 10 === 0) + '.<br>'
    + 'Last two digits ' + last2 + ': 4 ' + tick(N % 4 === 0) + '.<br>'
    + 'Digit sum ' + s.split('').join(' + ') + ' = ' + dsum + ': 3 ' + tick(N % 3 === 0) + ', 9 ' + tick(N % 9 === 0) + '.<br>'
    + '6 needs both 2 and 3: ' + tick(N % 6 === 0) + '.<br>Answer: <b>' + yes.join(', ') + '</b>.';
  el.style.fontSize = '1.2rem';
  el.innerHTML = '<div style="' + A_LBL + '">Use the divisibility rules. Which of these divide the number exactly?</div>'
    + '<div style="font-size:2.4rem;font-weight:900;margin:10px 0;">' + v105Big(N) + '</div>';
}
function v105LongDiv2(el){
  let d, q, N;
  do { d = rr(11, 25); q = rr(21, 499); N = d * q; } while (N < 1000 || N > 9999 || d % 10 === 0);
  const digits = String(N).split('').map(Number), lines = [];
  let r = 0, started = false;
  digits.forEach(function(dg){
    const cur = r * 10 + dg, k = Math.floor(cur / d);
    if (k > 0 || started) { lines.push(cur + ' ÷ ' + d + ' = ' + k + ' remainder ' + (cur - k * d)); started = true; }
    r = cur - k * d;
  });
  v105Ans(q, 'Divide left to right, bringing down the next digit each time:<br>' + lines.join('<br>')
    + '<br>So ' + v105Big(N) + ' ÷ ' + d + ' = <b>' + q + '</b>. Check: ' + q + ' × ' + d + ' = ' + v105Big(N) + '.');
  el.style.fontSize = '2.2rem';
  el.innerHTML = '<div style="' + A_LBL + '">Use long division.</div>' + v105Big(N) + ' ÷ ' + d;
}
function v105IntMulti(el){
  if (level === 6) return v105IntWords(el);
  const nzv = function(m){ return nzrand(-m, m); };
  const nz2 = function(m){ let v; do { v = nzrand(-m, m); } while (Math.abs(v) < 2); return v; };
  let parts, ops, val;
  const form = ri(4);
  if (form === 0) { parts = [nzv(9), nzv(9), nzv(9)]; ops = ['×', '×']; }
  else if (form === 1) { const b = nzv(6), c = nz2(6), k = nzv(9); parts = [k * c, b, c]; ops = ['×', '÷']; }
  else if (form === 2) { const b = nz2(6), k = nzv(6), c = nz2(6); parts = [b * k * c, b, c]; ops = ['÷', '÷']; }
  else { parts = [nzv(5), nzv(5), nzv(4), nzv(3)]; ops = ['×', '×', '×']; }
  if (form === 1 && Math.random() < 0.5) { const b = nz2(6), k = nzv(9), c = nzv(6); parts = [b * k, b, c]; ops = ['÷', '×']; }
  val = parts[0];
  for (let i = 0; i < ops.length; i++) val = ops[i] === '×' ? val * parts[i + 1] : val / parts[i + 1];
  const negs = parts.filter(function(p){ return p < 0; }).length;
  const shown = parts.map(v105Br).reduce(function(s, p, i){ return i === 0 ? p : s + ' ' + ops[i - 1] + ' ' + p; }, '');
  let run = Math.abs(parts[0]), sizeSteps = String(run);
  for (let i = 0; i < ops.length; i++) { run = ops[i] === '×' ? run * Math.abs(parts[i + 1]) : run / Math.abs(parts[i + 1]); sizeSteps += ' ' + ops[i] + ' ' + Math.abs(parts[i + 1]); }
  v105Ans(val, 'Count the negatives: ' + negs + ' (' + (negs % 2 ? 'odd, so the answer is negative' : 'even, so the answer is positive') + ').<br>'
    + 'Size, left to right: ' + sizeSteps + ' = ' + Math.abs(val) + '.<br>Answer: <b>' + sgnNum(val) + '</b>.');
  qData.ansDisplay = sgnNum(val);
  el.style.fontSize = parts.length > 3 ? '1.9rem' : '2.2rem';
  el.textContent = shown;
}
function v105IntWords(el){
  const t = ri(5); let text, ans, work;
  if (t === 0) { const p = rr(2, 9), n = rr(3, 8); ans = -p * n;
    text = 'A share price falls $' + p + ' each day for ' + n + ' days. What is the total change in the price, in dollars? (A fall is negative.)';
    work = 'Each day is −' + p + '. Over ' + n + ' days: ' + n + ' × (−' + p + ') = <b>' + sgnNum(ans) + '</b>.'; }
  else if (t === 1) { const h = rr(3, 9), each = rr(2, 6), T = h * each; ans = -each;
    text = 'The temperature in a freezer dropped a total of ' + T + ' °C over ' + h + ' hours at a steady rate. What was the change each hour, in °C?';
    work = 'The total change is −' + T + '. Shared over ' + h + ' hours: (−' + T + ') ÷ ' + h + ' = <b>' + sgnNum(ans) + '</b>.'; }
  else if (t === 2) { const m = rr(5, 20), n = rr(3, 9); ans = -m * n;
    text = 'A submarine descends ' + m + ' m each minute for ' + n + ' minutes. What is the total change in its height, in metres?';
    work = 'Descending is negative: ' + n + ' × (−' + m + ') = <b>' + sgnNum(ans) + '</b>.'; }
  else if (t === 3) { const p = rr(3, 9), k = rr(4, 12), L = p * k; ans = k;
    text = 'A game takes off ' + p + ' points for each wrong answer. Priya lost ' + L + ' points in total from wrong answers. How many did she get wrong?';
    work = 'Each wrong answer is −' + p + '. (−' + L + ') ÷ (−' + p + ') = <b>' + ans + '</b>.'; }
  else { let A, x, y; do { A = rr(-8, -2); x = rr(-12, -1); y = rr(-3, 6); ans = 3 * A - x - y; } while (ans === x || ans === y || Math.abs(ans) > 20);
    text = 'The average of three temperatures is ' + sgnNum(A) + ' °C. Two of them are ' + sgnNum(x) + ' °C and ' + sgnNum(y) + ' °C. What is the third, in °C?';
    work = 'The three add to 3 × (' + sgnNum(A) + ') = ' + sgnNum(3 * A) + '.<br>' + sgnNum(3 * A) + ' − (' + sgnNum(x) + ') − (' + sgnNum(y) + ') = <b>' + sgnNum(ans) + '</b>.'; }
  v105Ans(ans, work); qData.ansDisplay = sgnNum(ans);
  v105Story(el, text);
}
function v105AvgRate(el){
  const t = ri(3); let text, ans, work;
  if (t === 0) { let g; do { g = [rr(2, 9), rr(2, 9), rr(2, 9), rr(2, 9)]; } while ((g[0] + g[1] + g[2] + g[3]) % 4 !== 0);
    const tot = g[0] + g[1] + g[2] + g[3]; ans = tot / 4;
    text = 'Over 4 weeks a plant grew ' + g.join(' cm, ') + ' cm. Find its average growth rate in cm per week.';
    work = 'Total growth ' + g.join(' + ') + ' = ' + tot + ' cm. Total time 4 weeks.<br>' + tot + ' ÷ 4 = <b>' + ans + '</b> cm per week.'; }
  else if (t === 1) { let a, b, h; do { h = rr(3, 8); ans = rr(40, 90); const tot = ans * h; a = rr(Math.round(tot * 0.3), Math.round(tot * 0.7)); b = tot - a; } while (a === b);
    text = 'A delivery van travels ' + a + ' km in the morning and ' + b + ' km in the afternoon, over a total of ' + h + ' hours. Find its average speed in km/h.';
    work = 'Total distance ' + a + ' + ' + b + ' = ' + (a + b) + ' km. Total time ' + h + ' h.<br>' + (a + b) + ' ÷ ' + h + ' = <b>' + ans + '</b> km/h.'; }
  else { let t1, t2, d1, d2, s1, s2; do { t1 = rr(1, 4); t2 = rr(1, 3); s1 = rr(4, 12) * 5; s2 = rr(4, 12) * 5; d1 = s1 * t1; d2 = s2 * t2; ans = (d1 + d2) / (t1 + t2); } while (s1 === s2 || !Number.isInteger(ans));
    text = 'A cyclist rides ' + d1 + ' km in the first ' + t1 + ' hour' + (t1 > 1 ? 's' : '') + ' and ' + d2 + ' km in the next ' + t2 + ' hour' + (t2 > 1 ? 's' : '') + '. Find the average speed for the whole trip, in km/h.';
    work = 'Total distance ' + d1 + ' + ' + d2 + ' = ' + (d1 + d2) + ' km. Total time ' + t1 + ' + ' + t2 + ' = ' + (t1 + t2) + ' h.<br>' + (d1 + d2) + ' ÷ ' + (t1 + t2) + ' = <b>' + ans + '</b> km/h. (Not the average of the two speeds.)'; }
  v105Ans(ans, work); v105Story(el, text);
}
function v105TwoRates(el){
  const t = ri(5); let text, ans, work;
  if (t === 0) { const a = rr(20, 32), b = a + rr(8, 20), h1 = rr(20, 38), h2 = rr(4, 12); ans = a * h1 + b * h2;
    text = 'A worker earns $' + a + ' per hour on weekdays and $' + b + ' per hour on weekends. One week she works ' + h1 + ' weekday hours and ' + h2 + ' weekend hours. Find her total pay in dollars.';
    work = a + ' × ' + h1 + ' = ' + a * h1 + ' and ' + b + ' × ' + h2 + ' = ' + b * h2 + '.<br>Total: <b>' + ans + '</b> dollars.'; }
  else if (t === 1) { let r1, r2, m; do { r1 = rr(3, 12); r2 = rr(3, 12); m = rr(8, 30); } while (r1 === r2); const V = (r1 + r2) * m; ans = m;
    text = 'Two taps fill a tank. One runs at ' + r1 + ' L/min and the other at ' + r2 + ' L/min. Running together, how many minutes do they take to fill a ' + V + ' L tank?';
    work = 'Together they run at ' + r1 + ' + ' + r2 + ' = ' + (r1 + r2) + ' L/min.<br>' + V + ' ÷ ' + (r1 + r2) + ' = <b>' + ans + '</b> minutes.'; }
  else if (t === 2) { let t1, t2, s1, s2; do { t1 = rr(1, 4); t2 = rr(1, 4); s1 = rr(12, 22) * 5; s2 = rr(12, 22) * 5; } while (s1 === s2); ans = s1 * t1 + s2 * t2;
    text = 'A car travels for ' + t1 + ' hour' + (t1 > 1 ? 's' : '') + ' at ' + s1 + ' km/h and then ' + t2 + ' hour' + (t2 > 1 ? 's' : '') + ' at ' + s2 + ' km/h. Find the total distance travelled, in km.';
    work = s1 + ' × ' + t1 + ' = ' + s1 * t1 + ' km and ' + s2 + ' × ' + t2 + ' = ' + s2 * t2 + ' km.<br>Total: <b>' + ans + '</b> km.'; }
  else if (t === 3) { const i = rr(4, 10) * 5, l = rr(1, 6), m = rr(20, 90), V = (i - l) * m; ans = m;
    text = 'A pool is filled by an inlet at ' + i + ' L/min, but it leaks at ' + l + ' L/min. How many minutes does it take to fill ' + v105Big(V) + ' L?';
    work = 'The leak takes away from the inlet: ' + i + ' − ' + l + ' = ' + (i - l) + ' L/min.<br>' + v105Big(V) + ' ÷ ' + (i - l) + ' = <b>' + ans + '</b> minutes.'; }
  else { let p1, p2, n1, n2; do { p1 = rr(2, 6); p2 = rr(2, 6); n1 = rr(40, 120); n2 = rr(20, 90); } while (p1 === p2); ans = p1 * n1 + p2 * n2;
    text = 'A café makes $' + p1 + ' profit on each coffee and $' + p2 + ' on each tea. In a day it sells ' + n1 + ' coffees and ' + n2 + ' teas. Find the total profit in dollars.';
    work = p1 + ' × ' + n1 + ' = ' + p1 * n1 + ' and ' + p2 + ' × ' + n2 + ' = ' + p2 * n2 + '.<br>Total: <b>' + ans + '</b> dollars.'; }
  v105Ans(ans, work); v105Story(el, text);
}
function v105MapScale(el){
  let text, ans, work;
  if (level === 1) {
    const n = v105Pick([50, 100, 200, 250, 500, 1000]), L = v105Pick([2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 1.5, 2.5, 3.5]);
    ans = L * n / 100;
    const what = v105Pick(['a wall is', 'a room is', 'a fence is', 'a garden bed is', 'a driveway is']);
    text = 'A plan has a scale of 1 : ' + v105Big(n) + '. On the plan, ' + what + ' ' + L + ' cm long. How long is it in real life, in metres?';
    work = L + ' cm × ' + v105Big(n) + ' = ' + v105Big(dp(L * n, 6)) + ' cm.<br>÷ 100 to change cm to m: <b>' + v105Num(ans) + '</b> m.';
  } else if (level === 2) {
    const n = v105Pick([10000, 20000, 25000, 50000, 100000, 200000]), L = v105Pick([2, 3, 4, 5, 6, 8, 10, 12, 1.5, 2.5, 4.5, 7.5]);
    ans = dp(L * n / 100000, 6);
    text = 'A map has a scale of 1 : ' + v105Big(n) + '. Two towns are ' + L + ' cm apart on the map. How far apart are they in real life, in kilometres?';
    work = L + ' cm × ' + v105Big(n) + ' = ' + v105Big(dp(L * n, 6)) + ' cm.<br>÷ 100 000 to change cm to km: <b>' + v105Num(ans) + '</b> km.';
  } else {
    const n = v105Pick([1000, 5000, 10000, 25000, 50000, 100000]), mapCm = v105Pick([2, 3, 4, 5, 6, 8, 10, 12, 1.5, 2.5]);
    const realCm = mapCm * n, inKm = realCm >= 100000;
    const realTxt = inKm ? v105Num(realCm / 100000) + ' km' : v105Num(realCm / 100) + ' m';
    ans = mapCm;
    text = 'A map has a scale of 1 : ' + v105Big(n) + '. A walking track is ' + realTxt + ' long in real life. How long is it on the map, in centimetres?';
    work = realTxt + ' = ' + v105Big(realCm) + ' cm.<br>' + v105Big(realCm) + ' ÷ ' + v105Big(n) + ' = <b>' + v105Num(ans) + '</b> cm.';
  }
  v105Ans(ans, work); v105Story(el, text);
}
function v105SDT(el){
  const kmh = Math.random() < 0.6;
  let text, ans, work;
  if (level === 1) {
    if (kmh) { const s = rr(8, 22) * 5, t = rr(2, 8), d = s * t; ans = s;
      text = 'A ' + v105Pick(['train', 'bus', 'car', 'truck']) + ' travels ' + d + ' km in ' + t + ' hours. Find its average speed in km/h.';
      work = 'Speed = distance ÷ time = ' + d + ' ÷ ' + t + ' = <b>' + ans + '</b> km/h.'; }
    else { const s = rr(2, 12), t = rr(5, 40), d = s * t; ans = s;
      text = 'A ' + v105Pick(['sprinter', 'cyclist', 'swimmer', 'drone']) + ' covers ' + d + ' m in ' + t + ' seconds. Find the average speed in m/s.';
      work = 'Speed = distance ÷ time = ' + d + ' ÷ ' + t + ' = <b>' + ans + '</b> m/s.'; }
  } else if (level === 2) {
    if (kmh) { const s = rr(8, 22) * 5, t = v105Pick([2, 3, 4, 5, 1.5, 2.5, 3.5]); ans = s * t;
      text = 'A car travels at ' + s + ' km/h for ' + t + ' hours. How far does it travel, in km?';
      work = 'Distance = speed × time = ' + s + ' × ' + t + ' = <b>' + v105Num(ans) + '</b> km.'; }
    else { const s = rr(2, 12), t = rr(5, 40); ans = s * t;
      text = 'A ' + v105Pick(['runner', 'cyclist', 'skater']) + ' moves at ' + s + ' m/s for ' + t + ' seconds. How far does it go, in metres?';
      work = 'Distance = speed × time = ' + s + ' × ' + t + ' = <b>' + ans + '</b> m.'; }
  } else if (level === 3) {
    if (kmh) { const s = rr(8, 22) * 5, t = v105Pick([2, 3, 4, 5, 6, 1.5, 2.5]), d = s * t; ans = t;
      text = 'How many hours does it take to travel ' + v105Num(d) + ' km at ' + s + ' km/h?';
      work = 'Time = distance ÷ speed = ' + v105Num(d) + ' ÷ ' + s + ' = <b>' + v105Num(ans) + '</b> hours.'; }
    else { const s = rr(2, 10), t = rr(5, 30), d = s * t; ans = t;
      text = 'How many seconds does it take to cover ' + d + ' m at ' + s + ' m/s?';
      work = 'Time = distance ÷ speed = ' + d + ' ÷ ' + s + ' = <b>' + ans + '</b> seconds.'; }
  } else {
    if (Math.random() < 0.5) { let s, m; do { s = rr(10, 40); m = v105Pick([30, 40, 45, 50, 75, 90, 100, 120, 150, 180]); } while ((s * m) % 60 !== 0); const d = s * m / 60; ans = m;
      text = 'A ferry travels ' + d + ' km at ' + s + ' km/h. How many minutes does the trip take?';
      work = 'Time = ' + d + ' ÷ ' + s + ' = ' + v105Num(d / s) + ' hours.<br>× 60 to change to minutes: <b>' + ans + '</b> minutes.'; }
    else { const s = rr(10, 20) * 5, h0 = rr(7, 11), mins = v105Pick([30, 90, 150, 210, 60, 120]), t = mins / 60;
      const end = h0 * 60 + mins, eh = Math.floor(end / 60), em = end % 60;
      const clock = function(h, m){ return (h > 12 ? h - 12 : h) + ':' + (m < 10 ? '0' : '') + m + (h >= 12 ? ' pm' : ' am'); };
      ans = s * t;
      text = 'A bus leaves at ' + clock(h0, 0) + ' and travels at ' + s + ' km/h. How far has it gone by ' + clock(eh, em) + ', in km?';
      work = 'From ' + clock(h0, 0) + ' to ' + clock(eh, em) + ' is ' + mins + ' minutes = ' + v105Num(t) + ' hours.<br>Distance = ' + s + ' × ' + v105Num(t) + ' = <b>' + v105Num(ans) + '</b> km.'; }
  }
  v105Ans(ans, work); v105Story(el, text);
}

/* ── ALT 2 ──────────────────────────────────────────────────────────── */
function v105EquivFrac(el){
  let a, b; do { b = rr(2, 12); a = rr(1, b - 1); } while (gcd(a, b) !== 1);
  const k = rr(2, 9), askTop = Math.random() < 0.6;
  const q = askTop ? fracHTML('?', b * k) : fracHTML(a * k, '?');
  v105Ans(askTop ? a * k : b * k, (askTop
      ? 'The bottom went from ' + b + ' to ' + b * k + ', which is × ' + k + '. Do the same to the top: ' + a + ' × ' + k + ' = <b>' + a * k + '</b>.'
      : 'The top went from ' + a + ' to ' + a * k + ', which is × ' + k + '. Do the same to the bottom: ' + b + ' × ' + k + ' = <b>' + b * k + '</b>.'));
  el.style.fontSize = '2.2rem';
  el.innerHTML = '<div style="' + A_LBL + '">Find the missing number.</div>' + fracHTML(a, b) + ' &nbsp;=&nbsp; ' + q;
}
function v105IncByFrac(el){
  let n, d; do { d = v105Pick([2, 3, 4, 5, 6, 8, 10]); n = rr(1, d - 1); } while (gcd(n, d) !== 1);
  const A = d * rr(2, 15), inc = Math.random() < 0.5, ans = inc ? A * (d + n) / d : A * (d - n) / d;
  const unit = v105Pick([['$', ''], ['', ' kg'], ['', ' points'], ['', ' mL']]);
  const amt = unit[0] + A + unit[1];
  v105Ans(ans, 'Multiplier = 1 ' + (inc ? '+' : '−') + ' ' + n + '/' + d + ' = ' + (inc ? d + n : d - n) + '/' + d + '.<br>'
    + A + ' ÷ ' + d + ' × ' + (inc ? d + n : d - n) + ' = <b>' + ans + '</b>.');
  el.style.fontSize = '1.9rem';
  el.innerHTML = '<div style="' + A_LBL + '">' + (inc ? 'Increase' : 'Decrease') + ' the amount by the fraction.</div>'
    + (inc ? 'Increase ' : 'Decrease ') + amt + ' by ' + fracHTML(n, d);
}
function v105WholeFromPart(el){
  const p = v105Pick([2, 4, 5, 8, 10, 12, 15, 20, 25, 30, 40, 60, 75, 80, 90]);
  const step = 100 / gcd(p, 100), W = step * rr(2, Math.max(3, Math.floor(1200 / step))), P = W * p / 100;
  const t = ri(3); let text;
  if (t === 0) text = p + '% of an amount is $' + v105Big(P) + '. Find the whole amount, in dollars.';
  else if (t === 1) text = p + '% of the students in a year level play a sport. ' + v105Big(P) + ' students play a sport. How many students are in the year level?';
  else text = p + '% of a jar of marbles is ' + v105Big(P) + ' marbles. How many marbles are in the jar?';
  v105Ans(W, p + '% → ' + v105Big(P) + ', so 1% → ' + v105Big(P) + ' ÷ ' + p + ' = ' + v105Num(P / p) + '.<br>100% → ' + v105Num(P / p) + ' × 100 = <b>' + v105Big(W) + '</b>.');
  v105Story(el, text);
}
function v105PctChange(el){
  const p = v105Pick([5, 10, 15, 20, 25, 30, 40, 50, 60, 75, 12, 35]), inc = Math.random() < 0.5;
  if (!inc && p >= 75) return v105PctChange(el);
  const step = 100 / gcd(p, 100), O = step * rr(Math.ceil(10 / step), Math.max(Math.ceil(10 / step) + 2, Math.floor(1000 / step)));
  const N = inc ? O * (100 + p) / 100 : O * (100 - p) / 100, ch = Math.abs(N - O);
  const t = ri(3), money = t !== 2;
  const fmt = function(v){ return money ? '$' + v105Big(v) : v105Big(v); };
  let text;
  if (t === 0) text = 'A price ' + (inc ? 'rises' : 'falls') + ' from ' + fmt(O) + ' to ' + fmt(N) + '. Find the percentage ' + (inc ? 'increase' : 'decrease') + '.';
  else if (t === 1) text = 'Weekly pocket money ' + (inc ? 'goes up' : 'goes down') + ' from ' + fmt(O) + ' to ' + fmt(N) + '. Find the percentage ' + (inc ? 'increase' : 'decrease') + '.';
  else text = 'A town’s population ' + (inc ? 'grows' : 'falls') + ' from ' + fmt(O) + ' to ' + fmt(N) + '. Find the percentage ' + (inc ? 'increase' : 'decrease') + '.';
  v105Ans(p, 'Change = ' + v105Big(N) + ' − ' + v105Big(O) + ' = ' + (inc ? '' : '−') + v105Big(ch) + '.<br>'
    + v105Big(ch) + ' ÷ ' + v105Big(O) + ' (the ORIGINAL) × 100 = <b>' + p + '</b>%.');
  v105Story(el, text + ' Type the number only.');
}
function v105DivFracDec(el){
  const DEC = [[2, 10, '0.2'], [4, 10, '0.4'], [5, 10, '0.5'], [6, 10, '0.6'], [8, 10, '0.8'], [9, 10, '0.9'], [25, 100, '0.25'], [75, 100, '0.75'], [12, 10, '1.2'], [15, 10, '1.5']];
  const FR = [[1, 2], [2, 3], [3, 4], [3, 5], [2, 5], [5, 6], [3, 8], [1, 4], [4, 5], [1, 3]];
  const dc = v105Pick(DEC), fr = v105Pick(FR), decFirst = Math.random() < 0.5;
  /* a ÷ b: (dn/dd) ÷ (fn/fd) or the other way round */
  const [dn, dd] = fdReduce(dc[0], dc[1]);
  const an = decFirst ? dn : fr[0], ad = decFirst ? dd : fr[1], bn = decFirst ? fr[0] : dn, bd = decFirst ? fr[1] : dd;
  const [rn, rd] = fdReduce(an * bd, ad * bn), term = fdTerminates(rd);
  qData.ansNum = rn; qData.ansDen = rd; qData.terminates = term;
  const disp = term ? v105Num(rn / rd) : rn + '/' + rd;
  qData.ansDisplay = disp;
  const aT = decFirst ? dc[2] : fr[0] + '/' + fr[1], bT = decFirst ? fr[0] + '/' + fr[1] : dc[2];
  qData.workSteps = dc[2] + ' = ' + dn + '/' + dd + '.<br>Keep, change, flip: ' + an + '/' + ad + ' × ' + bd + '/' + bn + ' = ' + an * bd + '/' + ad * bn
    + ' = <b>' + disp + '</b>.' + (term ? '' : ' It recurs as a decimal, so give it as a fraction.');
  el.style.fontSize = '2.2rem';
  el.textContent = aT + ' ÷ ' + bT;
}

/* ── ALT 3 ──────────────────────────────────────────────────────────── */
function v105Mono(c, vars){                 /* {x:2, y:1} → "3x²y" as HTML */
  const letters = Object.keys(vars).filter(function(k){ return vars[k] > 0; }).sort();
  const body = letters.map(function(L){ return vars[L] === 1 ? aVar(L) : aPow(L, vars[L]); }).join('');
  const mag = Math.abs(c), cs = (letters.length && mag === 1) ? '' : String(mag);
  return (c < 0 ? '−' : '') + cs + body;
}
function v105MonoTxt(c, vars){             /* the same term as plain text, for option buttons and feedback */
  const letters = Object.keys(vars).filter(function(k){ return vars[k] > 0; }).sort();
  const body = letters.map(function(L){ return vars[L] === 1 ? L : L + aSupChar(vars[L]); }).join('');
  const mag = Math.abs(c), cs = (letters.length && mag === 1) ? '' : String(mag);
  return (c < 0 ? '−' : '') + cs + body;
}
function v105SpotLike(el){
  const L = pickDistinct(['x', 'y', 'a', 'b', 'm', 'n'], 3), p = rr(1, 2), q = 3 - p;
  const tv = {}; tv[L[0]] = p; tv[L[1]] = q;
  const c0 = rr(2, 9);
  const like = {}; like[L[0]] = p; like[L[1]] = q;
  const swap = {}; swap[L[0]] = q; swap[L[1]] = p;
  const both2 = {}; both2[L[0]] = 2; both2[L[1]] = 2;
  const other = {}; other[L[0]] = p; other[L[2]] = q;
  const one = {}; one[L[0]] = p;
  let c1; do { c1 = nzrand(-9, 9); } while (c1 === c0 || Math.abs(c1) === 1);
  const right = v105MonoTxt(c1, like);
  const wrongs = [v105MonoTxt(c0, swap), v105MonoTxt(c0, both2), v105MonoTxt(c0, other), v105MonoTxt(c0, one)].filter(function(w){ return w !== right; });
  const opts = [right].concat(shuffleArr(wrongs).slice(0, 3));
  const lt = [L[0], L[1]].sort(), desc = lt.map(function(x){ return x + (tv[x] > 1 ? ' squared' : ''); }).join(' and ');
  qData.workSteps = 'Like terms need the SAME letters with the SAME powers. ' + v105Mono(c0, tv) + ' has ' + desc + '.<br>Only <b>' + v105Mono(c1, like) + '</b> matches; the number in front can be anything.';
  el.style.fontSize = '1.3rem';
  decSetChoice(el, '<div style="' + A_LBL + '">Which term is a like term with</div><div style="font-size:2.3rem;font-weight:900;margin:10px 0;">' + v105Mono(c0, tv) + '</div>', opts, right, false);
}
function v105ExpandNeg(el){
  const v = v105Pick(['x', 'y', 'a', 'm', 'p']);
  if (level === 5) return v105WriteExpand(el, v);
  const k = rr(1, 6), a = rr(1, 4), b = rr(1, 9), minus = Math.random() < 0.5;
  const c1 = -k * a, c2 = minus ? k * b : -k * b;
  qData.alg = { slots: [{ coeff:c1, varLabel:v, askPower:false }, { coeff:c2, varLabel:'', askPower:false }] };
  const inside = (a === 1 ? '' : a) + aVar(v) + ' ' + (minus ? '−' : '+') + ' ' + b;
  const outside = k === 1 ? '−' : '−' + k;
  qData.workSteps = 'Multiply ' + (k === 1 ? '−1' : '−' + k) + ' by EACH term inside:<br>'
    + (k === 1 ? '−1' : '−' + k) + ' × ' + (a === 1 ? '' : a) + v + ' = ' + v99Term(c1, v, 1) + '<br>'
    + (k === 1 ? '−1' : '−' + k) + ' × ' + (minus ? '(−' + b + ')' : b) + ' = ' + sgnNum(c2) + '<br>Answer: <b>' + algAnswerStr(qData.alg.slots) + '</b>.';
  el.style.fontSize = '2.2rem';
  el.innerHTML = outside + '(' + inside + ')';
}
function v105WriteExpand(el, v){
  const t = ri(4); let k, a, b, minus = false, text;
  if (t === 0) { k = rr(3, 9); a = 1; b = rr(2, 9); text = 'A concert ticket costs $(' + v + ' + ' + b + '). Write and expand an expression for the cost of ' + k + ' tickets.'; }
  else if (t === 1) { k = rr(3, 9); a = 1; b = rr(1, 4); minus = true; text = 'A crate holds (' + v + ' − ' + b + ') oranges. Write and expand an expression for the number of oranges in ' + k + ' crates.'; }
  else if (t === 2) { k = rr(2, 9); a = rr(2, 5); b = rr(1, 9); text = 'A rectangle has length (' + a + v + ' + ' + b + ') cm and width ' + k + ' cm. Write and expand an expression for its area.'; }
  else { k = rr(3, 8); a = rr(2, 4); b = rr(1, 6); minus = Math.random() < 0.5; text = 'Each bag holds (' + a + v + ' ' + (minus ? '−' : '+') + ' ' + b + ') marbles. Write and expand an expression for the number of marbles in ' + k + ' bags.'; }
  qData.alg = { slots: [{ coeff:k * a, varLabel:v, askPower:false }, { coeff:(minus ? -1 : 1) * k * b, varLabel:'', askPower:false }] };
  qData.workSteps = 'Write it as ' + k + '(' + (a === 1 ? '' : a) + v + ' ' + (minus ? '−' : '+') + ' ' + b + ').<br>'
    + k + ' × ' + (a === 1 ? '' : a) + v + ' = ' + (k * a) + v + ' and ' + k + ' × ' + b + ' = ' + k * b + '.<br>Answer: <b>' + algAnswerStr(qData.alg.slots) + '</b>.';
  v105Story(el, text + ' Type the expanded answer.');
}
function v105BracketNumer(el){
  let m, n, a1, b1, a2, b2, sub, L, p, q, g;
  do {
    m = rr(2, 6); n = rr(2, 6); a1 = rr(1, 3); a2 = rr(1, 3); b1 = nzrand(-6, 9); b2 = nzrand(-6, 9); sub = Math.random() < 0.5;
    L = lcm(m, n);
    p = a1 * (L / m) + (sub ? -1 : 1) * a2 * (L / n);
    q = b1 * (L / m) + (sub ? -1 : 1) * b2 * (L / n);
    g = gcd(gcd(Math.abs(p), Math.abs(q)), L);
  } while (m === n || p <= 0 || q <= 0 || g !== 1);
  const top = function(a, b){ return (a === 1 ? '' : a) + 'x ' + (b < 0 ? '− ' + (-b) : '+ ' + b); };
  qData.gapTemplate = ['Top: ', 0, 'x + ', 1, '&nbsp;&nbsp;&nbsp;Bottom: ', 2];
  qData.gapAns = [p, q, L];
  qData.gapHint = 'Fill in the simplified fraction: the top is ▢x + ▢, then the bottom.';
  qData.gapAnsText = '(' + top(p, q) + ')/' + L;
  const e1 = L / m, e2 = L / n;
  qData.workSteps = 'Lowest common denominator: ' + L + '.<br>'
    + e1 + '(' + top(a1, b1) + ') ' + (sub ? '−' : '+') + ' ' + e2 + '(' + top(a2, b2) + ')<br>'
    + '= ' + top(e1 * a1, e1 * b1) + ' ' + (sub ? '− ' : '+ ') + '(' + top(e2 * a2, e2 * b2) + ')<br>'
    + '= <b>(' + top(p, q) + ')/' + L + '</b>.';
  el.style.fontSize = '1.9rem';
  el.innerHTML = '<div style="' + A_LBL + '">Simplify into one fraction.</div>' + fracHTML(top(a1, b1), m) + ' &nbsp;' + (sub ? '−' : '+') + '&nbsp; ' + fracHTML(top(a2, b2), n);
}
function v105HcfTerms(el){
  const letters = pickDistinct(['a', 'b', 'x', 'y', 'm', 'p'], 3);
  let g, c1, c2, v1, v2, h;
  const numberOnly = Math.random() < 0.2;     /* now and then the HCF is just a number (6x and 9 → 3) */
  do {
    g = rr(1, 6); c1 = rr(1, 6); c2 = rr(1, 6);
    v1 = {}; v2 = {}; h = {};
    letters.forEach(function(L, i){
      const r = ri(4);                         /* 0 neither, 1 first only, 2 second only, 3 both */
      if (r === 1 || r === 3) v1[L] = rr(1, 3);
      if (r === 2 || r === 3) v2[L] = rr(1, 3);
      if (r === 3) h[L] = Math.min(v1[L], v2[L]);
    });
  } while (gcd(c1, c2) !== 1 || c1 === c2 || (Object.keys(v1).length + Object.keys(v2).length) === 0
           || (g === 1 && Object.keys(h).length === 0) || (!numberOnly && Object.keys(h).length === 0));
  qData.prodAns = { coeff:g, vars:h };
  const show = function(c, v){ return v105Mono(c, v); };
  const hk = Object.keys(h).sort();
  qData.workSteps = 'HCF of ' + g * c1 + ' and ' + g * c2 + ' = ' + g + '.<br>'
    + (hk.length ? 'Letters in both terms, to the lower power: ' + hk.map(function(L){ return h[L] === 1 ? L : L + aSupChar(h[L]); }).join(', ') + '.' : 'No letter is in both terms.')
    + '<br>HCF: <b>' + prodAnsHtml(qData.prodAns) + '</b>.';
  el.style.fontSize = '1.3rem';
  el.innerHTML = '<div style="' + A_LBL + '">Find the highest common factor of</div><div style="font-size:2.2rem;font-weight:900;margin:10px 0;">'
    + show(g * c1, v1) + ' &nbsp;and&nbsp; ' + show(g * c2, v2) + '</div>';
}
const V105_WORDS = [
  function(n, m){ return { w:'A number plus ' + n + ' is ' + m + '.', r:'x + ' + n + ' = ' + m, bad:['x = ' + n + ' + ' + m, n + 'x = ' + m, 'x − ' + n + ' = ' + m] }; },
  function(n, m){ return { w:'Twice a number is ' + m + '.', r:'2x = ' + m, bad:['x + 2 = ' + m, 'x ÷ 2 = ' + m, 'x² = ' + m] }; },
  function(n, m){ return { w:'A number less ' + n + ' is ' + m + '.', r:'x − ' + n + ' = ' + m, bad:[n + ' − x = ' + m, 'x + ' + n + ' = ' + m, n + 'x = ' + m] }; },
  function(n, m){ return { w:'Half a number is ' + m + '.', r:'x ÷ 2 = ' + m, bad:['2x = ' + m, 'x − 2 = ' + m, '2 ÷ x = ' + m] }; },
  function(n, m){ return { w:'Three times a number, less ' + n + ', equals ' + m + '.', r:'3x − ' + n + ' = ' + m, bad:['3(x − ' + n + ') = ' + m, n + ' − 3x = ' + m, '3x + ' + n + ' = ' + m] }; },
  function(n, m){ return { w:'The sum of a number and ' + n + ' is ' + m + '.', r:'x + ' + n + ' = ' + m, bad:[n + 'x = ' + m, 'x − ' + n + ' = ' + m, 'x = ' + m + ' + ' + n] }; },
  function(n, m){ return { w:n + ' less than a number is ' + m + '.', r:'x − ' + n + ' = ' + m, bad:[n + ' − x = ' + m, 'x + ' + n + ' = ' + m, 'x ÷ ' + n + ' = ' + m] }; },
  function(n, m){ return { w:'A number is multiplied by 3, then ' + n + ' is added. The result is ' + m + '.', r:'3x + ' + n + ' = ' + m, bad:['3(x + ' + n + ') = ' + m, n + 'x + 3 = ' + m, '3x − ' + n + ' = ' + m] }; },
  function(n, m){ return { w:n + ' more than double a number is ' + m + '.', r:'2x + ' + n + ' = ' + m, bad:['2(x + ' + n + ') = ' + m, n + 'x + 2 = ' + m, '2x − ' + n + ' = ' + m] }; },
  function(n, m){ return { w:'Double the sum of a number and ' + n + ' is ' + m + '.', r:'2(x + ' + n + ') = ' + m, bad:['2x + ' + n + ' = ' + m, 'x + 2 × ' + n + ' = ' + m, '2(x − ' + n + ') = ' + m] }; },
  function(n, m){ return { w:'A number divided by ' + n + ' gives ' + m + '.', r:'x ÷ ' + n + ' = ' + m, bad:[n + ' ÷ x = ' + m, n + 'x = ' + m, 'x − ' + n + ' = ' + m] }; }
];
function v105WordsEq(el){
  const n = rr(2, 9), m = rr(11, 30), rec = v105Pick(V105_WORDS)(n, m);
  const opts = [rec.r].concat(rec.bad.filter(function(b, i, A){ return b !== rec.r && A.indexOf(b) === i; }).slice(0, 3));
  qData.workSteps = 'Use x for the number and = for "is", "equals" or "the result is".<br>"' + rec.w + '" → <b>' + rec.r + '</b>.';
  el.style.fontSize = '1.25rem';
  decSetChoice(el, '<div style="' + A_LBL + '">Which equation matches the words? (Do not solve it.)</div><div style="font-weight:800;margin:8px 0;">' + rec.w + '</div>', opts, rec.r, false);
}
function v105ZeroIndex(el){
  const v = v105Pick(['a', 'b', 'x', 'y', 'm']), k = rr(2, 9), j = rr(2, 9), p = rr(2, 7);
  const forms = [
    [aPow(String(rr(2, 99)), 0), 1, 'Anything to the power 0 is 1'],
    [k + aPow(v, 0), k, 'Only the ' + v + ' has the power 0: ' + k + ' × 1 = ' + k],
    ['(' + k + aVar(v) + ')' + '<sup>0</sup>', 1, 'The bracket is to the power 0, so the whole bracket is 1'],
    [k + aPow(v, 0) + ' + (' + j + aVar(v) + ')<sup>0</sup>', k + 1, k + ' × 1 + 1 = ' + (k + 1)],
    [aPow(v, p) + ' ÷ ' + aPow(v, p), 1, 'Subtract the indices: ' + v + '<sup>' + p + ' − ' + p + '</sup> = ' + v + '<sup>0</sup> = 1'],
    [k + aPow(v, 0) + ' + ' + j, k + j, k + ' × 1 + ' + j + ' = ' + (k + j)],
    ['(' + j + aVar(v) + ')<sup>0</sup> × ' + k, k, '1 × ' + k + ' = ' + k],
    [k + aPow(v, p) + ' ÷ ' + aPow(v, p), k, k + v + '<sup>0</sup> = ' + k + ' × 1 = ' + k]
  ];
  const f = v105Pick(forms);
  v105Ans(f[1], f[2] + '.<br>Answer: <b>' + f[1] + '</b>.');
  el.style.fontSize = '2.2rem';
  el.innerHTML = '<div style="' + A_LBL + '">Simplify. The answer is a number.</div>' + f[0];
}
function v105MixedIndex(el){
  const v = v105Pick(['x', 'a', 'y', 'm']);
  const t = ri(4); let html, c = 1, e, work;
  if (t === 0) { const a = rr(2, 6), b = rr(2, 6), cc = rr(1, a + b - 1); e = a + b - cc;
    html = aPow(v, a) + ' × ' + aPow(v, b) + ' ÷ ' + aPow(v, cc); work = 'Add, then subtract the indices: ' + a + ' + ' + b + ' − ' + cc + ' = ' + e + '.'; }
  else if (t === 1) { const a = rr(4, 9), b = rr(1, a - 2), cc = rr(1, 5); e = a - b + cc;
    html = aPow(v, a) + ' ÷ ' + aPow(v, b) + ' × ' + aPow(v, cc); work = 'Left to right: ' + a + ' − ' + b + ' + ' + cc + ' = ' + e + '.'; }
  else if (t === 2) { const k = rr(2, 3), m = rr(1, 3), n = rr(2, 3), p = rr(1, 3); c = Math.pow(k, n); e = m * n + p;
    html = '(' + k + aPow(v, m) + ')<sup>' + n + '</sup> × ' + aPow(v, p); work = 'Power of a power first: ' + k + '<sup>' + n + '</sup> = ' + c + ' and ' + m + ' × ' + n + ' = ' + m * n + '. Then add ' + p + ': ' + e + '.'; }
  else { let k, m, n, p, j; do { k = rr(2, 3); m = rr(2, 3); n = rr(2, 3); p = rr(1, m * n - 1); j = v105Pick([2, 3, 4, 6, 8, 9]); } while (Math.pow(k, n) % j !== 0 || Math.pow(k, n) === j);
    c = Math.pow(k, n) / j; e = m * n - p;
    html = '(' + k + aPow(v, m) + ')<sup>' + n + '</sup> ÷ ' + j + aPow(v, p); work = 'Power of a power first: ' + k + '<sup>' + n + '</sup> = ' + Math.pow(k, n) + ' and ' + m + ' × ' + n + ' = ' + m * n + '.<br>Then divide: ' + Math.pow(k, n) + ' ÷ ' + j + ' = ' + c + ' and ' + m * n + ' − ' + p + ' = ' + e + '.'; }
  const vars = {}; vars[v] = e;
  qData.prodAns = { coeff:c, vars:vars };
  qData.workSteps = work + '<br>Answer: <b>' + prodAnsHtml(qData.prodAns) + '</b>.';
  el.style.fontSize = '2.1rem';
  el.innerHTML = '<div style="' + A_LBL + '">Simplify. Type the whole answer.</div>' + html;
}
function v105QuadRearrange(el){
  const k = rr(2, 12), kk = k * k, t = ri(4);
  let html, work;
  if (t === 0) { const a = rr(1, 30); html = 'x² − ' + a + ' = ' + (kk - a); work = 'Add ' + a + ' to both sides: x² = ' + kk + '.'; if (kk - a <= 0) return v105QuadRearrange(el); }
  else if (t === 1) { const a = rr(1, 30); html = 'x² + ' + a + ' = ' + (kk + a); work = 'Subtract ' + a + ' from both sides: x² = ' + kk + '.'; }
  else if (t === 2) { const a = rr(2, 5); html = a + 'x² = ' + a * kk; work = 'Divide both sides by ' + a + ': x² = ' + kk + '.'; }
  else { const a = rr(2, 4), c = rr(1, 20); html = a + 'x² − ' + c + ' = ' + (a * kk - c); work = 'Add ' + c + ': ' + a + 'x² = ' + a * kk + '. Divide by ' + a + ': x² = ' + kk + '.'; }
  qData.gapTemplate = ['x = ', 0, '&nbsp;&nbsp;or&nbsp;&nbsp;x = ', 1];
  qData.gapAns = [k, -k];
  qData.gapUnordered = true;
  qData.gapHint = 'Two solutions, either order is fine.';
  qData.gapAnsText = 'x = ' + k + ' or x = −' + k;
  qData.workSteps = work + '<br>Square root, positive and negative: <b>x = ' + k + ' or x = −' + k + '</b>.';
  el.style.fontSize = '1.3rem';
  el.innerHTML = '<div style="' + A_LBL + '">Solve for x.</div><div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + html + '</div>';
}
function v105IneqSVG(b, closed, right){
  const W = 300, H = 70, lo = b - 5, step = (W - 30) / 10, X = function(v){ return 15 + (v - lo) * step; }, y = 32;
  let s = '<svg viewBox="0 0 ' + W + ' ' + H + '" width="300" height="70" style="max-width:100%;display:block;margin:6px auto;">';
  s += '<line x1="6" y1="' + y + '" x2="' + (W - 6) + '" y2="' + y + '" stroke="var(--text)" stroke-width="2"/>';
  for (let v = lo; v <= b + 5; v++) {
    s += '<line x1="' + X(v) + '" y1="' + (y - 6) + '" x2="' + X(v) + '" y2="' + (y + 6) + '" stroke="var(--text)" stroke-width="1.5"/>';
    s += '<text x="' + X(v) + '" y="' + (y + 24) + '" text-anchor="middle" font-size="12" font-weight="700" fill="var(--text)">' + (v < 0 ? '−' + (-v) : v) + '</text>';
  }
  const end = right ? W - 8 : 8;
  s += '<line x1="' + X(b) + '" y1="' + y + '" x2="' + (right ? end - 8 : end + 8) + '" y2="' + y + '" stroke="var(--accent)" stroke-width="5"/>';
  s += '<path d="M' + end + ' ' + y + ' L' + (right ? end - 12 : end + 12) + ' ' + (y - 7) + ' L' + (right ? end - 12 : end + 12) + ' ' + (y + 7) + ' Z" fill="var(--accent)"/>';
  s += '<circle cx="' + X(b) + '" cy="' + y + '" r="7" stroke="var(--accent)" stroke-width="3" fill="' + (closed ? 'var(--accent)' : 'var(--card,#fff)') + '"/>';
  return s + '</svg>';
}
function v105ReadIneq(el){
  const b = rr(-6, 6), closed = Math.random() < 0.5, right = Math.random() < 0.5;
  const bs = b < 0 ? '−' + (-b) : String(b);
  const opts = ['x < ' + bs, 'x ≤ ' + bs, 'x > ' + bs, 'x ≥ ' + bs];
  const right_ = opts[(right ? 2 : 0) + (closed ? 1 : 0)];
  qData.workSteps = 'The circle is ' + (closed ? 'closed (filled), so ' + bs + ' IS included' : 'open, so ' + bs + ' is NOT included') + '.<br>'
    + 'The arrow points ' + (right ? 'right, to the bigger numbers' : 'left, to the smaller numbers') + '.<br>Answer: <b>' + right_.replace('<', '&lt;') + '</b>.';
  el.style.fontSize = '1.2rem';
  decSetChoice(el, '<div style="' + A_LBL + '">Which inequality does the number line show?</div>' + v105IneqSVG(b, closed, right), opts, right_, true);
}
function v105IneqWords(el){
  const t = ri(5); let text, ans, work;
  if (t === 0) { let money, price; do { money = rr(20, 90); price = rr(3, 12); } while (money % price === 0); ans = Math.floor(money / price);
    text = 'Sam has $' + money + ' and tickets cost $' + price + ' each. What is the greatest number of tickets he can buy?';
    work = price + 't ≤ ' + money + ', so t ≤ ' + money + ' ÷ ' + price + ' = ' + v105Num(dp(money / price, 2)) + '.<br>Only whole tickets: <b>' + ans + '</b>.'; }
  else if (t === 1) { let cap, me, box; do { cap = rr(5, 9) * 100; me = rr(60, 95); box = v105Pick([15, 20, 25, 30, 40]); } while ((cap - me) % box === 0); ans = Math.floor((cap - me) / box);
    text = 'A lift can carry at most ' + cap + ' kg. A person weighs ' + me + ' kg and each box weighs ' + box + ' kg. What is the greatest number of boxes they can take in the lift with them?';
    work = me + ' + ' + box + 'b ≤ ' + cap + ', so ' + box + 'b ≤ ' + (cap - me) + ' and b ≤ ' + v105Num(dp((cap - me) / box, 2)) + '.<br>Whole boxes only: <b>' + ans + '</b>.'; }
  else if (t === 2) { let base, per, max; do { base = rr(10, 25); per = rr(2, 6); max = rr(40, 80); } while ((max - base) % per === 0); ans = Math.floor((max - base) / per);
    text = 'A phone plan costs $' + base + ' plus $' + per + ' per GB of data. To spend at most $' + max + ', what is the greatest number of whole GB you can use?';
    work = base + ' + ' + per + 'g ≤ ' + max + ', so ' + per + 'g ≤ ' + (max - base) + ' and g ≤ ' + v105Num(dp((max - base) / per, 2)) + '.<br>Whole GB: <b>' + ans + '</b>.'; }
  else if (t === 3) { const k = rr(2, 5), c = rr(1, 9), T = rr(15, 50); ans = Math.floor((T - c) / k) + 1;
    text = k + ' times a number, plus ' + c + ', is more than ' + T + '. What is the smallest whole number it could be?';
    work = k + 'x + ' + c + ' > ' + T + ', so ' + k + 'x > ' + (T - c) + ' and x > ' + v105Num(dp((T - c) / k, 2)) + '.<br>The smallest whole number bigger than that is <b>' + ans + '</b>.'; }
  else { const d = rr(2, 9), M = rr(5, 20); ans = M + d;
    text = 'A number decreased by ' + d + ' is at most ' + M + '. What is the largest whole number it could be?';
    work = 'x − ' + d + ' ≤ ' + M + ', so x ≤ ' + (M + d) + '.<br>"At most" includes it: <b>' + ans + '</b>.'; }
  v105Ans(ans, work); v105Story(el, text);
}

/* New skill: Expressions, Equations & Identities */
function v105AlgEquiv(el){
  const v = v105Pick(['a', 'x', 'm', 'n']), k = rr(2, 9), c = rr(2, 9), w2 = v105Pick(['b', 'y', 'p']);
  if (level === 1) {
    const kind = ri(4); let s;
    if (kind === 0) s = v105Pick([k + v + ' + ' + c, k + v + ' − ' + c + w2, v + '² + ' + k + v, k + '(' + v + ' + ' + c + ')']);
    else if (kind === 1) { const x = rr(1, 9); s = v105Pick([k + v + ' + ' + c + ' = ' + (k * x + c), k + v + ' = ' + k * x, v + ' − ' + c + ' = ' + x, k + '(' + v + ' + ' + c + ') = ' + k * (x + c)]); }
    else if (kind === 2) s = v105Pick(['A = lw', 'P = 2l + 2w', 'v = u + at', 'A = ½bh', 'F = ma', 'C = 2πr', 'd = st']);
    else s = v105Pick([k + '(' + v + ' + ' + c + ') = ' + k + v + ' + ' + k * c, k + v + ' + ' + v + ' = ' + (k + 1) + v, (k + c) + v + ' − ' + c + v + ' = ' + k + v, v + ' + ' + w2 + ' = ' + w2 + ' + ' + v, v + ' × ' + v + ' = ' + v + '²']);
    const names = ['Expression', 'Equation', 'Formula', 'Identity'];
    const why = ['It has no equals sign, so it is an <b>Expression</b>.',
                 'It has an equals sign and is only true for one value of ' + v + ', so it is an <b>Equation</b>.',
                 'It links two or more variables, one of them on its own as the subject, so it is a <b>Formula</b>.',
                 'Both sides are the same for EVERY value, so it is an <b>Identity</b>.'];
    qData.workSteps = why[kind];
    el.style.fontSize = '1.3rem';
    return decSetChoice(el, '<div style="' + A_LBL + '">Is this an expression, an equation, a formula or an identity?</div><div style="font-size:2rem;font-weight:900;margin:12px 0;">' + s + '</div>', names, names[kind], true);
  }
  /* L2: each pair carries the two functions it was written from, so "equivalent"
     is DECIDED by evaluating both sides, never by the label. */
  const P = [
    function(){ return [k + '(' + v + ' + ' + c + ')', k + v + ' + ' + k * c, function(x){ return k * (x + c); }, function(x){ return k * x + k * c; }]; },
    function(){ return [k + '(' + v + ' + ' + c + ')', k + v + ' + ' + c, function(x){ return k * (x + c); }, function(x){ return k * x + c; }]; },
    function(){ return [k + v + ' + ' + v, (k + 1) + v, function(x){ return k * x + x; }, function(x){ return (k + 1) * x; }]; },
    function(){ return [k + v + ' + ' + c + v, (k + c) + v + '²', function(x){ return k * x + c * x; }, function(x){ return (k + c) * x * x; }]; },
    function(){ return [v + ' × ' + v, '2' + v, function(x){ return x * x; }, function(x){ return 2 * x; }]; },
    function(){ return [(k + c) + v + ' − ' + c + v, k + v, function(x){ return (k + c) * x - c * x; }, function(x){ return k * x; }]; },
    function(){ return [k + '(2' + v + ' − ' + c + ')', 2 * k + v + ' − ' + k * c, function(x){ return k * (2 * x - c); }, function(x){ return 2 * k * x - k * c; }]; },
    function(){ return [k + '(2' + v + ' − ' + c + ')', 2 * k + v + ' − ' + c, function(x){ return k * (2 * x - c); }, function(x){ return 2 * k * x - c; }]; },
    function(){ return [k * c + v + ' ÷ ' + c, k + v, function(x){ return k * c * x / c; }, function(x){ return k * x; }]; },
    function(){ return [v + ' + ' + c, c + ' + ' + v, function(x){ return x + c; }, function(x){ return c + x; }]; },
    function(){ return [v + ' − ' + c, c + ' − ' + v, function(x){ return x - c; }, function(x){ return c - x; }]; },
    function(){ return [k + v + ' + ' + c, (k + c) + v, function(x){ return k * x + c; }, function(x){ return (k + c) * x; }]; }
  ];
  const pr = v105Pick(P)(), tests = [1, 2, 3, 5, 10];
  const eq = tests.every(function(x){ return Math.abs(pr[2](x) - pr[3](x)) < 1e-9; });
  const bad = tests.find(function(x){ return Math.abs(pr[2](x) - pr[3](x)) > 1e-9; });
  qData.workSteps = eq ? 'Simplify both: they give the same value for every ' + v + ' (try ' + v + ' = 2: both give ' + v105Num(pr[2](2)) + ').<br>Answer: <b>Equivalent</b>.'
                       : 'Try ' + v + ' = ' + bad + ': the first gives ' + sgnNum(pr[2](bad)) + ', the second gives ' + sgnNum(pr[3](bad)) + '. One mismatch is enough.<br>Answer: <b>Not equivalent</b>.';
  qData.v105Pair = { l: pr[0], r: pr[1], eq: eq };
  el.style.fontSize = '1.3rem';
  decSetChoice(el, '<div style="' + A_LBL + '">Are these two expressions equivalent?</div><div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + pr[0] + ' &nbsp;and&nbsp; ' + pr[1] + '</div>',
    ['Equivalent', 'Not equivalent'], eq ? 'Equivalent' : 'Not equivalent', true);
}

/* equations as data: { html, f(x) = LHS − RHS } so a candidate is checked by value */
function v105EqForms(x){
  const a = rr(2, 9), b = rr(1, 12), c = rr(2, 5);
  return [
    { html: a + 'x + ' + b + ' = ' + sgnNum(a * x + b), f: function(t){ return a * t + b - (a * x + b); } },
    { html: a + 'x − ' + b + ' = ' + sgnNum(a * x - b), f: function(t){ return a * t - b - (a * x - b); } },
    { html: c + '(x + ' + b + ') = ' + sgnNum(c * (x + b)), f: function(t){ return c * (t + b) - c * (x + b); } },
    { html: b + ' + ' + a + 'x = ' + sgnNum(a * x + b), f: function(t){ return b + a * t - (a * x + b); } },
    { html: (a + c) + 'x + ' + b + ' = ' + v105Lin(c, a * x + b), f: function(t){ return (a + c) * t + b - (c * t + a * x + b); } }
  ];
}
function v105EqVerify(el){
  const x = nzrand(-6, 9);
  if (level === 1) {
    let forms = v105EqForms(x);
    if (Math.random() < 0.2 && x > 0) forms = [{ html:'x² = ' + x * x, f:function(t){ return t * t - x * x; } }];
    const e = v105Pick(forms);
    let cand = x;
    if (Math.random() < 0.5) { do { cand = x + v105Pick([-2, -1, 1, 2, -2 * x]); } while (cand === x); }
    const lhsMinusRhs = e.f(cand), ok = Math.abs(lhsMinusRhs) < 1e-9;
    qData.workSteps = 'Substitute x = ' + sgnNum(cand) + ' into the left side and compare it with the right side.<br>'
      + (ok ? 'Both sides are equal, so it <b>is</b> a solution: <b>Yes</b>.' : 'The two sides are not equal (they differ by ' + v105Num(Math.abs(lhsMinusRhs)) + '), so it is <b>not</b> a solution: <b>No</b>.');
    qData.v105Eq = { html:e.html, cand:cand };
    el.style.fontSize = '1.3rem';
    return decSetChoice(el, '<div style="' + A_LBL + '">Is this value a solution of the equation?</div><div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + e.html
      + '</div><div style="font-size:1.4rem;font-weight:900;">x = ' + sgnNum(cand) + '</div>', ['Yes', 'No'], ok ? 'Yes' : 'No', true);
  }
  const e = v105Pick(v105EqForms(x));
  const set = [x]; let guard = 0;
  while (set.length < 4 && guard++ < 60) { const c = x + nzrand(-4, 4); if (set.indexOf(c) < 0 && Math.abs(e.f(c)) > 1e-9) set.push(c); }
  const opts = set.map(function(c){ return 'x = ' + sgnNum(c); });
  qData.workSteps = 'Try each value in both sides. x = ' + sgnNum(x) + ' makes the two sides equal; the others do not.<br>Answer: <b>x = ' + sgnNum(x) + '</b>.';
  qData.v105Eq = { html:e.html };
  el.style.fontSize = '1.3rem';
  decSetChoice(el, '<div style="' + A_LBL + '">Which value is the solution?</div><div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + e.html + '</div>', opts, 'x = ' + sgnNum(x), false);
}
function v105Lin(a, b){ return (a === 1 ? '' : a === -1 ? '−' : String(a).replace('-', '−')) + 'x' + (b === 0 ? '' : b < 0 ? ' − ' + (-b) : ' + ' + b); }
function v105EqMulti(el){
  const x = nzrand(-5, 9);
  let html, work;
  if (level === 1) {
    if (Math.random() < 0.5) { const a = rr(2, 7), b = rr(1, 6), d = (a + b) * x;
      html = a + 'x + ' + (b === 1 ? '' : b) + 'x = ' + sgnNum(d); work = 'Collect: ' + (a + b) + 'x = ' + sgnNum(d) + '.<br>÷ ' + (a + b) + ': x = <b>' + sgnNum(x) + '</b>.'; }
    else { let a, b, c; do { a = rr(3, 8); b = rr(1, a - 1); c = nzrand(-9, 9); } while (a - b === 0); const d = (a - b) * x + c;
      html = a + 'x ' + (c < 0 ? '− ' + (-c) : '+ ' + c) + ' − ' + (b === 1 ? '' : b) + 'x = ' + sgnNum(d);
      work = 'Collect the x terms: ' + v105Lin(a - b, c) + ' = ' + sgnNum(d) + '.<br>' + (c < 0 ? 'Add ' + (-c) : 'Subtract ' + c) + ': ' + v105Lin(a - b, 0) + ' = ' + sgnNum(d - c) + (a - b === 1 ? ', so x = <b>' + sgnNum(x) + '</b>.' : '.<br>÷ ' + (a - b) + ': x = <b>' + sgnNum(x) + '</b>.'); }
  } else if (level === 2) {
    const a = rr(2, 6), b = nzrand(-6, 8);
    if (Math.random() < 0.5) { const c = a * (x + b);
      html = a + '(' + v105Lin(1, b) + ') = ' + sgnNum(c); work = 'Expand: ' + v105Lin(a, a * b) + ' = ' + sgnNum(c) + '.<br>' + (a * b < 0 ? 'Add ' + (-a * b) : 'Subtract ' + a * b) + ': ' + a + 'x = ' + (c - a * b) + '.<br>÷ ' + a + ': x = <b>' + sgnNum(x) + '</b>.'; }
    else { const c = nzrand(-9, 9), d = a * (x + b) + c;
      html = a + '(' + v105Lin(1, b) + ') ' + (c < 0 ? '− ' + (-c) : '+ ' + c) + ' = ' + sgnNum(d); work = 'Expand and collect: ' + v105Lin(a, a * b + c) + ' = ' + d + '.<br>' + a + 'x = ' + (d - a * b - c) + ', so x = <b>' + sgnNum(x) + '</b>.'; }
  } else if (level === 3) {
    let a, b, c; do { a = rr(2, 6); c = rr(1, 5); b = nzrand(-6, 6); } while (a === c);
    if (Math.random() < 0.5) { const d = a * (x + b) - c * x;
      html = a + '(' + v105Lin(1, b) + ') = ' + v105Lin(c, d);
      work = 'Expand: ' + v105Lin(a, a * b) + ' = ' + v105Lin(c, d) + '.<br>Take ' + (c === 1 ? '' : c) + 'x from both sides: ' + v105Lin(a - c, a * b) + ' = ' + sgnNum(d) + '.<br>'
        + v105Lin(a - c, 0) + ' = ' + sgnNum(d - a * b) + ', so x = <b>' + sgnNum(x) + '</b>.'; }
    else { let e, g2 = 0; do { e = rr(2, 5); } while ((e === a || (a * (x + b) - e * x) % e !== 0 || a * (x + b) - e * x === 0) && g2++ < 60);
      if (g2 >= 60) return v105EqMulti(el);
      const d = (a * (x + b) - e * x) / e;
      html = a + '(' + v105Lin(1, b) + ') = ' + e + '(' + v105Lin(1, d) + ')';
      work = 'Expand both: ' + v105Lin(a, a * b) + ' = ' + v105Lin(e, e * d) + '.<br>Collect: ' + v105Lin(a - e, 0) + ' = ' + sgnNum(e * d - a * b) + ', so x = <b>' + sgnNum(x) + '</b>.'; }
  } else {
    const t = ri(3);
    if (t === 0) { let a, c; do { a = rr(2, 5); c = rr(2, 6); } while (a === c); const X = lcm(a, c) * nzrand(-2, 3), b = X * (c - a) / a; if (b === 0) return v105EqMulti(el);
      html = fracHTML('x', a) + ' &nbsp;=&nbsp; ' + fracHTML(v105Lin(1, b), c); work = 'Multiply both sides by ' + a * c + ': ' + c + 'x = ' + a + '(' + v105Lin(1, b) + ') = ' + v105Lin(a, a * b) + '.<br>' + (c - a) + 'x = ' + a * b + ', so x = <b>' + sgnNum(X) + '</b>.';
      return v105EqDone(el, X, html, work); }
    if (t === 1) { let a, c; do { a = rr(2, 5); c = rr(2, 6); } while (a === c); const X = lcm(a, c) * nzrand(-2, 3), b = X / c - X / a; if (b === 0) return v105EqMulti(el);
      html = fracHTML('x', a) + ' &nbsp;' + (b < 0 ? '−' : '+') + ' ' + Math.abs(b) + '&nbsp; = &nbsp;' + fracHTML('x', c); work = 'Multiply every term by ' + lcm(a, c) + ': ' + lcm(a, c) / a + 'x ' + (b < 0 ? '− ' : '+ ') + Math.abs(b * lcm(a, c)) + ' = ' + lcm(a, c) / c + 'x.<br>Solve: x = <b>' + sgnNum(X) + '</b>.';
      return v105EqDone(el, X, html, work); }
    let a, c, b, X, d; let guard = 0;
    do { a = rr(2, 5); c = rr(2, 6); X = nzrand(-6, 9); b = nzrand(-6, 6); d = (c * (X + b)) / a - X; } while ((a === c || !Number.isInteger(d) || d === 0 || Math.abs(d) > 20) && guard++ < 200);
    if (!Number.isInteger(d)) return v105EqMulti(el);
    html = fracHTML(v105Lin(1, b), a) + ' &nbsp;=&nbsp; ' + fracHTML(v105Lin(1, d), c); work = 'Cross-multiply: ' + c + '(' + v105Lin(1, b) + ') = ' + a + '(' + v105Lin(1, d) + ').<br>' + v105Lin(c, c * b) + ' = ' + v105Lin(a, a * d) + ', so x = <b>' + sgnNum(X) + '</b>.';
    return v105EqDone(el, X, html, work);
  }
  v105EqDone(el, x, html, work);
}
function v105EqDone(el, x, html, work){
  v105Ans(x, work); qData.ansDisplay = sgnNum(x);
  qData.v105EqHtml = html;
  el.style.fontSize = '1.3rem';
  el.innerHTML = '<div style="' + A_LBL + '">Solve for x.</div><div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + html + '</div>';
}
function v105EqWord(el){
  if (level === 1) {
    const t = ri(3); let text, ans, work;
    if (t === 0) { const k = rr(2, 6), x = rr(2, 12), m = (k - 1) * x; ans = x;
      text = 'A number multiplied by ' + k + ' equals the number plus ' + m + '. Find the number.';
      work = k + 'x = x + ' + m + '.<br>Take x from both sides: ' + (k - 1) + 'x = ' + m + ', so x = <b>' + ans + '</b>.'; }
    else if (t === 1) { const x = rr(3, 15), k = rr(2, 4), add = (k - 1) * x; ans = x;
      text = 'A number plus ' + add + ' equals ' + (k === 2 ? 'twice' : k === 3 ? 'three times' : 'four times') + ' the number. Find the number.';
      work = 'x + ' + add + ' = ' + k + 'x.<br>Take x from both sides: ' + add + ' = ' + (k - 1 === 1 ? '' : k - 1) + 'x, so x = <b>' + ans + '</b>.'; }
    else { const p = rr(1, 4), q = p + rr(1, 4), n = rr(2, 12), b = rr(2, 15); const a = b + (q - p) * n; ans = n;
      const unit = v105Pick(['GB', 'texts', 'hours']), u1 = unit === 'GB' ? 'GB' : unit.slice(0, -1);
      text = 'Plan A costs $' + a + ' plus $' + p + ' per ' + u1 + '. Plan B costs $' + b + ' plus $' + q + ' per ' + u1 + '. For how many ' + unit + ' do the two plans cost the same?';
      work = a + ' + ' + (p === 1 ? '' : p) + 'n = ' + b + ' + ' + q + 'n.<br>' + (a - b) + ' = ' + (q - p === 1 ? '' : q - p) + 'n, so n = <b>' + ans + '</b>.'; }
    v105Ans(ans, work); return v105Story(el, text);
  }
  const t = ri(5); let text, lo, hi, l1, l2, work;
  if (t === 0) { const k = rr(2, 4); lo = rr(3, 15); hi = k * lo;
    text = 'Two numbers add to ' + (lo + hi) + ' and one is ' + (k === 2 ? 'twice' : k === 3 ? 'three times' : 'four times') + ' the other. Find them.'; l1 = 'smaller'; l2 = 'larger';
    work = 'Let the smaller be x: x + ' + k + 'x = ' + (lo + hi) + ', so ' + (k + 1) + 'x = ' + (lo + hi) + ' and x = ' + lo + '.<br>The numbers are <b>' + lo + ' and ' + hi + '</b>.'; }
  else if (t === 1) { const d = rr(2, 12); lo = rr(3, 20); hi = lo + d;
    text = 'Two numbers have a sum of ' + (lo + hi) + ' and differ by ' + d + '. Find them.'; l1 = 'smaller'; l2 = 'larger';
    work = 'x + (x + ' + d + ') = ' + (lo + hi) + ', so 2x = ' + (lo + hi - d) + ' and x = ' + lo + '.<br>The numbers are <b>' + lo + ' and ' + hi + '</b>.'; }
  else if (t === 2) { const k = rr(3, 5); lo = rr(6, 14); hi = k * lo;
    text = 'A father is ' + k + ' times as old as his son. Together they are ' + (lo + hi) + ' years old. Find their ages.'; l1 = 'son'; l2 = 'father';
    work = 's + ' + k + 's = ' + (lo + hi) + ', so ' + (k + 1) + 's = ' + (lo + hi) + ' and s = ' + lo + '.<br>Son <b>' + lo + '</b>, father <b>' + hi + '</b>.'; }
  else if (t === 3) { const d = rr(1, 5); lo = rr(1, 9); hi = lo + d;
    text = 'A pen costs $' + d + ' more than a rubber. Together they cost $' + (lo + hi) + '. Find the cost of each, in dollars.'; l1 = 'rubber $'; l2 = 'pen $';
    work = 'r + (r + ' + d + ') = ' + (lo + hi) + ', so 2r = ' + (lo + hi - d) + ' and r = ' + lo + '.<br>Rubber <b>$' + lo + '</b>, pen <b>$' + hi + '</b>.'; }
  else { const d = rr(2, 6); lo = rr(9, 14); hi = lo + d;
    text = 'A class of ' + (lo + hi) + ' students has ' + d + ' more girls than boys. How many boys and how many girls are there?'; l1 = 'boys'; l2 = 'girls';
    work = 'b + (b + ' + d + ') = ' + (lo + hi) + ', so 2b = ' + (lo + hi - d) + ' and b = ' + lo + '.<br>Boys <b>' + lo + '</b>, girls <b>' + hi + '</b>.'; }
  qData.gapTemplate = [l1 + ' = ', 0, '&nbsp;&nbsp;&nbsp;' + l2 + ' = ', 1];
  qData.gapAns = [lo, hi];
  qData.gapHint = 'Fill in both.';
  qData.gapAnsText = l1 + ' ' + lo + ', ' + l2 + ' ' + hi;
  qData.workSteps = work;
  v105Story(el, text);
}
/* ═══ end v105 ═══ */

(function applyLevelOrder(){
  /* skills sharing a lvKey move together, which is the point of keying on it */
  const byKey = {};
  for (const ck in CATS) CATS[ck].skills.forEach(function(sk){
    (byKey[sk.lvKey] = byKey[sk.lvKey] || []).push(sk);
  });

  Object.keys(LEVEL_ORDER).forEach(function(key){
    const order = LEVEL_ORDER[key];

    /* 1. the level cards */
    const defs = LEVEL_DEFS[key];
    if (defs) LEVEL_DEFS[key] = order.map(function(old){ return defs[old - 1]; })
      .map(function(d, i){
        /* the card's own "Level n —" prefix has to follow it */
        return Object.assign({}, d, { title: String(d.title).replace(/^Level \d+ — /, 'Level ' + (i + 1) + ' — ') });
      });

    (byKey[key] || []).forEach(function(sk){
      /* 2. per-level input modes */
      if (sk.levelModes){
        const lm = {};
        order.forEach(function(old, i){ if (sk.levelModes[old]) lm[i + 1] = sk.levelModes[old]; });
        sk.levelModes = lm;
      }
      /* 3. which levels are method rather than recall */
      const mlo = METHOD_LEVEL_OVERRIDE[sk.id];
      if (mlo) METHOD_LEVEL_OVERRIDE[sk.id] = mlo.map(function(old){ return newLevelOf(key, old); })
        .filter(function(n){ return n > 0; }).sort(function(a, b){ return a - b; });
      /* 4. per-level fluency targets and method ceilings */
      [FLUENCY_TARGET, METHOD_BAND_CEIL].forEach(function(MAP){
        const arr = MAP[sk.id];
        if (Array.isArray(arr)) MAP[sk.id] = order.map(function(old){
          return arr[old - 1] !== undefined ? arr[old - 1] : arr[arr.length - 1];
        });
      });
      /* 5. band cut-offs, keyed skill_Llv */
      const moved = {};
      order.forEach(function(old, i){
        const from = sk.id + '_L' + old;
        if (BAND_OVERRIDE[from]) moved[sk.id + '_L' + (i + 1)] = BAND_OVERRIDE[from];
      });
      order.forEach(function(old){ delete BAND_OVERRIDE[sk.id + '_L' + old]; });
      Object.keys(moved).forEach(function(k){ BAND_OVERRIDE[k] = moved[k]; });
      /* 6. the ALT pools */
      for (const ck in COURSES) COURSES[ck].alts.forEach(function(alt){
        (alt.skills || []).forEach(function(row){
          if (row[0] !== sk.id) return;
          row[1] = row[1].map(function(old){ return newLevelOf(key, old); })
            .filter(function(n){ return n > 0; }).sort(function(a, b){ return a - b; });
        });
      });
    });
    /* 7. the mode recommendation, keyed by lvKey */
    if (typeof LEVEL_REC !== 'undefined' && LEVEL_REC[key]){
      const rec = {};
      order.forEach(function(old, i){ if (LEVEL_REC[key][old]) rec[i + 1] = LEVEL_REC[key][old]; });
      LEVEL_REC[key] = rec;
    }
  });
  /* a removed level leaves nothing behind: no card, no band, no ALT entry */
  const GONE = {"fas":[5],"fmu":[4],"fd":[4]};
  Object.keys(GONE).forEach(function(key){
    (byKey[key] || []).forEach(function(sk){
      GONE[key].forEach(function(old){ delete BAND_OVERRIDE[sk.id + '_L' + old]; });
    });
  });
})();

/* Exam Practice is the UNION of every examinable ALT, worked out at
   render time. It is never hand-listed, so it cannot drift when an ALT
   is edited. ALT 8 (Measurement) is exam:false — Laura teaches it after
   the exam, so it is on the ALT list but never in the exam mix. */
function courseKeys() { return Object.keys(COURSES); }
function getCourseKey() { const p = ap(); return p && COURSES[p.course] ? p.course : null; }
function getCourse() { const k = getCourseKey(); return k ? COURSES[k] : null; }
function setCourseKey(k) { const p = ap(); if (!p) return; p.course = k; saveProfiles(); }

function altPairs(alt) {
  const out = [];
  (alt.skills || []).forEach(([sid, lvs]) => lvs.forEach(lv => out.push({ s: sid, lv })));
  return out;
}
function examAlts(course) { return course.alts.filter(a => a.exam && a.skills.length); }
function examPairs(course) {
  const seen = {}, out = [];
  examAlts(course).forEach(a => altPairs(a).forEach(pr => {
    const k = pr.s + '_' + pr.lv;
    if (!seen[k]) { seen[k] = 1; out.push(pr); }
  }));
  return out;
}

/* ── Readiness: three states from data the app already stores. ──
   green  = fluent here, or last round was 85%+ accurate
   amber  = tried it, not there yet
   grey   = never attempted
   Nothing new is tracked; this is the accuracy that was already saved
   after every session, finally shown where a student can act on it. */
function levelReadiness(sid, lv) {
  if (getFluent(sid, lv)) return 'green';
  const acc = getLastAcc(sid, lv);
  if (acc < 0) return 'grey';
  return acc >= 85 ? 'green' : 'amber';
}
function readyCount(pairs) {
  let g = 0, a = 0;
  pairs.forEach(pr => { const r = levelReadiness(pr.s, pr.lv); if (r === 'green') g++; else if (r === 'amber') a++; });
  return { green: g, amber: a, grey: pairs.length - g - a, total: pairs.length };
}

/* ── Screens ── */
let altCtx = null;         /* { courseKey, altN }  — altN 0 means Exam Practice */

function openExamTraining() {
  if (!getCourseKey()) return openCoursePicker(false);
  openAltList();
}

function openCoursePicker(isChange) {
  show('s-course');
  const list = id('courseList');
  list.innerHTML = '';
  const cur = getCourseKey();
  courseKeys().forEach(k => {
    const c = COURSES[k];
    const pairs = examPairs(c);
    const btn = document.createElement('button');
    btn.className = 'skill-btn';
    btn.innerHTML = '<span>' + c.label + (k === cur ? ' ✓' : '') + '</span>' +
      '<span class="alt-meta">' + c.alts.filter(a => a.skills.length).length + ' ALTs · ' + pairs.length + ' levels</span>';
    btn.onclick = () => { setCourseKey(k); openAltList(); };
    list.appendChild(btn);
  });
}

function openAltList() {
  const c = getCourse();
  if (!c) return openCoursePicker(false);
  altCtx = { courseKey: getCourseKey(), altN: null };
  show('s-alts');
  setText('altsLabel', '🎯 ' + c.label);
  const ex = readyCount(examPairs(c));
  setText('altsSub', 'Everything you need to know, grouped by assessment. ' +
    ex.green + ' of ' + ex.total + ' examinable levels are green.');
  const list = id('altList');
  list.innerHTML = '';

  const exBtn = document.createElement('button');
  exBtn.className = 'alt-card exam';
  exBtn.innerHTML = '<div class="alt-n">EXAM</div>' +
    '<div class="alt-title">Exam Practice</div>' +
    '<div class="alt-meta">Every examinable ALT together · ' + ex.total + ' levels</div>' +
    '<div class="alt-meta">' + readyDotsSummary(ex) + '</div>';
  exBtn.onclick = () => openAlt(0);
  list.appendChild(exBtn);

  c.alts.forEach(a => {
    const pairs = altPairs(a);
    const r = readyCount(pairs);
    const btn = document.createElement('button');
    btn.className = 'alt-card' + (pairs.length ? '' : ' empty');
    btn.innerHTML = '<div class="alt-n">ALT ' + a.n + (a.exam ? '' : ' · NOT ON THE EXAM') + '</div>' +
      '<div class="alt-title">' + a.title + '</div>' +
      (pairs.length
        ? '<div class="alt-meta">' + a.skills.length + ' skills · ' + pairs.length + ' levels</div>' +
          '<div class="alt-meta">' + readyDotsSummary(r) + '</div>'
        : '<div class="alt-meta">No skills in the app yet</div>') +
      (a.note ? '<div class="alt-note">' + a.note + '</div>' : '');
    if (pairs.length) btn.onclick = () => openAlt(a.n);
    list.appendChild(btn);
  });
}

function readyDotsSummary(r) {
  return '<span class="rd green"></span> ' + r.green + ' ready · ' +
         '<span class="rd amber"></span> ' + r.amber + ' getting there · ' +
         '<span class="rd"></span> ' + r.grey + ' not tried';
}

function openAlt(n) {
  const c = getCourse();
  if (!c) return openCoursePicker(false);
  altCtx = { courseKey: getCourseKey(), altN: n };
  show('s-altskills');
  const groups = n === 0 ? examGroups(c) : (c.alts.find(a => a.n === n) || { skills: [] }).skills;
  const title = n === 0 ? 'Exam Practice' : 'ALT ' + n + ' — ' + c.alts.find(a => a.n === n).title;
  setText('altSkillsLabel', '🎯 ' + title);
  const pairs = [];
  groups.forEach(([sid, lvs]) => lvs.forEach(lv => pairs.push({ s: sid, lv })));
  const r = readyCount(pairs);
  id('altReadyBar').innerHTML = readyDotsSummary(r);
  id('altMixBtn').innerHTML = '∞ Mixed Practice — all ' + pairs.length + ' levels in ' +
    (n === 0 ? 'the exam' : 'this ALT');
  id('altMixBtn').style.display = pairs.length ? 'block' : 'none';
  renderAltSkillRows(id('altSkillList'), groups, false);

  /* Prerequisites (Laura): times tables and division underpin every level in
     every ALT but are assumed knowledge, not assessed content. They sit at the
     bottom, greyed and dashed, so a struggling student can see where to drop
     back to without them reading as "this is on the test". */
  const pre = id('altPrereq');
  pre.innerHTML = '<div class="alt-prereq-head">Prerequisites</div>' +
    '<div class="alt-prereq-sub">Not assessed — but every skill above leans on these. ' +
    'If an ALT skill feels slow, start here.</div>';
  const holder = document.createElement('div');
  holder.className = 'alt-skill-list';
  pre.appendChild(holder);
  /* v102: an ALT may name its own prerequisites (probability leans on fractions,
     measurement on powers of ten), falling back to the course-wide list. */
  const altObj = n === 0 ? null : c.alts.find(a => a.n === n);
  renderAltSkillRows(holder, (altObj && altObj.prereq) || c.prereq, true);
}

/* The exam list keeps ALT order and merges a skill that appears in more than
   one ALT into a single row, so a student sees each skill once. */
function examGroups(c) {
  const order = [], byId = {};
  examAlts(c).forEach(a => a.skills.forEach(([sid, lvs]) => {
    if (!byId[sid]) { byId[sid] = []; order.push(sid); }
    lvs.forEach(lv => { if (byId[sid].indexOf(lv) < 0) byId[sid].push(lv); });
  }));
  return order.map(sid => [sid, byId[sid].slice().sort((x, y) => x - y)]);
}

function renderAltSkillRows(host, groups, isPrereq) {
  host.innerHTML = '';
  groups.forEach(([sid, lvs]) => {
    const meta = findSkillMeta(sid);
    if (!meta) return;
    const row = document.createElement('div');
    row.className = 'alt-skill-row' + (isPrereq ? ' prereq' : '');
    const name = document.createElement('div');
    name.className = 'alt-skill-name';
    name.innerHTML = meta.name;
    row.appendChild(name);
    const lvRow = document.createElement('div');
    lvRow.className = 'alt-lv-row';
    lvs.forEach(lv => {
      const b = document.createElement('button');
      b.className = 'alt-lv';
      b.innerHTML = '<span class="rd ' + levelReadiness(sid, lv) + '"></span>L' + lv;
      b.onclick = () => startAltLevel(sid, lv);
      lvRow.appendChild(b);
    });
    row.appendChild(lvRow);
    host.appendChild(row);
  });
}

function setSkillLevel(sid, lv) {
  const meta = findSkillMeta(sid);
  if (!meta) return false;
  skill = sid; skillMeta = meta; lvKey = meta.lvKey; level = lv;
  return true;
}

/* Tapping a level inside an ALT still goes through the mode screen — the
   point of the mode screen is that no session starts without a decision. */
function startAltLevel(sid, lv) {
  if (!setSkillLevel(sid, lv)) return;
  chooseMode('alt');
}

/* ═══════════════════════════════════════════════════════════════════
   v92 (Laura) — CHOOSE A MODE, AFTER THE LEVEL
   -------------------------------------------------------------------
   Mode used to be a pre-set toggle on the home screen, so every
   student took the default (Fluency) without thinking — and Fluency is
   the wrong mode for a level you cannot yet do accurately. Choosing it
   here, with the skill and level named, makes it a decision about THIS
   level, and lets the app recommend from what it already knows.
═══════════════════════════════════════════════════════════════════ */
let modeFrom = 'levels';

function chooseMode(from) {
  if (!skill || !level) return;
  mixQueue = null;
  modeFrom = from || 'levels';
  show('s-mode');
  setText('modeTitle', (skillMeta ? skillMeta.name.replace(/&amp;/g, '&') : '') + ' — Level ' + level);
  const defs = LEVEL_DEFS[lvKey] || [];
  const d = defs[level - 1];
  setText('modeSub', d ? d.title.replace(/^Level \d+ — /, '') : '');
  id('modeBackBtn').textContent = modeFrom === 'alt' ? '← Back to the ALT' : '← Back to levels';

  const rec = recommendMode();
  ['fluency', 'challenge', 'practice'].forEach(m => {
    const b = id('btn-' + m);
    if (b) { b.classList.toggle('rec', m === rec.mode); b.classList.remove('active'); }
  });
  id('modeRecNote').innerHTML = '✓ <strong>' + modeLabel(rec.mode) + ' recommended</strong> — ' + rec.why;
  id('modeWhat').innerHTML =
    '<b>⏱ Fluency</b> — 60 seconds, scored, sets a personal best.<br>' +
    '<b>⚡ Challenge</b> — 3 minutes, scored. Better for levels with working out.<br>' +
    '<b>∞ Practice</b> — no timer, no score. Where accuracy is built.';
}
function modeLabel(m) { return m === 'fluency' ? 'Fluency' : m === 'challenge' ? 'Challenge' : 'Practice'; }

/* The recommendation is deliberately conservative: an explicit LEVEL_REC on
   the level always wins (those exist because the level is too slow to band in
   60 seconds), then a never-attempted or low-accuracy level goes to Practice,
   and only an accurate student is sent to Fluency. */
function recommendMode() {
  const rec = getLevelRec(lvKey, level);
  if (rec === 'practice')  return { mode: 'practice',  why: 'this level has too much working out for a 60-second round.' };
  if (rec === 'challenge') return { mode: 'challenge', why: 'this level needs more than 60 seconds to show what you can do.' };
  const acc = getLastAcc(skill, level);
  if (acc < 0)   return { mode: 'practice', why: 'you have not tried this level yet — build accuracy before adding a clock.' };
  if (acc < 85)  return { mode: 'practice', why: 'you were ' + acc + '% accurate last time — another untimed run will pay off.' };
  if (getFluent(skill, level)) return { mode: 'challenge', why: 'you are already fluent here — stretch it.' };
  return { mode: 'fluency', why: 'you were ' + acc + '% accurate last time — you are ready for the clock.' };
}
function pickMode(m) { setMode(m); beginGame(); }
function modeGoBack() { if (modeFrom === 'alt') openAlt(altCtx ? altCtx.altN : 0); else show('s-levels'); }

/* ═══════════════════════════════════════════════════════════════════
   v92 — MIXED PRACTICE
   Practice mode only, by design: mixing a dozen skills under a 60-second
   clock measures nothing. The round re-picks the skill between questions
   (see the nextQ wrapper) and weights whatever is not green yet, so
   revision time lands where it is needed.
═══════════════════════════════════════════════════════════════════ */
let mixQueue = null, mixStats = null, mixLabel = '';

function startAltMix() {
  const c = getCourse();
  if (!c || !altCtx) return;
  const n = altCtx.altN;
  const groups = n === 0 ? examGroups(c) : (c.alts.find(a => a.n === n) || { skills: [] }).skills;
  const pairs = [];
  groups.forEach(([sid, lvs]) => lvs.forEach(lv => { if (findSkillMeta(sid)) pairs.push({ s: sid, lv }); }));
  if (!pairs.length) return;
  mixQueue = pairs;
  mixStats = {};
  mixLabel = c.short + ' · ' + (n === 0 ? 'Exam Practice' : 'ALT ' + n);
  setMode('practice');
  setSkillLevel(pairs[0].s, pairs[0].lv);
  prepGameScreen();
  id('pbNudge').innerHTML = '∞ <strong>Mixed Practice</strong> — ' + mixLabel +
    ' · ' + pairs.length + ' levels';
}

/* Weighting: a level that is not green yet is three times as likely to come
   up as one that is. Still random, so a green level is never dropped. */
function mixAdvance() {
  const bag = [];
  mixQueue.forEach(pr => {
    const w = levelReadiness(pr.s, pr.lv) === 'green' ? 1 : 3;
    for (let i = 0; i < w; i++) bag.push(pr);
  });
  const pick = bag[ri(bag.length)];
  setSkillLevel(pick.s, pick.lv);
  resetAnswerInputs();
}

function mixTally(sid, lv, correct) {
  const k = sid + '_L' + lv;
  if (!mixStats[k]) mixStats[k] = { s: sid, lv: lv, a: 0, c: 0 };
  mixStats[k].a++;
  if (correct) mixStats[k].c++;
}

function stopMixedPractice() {
  clearInterval(timer);
  ['ansInput','fracNum','fracDen','mixedWhole','mixedNum','mixedDen',
   'idxCoeff','idxExp','idxExpB','idxExpC','sciCoeff','sciExp'].forEach(i => {
    const el = document.getElementById(i); if (el) el.disabled = true;
  });
  kbHide();
  const acc = attempts > 0 ? score / attempts : 0;
  const secs = startTime ? (Date.now() - startTime) / 1000 : 0;
  const mins = secs / 60;
  const cpm = mins > 0 ? Math.round(score / mins) : 0;
  const practiceScore = Math.round(score * acc);

  /* A level only re-stamps its readiness dot after three questions in the
     round — one lucky or unlucky question should not flip a colour. */
  Object.keys(mixStats).forEach(k => {
    const t = mixStats[k];
    if (t.a >= 3) recordLevelAcc(t.s, t.lv, t.c / t.a * 100);
  });
  recordDayActivity(secs);
  recordSession('Mixed Practice · ' + mixLabel, 0, practiceScore, score, Math.round(acc * 100), cpm, false);
  sessionBandUp = false;
  showResults(practiceScore, score, acc, cpm, 'practice', 0, []);
  setText('rSparkSkill', 'Mixed Practice · ' + mixLabel);
}

/* ── Backup nudge: the only control on the home screen that protects data. ── */
function bkKey() { return 'ff_bk_' + pidx; }
function stampBackup() { try { localStorage.setItem(bkKey(), String(Date.now())); } catch (e) {} }
function syncBackupNudge() {
  const b = id('backupIconBtn');
  if (!b) return;
  const last = +(localStorage.getItem(bkKey()) || 0);
  const stale = (Date.now() - last) > 14 * 24 * 3600 * 1000;
  b.classList.toggle('stale', stale);
  b.title = last ? (stale ? 'Backup — last saved over two weeks ago' : 'Backup') : 'Backup — never saved';
}

function openCat(cat) {
  currentCat = cat;
  show('s-skills');
  const meta = CATS[cat];
  document.getElementById('skillCatLabel').textContent = meta.label;
  const list = document.getElementById('skillList');
  list.innerHTML = '';
  meta.skills.forEach(s => {
    const btn = document.createElement('button');
    btn.className = 'skill-btn';
    const pb = bestForSkill(s.id);
    // Render name safely (some have & entities)
    const yr = SKILL_YEAR[s.id];
    // v43: best animal band reached (from stored PB). v45: re-add a Fluent badge
    // for RECALL skills that have reached Antelope+ at any level.
    const aIdx = bestAnimalIndexForSkill(s.id);
    const animalChip = aIdx >= 0 ? animalChipHTML(ANIMALS[aIdx]) : '';
    const fluentChip = skillHasFluentLevel(s.id) ? '<span class="fluent-badge">🎯 Fluent</span>' : '';
    const chips = `${yr ? `<span class="year-chip">${yr}</span>` : ''}${animalChip}${fluentChip}${pb ? `<span class="pb-chip">PB: ${pb}</span>` : ''}`;
    btn.innerHTML = `<span>${s.name}</span><span style="display:flex;gap:6px;align-items:center;flex-shrink:0">${chips}</span>`;
    btn.onclick = () => selectSkill(s);
    list.appendChild(btn);
  });
}

/* ═══════════════════════════════════════════════
   LEVEL SELECT — dedicated screen
═══════════════════════════════════════════════ */
function selectSkill(smeta) {
  skill = smeta.id;
  skillMeta = smeta;
  lvKey = smeta.lvKey;
  level = null;

  // v58 (Laura): Pythagoras & the angle skills are no longer Fluency-locked.
  // L1 of each is fast enough to band from a 60s round; L2+ carry a "Best played
  // in Challenge" hint (see LEVEL_REC) but the student is free to stay in Fluency
  // and still get a score rather than bailing out of the 3-minute round.

  show('s-levels');
  document.getElementById('levelScreenTitle').textContent = smeta.name.replace(/&amp;/g,'&');
  document.getElementById('levelScreenSub').textContent =
    'Pick the level you want, then choose how you want to train it.';

  document.getElementById('levelStartBtn').disabled = true;
  document.getElementById('levelStartLbl').textContent = '?';
  // Reset recommendation hint + start-button styling for the new skill
  document.getElementById('levelRecHint').style.display = 'none';
  document.getElementById('levelStartBtn').classList.remove('rec-practice');

  const defs = LEVEL_DEFS[lvKey];
  const cards = document.getElementById('levelCards');
  cards.innerHTML = '';

  defs.forEach((def, i) => {
    const lv = i + 1;
    const pb = getPB(skill, lv);
    const trend = getTrend(skill, lv).slice(-3);
    const rec = getLevelRec(lvKey, lv);
    const card = document.createElement('div');
    card.className = 'lv-card' + (rec ? ' rec-' + rec : '');
    card.id = `lc${lv}`;

    const exHTML = def.examples.map(e => `<span class="lv-example">${e}</span>`).join('');
    const pbHTML = pb > 0 ? `<span class="lv-pb">Personal best: ${pb}</span>` : '';
    const sparkHTML = trend.length > 0
      ? `<div class="lv-trend">${buildLvlSpark(trend, pb)}</div>` : '';
    const recHTML = rec
      ? `<span class="lv-rec ${rec}">${rec === 'challenge' ? '⚡' : '∞'} Best played in ${rec === 'challenge' ? 'Challenge' : 'Practice'}</span>`
      : '';
    const tgt = getFluencyTarget(skill, lv);
    // v46: recall skills show the FLUENT score (start of Antelope) + the animal
    // they currently are; method skills keep the Cheetah stretch target.
    const lvlAnimal = pb > 0 ? animalChipHTML(animalForScore(pb, skill, lv)) : '';
    let goalHTML;
    if (getLevelKind(skill, lv) === 'recall') {
      const fluentAt = bandCutoffs(skill, lv).l + 1;   // start of Antelope
      goalHTML = isRecallFluent(skill, lv)
        ? `<span class="fluent-badge">🎯 Fluent ✓ (${fluentAt})</span>`
        : `🎯 Fluent at ${fluentAt}`;
    } else {
      goalHTML = `🐆 Cheetah at ${cheetahThreshold(skill, lv)}`;
    }
    const tgtHTML = `<span class="lv-target">${goalHTML}${lvlAnimal ? ' · ' + lvlAnimal : ''}</span>`;

    card.innerHTML = `
      <div class="lv-badge">L${lv}</div>
      <div class="lv-title">${def.title}</div>
      <div class="lv-desc">${def.desc}</div>
      <div class="lv-examples">${exHTML}</div>
      ${recHTML}${pbHTML}${tgtHTML}${sparkHTML}
    `;
    card.onclick = () => {
      level = lv;
      document.querySelectorAll('.lv-card').forEach(c => c.classList.remove('active'));
      card.classList.add('active');
      document.getElementById('levelStartBtn').disabled = false;
      document.getElementById('levelStartLbl').textContent = lv;
      applyLevelRec(getLevelRec(lvKey, lv));
    };
    cards.appendChild(card);
  });
}

/* Show/hide the recommendation hint under Start and tint the button for the
   selected level. Offers a one-tap switch when the current mode doesn't match. */
function applyLevelRec(rec) {
  const hint = document.getElementById('levelRecHint');
  const startBtn = document.getElementById('levelStartBtn');
  startBtn.classList.toggle('rec-practice', rec === 'practice');
  if (!rec) { hint.style.display = 'none'; return; }
  const label = rec === 'challenge' ? 'Challenge' : 'Practice';
  const icon  = rec === 'challenge' ? '⚡' : '∞';
  const colour = rec === 'challenge' ? 'var(--accent)' : 'var(--amber)';
  hint.style.color = colour;
  if (sessionMode === rec) {
    hint.innerHTML = `${icon} You're in ${label} mode — good choice for this level.`;
  } else {
    hint.innerHTML = `${icon} <strong>Best played in ${label}.</strong>` +
      `<span class="rec-switch" onclick="switchModeFromRec('${rec}')">Switch to ${label}</span>`;
  }
  hint.style.display = 'block';
}

function switchModeFromRec(rec) {
  setMode(rec);
  applyLevelRec(rec);
}

function goBackToSkills() {
  // return to skill list for the same category
  if (currentCat) openCat(currentCat);
  else goHome();
}

function beginGame() {
  if (!skill || !level) return;
  prepGameScreen();
}

/* ═══════════════════════════════════════════════
   GAME SCREEN SETUP
═══════════════════════════════════════════════ */
function getInputMode() {
  if (!skillMeta) return 'number';
  /* v105: the appended Year 8 levels name their own mode (some of these skills hard-code one below) */
  if (typeof V105_APPEND !== 'undefined' && v105Mode()) return v105Mode();
  // Like terms (all levels) and single-bracket expanding L1–L2 use free-text
  // entry: the student types the WHOLE answer (e.g. 7x, 8x + 2y, 3x + 6) so they
  // must produce the variable themselves — stops the "join the letters" error.
  if (skill === 'algLikeTerms') return 'algType';
  if (skill === 'algExpand' && (level === 1 || level === 2)) return 'algType';
  // Expanding to a quadratic — the student types the whole polynomial answer
  // (e.g. x² + 5x + 6). algExpand L3 (single bracket × x) and both two-bracket
  // skills all expand to a quadratic, marked by the polynomial parser.
  if (skill === 'algExpand') return 'algPoly';                 // L3+
  if (skill === 'algExpandTwo' || skill === 'algExpandBinom') return 'algPoly';
  // Multiply / Divide terms (all levels, v32): the student types the WHOLE
  // product/quotient answer (e.g. 12x, 12xyz, 10xy²z, −24x²y) so they must
  // build the coefficient, every letter, AND its power themselves. A digit-box
  // panel can't test that, so these use the free-text 'algProd' parser.
  if (skill === 'algMultiply' || skill === 'algDivide') return 'algProd';
  // Convert Fractions & Decimals (v69): split into two skills so each has ONE fixed
  // panel — decToFrac always the num/den boxes (levelModes: fraction), fracToDec always
  // the number box. No per-question mode switching (which mis-rendered the fraction panel).
  if (skillMeta.levelModes && skillMeta.levelModes[level]) return skillMeta.levelModes[level];
  return skillMeta.inputMode;
}
function isFractionSkill() { return ['fracSimplify','fracAddSub','fracMultiply','fracDivide','fracOrderOps','mixedToImp','impToMixed','gradientSeg'].includes(skill); }
function isEquationSkill() { return ['eqOneStepAddSub','eqOneStepMulDiv','eqTwoStep','eqTwoStepFrac','eqVarDenom','eqBothSides'].includes(skill); }
function isIndexSkill()    { return ['indexMult','indexDiv','indexPow'].includes(skill); }
function isSciSkill()      { return skill === 'sciTo'; }

function prepGameScreen() {
  show('s-game');
  clearInterval(timer);
  gameOver = false; score = 0; attempts = 0; startTime = null;
  missed = [];

  setText('gScore','0'); setText('gCpm','–'); setText('accPct','–');
  setText('feedback','');
  id('accFill').style.width = '0%';
  id('accFill').style.background = 'var(--green)';
  id('qBox').innerHTML = '<div class="q-text" id="qText"></div>';

  // Reset all answer inputs
  resetAnswerInputs();

  id('gameStartBtn').style.display = 'inline-block';
  id('gameStartBtn').disabled = false;
  id('gameStartBtn').textContent = 'Start';
  id('gameStopBtn').style.display = 'none';
  kbHide();

  const pb = getPB(skill, level);
  const kind = getLevelKind(skill, level);
  const tgt  = getFluencyTarget(skill, level);
  // recall skills get a speed target; method skills get an accuracy-first reminder
  const recallNudge = tgt ? `🎯 Fluency target: <strong>${tgt}/min</strong>` : '⏱ Go for speed';
  const methodNudge = '🧠 Take your time — <strong>accuracy first</strong>';
  const kindNudge = kind === 'recall' ? recallNudge : methodNudge;
  if (sessionMode === 'fluency') {
    setText('gTimeLbl','Time'); setText('gTime','60');
    id('progWrap').style.display = 'block';
    id('progBar').style.transition = 'none';
    id('progBar').style.width = '100%';
    id('pbNudge').innerHTML = pb > 0 ? `🎯 Beat your PB of <strong>${pb}</strong>` : kindNudge;
  } else if (sessionMode === 'challenge') {
    setText('gTimeLbl','Time'); setText('gTime','3:00');
    id('progWrap').style.display = 'block';
    id('progBar').style.transition = 'none';
    id('progBar').style.width = '100%';
    id('pbNudge').innerHTML = pb > 0 ? `🎯 Beat your PB of <strong>${pb}</strong>` : kindNudge;
  } else {
    // practice
    setText('gTimeLbl','Secs'); setText('gTime','0');
    id('progWrap').style.display = 'none';
    id('pbNudge').innerHTML = kind === 'method' ? methodNudge : '';
  }
  // v92: a Mixed Practice round keeps its own banner through Try again.
  if (mixQueue && mixQueue.length) {
    id('pbNudge').innerHTML = '∞ <strong>Mixed Practice</strong> — ' + mixLabel +
      ' · ' + mixQueue.length + ' levels';
  }
}

function resetAnswerInputs() {
  const mode = getInputMode();

  // ── Always hide ALL panels first ──
  id('stdAnsWrap').style.display  = 'none';
  id('fracAnsWrap').style.display = 'none';
  // Clear any equation-mode layout left over from a previous skill.
  id('stdAnsWrap').classList.remove('eq-mode');
  id('fracAnsWrap').classList.remove('eq-mode');
  id('mixedAnsWrap').style.display= 'none';
  id('idxAnsWrap').style.display  = 'none';
  id('ratioAnsWrap').style.display= 'none';
  id('algAnsWrap').style.display  = 'none';
  id('algTypeWrap').style.display = 'none';
  id('choiceAnsWrap').style.display = 'none';
  id('choiceAnsWrap').classList.remove('visible');
  { const sg = id('s-game'); if (sg) sg.classList.remove('choice-active'); }  // v57: desktop diagram-shrink is choice-only
  { const aw = id('arrangeAnsWrap'); if (aw) { aw.style.display = 'none'; aw.classList.remove('visible'); } }  // v71
  id('factorAnsWrap').style.display = 'none';
  { const pt = id('pctTableWrap'); if (pt) pt.style.display = 'none'; }   // v74
  { const pl = id('plToggleWrap'); if (pl) pl.style.display = 'none'; }   // v74
  { const gf = id('gapFillWrap'); if (gf) { gf.style.display = 'none'; gapStow(); const gr = id('gapRow'); if (gr) gr.innerHTML = ''; } }   // v77
  { const ms = id('multiSelWrap'); if (ms) ms.style.display = 'none'; }  // v77
  { const pw = id('plotWrap'); if (pw) pw.style.display = 'none'; }      // v78.2
  { const gw = id('gridFillWrap'); if (gw) { gw.style.display = 'none'; gridStow(); const gh = id('gridHost'); if (gh) gh.innerHTML = ''; } }  // v101
  id('fracAlgLabel').classList.add('hide');
  id('stdAnsWrap').dataset.wholeFromFrac = '';

  // Clear and disable every input
  ['ansInput','fracNum','fracDen','mixedWhole','mixedNum','mixedDen',
   'idxCoeff','idxExp','idxExpB','idxExpC','sciCoeff','sciExp',
   'ratioA','ratioB',
   'algC0','algC1','algC2','algP0','algP1','algP2','algTypeInput',
   'factorBox0','factorBox1',
   'pctP0','pctD0','pctFn0','pctFd0','pctP1','pctD1','pctFn1','pctFd1','pctP2','pctD2','pctFn2','pctFd2',
   'gap0','gap1','gap2','gap3','gap4',
   'grid0','grid1','grid2','grid3','grid4','grid5','grid6','grid7','grid8'].forEach(i => {
    const el = id(i);
    if (el) { el.value=''; el.disabled=true; el.classList.remove('ok','bad'); }
  });

  // Simplify notice — only for fraction skills that REQUIRE simplifying.
  // fracMultiply L1 and fracDivide L1 are designed to NOT need simplifying.
  const sn = id('simplifyNotice');
  const noSimplifyNeeded = (skill === 'fracMultiply' || skill === 'fracDivide') && level === 1;
  // v77.1: gate on the MODE as well. Gradient of a Line Segment is a fraction skill overall,
  // but its L1 is a tap-the-answer question — the "simplify your answer" nudge made no sense
  // there. Every other fraction skill uses the fraction panel on every level, so unchanged.
  /* v101: probability answers are fractions too, and the simplify rule TIGHTENS as
     the ladder climbs — the notice is shown on exactly the levels where simplest
     form is actually required (PROB_LENIENT lists the ones where it is not). */
  const probNeedsSimplify = (mode === 'fraction' && isProbSkill() && !probLenientLevel(skill, level));
  sn.style.display = ((mode === 'fraction' && isFractionSkill() && !noSimplifyNeeded) || probNeedsSimplify) ? 'block' : 'none';

  // ── Show only the correct panel ──
  if (mode === 'fraction') {
    id('fracAnsWrap').style.display = 'flex';
  } else if (mode === 'mixed') {
    id('mixedAnsWrap').style.display = 'flex';
  } else if (mode === 'index' || mode === 'sci') {
    id('idxAnsWrap').style.display = 'flex';
    // hide all sub-rows — enableInputs/setupXxx will reveal the right one
    id('idxPowerOnlyRow').style.display  = 'none';
    id('idxCoeffPowerRow').style.display = 'none';
    id('idxSciRow').style.display        = 'none';
  } else if (mode === 'ratio') {
    id('ratioAnsWrap').style.display = 'flex';
  } else if (mode === 'algebra') {
    id('algAnsWrap').style.display = 'flex';
    id('algTermRow').style.display = 'none';
  } else if (mode === 'algType' || mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored') {
    id('algTypeWrap').style.display = 'flex';
    id('algTypeInput').className = 'ans-input';
    let hint;
    if (mode === 'algProd') hint = 'Type the whole answer, e.g. 12x or 10xy²z  ·  tip: use the x² / x³ buttons or type x2';
    else if (mode === 'algPoly') hint = 'Type the whole expanded answer, e.g. x² + 5x + 6  ·  tip: use the x² button or type x2';
    else if (mode === 'algFactored') hint = 'Type the factorised answer in brackets, e.g. (x + 2)(x + 3)';
    else hint = 'Type the whole answer — including the letter';
    id('algTypeHint').textContent = hint;
    // Desktop power buttons help with superscripts for product / polynomial / factored answers.
    const wantsPow = (mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored');
    id('algPowRow').style.display = (wantsPow && !IS_MOBILE()) ? 'flex' : 'none';
  } else if (mode === 'choice') {
    id('choiceAnsWrap').style.display = 'block';
    id('choiceAnsWrap').classList.add('visible');
    { const sg = id('s-game'); if (sg) sg.classList.add('choice-active'); }  // v57: enables desktop diagram cap
    id('choiceGrid').innerHTML = '';
  } else if (mode === 'arrange') {
    const aw = id('arrangeAnsWrap');
    aw.style.display = 'block';
    aw.classList.add('visible');
    id('arrangeAnswer').innerHTML = '';
    id('arrangePool').innerHTML = '';
  } else if (mode === 'factor') {
    id('factorAnsWrap').style.display = 'flex';
  } else if (mode === 'pctTable') {
    id('pctTableWrap').style.display = 'flex';
  } else if (mode === 'gapFill') {
    id('gapFillWrap').style.display = 'flex';
  } else if (mode === 'multiSel') {
    id('multiSelWrap').style.display = 'flex';
    id('msGrid').innerHTML = '';
  } else if (mode === 'plotPts') {
    id('plotWrap').style.display = 'flex';
  } else if (mode === 'gridFill') {
    id('gridFillWrap').style.display = 'flex';
  } else if (mode === 'plToggle') {
    id('stdAnsWrap').style.display = 'block';
    id('ansInput').className = 'ans-input';
    id('plToggleWrap').style.display = 'flex';
  } else {
    // 'number'
    id('stdAnsWrap').style.display = 'block';
    id('ansInput').className = 'ans-input';
  }
  // Desktop inequality-sign buttons: only for the inequalities mode on a computer.
  { const idr = id('ineqDeskRow'); if (idr) idr.style.display = (mode === 'ineq' && !IS_MOBILE()) ? 'flex' : 'none'; }
  // Desktop √ button: only for surd mode on a computer.
  { const sdr = id('surdDeskRow'); if (sdr) sdr.style.display = (mode === 'surd' && !IS_MOBILE()) ? 'flex' : 'none'; }
  // Desktop π button (v102): only for exact circle answers on a computer.
  { const pdr = id('piDeskRow'); if (pdr) pdr.style.display = (mode === 'piExact' && !IS_MOBILE()) ? 'flex' : 'none'; }
}

function enableInputs() {
  const mode = getInputMode();

  // Fraction skill but answer is a whole number (ansDen === 1):
  // hide the stacked fraction input and use the standard number box instead.
  if (mode === 'fraction' && qData.ansDen === 1) {
    id('stdAnsWrap').dataset.wholeFromFrac = 'true';
    const inp = id('ansInput');
    inp.value = ''; inp.disabled = false; inp.placeholder = '?';
    if (isEquationSkill()) {
      // Single box only: fully hide the fraction wrap, show "x =" inline.
      id('fracAnsWrap').classList.remove('visible');
      id('fracAnsWrap').style.display = 'none';
      id('stdAnsWrap').style.display = 'flex';
      id('stdAnsWrap').classList.add('eq-mode');
      id('eqStdPrefix').innerHTML = `<span class="idx-var">${qData.solveVar}</span> =`;
    } else {
      id('fracAnsWrap').classList.remove('visible');
      id('stdAnsWrap').style.display = 'block';
      id('fracAlgLabel').textContent = 'Answer is a whole number — type it in the box';
      id('fracAlgLabel').classList.remove('hide');
    }
    inp.focus();
    kbActivateInputs(); kbShow();
    return;
  }

  if (mode === 'fraction') {
    id('stdAnsWrap').dataset.wholeFromFrac = '';
    if (isEquationSkill()) {
      // Fraction box REPLACES the whole-number box; "x =" sits inline to its left.
      id('stdAnsWrap').style.display = 'none';
      id('stdAnsWrap').classList.remove('eq-mode');
      id('fracAnsWrap').classList.add('eq-mode');
      id('eqFracPrefix').innerHTML = `<span class="idx-var">${qData.solveVar}</span> =`;
    }
    id('fracNum').disabled = false;
    id('fracDen').disabled = false;
    id('fracNum').focus();
  } else if (mode === 'mixed') {
    const mixMode = qData.mixedMode;
    if (mixMode === 'toImproper') {
      id('fracAnsWrap').classList.add('visible');
      id('mixedAnsWrap').classList.remove('visible');
      id('fracNum').disabled = false;
      id('fracDen').disabled = false;
      id('fracNum').focus();
    } else {
      id('mixedAnsWrap').classList.add('visible');
      id('fracAnsWrap').classList.remove('visible');
      id('mixedWhole').disabled = false;
      id('mixedNum').disabled = false;
      id('mixedDen').disabled = false;
      id('mixedWhole').focus();
    }
  } else if (mode === 'index') {
    setupIndexInput();
  } else if (mode === 'sci') {
    setupSciInput();
  } else if (mode === 'ratio') {
    id('ratioAnsWrap').classList.add('visible');
    id('ratioA').disabled = false;
    id('ratioB').disabled = false;
    id('ratioA').focus();
  } else if (mode === 'algebra') {
    setupAlgInput();
  } else if (mode === 'algType' || mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored') {
    const inp = id('algTypeInput');
    inp.disabled = false;
    inp.focus();
  } else if (mode === 'choice') {
    buildChoiceGrid();
  } else if (mode === 'arrange') {
    buildArrangeGrid();
  } else if (mode === 'pctTable') {
    buildPctTable();
  } else if (mode === 'gapFill') {
    buildGapFill();
  } else if (mode === 'multiSel') {
    buildMultiSel();
  } else if (mode === 'plotPts') {
    buildPlotPts();
  } else if (mode === 'gridFill') {
    buildGridFill();
  } else if (mode === 'plToggle') {
    const inp = id('ansInput');
    inp.disabled = false;
    plResetButtons();
    inp.focus();
  } else if (mode === 'factor') {
    const b0 = id('factorBox0'), b1 = id('factorBox1');
    // Scaffold layout: two brackets ( … )( … ) or HCF box outside one bracket … ( … )
    const layout = qData.factorLayout || 'twoBrackets';
    if (layout === 'monoBracket') {
      id('factorBr0').textContent = '';
      id('factorBr1').textContent = '(';
      id('factorBr2').textContent = ')';
      id('factorHint').textContent = 'Type the HCF, then what goes inside the bracket';
    } else {
      id('factorBr0').textContent = '(';
      id('factorBr1').textContent = ')(';
      id('factorBr2').textContent = ')';
      id('factorHint').textContent = 'Type what goes inside each bracket, e.g. x − 2';
    }
    b0.disabled = false; b1.disabled = false;
    b0.focus();
  } else {
    id('stdAnsWrap').dataset.wholeFromFrac = '';
    const inp = id('ansInput');
    inp.disabled = false;
    inp.focus();
  }
  // Show keypad on mobile after inputs are enabled
  kbActivateInputs();
  kbShow();
}

/* ── Multiple-choice (trig exact values): build the option buttons ── */
function buildChoiceGrid() {
  const grid = id('choiceGrid');
  if (!grid) return;
  // v69: expanded-form options are long (multi-term, stacked fractions) — give
  // them a full-width, auto-height column so nothing clips in the 74px trig grid.
  /* v79: a combination's options are whole sentences ("Reflect in the y-axis, then
     translate 4 units left and 5 units down"), which the fixed 74px two-column
     button clips top and bottom — unreadable. The transformation skills whose
     labels are sentences get the full-width, auto-height column. Found by
     screenshotting a real browser; the jsdom suite reads the label out of the DOM
     and cannot see that it does not fit. */
  grid.classList.toggle('wide', skill === 'decExpand' || skill === 'compareDec' || skill === 'rearrange' || skill === 'primeFactor'
    || ['translate','reflect','dilate','rotate','combine','shapeTrans'].indexOf(skill) >= 0);
  grid.innerHTML = '';
  (qData.choices || []).forEach(opt => {
    const b = document.createElement('button');
    b.className = 'choice-btn';
    b.dataset.code = opt.code;
    b.innerHTML = opt.html;
    b.onclick = () => chooseTrig(opt.code);
    grid.appendChild(b);
  });
}

/* A choice tap IS the answer submission. Lock the buttons, then mark. */
function chooseTrig(code) {
  if (gameOver) return;
  if (qData.chosen != null) return;          // already answered this question
  qData.chosen = code;
  document.querySelectorAll('#choiceGrid .choice-btn').forEach(b => { b.disabled = true; });
  checkAns();
}

/* ── Tap-to-arrange (v71) — order values by tapping them into place ── */
function buildArrangeGrid() {
  qData.arrangeChosen = [];
  id('arrangeInstr').textContent = qData.arrangeInstr || 'Tap the values into order.';
  const clb = id('arrangeClearBtn'); if (clb) clb.disabled = false;
  arrangeRender();
}
function arrangeRender() {
  const tiles = qData.arrangeTiles || [];
  const chosen = qData.arrangeChosen || [];
  const ansRow = id('arrangeAnswer'), pool = id('arrangePool');
  ansRow.innerHTML = '';
  if (!chosen.length) {
    ansRow.innerHTML = '<span class="arrange-empty">Tap values below to place them here…</span>';
  } else {
    chosen.forEach(function(code, i) {
      const t = tiles.find(function(x){ return x.code === code; });
      if (!t) return;
      const b = document.createElement('button');
      b.className = 'arrange-tile'; b.dataset.code = code;
      b.innerHTML = '<span class="arrange-seq">' + (i + 1) + '</span>' + t.html;
      b.onclick = function(){ arrangeTapAnswer(code); };
      ansRow.appendChild(b);
    });
  }
  pool.innerHTML = '';
  tiles.forEach(function(t) {
    if (chosen.indexOf(t.code) >= 0) return;
    const b = document.createElement('button');
    b.className = 'arrange-tile'; b.dataset.code = t.code;
    b.innerHTML = t.html;
    b.onclick = function(){ arrangeTapPool(t.code); };
    pool.appendChild(b);
  });
  const cb = id('arrangeCheckBtn');
  if (cb) cb.disabled = (tiles.length === 0 || chosen.length !== tiles.length);
}
function arrangeTapPool(code) {
  if (gameOver) return;
  if (!qData.arrangeChosen || qData.arrangeChosen.indexOf(code) >= 0) return;
  qData.arrangeChosen.push(code);
  arrangeRender();
}
function arrangeTapAnswer(code) {
  if (gameOver) return;
  const i = (qData.arrangeChosen || []).indexOf(code);
  if (i >= 0) qData.arrangeChosen.splice(i, 1);
  arrangeRender();
}
function arrangeClear() {
  if (gameOver) return;
  qData.arrangeChosen = [];
  arrangeRender();
}
function arrangeSubmit() {
  if (gameOver) return;
  if ((qData.arrangeChosen || []).length !== (qData.arrangeTiles || []).length) return;
  checkAns();
}

/* ── Convert FDP table (v74) — populate given cells, enable blank inputs ── */
function fmtNum(x){ return String(dp(x, 6)); }
function buildPctTable() {
  const rows = qData.pctRows || [];
  const cb = id('pctCheckBtn'); if (cb) cb.disabled = false;
  rows.forEach(function(r, i){
    const givenP = (r.given === 'pct'), givenD = (r.given === 'dec'), givenF = (r.given === 'frac');
    // Percentage cell
    id('pctPg' + i).style.display = givenP ? '' : 'none';
    id('pctPin' + i).style.display = givenP ? 'none' : '';
    if (givenP) id('pctPg' + i).textContent = fmtNum(r.pctExact) + '%';
    const pIn = id('pctP' + i); pIn.value = ''; pIn.classList.remove('ok','bad'); pIn.disabled = givenP;
    // Decimal cell
    id('pctDg' + i).style.display = givenD ? '' : 'none';
    id('pctDin' + i).style.display = givenD ? 'none' : '';
    if (givenD) id('pctDg' + i).textContent = fmtNum(r.decExact);
    const dIn = id('pctD' + i); dIn.value = ''; dIn.classList.remove('ok','bad'); dIn.disabled = givenD;
    // Fraction cell
    id('pctFg' + i).style.display = givenF ? '' : 'none';
    id('pctFin' + i).style.display = givenF ? 'none' : '';
    if (givenF) id('pctFg' + i).innerHTML = fracHTML(r.n, r.d);
    const fnIn = id('pctFn' + i), fdIn = id('pctFd' + i);
    fnIn.value = ''; fdIn.value = ''; fnIn.classList.remove('ok','bad'); fdIn.classList.remove('ok','bad');
    fnIn.disabled = givenF; fdIn.disabled = givenF;
  });
  kbActivateInputs();
  kbShow();
}

/* ── Gap-fill scaffold (v77) ──────────────────────────────────────────────
   A rendered template with up to five numeric boxes. The boxes are the STATIC
   inputs gap0…gap3 (registered in KB_INPUTS so the mobile keypad drives them);
   buildGapFill moves them into #gapRow and gapStow puts them back, so their
   keypad listeners survive every re-render.
     qData.gapTemplate  — array of tokens: a string is literal HTML, a number is
                          the index of the box to drop in there.
     qData.gapAns       — expected numeric value per box, in box order.
     qData.gapUnordered — true ⇒ the set of answers must match, order-free
                          (used for the two solutions of a quadratic).
     qData.gapHint      — instruction line above the row.
     qData.gapAnsText   — what to show in the miss review / feedback.
   Marked ALL-OR-NOTHING: one point for the whole template.                    */
function gapStow() {
  const pool = id('gapPool'); if (!pool) return;
  for (let i = 0; i < 5; i++) { const b = id('gap' + i); if (b && b.parentNode !== pool) pool.appendChild(b); }
}
function buildGapFill() {
  const row = id('gapRow'); if (!row) return;
  gapStow();
  row.innerHTML = '';
  // v78: shrink the boxes once a template has five of them (Sequence Rules in Words L4).
  row.classList.toggle('gap-many', ((qData.gapAns || []).length >= 5));
  id('gapHint').textContent = qData.gapHint || 'Fill in the boxes.';
  const cb = id('gapCheckBtn'); if (cb) cb.disabled = false;
  (qData.gapTemplate || []).forEach(function(tok){
    if (typeof tok === 'number') {
      const b = id('gap' + tok);
      if (b) { b.value = ''; b.disabled = false; b.classList.remove('ok','bad','kb-focused'); row.appendChild(b); }
    } else {
      const sp = document.createElement('span');
      // v78: a literal made up entirely of a <sup> is a POWER on the preceding box.
      sp.className = /^\s*<sup[\s>][\s\S]*<\/sup>\s*$/i.test(tok) ? 'gap-lit gap-pow' : 'gap-lit';
      sp.innerHTML = tok;
      row.appendChild(sp);
    }
  });
  const first = id('gap0'); if (first) first.focus();
  kbActivateInputs();
  kbShow();
  gapFitOneLine();
}

/* v86 (Laura): keep a rule / recurrence template on ONE line on a phone.
   The row is nowrap below 768px (see the mobile CSS), so scrollWidth is the
   true single-line width; if that overflows, scale the row down to fit. A
   transform only changes what is PAINTED, so the boxes keep their layout and
   stay tappable — and the browser maps taps through the transform. */
function gapFitOneLine() {
  const row = id('gapRow'); if (!row) return;
  row.style.transform = ''; row.style.transformOrigin = '';
  if (window.innerWidth >= 900) return;
  /* The row is a shrink-to-fit flex box, so its own clientWidth IS its content
     width — comparing the two would never detect an overflow. Measure against
     the space the row actually has: its parent panel, less the page padding. */
  const parent = row.parentElement;
  const avail = Math.max(0, (parent ? parent.clientWidth : window.innerWidth) - 8);
  const need = row.scrollWidth;
  if (avail > 0 && need > avail) {
    row.style.transform = 'scale(' + Math.max(0.6, avail / need).toFixed(3) + ')';
    row.style.transformOrigin = 'center center';
  }
}

/* ── Grid fill (v101) — complete the blank cells of a table ───────────────
   Generalises the v74 FDP table into a reusable filler, which is what the
   two-way-table level needed: 1 POINT PER CORRECT BOX (a student who gets
   three of four cells right is not wrong), and the boxes are the static
   inputs grid0…grid8, stowed in #gridPool between questions so their keypad
   listeners survive every re-render — the same trick as gapFill.
     qData.gridSpec  — { cols:[header…], rows:[{cells:[cell…]}] }
                       cell = {t:'h', v} row header · {t:'g', v} given
                            · {t:'b', a} a box whose answer is a
     qData.gridInstr — the line above the table                              */
function gridStow() {
  const pool = id('gridPool'); if (!pool) return;
  for (let i = 0; i < 9; i++) { const b = id('grid' + i); if (b && b.parentNode !== pool) pool.appendChild(b); }
}
function buildGridFill() {
  const host = id('gridHost'); if (!host) return;
  gridStow();
  host.innerHTML = '';
  const spec = qData.gridSpec || { cols: [], rows: [] };
  id('gridInstr').textContent = qData.gridInstr || 'Fill in every missing number.';
  const cb = id('gridCheckBtn'); if (cb) cb.disabled = false;
  const tbl = document.createElement('table');
  tbl.className = 'da-table';
  const hr = document.createElement('tr');
  (spec.cols || []).forEach(function(c){ const th = document.createElement('th'); th.innerHTML = c; hr.appendChild(th); });
  tbl.appendChild(hr);
  let bi = 0;
  qData.gridAns = [];
  (spec.rows || []).forEach(function(r){
    const tr = document.createElement('tr');
    (r.cells || []).forEach(function(c){
      const td = document.createElement('td');
      if (c.t === 'b') {
        const inp = id('grid' + bi);
        if (inp) { inp.value = ''; inp.disabled = false; inp.classList.remove('ok','bad','kb-focused'); td.appendChild(inp); }
        qData.gridAns.push(c.a); bi++;
      } else {
        td.innerHTML = String(c.v);
        if (c.t === 'h') td.className = 'da-lbl';
      }
      tr.appendChild(td);
    });
    tbl.appendChild(tr);
  });
  host.appendChild(tbl);
  const first = id('grid0'); if (first) first.focus();
  kbActivateInputs();
  kbShow();
}

/* ── Multi-select (v77) — tick every set the number belongs to ──
   qData.msOptions = [{code,label}]  ·  qData.msAns = [codes that are correct]
   All-or-nothing: every correct box ticked and no incorrect one.              */
function buildMultiSel() {
  const grid = id('msGrid'); if (!grid) return;
  qData.msChosen = [];
  id('msInstr').textContent = qData.msInstr || 'Tick every set the number belongs to.';
  const cb = id('msCheckBtn'); if (cb) cb.disabled = false;
  grid.innerHTML = '';
  (qData.msOptions || []).forEach(function(o){
    const b = document.createElement('button');
    b.type = 'button';
    b.className = 'ms-btn';
    b.dataset.code = o.code;
    b.innerHTML = '<span class="ms-tick">\u2610</span>' + o.label;
    b.onclick = function(){ msToggle(o.code); };
    grid.appendChild(b);
  });
  kbHide();
}
function msToggle(code) {
  if (gameOver) return;
  if (qData.msMarked) return;
  const chosen = qData.msChosen || (qData.msChosen = []);
  const i = chosen.indexOf(code);
  if (i >= 0) chosen.splice(i, 1); else chosen.push(code);
  document.querySelectorAll('#msGrid .ms-btn').forEach(function(b){
    const on = chosen.indexOf(b.dataset.code) >= 0;
    b.classList.toggle('sel', on);
    const t = b.querySelector('.ms-tick'); if (t) t.textContent = on ? '\u2611' : '\u2610';
  });
}

/* ── Profit / Loss toggle (v74) ── */
function plResetButtons() {
  qData.plChosen = null;
  ['plProfitBtn','plLossBtn'].forEach(function(b){ const el = id(b); if (el) el.classList.remove('sel','ok','bad'); });
}
function plChoose(dir) {
  if (gameOver) return;
  if (qData.plMarked) return;           // locked after checking
  qData.plChosen = dir;
  id('plProfitBtn').classList.toggle('sel', dir === 'profit');
  id('plLossBtn').classList.toggle('sel', dir === 'loss');
  /* v89 (Laura): tapping Profit or Loss IS the submit, whenever the amount is
     already typed. Before this, choosing a direction only set a flag: the tap
     had taken focus off the number box, so the student had to click back into
     it and press Enter, which made a two-part answer feel like a four-step job.
     Profit/Loss is always the LAST thing decided, so the tap that completes the
     answer should also send it.
     If the box is still empty the tap just selects the direction and puts the
     cursor back in the box, so answering direction-first still works, and Enter
     or the keypad tick still submit exactly as before. */
  const inp = id('ansInput');
  const raw = (inp && inp.value ? inp.value : '').trim();
  if (raw !== '' && raw !== '.' && !isNaN(parseFloat(raw))) { checkAns(); return; }
  if (inp && !inp.disabled) { inp.focus(); if (typeof kbFocus === 'function') kbFocus(inp); }
}

/* ── setupIndexInput: shows the right sub-row and enables the right inputs ── */
function setupIndexInput() {
  const m = qData.idxMode || 'expOnly';
  setText('idxInstruction', '');

  if (m === 'expOnly') {
    id('idxPowerOnlyRow').style.display  = 'flex';
    id('idxCoeffPowerRow').style.display = 'none';
    id('idxExp').disabled = false;
    id('idxExp').focus();
  } else {
    id('idxPowerOnlyRow').style.display  = 'none';
    id('idxCoeffPowerRow').style.display = 'flex';

    // Set variable letters (serif italic spans)
    setText('idxVarDisplay', qData.var1 || 'x');

    // Level 3: show y-variable group with its own power box
    const hasY = (qData.ansExpY !== undefined && qData.ansExpY !== null);
    id('idxYGroup').style.display = hasY ? 'inline-flex' : 'none';
    if (hasY) {
      setText('idxVarYDisplay', qData.var2 || 'y');
      id('idxExpC').disabled = false;
    } else {
      id('idxExpC').disabled = true;
    }

    id('idxCoeff').disabled = false;
    id('idxExpB').disabled  = false;
    id('idxCoeff').focus();
  }
}

function setupSciInput() {
  // idxAnsWrap already display:flex
  id('idxSciRow').style.display = 'flex';
  setText('idxInstruction', '');  // no hints during gameplay
  id('sciCoeff').disabled = false;
  id('sciExp').disabled   = false;
  id('sciCoeff').focus();
}

/* ── setupAlgInput: reveal the right number of coefficient slots (v23) ── */
/* Reads qData.alg.slots = [{coeff, varLabel, askPower, power}, ...]. Each slot
   shows a coefficient box; a non-empty varLabel shows the variable letter; an
   askPower slot also shows a power box. Powers baked into the label (e.g. 'x²')
   use askPower:false. Separators between slots are always '+'; negative answers
   are entered as negative coefficients. */
function setupAlgInput() {
  setText('algInstruction', '');
  id('algTermRow').style.display = 'flex';
  const slots = (qData.alg && qData.alg.slots) || [];

  for (let i = 0; i < 3; i++) {
    const cg  = id('algCoeffGroup' + i);
    const vg  = id('algVarGroup' + i);
    const ci  = id('algC' + i);
    const pi  = id('algP' + i);
    const vl  = id('algV' + i);
    const pb  = id('algPowBox' + i);
    const sep = (i > 0) ? id('algSep' + i) : null;

    if (i < slots.length) {
      const s = slots[i];
      cg.style.display = 'flex';
      ci.disabled = false;
      if (sep) sep.style.display = 'inline-block';

      if (s.varLabel && s.varLabel !== '') {
        vg.style.display = 'inline-flex';
        vl.textContent = s.varLabel;
        if (s.askPower) {
          pb.style.display = 'flex';
          pi.disabled = false;
        } else {
          pb.style.display = 'none';
          pi.disabled = true;
        }
      } else {
        vg.style.display = 'none';
        pi.disabled = true;
      }
    } else {
      cg.style.display = 'none';
      vg.style.display = 'none';
      ci.disabled = true;
      pi.disabled = true;
      if (sep) sep.style.display = 'none';
    }
  }
  id('algC0').focus();
}

/* ═══════════════════════════════════════════════
   SESSION LAUNCH
═══════════════════════════════════════════════ */
function launchSession() {
  clearInterval(timer);
  gameOver = false; score = 0; attempts = 0; streak = 0; bestStreak = 0;
  missed = [];
  setText('gScore','0'); setText('feedback','');
  setText('gStreak','0'); id('streakPill').style.display='none'; id('streakPill').classList.remove('hot');
  id('gameStartBtn').style.display = 'none';

  startTime = Date.now();

  if (sessionMode === 'practice') {
    elapsedSec = 0; setText('gTime','0');
    timer = setInterval(() => {
      elapsedSec++; setText('gTime', elapsedSec); tickCPM();
    }, 1000);
    id('gameStopBtn').style.display = 'inline-block';
  } else {
    // fluency = 60s, challenge = 180s
    const totalSecs = sessionMode === 'challenge' ? 180 : 60;
    timeLeft = totalSecs;
    const fmt = (s) => s >= 60 ? `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}` : String(s);
    setText('gTime', fmt(timeLeft));
    id('progBar').style.transition = 'none';
    id('progBar').style.width = '100%';
    requestAnimationFrame(() => requestAnimationFrame(() => {
      id('progBar').style.transition = `width 1s linear`;
    }));
    timer = setInterval(() => {
      timeLeft--;
      setText('gTime', fmt(timeLeft));
      id('progBar').style.width = (timeLeft / totalSecs * 100) + '%';
      tickCPM();
      if (timeLeft <= 0) { clearInterval(timer); id('progBar').style.width='0%'; endSession(); }
    }, 1000);
  }
  nextQ();
}

function stopPractice() {
  if (mixQueue && mixQueue.length) return stopMixedPractice();
  clearInterval(timer);
  // Disable all inputs
  ['ansInput','fracNum','fracDen','mixedWhole','mixedNum','mixedDen',
   'idxCoeff','idxExp','idxExpB','idxExpC','sciCoeff','sciExp'].forEach(i => {
    const el = document.getElementById(i); if (el) el.disabled = true;
  });
  kbHide();

  // Show full results screen for practice mode
  const acc = attempts > 0 ? score / attempts : 0;
  const mins = startTime ? (Date.now() - startTime) / 60000 : 0;
  const cpm = mins > 0 ? Math.round(score / mins) : 0;
  // Practice score = correct × accuracy (no time pressure so no ² penalty)
  const practiceScore = Math.round(score * acc);

  pushTrend(skill, level, practiceScore);
  const trend = getTrend(skill, level);

  // v27: stamp session history for practice sessions too
  recordActivity(skill, level, Math.round(acc * 100), startTime ? (Date.now() - startTime) / 1000 : 0);

  // v30: queue practice sessions for the teacher share too, flagged as Practice
  // (the dashboard Mode column will read "Practice"). Practice never sets a PB.
  recordSession(skill, level, practiceScore, score, Math.round(acc * 100), cpm, false);

  sessionBandUp = false;   // v43: practice never shows an animal band
  showResults(practiceScore, score, acc, cpm, 'practice', 0, trend);
}

function abortGame() {
  clearInterval(timer);
  // v92: a Mixed Practice round has no single level list to go back to, and a
  // level opened from an ALT belongs to that ALT — Back should retrace the way
  // the student actually came in.
  const wasMix = !!(mixQueue && mixQueue.length);
  mixQueue = null;
  level = null;
  if (wasMix || modeFrom === 'alt') { if (altCtx) return openAlt(altCtx.altN || 0); return goHome(); }
  // v69 (Laura): the in-game Back returns to THIS skill's level list, not the
  // category menu. Keep skill/skillMeta so selectSkill rebuilds the level cards.
  if (skillMeta) selectSkill(skillMeta);
  else goHome();
}

/* ═══════════════════════════════════════════════
   EQUATIONS — solve one-step & two-step linear equations
   Method skills. Reuse the 'fraction' input mode: integer solutions go in the
   whole-number box (ansDen === 1), fraction solutions in the num/den boxes.
   Generators build BACKWARDS from a chosen solution so the equation is always
   valid, store the solution as a reduced fraction (qData.ansNum/ansDen, den>0),
   and build a worked example into qData.workSteps for the miss review.
═══════════════════════════════════════════════ */
const EQ_VAR = 'x';   // the unknown students solve for (kept as x for clarity)

/* Store solution p/q reduced, with a positive denominator. */
function eqStore(p, q) {
  if (q < 0) { p = -p; q = -q; }
  const g = gcd(Math.abs(p), Math.abs(q)) || 1;
  qData.ansNum = p / g;
  qData.ansDen = q / g;
}
/* Bare solution string, e.g. "5", "−7/4". */
function eqAnsBare() {
  return qData.ansDen === 1 ? aNum(qData.ansNum) : `${aNum(qData.ansNum)}/${qData.ansDen}`;
}
function eqShell(el, html, fs) {
  el.style.fontSize = fs || '2.4rem';
  el.innerHTML = `<div style="${A_LBL}">Solve for ${aVar(EQ_VAR)}</div>${html}`;
}

/* One-step + / −  (lvKey eq1) */
function genEqOneStepAddSub(el) {
  qData.solveVar = EQ_VAR;
  let x, a;
  if (level === 1)      { x = rr(1, 15);       a = rr(1, 15); }
  else if (level === 2) { x = nzrand(-12, 12); a = rr(1, 15); }
  else                  { x = nzrand(-30, 30); a = rr(2, 40); }
  // Forms: 0: x + a = b ; 1: x − a = b ; 2: a + x = b
  // Level 1 stays all-positive (forms 0 & 2 only) so nothing negative appears.
  const form = (level === 1) ? (Math.random() < 0.5 ? 0 : 2) : ri(3);
  let b, html, steps;
  if (form === 0) {
    b = x + a;
    html  = `${aVar(EQ_VAR)} + ${a} = ${aNum(b)}`;
    steps = `Subtract ${a} from both sides:<br>${aVar(EQ_VAR)} = ${aNum(b)} − ${a} = <b>${aNum(x)}</b>.`;
  } else if (form === 1) {
    b = x - a;
    html  = `${aVar(EQ_VAR)} − ${a} = ${aNum(b)}`;
    steps = `Add ${a} to both sides:<br>${aVar(EQ_VAR)} = ${aNum(b)} + ${a} = <b>${aNum(x)}</b>.`;
  } else {
    b = a + x;
    html  = `${a} + ${aVar(EQ_VAR)} = ${aNum(b)}`;
    steps = `Subtract ${a} from both sides:<br>${aVar(EQ_VAR)} = ${aNum(b)} − ${a} = <b>${aNum(x)}</b>.`;
  }
  eqStore(x, 1);
  qData.workSteps = steps;
  eqShell(el, html);
}

/* One-step × / ÷  (lvKey eq2) */
function genEqOneStepMulDiv(el) {
  qData.solveVar = EQ_VAR;
  let html, steps;
  if (level === 3) {
    // Fraction solution: a·x = b with b/a not an integer and already reduced.
    let q = rr(2, 6), p;
    do { p = nzrand(-19, 19); } while (p % q === 0 || gcd(Math.abs(p), q) !== 1);
    eqStore(p, q);                       // a = q, b = p  →  x = p/q
    html  = `${q}${aVar(EQ_VAR)} = ${aNum(p)}`;
    steps = `Divide both sides by ${q}:<br>${aVar(EQ_VAR)} = ${aNum(p)}/${q} <b>(already in simplest form)</b>.`;
  } else if (Math.random() < 0.55) {
    // Multiplication form a·x = b, integer x.
    const a = (level === 1) ? rr(2, 9) : nz((Math.random() < 0.5 ? -1 : 1) * rr(2, 9));
    const x = (level === 1) ? rr(2, 12) : nzrand(-12, 12);
    const b = a * x;
    eqStore(x, 1);
    html  = `${aNum(a)}${aVar(EQ_VAR)} = ${aNum(b)}`;
    steps = `Divide both sides by ${aNum(a)}:<br>${aVar(EQ_VAR)} = ${aNum(b)} ÷ ${aNum(a)} = <b>${aNum(x)}</b>.`;
  } else {
    // Division form, integer x = a·b. Divisor kept positive.
    const a = rr(2, 9);
    const b = (level === 1) ? rr(2, 12) : nzrand(-12, 12);
    const x = a * b;
    eqStore(x, 1);
    // Show as a stacked fraction (x/5 = 10) about half the time, otherwise
    // inline with ÷ (x ÷ 5 = 10), so students meet both ways of writing it.
    html = (Math.random() < 0.5)
      ? `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(aVar(EQ_VAR), a)}<span>= ${aNum(b)}</span></div>`
      : `${aVar(EQ_VAR)} ÷ ${a} = ${aNum(b)}`;
    steps = `Multiply both sides by ${a}:<br>${aVar(EQ_VAR)} = ${aNum(b)} × ${a} = <b>${aNum(x)}</b>.`;
  }
  qData.workSteps = steps;
  eqShell(el, html);
}

/* Two-step linear  (lvKey eq3)  —  a·x + c = b */
function genEqTwoStep(el) {
  qData.solveVar = EQ_VAR;
  // Plain-English "undo the constant" step (avoids "subtract −3").
  const undoC = c => c < 0 ? `Add ${Math.abs(c)} to both sides` : `Subtract ${c} from both sides`;
  let html, steps;
  if (level === 3) {
    // Fraction solution. a = q so (b − c)/a = p/q, already reduced.
    let q = rr(2, 6), p;
    do { p = nzrand(-13, 13); } while (p % q === 0 || gcd(Math.abs(p), q) !== 1);
    const a = q;
    const c = (Math.random() < 0.5 ? -1 : 1) * rr(1, 9);
    const b = p + c;
    eqStore(p, a);
    html  = `${a}${aVar(EQ_VAR)} ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c} = ${aNum(b)}`;
    steps = `${undoC(c)} → ${a}${aVar(EQ_VAR)} = ${aNum(p)}.<br>`
          + `Divide both sides by ${a} → ${aVar(EQ_VAR)} = <b>${aNum(qData.ansNum)}/${qData.ansDen}</b>.`;
  } else if (level === 1) {
    const a = rr(2, 6), x = rr(1, 9), c = rr(1, 12);
    const b = a * x + c;
    eqStore(x, 1);
    html  = `${a}${aVar(EQ_VAR)} + ${c} = ${aNum(b)}`;
    steps = `${undoC(c)} → ${a}${aVar(EQ_VAR)} = ${aNum(b - c)}.<br>`
          + `Divide both sides by ${a} → ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  } else if (Math.random() < 0.5) {
    // Negative coefficient, shown as "c − |a|x = b".
    const a = -rr(2, 6), x = nzrand(-9, 9), c = rr(1, 12);
    const b = a * x + c;
    eqStore(x, 1);
    html  = `${c} − ${Math.abs(a)}${aVar(EQ_VAR)} = ${aNum(b)}`;
    steps = `${undoC(c)} → ${aNum(a)}${aVar(EQ_VAR)} = ${aNum(b - c)}.<br>`
          + `Divide both sides by ${aNum(a)} → ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  } else {
    const a = rr(2, 6), x = nzrand(-9, 9), c = (Math.random() < 0.5 ? -1 : 1) * rr(1, 12);
    const b = a * x + c;
    eqStore(x, 1);
    html  = `${a}${aVar(EQ_VAR)} ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c} = ${aNum(b)}`;
    steps = `${undoC(c)} → ${a}${aVar(EQ_VAR)} = ${aNum(b - c)}.<br>`
          + `Divide both sides by ${a} → ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  }
  qData.workSteps = steps;
  eqShell(el, html, '2.2rem');
}

/* Two-step equations with fractions  (lvKey eq4)
   L1/L2 forms:  x/a + c = b   ·   (x ± c)/a = b   (integer solutions)
   L3 form:      (m·x ± c)/a = b   — a coefficient on x makes the solution a
   genuine fraction in lowest terms (with integer coefficients the simple forms
   always solve to an integer). Built backwards so the equation is always valid. */
function genEqTwoStepFrac(el) {
  qData.solveVar = EQ_VAR;
  let html, steps;
  const a = rr(2, 5);                       // denominator
  if (level === 3) {
    // (m·x + c)/a = b  →  m·x = a·b − c  →  x = (a·b − c)/m, reduced & non-integer.
    let m, b, c, num, tries = 0;
    do {
      m = rr(2, 4);
      b = nzrand(-6, 6);
      c = nzrand(-9, 9);
      num = a * b - c;                      // = m·x
      tries++;
    } while ((num === 0 || num % m === 0 || gcd(Math.abs(num), m) !== 1) && tries < 80);
    if (num === 0 || num % m === 0) { m = 2; b = 3; c = 1; num = a * b - c; }
    eqStore(num, m);                          // x = num/m reduced
    const inner = `${m}${aVar(EQ_VAR)} ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c}`;
    html = `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(inner, a)}<span>= ${aNum(b)}</span></div>`;
    steps = `Multiply both sides by ${a}: ${inner} = ${aNum(a * b)}.<br>`
          + `${c < 0 ? 'Add ' + Math.abs(c) : 'Subtract ' + c} → ${m}${aVar(EQ_VAR)} = ${aNum(num)}.<br>`
          + `Divide both sides by ${m} → ${aVar(EQ_VAR)} = <b>${aNum(qData.ansNum)}/${qData.ansDen}</b> (simplest form).`;
    qData.workSteps = steps;
    eqShell(el, html, '2.2rem');
    return;
  }
  // L1 / L2 — integer solutions
  const neg = (level === 2);
  if (Math.random() < 0.5) {
    // x/a + c = b   →   x = a·k where k = x/a;  b = k + c.
    const k = neg ? nzrand(-9, 9) : rr(1, 9);
    const c = neg ? nzrand(-9, 9) : rr(1, 9);
    const x = a * k;
    const b = k + c;
    eqStore(x, 1);
    html = `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(aVar(EQ_VAR), a)}<span>${c < 0 ? '− ' + Math.abs(c) : '+ ' + c} = ${aNum(b)}</span></div>`;
    steps = `${c < 0 ? 'Add ' + Math.abs(c) : 'Subtract ' + c} from both sides: ${aVar(EQ_VAR)}/${a} = ${aNum(k)}.<br>`
          + `Multiply both sides by ${a} → ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  } else {
    // (x − c)/a = b  (L1: subtract only, positive).  L2: allow + form & negatives.
    const sub = neg ? (Math.random() < 0.5) : true;
    const b = neg ? nzrand(-7, 7) : rr(1, 7);
    const c = rr(1, 9);
    const x = a * b + (sub ? c : -c);         // L1: x = a·b + c > 0
    eqStore(x, 1);
    const inner = `${aVar(EQ_VAR)} ${sub ? '− ' + c : '+ ' + c}`;
    html = `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(inner, a)}<span>= ${aNum(b)}</span></div>`;
    steps = `Multiply both sides by ${a}: ${inner} = ${aNum(a * b)}.<br>`
          + `${sub ? 'Add ' + c : 'Subtract ' + c} → ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  }
  qData.workSteps = steps;
  eqShell(el, html, '2.2rem');
}

/* Equations with the variable on the denominator  (lvKey eq5)
   Forms:  a/x = b   ·   a/(x + c) = b   ·   a/(x − c) = b
   Built backwards from a chosen solution. L1 a/x with whole answers, L2 bracket
   denominator, L3 fraction solution (b does not divide a). */
function genEqVarDenom(el) {
  qData.solveVar = EQ_VAR;
  let html, steps;
  if (level === 1) {
    // a/x = b, whole-number x ≥ 2.  a = b·x.
    const x = rr(2, 12);
    const b = rr(2, 9);
    const a = b * x;
    eqStore(x, 1);
    html = `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(a, aVar(EQ_VAR))}<span>= ${b}</span></div>`;
    steps = `Multiply both sides by ${aVar(EQ_VAR)}: ${a} = ${b}${aVar(EQ_VAR)}.<br>`
          + `Divide both sides by ${b} → ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  } else if (level === 2) {
    // a/(x ± c) = b, whole-number solution (can be negative).  denom = a/b integer.
    const b = rr(1, 6);
    let denom = nzrand(-12, 12);          // value of (x ± c)
    if (denom === 0) denom = 2;
    const a = b * denom;
    const c = rr(1, 9);
    const sub = Math.random() < 0.5;      // (x − c) or (x + c)
    const x = sub ? denom + c : denom - c;
    eqStore(x, 1);
    const inner = `${aVar(EQ_VAR)} ${sub ? '− ' + c : '+ ' + c}`;
    html = `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(a, inner)}<span>= ${aNum(b)}</span></div>`;
    steps = `Multiply both sides by (${inner}): ${a} = ${aNum(b)}(${inner}).<br>`
          + `Divide by ${aNum(b)} → ${inner} = ${aNum(denom)}, so ${aVar(EQ_VAR)} = <b>${aNum(x)}</b>.`;
  } else {
    // L3 fraction solution.  a/x = b with b ∤ a  →  x = a/b in lowest terms.
    let a, b;
    do { a = rr(3, 19); b = rr(2, 9); } while (a % b === 0 || gcd(a, b) !== 1);
    eqStore(a, b);                        // x = a/b reduced
    html = `<div class="q-expr" style="justify-content:center;gap:10px">${fracHTML(a, aVar(EQ_VAR))}<span>= ${b}</span></div>`;
    steps = `Multiply both sides by ${aVar(EQ_VAR)}: ${a} = ${b}${aVar(EQ_VAR)}.<br>`
          + `Divide both sides by ${b} → ${aVar(EQ_VAR)} = <b>${a}/${b}</b> (already in simplest form).`;
  }
  qData.workSteps = steps;
  eqShell(el, html, '2.2rem');
}

/* Variables on both sides  (lvKey eq6)
   Form:  a·x + c = d·x + e   with a ≠ d. Displayed coefficients (a, d) are always
   positive whole numbers; only the constants and the solution can be negative.
   x = (e − c)/(a − d). Built backwards from a chosen solution.
   L1 positive whole, L2 negatives, L3 fraction solution. */
function genEqBothSides(el) {
  qData.solveVar = EQ_VAR;
  // Render "<coef>x ± <const>". Handles coef of 1, −1, negative (for worked steps).
  const side = (coef, k) => {
    let s;
    if (coef === 1) s = aVar(EQ_VAR);
    else if (coef === -1) s = '−' + aVar(EQ_VAR);
    else s = aNum(coef) + aVar(EQ_VAR);
    if (k > 0) s += ` + ${k}`;
    else if (k < 0) s += ` − ${Math.abs(k)}`;
    return s;
  };
  let a, d, c, e, x, html, steps;
  if (level === 3) {
    // Fraction solution: a − d = q (denominator), e − c = p, gcd(p,q)=1, q ∤ p.
    let q = rr(2, 5), p;
    do { p = nzrand(-13, 13); } while (p % q === 0 || gcd(Math.abs(p), q) !== 1);
    d = rr(1, 5); a = d + q;                 // a − d = q > 0
    c = nzrand(-9, 9); e = c + p;            // e − c = p
    eqStore(p, q);                            // x = p/q reduced
  } else {
    const neg = (level === 2);
    x = neg ? nzrand(-7, 7) : rr(1, 7);
    do { a = rr(2, 7); d = rr(1, 6); } while (a === d);
    if (!neg && a < d) { const t = a; a = d; d = t; }   // L1: a > d → all-positive display
    c = neg ? nzrand(-9, 9) : rr(1, 9);
    e = (a - d) * x + c;                      // guarantees the equation solves to x
    eqStore(x, 1);
  }
  html = `${side(a, c)} = ${side(d, e)}`;
  // Worked steps — move the smaller x-term and the constant, then divide.
  const dx = a - d, num = e - c;
  const ans = (qData.ansDen === 1) ? `<b>${aNum(qData.ansNum)}</b>` : `<b>${aNum(qData.ansNum)}/${qData.ansDen}</b> (simplest form)`;
  steps = `Subtract ${side(d, 0)} from both sides: ${side(dx, c)} = ${aNum(e)}.<br>`
        + `${c < 0 ? 'Add ' + Math.abs(c) : 'Subtract ' + c} from both sides: ${side(dx, 0)} = ${aNum(num)}.<br>`
        + `Divide both sides by ${aNum(dx)} → ${aVar(EQ_VAR)} = ${ans}.`;
  qData.workSteps = steps;
  eqShell(el, html, '2.2rem');
}

/* ═══════════════════════════════════════════════
   TRIGONOMETRY & PYTHAGORAS
═══════════════════════════════════════════════ */

/* tiny shuffle (Fisher–Yates) for option ordering */
function shuffleArr(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = ri(i + 1); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }

/* compact stacked fraction for buttons / radian angles */
function tfrac(n, d) { return `<span class="t-frac"><span class="tn">${n}</span><span class="tb"></span><span class="td">${d}</span></span>`; }

/* The finite set of exact values. t = plain text (feedback/review),
   h = HTML (option buttons). Keys are canonical, so equality of keys
   means equality of value. */
const TRIG_VALS = {
  '0':    { t:'0',         h:'0' },
  '1':    { t:'1',         h:'1' },
  '-1':   { t:'−1',        h:'−1' },
  'h':    { t:'1/2',       h:tfrac('1','2') },
  '-h':   { t:'−1/2',      h:tfrac('−1','2') },
  'r2':   { t:'√2/2',      h:tfrac('√2','2') },
  '-r2':  { t:'−√2/2',     h:tfrac('−√2','2') },
  'r3':   { t:'√3/2',      h:tfrac('√3','2') },
  '-r3':  { t:'−√3/2',     h:tfrac('−√3','2') },
  'r33':  { t:'√3/3',      h:tfrac('√3','3') },
  '-r33': { t:'−√3/3',     h:tfrac('−√3','3') },
  'R3':   { t:'√3',        h:'√3' },
  '-R3':  { t:'−√3',       h:'−√3' },
  'undef':{ t:'undefined', h:'undefined' },
};

/* Unit-circle exact values. Each row: degrees, radian label, and the
   value KEY (into TRIG_VALS) for sin, cos, tan at that angle. */
const TRIG_TABLE = [
  { deg:0,   rad:'0',     sin:'0',   cos:'1',   tan:'0'    },
  { deg:30,  rad:'π/6',   sin:'h',   cos:'r3',  tan:'r33'  },
  { deg:45,  rad:'π/4',   sin:'r2',  cos:'r2',  tan:'1'    },
  { deg:60,  rad:'π/3',   sin:'r3',  cos:'h',   tan:'R3'   },
  { deg:90,  rad:'π/2',   sin:'1',   cos:'0',   tan:'undef'},
  { deg:120, rad:'2π/3',  sin:'r3',  cos:'-h',  tan:'-R3'  },
  { deg:135, rad:'3π/4',  sin:'r2',  cos:'-r2', tan:'-1'   },
  { deg:150, rad:'5π/6',  sin:'h',   cos:'-r3', tan:'-r33' },
  { deg:180, rad:'π',     sin:'0',   cos:'-1',  tan:'0'    },
  { deg:210, rad:'7π/6',  sin:'-h',  cos:'-r3', tan:'r33'  },
  { deg:225, rad:'5π/4',  sin:'-r2', cos:'-r2', tan:'1'    },
  { deg:240, rad:'4π/3',  sin:'-r3', cos:'-h',  tan:'R3'   },
  { deg:270, rad:'3π/2',  sin:'-1',  cos:'0',   tan:'undef'},
  { deg:300, rad:'5π/3',  sin:'-r3', cos:'h',   tan:'-R3'  },
  { deg:315, rad:'7π/4',  sin:'-r2', cos:'r2',  tan:'-1'   },
  { deg:330, rad:'11π/6', sin:'-h',  cos:'r3',  tan:'-r33' },
  { deg:360, rad:'2π',    sin:'0',   cos:'1',   tan:'0'    },
];

/* Render a radian angle label as HTML (stacked fraction when it has /). */
function radHtml(rad) {
  if (rad.indexOf('/') === -1) return rad;
  const p = rad.split('/');
  return tfrac(p[0], p[1]);
}

/* Exact-value multiple choice. useRad → radians question, else degrees. */
function genTrigExact(el, useRad) {
  const fns = ['sin', 'cos', 'tan'];
  const rows = TRIG_TABLE.filter(r => level === 1 ? r.deg <= 90 : level === 2 ? r.deg <= 180 : true);
  const row = rows[ri(rows.length)];
  const fn  = fns[ri(3)];
  const ans = row[fn];
  qData.choiceAns = ans;
  qData.chosen = null;

  // Distractors: other real exact values. Keep 'undefined' out of the pool
  // unless the question is tan or the answer itself is undefined.
  let pool = Object.keys(TRIG_VALS).filter(k => k !== ans
              && (k !== 'undef' || fn === 'tan' || ans === 'undef'));
  const picks = [];
  while (picks.length < 3 && pool.length) picks.push(pool.splice(ri(pool.length), 1)[0]);
  const opts = shuffleArr([ans, ...picks]);
  qData.choices = opts.map(c => ({ code: c, html: TRIG_VALS[c].h }));

  const angle = useRad ? `(${radHtml(row.rad)})` : `${row.deg}°`;
  qData.workSteps = `${fn} ${angle} = <b>${TRIG_VALS[ans].h}</b> — read it from the special 30-60-90 / 45-45-90 triangle or the unit circle (check the quadrant for the sign).`;
  el.innerHTML = `<div style="${A_LBL}">Tap the exact value</div>` +
                 `<span style="font-size:2.4rem;font-weight:900">${fn} ${angle}</span>`;
}

/* ═══════════════════════════════════════════════
   TWO & THREE-STEP LINEAR INEQUALITIES  (v51, lvKey ineq)
   Forms:  ax + b OP c   ·   x/a + b OP c   ·   (ax + b)/c OP d
   Solved like an equation; the answer is typed as "x OP value" where OP is one
   of < > ≤ ≥ and value is an integer or a fraction in simplest form.
   • L1 — positive/negative INTEGER answers, positive leading coefficient (no flip)
   • L2 — a mix, answers/coefficients can be FRACTIONS
   • L3 — some questions have a NEGATIVE leading coefficient, so dividing by a
          negative REVERSES the inequality sign.
   Built backwards so the stated inequality is always valid. The answer is stored
   as {ansOp, ansNum/ansDen reduced}; the checker (mode 'ineq') accepts either
   orientation (x on the left or right) and any equivalent value.
═══════════════════════════════════════════════ */
const INEQ_OPS = ['<', '>', '≤', '≥'];
function ineqFlip(op){ return op === '<' ? '>' : op === '>' ? '<' : op === '≤' ? '≥' : '≤'; }
function ineqOpHTML(op){ return op === '<' ? '&lt;' : op === '>' ? '&gt;' : op; }
/* Store the solved inequality: reduce the value, keep the denominator positive. */
function ineqStore(op, num, den){
  if (den < 0) { num = -num; den = -den; }
  const g = gcd(Math.abs(num), Math.abs(den)) || 1;
  num = num / g; den = den / g;
  qData.ansOp = op; qData.ansNum = num; qData.ansDen = den;
  const valStr = (den === 1) ? aNum(num) : `${aNum(num)}/${den}`;
  qData.ansDisplay = `${EQ_VAR} ${op} ${valStr}`;                                   // plain text (feedback uses textContent)
  qData.ansDisplayHTML = `${aVar(EQ_VAR)} ${ineqOpHTML(op)} ${valStr}`;             // HTML-safe (worked-steps innerHTML)
}
/* Plain-English "undo the constant" line. */
function ineqUndoC(b){ return b < 0 ? `Add ${Math.abs(b)} to both sides` : `Subtract ${b} from both sides`; }
/* Render an "ax + b" expression (a may be negative). Uses a leading-constant
   style (b − |a|x) when that reads more naturally. Returns escaped HTML. */
function ineqLinHTML(a, b){
  const vx = aVar(EQ_VAR);
  const lead = (a === 1) ? vx : (a === -1) ? ('−' + vx) : `${aNum(a)}${vx}`;
  if (b === 0) return lead;
  const bpart = (b > 0) ? ` + ${b}` : ` − ${Math.abs(b)}`;
  return lead + bpart;
}
function genIneqLinear(el){
  const op = INEQ_OPS[rr(0, 3)];
  let html, steps, form;

  if (level === 1){
    // Integer answers, positive leading coefficient → no flip.
    form = rr(0, 2);
    if (form === 0){
      // ax + b OP c, with c chosen so (c−b)/a is a whole number x0.
      const a = rr(2, 6), x0 = nzrand(-9, 9), b = nzrand(-9, 9), c = a * x0 + b;
      ineqStore(op, c - b, a);
      html = `${ineqLinHTML(a, b)} ${ineqOpHTML(op)} ${aNum(c)}`;
      steps = `${ineqUndoC(b)} → ${a}${aVar(EQ_VAR)} ${ineqOpHTML(op)} ${aNum(c - b)}.<br>`
            + `Divide both sides by ${a} → <b>${qData.ansDisplayHTML}</b>.`;
    } else if (form === 1){
      // x/a + b OP c → x OP a(c−b). Integer answer by construction.
      const a = rr(2, 6), m = nzrand(-6, 6), b = nzrand(-9, 9), c = b + m;
      ineqStore(op, a * m, 1);
      html = `${fracHTML(aVar(EQ_VAR), a)}<span>${b >= 0 ? ' + ' + b : ' − ' + Math.abs(b)} ${ineqOpHTML(op)} ${aNum(c)}</span>`;
      html = `<div class="q-expr" style="justify-content:center;gap:8px;align-items:center">${html}</div>`;
      steps = `${ineqUndoC(b)} → ${aVar(EQ_VAR)}/${a} ${ineqOpHTML(op)} ${aNum(c - b)}.<br>`
            + `Multiply both sides by ${a} → <b>${qData.ansDisplayHTML}</b>.`;
    } else {
      // (ax + b)/c OP d, with d chosen so the answer x0 is a whole number.
      let a, x0, b, c, num, tries = 0;
      do { a = rr(2, 5); x0 = nzrand(-6, 6); b = nzrand(-9, 9); c = rr(2, 5); num = a * x0 + b; tries++; }
      while (num % c !== 0 && tries < 80);
      if (num % c !== 0){ a = 2; x0 = 3; b = 0; c = 2; num = a * x0 + b; }
      const d = num / c;
      ineqStore(op, a * x0, a);
      html = `<div class="q-expr" style="justify-content:center;gap:8px;align-items:center">${fracHTML(ineqLinHTML(a, b), c)}<span>${ineqOpHTML(op)} ${aNum(d)}</span></div>`;
      steps = `Multiply both sides by ${c} → ${a}${aVar(EQ_VAR)} ${b >= 0 ? '+ ' + b : '− ' + Math.abs(b)} ${ineqOpHTML(op)} ${aNum(c * d)}.<br>`
            + `${ineqUndoC(b)} → ${a}${aVar(EQ_VAR)} ${ineqOpHTML(op)} ${aNum(c * d - b)}.<br>`
            + `Divide both sides by ${a} → <b>${qData.ansDisplayHTML}</b>.`;
    }
  } else if (level === 2){
    // Answers/coefficients may be fractions. Positive leading coefficient (no flip).
    form = (Math.random() < 0.45) ? 0 : (Math.random() < 0.5 ? 1 : 2);
    if (form === 1){
      const a = rr(2, 6), m = nzrand(-6, 6), b = nzrand(-9, 9), c = b + m;
      ineqStore(op, a * m, 1);
      html = `<div class="q-expr" style="justify-content:center;gap:8px;align-items:center">${fracHTML(aVar(EQ_VAR), a)}<span>${b >= 0 ? ' + ' + b : ' − ' + Math.abs(b)} ${ineqOpHTML(op)} ${aNum(c)}</span></div>`;
      steps = `${ineqUndoC(b)}, then multiply both sides by ${a} → <b>${qData.ansDisplayHTML}</b>.`;
    } else if (form === 2){
      const a = rr(2, 4), b = nzrand(-9, 9), c = rr(2, 4), d = nzrand(-6, 6);
      ineqStore(op, c * d - b, a);
      html = `<div class="q-expr" style="justify-content:center;gap:8px;align-items:center">${fracHTML(ineqLinHTML(a, b), c)}<span>${ineqOpHTML(op)} ${aNum(d)}</span></div>`;
      steps = `Multiply both sides by ${c} → ${a}${aVar(EQ_VAR)} ${b >= 0 ? '+ ' + b : '− ' + Math.abs(b)} ${ineqOpHTML(op)} ${aNum(c * d)}.<br>`
            + `${ineqUndoC(b)}, then divide by ${a} → <b>${qData.ansDisplayHTML}</b>.`;
    } else {
      const a = rr(2, 6), b = nzrand(-9, 9), c = nzrand(-12, 12);
      ineqStore(op, c - b, a);
      html = `${ineqLinHTML(a, b)} ${ineqOpHTML(op)} ${aNum(c)}`;
      steps = `${ineqUndoC(b)} → ${a}${aVar(EQ_VAR)} ${ineqOpHTML(op)} ${aNum(c - b)}.<br>`
            + `Divide both sides by ${a} → <b>${qData.ansDisplayHTML}</b>.`;
    }
  } else {
    // L3 — some questions have a NEGATIVE leading coefficient (→ flip the sign).
    const negative = (Math.random() < 0.65);
    form = (Math.random() < 0.6) ? 0 : 2;
    if (form === 0){
      const a = (negative ? -1 : 1) * rr(2, 6), b = nzrand(-9, 9), c = nzrand(-12, 12);
      const solveOp = (a < 0) ? ineqFlip(op) : op;
      ineqStore(solveOp, c - b, a);
      const flipNote = (a < 0) ? `  (dividing by a negative reverses the sign)` : '';
      html = `${ineqLinHTML(a, b)} ${ineqOpHTML(op)} ${aNum(c)}`;
      steps = `${ineqUndoC(b)} → ${aNum(a)}${aVar(EQ_VAR)} ${ineqOpHTML(op)} ${aNum(c - b)}.<br>`
            + `Divide both sides by ${aNum(a)}${flipNote} → <b>${qData.ansDisplayHTML}</b>.`;
    } else {
      const a = (negative ? -1 : 1) * rr(2, 4), b = nzrand(-6, 6), c = rr(2, 4), d = nzrand(-6, 6);
      const solveOp = (a < 0) ? ineqFlip(op) : op;
      ineqStore(solveOp, c * d - b, a);
      const flipNote = (a < 0) ? `  (dividing by a negative reverses the sign)` : '';
      html = `<div class="q-expr" style="justify-content:center;gap:8px;align-items:center">${fracHTML(ineqLinHTML(a, b), c)}<span>${ineqOpHTML(op)} ${aNum(d)}</span></div>`;
      steps = `Multiply both sides by ${c} → ${aNum(a)}${aVar(EQ_VAR)} ${b >= 0 ? '+ ' + b : '− ' + Math.abs(b)} ${ineqOpHTML(op)} ${aNum(c * d)}.<br>`
            + `${ineqUndoC(b)} → ${aNum(a)}${aVar(EQ_VAR)} ${ineqOpHTML(op)} ${aNum(c * d - b)}.<br>`
            + `Divide both sides by ${aNum(a)}${flipNote} → <b>${qData.ansDisplayHTML}</b>.`;
    }
  }

  qData.workSteps = steps;
  el.style.fontSize = '2.1rem';
  el.innerHTML = `<div style="${A_LBL}">Solve the inequality</div><div class="q-expr" style="justify-content:center">${html}</div>`;
}
/* Parse a signed integer / fraction / decimal token → {num, den, isDecimal, dec} or null. */
function ineqParseVal(str){
  let s = str.replace(/^\+/, '');
  let m;
  if ((m = s.match(/^(-?\d+)\/(-?\d+)$/))){
    let num = parseInt(m[1], 10), den = parseInt(m[2], 10);
    if (den === 0) return null;
    if (den < 0) { num = -num; den = -den; }
    return { num, den, isDecimal: false };
  }
  if (/^-?\d+$/.test(s)) return { num: parseInt(s, 10), den: 1, isDecimal: false };
  if (/^-?\d*\.\d+$/.test(s)) return { num: 0, den: 1, isDecimal: true, dec: parseFloat(s) };
  return null;
}
/* Parse a typed inequality "x OP value" (either orientation) → canonical
   {op, num, den, isDecimal, dec} with x on the left, or {invalid:'form'}. */
function ineqParse(raw){
  if (!raw) return null;
  let s = raw.replace(/\s+/g, '').replace(/X/g, 'x');
  s = s.replace(/<=/g, '≤').replace(/>=/g, '≥').replace(/=</g, '≤').replace(/=>/g, '≥');
  const opChars = (s.match(/[<>≤≥]/g) || []);
  if (opChars.length !== 1) return { invalid: 'form' };
  const op = opChars[0];
  const idx = s.indexOf(op);
  const left = s.slice(0, idx), right = s.slice(idx + 1);
  let valStr, o = op;
  if (left === 'x') valStr = right;
  else if (right === 'x') { valStr = left; o = ineqFlip(op); }
  else return { invalid: 'form' };
  const v = ineqParseVal(valStr);
  if (v === null) return { invalid: 'form' };
  return { op: o, num: v.num, den: v.den, isDecimal: v.isDecimal, dec: v.dec };
}

/* ═══════════════════════════════════════════════
   GEOMETRY DIAGRAM SKILLS (v50)
   Pythagoras (revised in place) + Interior Angles of a Triangle.
   Diagrams are parametric SVG rendered into qText, and are NOT to scale:
   a fixed base shape carries the labels; only the labels and the orientation
   change. Givens use the app text colour, the unknown uses the accent colour.
═══════════════════════════════════════════════ */
const PYTH_TRIPLES = [[3,4,5],[6,8,10],[5,12,13],[8,15,17],[9,12,15],[7,24,25],[20,21,29]];

/* ── surd helpers ── */
function isPerfSq(n){ const s = Math.round(Math.sqrt(n)); return s*s === n; }
/* Canonicalise c·√r to {c,r} with r square-free (r === 1 means a whole number). */
function surdSimplify(c, r){
  let k = 1, rad = r;
  for (let f = 2; f*f <= rad; f++){ while (rad % (f*f) === 0){ rad = rad/(f*f); k *= f; } }
  return { c: c*k, r: rad, invalid: null };
}
function surdFmt(cr){
  if (cr.r === 1) return '' + cr.c;
  if (cr.c === 1) return '√' + cr.r;
  return cr.c + '√' + cr.r;
}
/* Parse a typed answer to canonical {c,r}. Accepts 5, √12, 2√5, root12, sqrt12,
   √(12). Equivalence is by canonical FORM, never by numeric value, so √12 and
   2√3 both pass but a decimal like 3.46 is rejected. Returns null for empty,
   {invalid:'decimal'|'form'} for rejected input. */
function surdParse(raw){
  raw = String(raw).trim().toLowerCase().replace(/\s+/g,'');
  if (raw === '') return null;
  raw = raw.replace(/sqrt/g,'√').replace(/root/g,'√');
  if (raw.indexOf('.') !== -1) return { invalid: 'decimal' };
  let m;
  if ((m = raw.match(/^(\d+)$/))) return surdSimplify(parseInt(m[1],10), 1);
  if ((m = raw.match(/^(\d*)√\(?(\d+)\)?$/))){
    const c = m[1] === '' ? 1 : parseInt(m[1],10);
    const r = parseInt(m[2],10);
    if (!(c > 0) || !(r > 0)) return { invalid: 'form' };
    return surdSimplify(c, r);
  }
  return { invalid: 'form' };
}

/* ── shared SVG geometry helpers (pg = pythagoras/geometry) ── */
function pgU(A,B){ const dx=B[0]-A[0], dy=B[1]-A[1], l=Math.hypot(dx,dy)||1; return [dx/l, dy/l]; }
function pgMid(A,B){ return [(A[0]+B[0])/2, (A[1]+B[1])/2]; }
function pgCentroid(p){ return [(p[0][0]+p[1][0]+p[2][0])/3, (p[0][1]+p[1][1]+p[2][1])/3]; }
function pgRot(pts, deg, flip){ const a=deg*Math.PI/180, c=Math.cos(a), s=Math.sin(a);
  return pts.map(function(p){ const x=flip?-p[0]:p[0], y=p[1]; return [x*c - y*s, x*s + y*c]; }); }
function pgFit(pts, x0, y0, x1, y1){
  const xs=pts.map(function(p){return p[0];}), ys=pts.map(function(p){return p[1];});
  const mnx=Math.min.apply(0,xs), mxx=Math.max.apply(0,xs), mny=Math.min.apply(0,ys), mxy=Math.max.apply(0,ys);
  const w=(mxx-mnx)||1, h=(mxy-mny)||1, s=Math.min((x1-x0)/w, (y1-y0)/h);
  const ox=x0+((x1-x0)-w*s)/2 - mnx*s, oy=y0+((y1-y0)-h*s)/2 - mny*s;
  return pts.map(function(p){ return [p[0]*s+ox, p[1]*s+oy]; });
}
function pgPoly(pts){ return '<polygon points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="var(--text)" stroke-width="2.5" stroke-linejoin="round"/>'; }
function pgLbl(x,y,t,acc){ return '<text x="'+x.toFixed(1)+'" y="'+y.toFixed(1)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="17" fill="'+(acc?'var(--accent)':'var(--text)')+'" text-anchor="middle" dominant-baseline="central">'+t+'</text>'; }
function pgRA(R,P,Q){ const d1=pgU(R,P), d2=pgU(R,Q), s=12;
  const a=[R[0]+d1[0]*s, R[1]+d1[1]*s], b=[a[0]+d2[0]*s, a[1]+d2[1]*s], c=[R[0]+d2[0]*s, R[1]+d2[1]*s];
  return '<polyline points="'+a[0].toFixed(1)+','+a[1].toFixed(1)+' '+b[0].toFixed(1)+','+b[1].toFixed(1)+' '+c[0].toFixed(1)+','+c[1].toFixed(1)+'" fill="none" stroke="var(--text)" stroke-width="2"/>'; }
function pgArc(V,N1,N2,acc){
  const d1=pgU(V,N1), d2=pgU(V,N2); let a1=Math.atan2(d1[1],d1[0]), a2=Math.atan2(d2[1],d2[0]);
  let d=a2-a1; while(d>Math.PI)d-=2*Math.PI; while(d<-Math.PI)d+=2*Math.PI;
  const r=16, pts=[]; for(let i=0;i<=14;i++){ const a=a1+d*i/14; pts.push([V[0]+Math.cos(a)*r, V[1]+Math.sin(a)*r]); }
  let bis=[d1[0]+d2[0], d1[1]+d2[1]]; const bl=Math.hypot(bis[0],bis[1])||1; bis=[bis[0]/bl, bis[1]/bl];
  const lp=[V[0]+bis[0]*(r+13), V[1]+bis[1]*(r+13)];
  return { arc:'<polyline points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="'+(acc?'var(--accent)':'var(--text)')+'" stroke-width="2"/>', pos:lp };
}
function pgOut(A,B,cen,off){ const M=pgMid(A,B), d=pgU(cen,M); return [M[0]+d[0]*off, M[1]+d[1]*off]; }
function pgSvgWrap(inner){ return '<svg width="300" height="240" viewBox="0 0 300 240" role="img" style="display:block;margin:6px auto 0;max-width:100%">'+inner+'<text x="150" y="230" font-family="Nunito,sans-serif" font-weight="700" font-size="12" fill="var(--muted)" text-anchor="middle">Not to scale</text></svg>'; }

/* Right-angled triangle. sides = {l1, l2, h}; each a number or 'x'.
   l1 = R–P leg, l2 = R–Q leg, h = P–Q hypotenuse (R = right-angle vertex). */
function pythSvg(sides, varied){
  const base=[[0,0],[142,0],[0,-102]];
  const deg = varied ? [35,90,145,200,270,315][ri(6)] : 0;
  const flip = varied && Math.random() < 0.5;
  const pts = pgFit(pgRot(base, deg, flip), 78, 72, 222, 168);
  const R=pts[0], P=pts[1], Q=pts[2], cen=pgCentroid(pts);
  const L1=pgOut(R,P,cen,20), L2=pgOut(R,Q,cen,20), H=pgOut(P,Q,cen,20);
  let s = pgPoly(pts) + pgRA(R,P,Q);
  s += pgLbl(L1[0],L1[1], sides.l1, sides.l1==='x');
  s += pgLbl(L2[0],L2[1], sides.l2, sides.l2==='x');
  s += pgLbl(H[0],H[1],  sides.h,  sides.h==='x');
  return pgSvgWrap(s);
}

/* Triangle with all three angle labels; the hidden one (hideIdx) shows x. */
function iatSvg(vals, hideIdx, varied){
  // v65: build the triangle from the ACTUAL angles so every drawn vertex matches
  // its label — an obtuse answer now looks obtuse, a right angle looks right, etc.
  const base = nalTriFromAngles(vals[0], vals[1]);
  const deg = varied ? [35,90,145,200,270,315][ri(6)] : 0;
  const flip = varied && Math.random() < 0.5;
  const pts = pgFit(pgRot(base, deg, flip), 62, 60, 238, 172);   // v65: larger for legibility
  const cen = pgCentroid(pts);
  let s = pgPoly(pts);
  for (let i=0;i<3;i++){
    const n1=pts[(i+1)%3], n2=pts[(i+2)%3], acc=(i===hideIdx);
    const A = pgArc(pts[i], n1, n2, acc);
    // label radiates OUTWARD from the centroid, just beyond the vertex, so it never
    // crosses an edge (works even for thin slivers / near-straight angles). v65 (Laura).
    const d = pgU(cen, pts[i]), lp = [pts[i][0]+d[0]*22, pts[i][1]+d[1]*22];
    s += A.arc + pgLbl(lp[0], lp[1], acc ? 'x' : (vals[i]+'°'), acc);
  }
  return pgSvgWrap(s);
}

/* Pythagoras' theorem (revised v50): diagram-based, unknown mixed between the
   hypotenuse and a shorter side throughout. L1–L2 whole-number triples, fixed
   orientation; L3–L4 exact surds, varied orientation, occasional triple. */
function genPythagoras(el){
  el.style.fontSize = '1.05rem';
  const surds = (level >= 3);
  const varied = surds;
  const uk = Math.random() < 0.5 ? 'hyp' : 'leg';
  let sides, ansCR, prompt, work;
  if (!surds){
    const pool = (level === 1) ? PYTH_TRIPLES.filter(function(t){ return t[2] <= 15; }) : PYTH_TRIPLES;
    const t = pool[ri(pool.length)], p=t[0], q=t[1], r=t[2];
    if (uk === 'hyp'){
      sides = (Math.random()<0.5) ? {l1:p, l2:q, h:'x'} : {l1:q, l2:p, h:'x'};
      ansCR = surdSimplify(r, 1);
      work = 'c = √('+p+'² + '+q+'²) = √'+(p*p+q*q)+' = <b>'+r+'</b>';
    } else {
      const knownLeg = (Math.random()<0.5) ? p : q, ansLeg = (knownLeg===p) ? q : p;
      sides = (Math.random()<0.5) ? {l1:'x', l2:knownLeg, h:r} : {l1:knownLeg, l2:'x', h:r};
      ansCR = surdSimplify(ansLeg, 1);
      work = '= √('+r+'² − '+knownLeg+'²) = √'+(r*r-knownLeg*knownLeg)+' = <b>'+ansLeg+'</b>';
    }
    prompt = (uk==='hyp') ? 'Right-angled triangle — find the hypotenuse' : 'Right-angled triangle — find the missing side';
  } else {
    const useTriple = Math.random() < 0.2;
    if (uk === 'hyp'){
      let a, b;
      if (useTriple){ const t=PYTH_TRIPLES[ri(PYTH_TRIPLES.length)]; a=t[0]; b=t[1]; }
      else { const cap=(level===3)?7:9; do{ a=rr(2,cap); b=rr(2,cap); } while (a===b || isPerfSq(a*a+b*b)); }
      sides = (Math.random()<0.5) ? {l1:a, l2:b, h:'x'} : {l1:b, l2:a, h:'x'};
      ansCR = surdSimplify(1, a*a+b*b);
      work = 'c = √('+a+'² + '+b+'²) = √'+(a*a+b*b)+' = <b>'+surdFmt(ansCR)+'</b>';
    } else {
      let c, leg;
      if (useTriple){ const t=PYTH_TRIPLES[ri(PYTH_TRIPLES.length)]; c=t[2]; leg=(Math.random()<0.5)?t[0]:t[1]; }
      else { const cap=(level===3)?11:14; do{ c=rr(5,cap); leg=rr(2,c-1); } while (isPerfSq(c*c-leg*leg) || c*c-leg*leg <= 0); }
      ansCR = surdSimplify(1, c*c-leg*leg);
      sides = (Math.random()<0.5) ? {l1:'x', l2:leg, h:c} : {l1:leg, l2:'x', h:c};
      work = '= √('+c+'² − '+leg+'²) = √'+(c*c-leg*leg)+' = <b>'+surdFmt(ansCR)+'</b>';
    }
    prompt = (uk==='hyp') ? 'Right-angled triangle — find the hypotenuse (exact value)' : 'Right-angled triangle — find the missing side (exact value)';
  }
  qData.ansSurd = { c: ansCR.c, r: ansCR.r };
  qData.ans = ansCR.c * Math.sqrt(ansCR.r);
  qData.ansDisplay = surdFmt(ansCR);
  qData.workSteps = work;
  qData.pgSides = sides; qData.pgUnknown = uk;   // runtime-only test hooks (not stored)
  el.innerHTML = '<div style="'+A_LBL+'">'+prompt+'</div>' + pythSvg(sides, varied);
}

/* Interior Angles of a Triangle (v50): two known angles given, find the third
   (x = 180 − a − b). L1 acute, round numbers, fixed; L2 may be obtuse, varied;
   L3 awkward whole degrees, varied. */
function genInteriorAngles(el){
  el.style.fontSize = '1.05rem';
  const varied = (level >= 2);
  let a, b, c, g = 0;
  do {
    if (level === 1){ a = rr(5,17)*5; b = rr(5,17)*5; }
    else if (level === 2){ a = rr(5,24)*5; b = rr(5,24)*5; }
    else { a = rr(20,130); b = rr(20,130); }
    c = 180 - a - b; g++;
  } while ((c < 15 || a < 15 || b < 15 || (level === 1 && (a >= 90 || b >= 90 || c >= 90))) && g < 120);
  if (c < 15 || a < 15 || b < 15){ a = 60; b = 70; c = 50; }
  const vals = [a, b, c], hide = ri(3);
  qData.ans = vals[hide];
  qData.iatVals = vals; qData.iatHide = hide;   // runtime-only test hooks (not stored)
  const shown = vals.filter(function(_, i){ return i !== hide; });
  qData.workSteps = 'x = 180° − ' + shown[0] + '° − ' + shown[1] + '° = <b>' + vals[hide] + '°</b>';
  el.innerHTML = '<div style="'+A_LBL+'">Triangle — find the unknown angle x</div>' + iatSvg(vals, hide, varied);
}

/* ═══════════════════════════════════════════════
   NAMING 2D & 3D SHAPES FROM DIAGRAMS  (v52, expanded v53, lvKey nsh)
   Multiple-choice (reuses 'choice' mode). A curated SVG library — the canonical
   drawing of each shape, not fully parametric. Side-count polygons carry BOTH a
   regular and an irregular variant (same name), picked at random, so students
   learn that the name is about the number of sides, not regularity. 3D solids use
   an offset-face / squashed-base wireframe with dashed hidden edges. Distractors
   are level-aware: L1/L2 pull other level-appropriate shapes; L3 pulls from the
   answer's own confusable family (parallelogram vs rhombus, prism vs pyramid, …).
═══════════════════════════════════════════════ */
/* v74.5 (Laura): one-line "why" for the miss review — names the actual shape shown
   plus its single distinguishing feature, instead of a generic paragraph. */
const NSH_HINT = {
  triangle:'3 sides', square:'4 equal sides and 4 right angles', rectangle:'4 right angles, opposite sides equal',
  pentagon:'5 sides', hexagon:'6 sides', heptagon:'7 sides', octagon:'8 sides', nonagon:'9 sides', decagon:'10 sides',
  parallelogram:'two pairs of parallel sides', rhombus:'4 equal sides', trapezium:'exactly one pair of parallel sides',
  kite:'two pairs of adjacent equal sides', circle:'one curved edge, no corners', oval:'a stretched circle', semicircle:'half a circle',
  cube:'6 square faces', cuboid:'6 rectangular faces', sphere:'a perfectly round ball', hemisphere:'half a sphere',
  cylinder:'two circular ends joined by a curved surface', cone:'a circular base rising to a point', torus:'a ring / doughnut shape',
  triangularPrism:'two triangular ends joined by rectangles', pentagonalPrism:'two pentagon ends joined by rectangles',
  hexagonalPrism:'two hexagon ends joined by rectangles', triangularPyramid:'a triangular base rising to an apex',
  squarePyramid:'a square base rising to an apex', pentagonalPyramid:'a pentagon base rising to an apex',
  hexagonalPyramid:'a hexagon base rising to an apex', dodecahedron:'12 pentagon faces',
};
function nshWhy(key, name){ const h = NSH_HINT[key]; return 'This shape is a <b>' + name + '</b>' + (h ? ' — ' + h + '.' : '.'); }
function shPoly(pts, dash){ return '<polygon points="'+pts.map(function(p){return p[0]+','+p[1];}).join(' ')+'" fill="none" stroke="var(--text)" stroke-width="2.5" stroke-linejoin="round"'+(dash?' stroke-dasharray="5 4"':'')+'/>'; }
function shLine(a, b, dash){ return '<line x1="'+a[0]+'" y1="'+a[1]+'" x2="'+b[0]+'" y2="'+b[1]+'" stroke="var(--text)" stroke-width="2.5" stroke-linecap="round"'+(dash?' stroke-dasharray="5 4"':'')+'/>'; }
function shEll(cx, cy, rx, ry, dash){ return '<ellipse cx="'+cx+'" cy="'+cy+'" rx="'+rx+'" ry="'+ry+'" fill="none" stroke="var(--text)" stroke-width="2.5"'+(dash?' stroke-dasharray="5 4"':'')+'/>'; }
function shCirc(cx, cy, r){ return '<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="var(--text)" stroke-width="2.5"/>'; }
function shPath(d, dash){ return '<path d="'+d+'" fill="none" stroke="var(--text)" stroke-width="2.5" stroke-linecap="round"'+(dash?' stroke-dasharray="5 4"':'')+'/>'; }
function shWrap(inner){ return '<svg width="300" height="220" viewBox="0 0 300 220" role="img" style="display:block;margin:6px auto 0;max-width:100%">'+inner+'</svg>'; }

/* Regular n-gon vertices. rotDeg default -90 puts a vertex at the top. */
function regPolyPts(n, cx, cy, r, rotDeg){
  const rot = ((rotDeg == null ? -90 : rotDeg)) * Math.PI / 180, pts = [];
  for (let i = 0; i < n; i++){ const a = rot + i * 2 * Math.PI / n;
    pts.push([+(cx + r * Math.cos(a)).toFixed(1), +(cy + r * Math.sin(a)).toFixed(1)]); }
  return pts;
}
/* Deterministic irregular n-gon (no RNG → fixed & testable). Same side count,
   moderate radial + small angular jitter so it stays a clear, non-crossing n-gon. */
function irregPolyPts(n, cx, cy, r, rotDeg){
  const rot = ((rotDeg == null ? -90 : rotDeg)) * Math.PI / 180, pts = [];
  for (let i = 0; i < n; i++){
    const t = Math.sin((i + 1) * (n * 1.7 + 2.3));
    const u = Math.cos((i + 1) * (n * 0.9 + 1.1));
    const rr = r * (0.78 + 0.34 * (t * 0.5 + 0.5));
    const a = rot + i * 2 * Math.PI / n + u * (Math.PI / n) * 0.32;
    pts.push([+(cx + rr * Math.cos(a)).toFixed(1), +(cy + rr * Math.sin(a)).toFixed(1)]);
  }
  return pts;
}
/* n-gon prism: near face solid, far face (offset) dashed, connectors solid. */
function prism3D(n, cx, cyF, r, rot, dx, dy){
  const F = regPolyPts(n, cx, cyF, r, rot);
  const B = F.map(function(p){ return [+(p[0] + dx).toFixed(1), +(p[1] + dy).toFixed(1)]; });
  let s = shPoly(B, true);
  for (let i = 0; i < n; i++) s += shLine(F[i], B[i]);
  s += shPoly(F);
  return s;
}
/* n-gon pyramid: base squashed for perspective, apex above centre; edges that sit
   behind the base centre are dashed (hidden). */
function pyramid3D(n, cx, cyBase, r, rot, apexY){
  const base = regPolyPts(n, cx, cyBase, r, rot).map(function(p){ return [p[0], +(cyBase + (p[1] - cyBase) * 0.40).toFixed(1)]; });
  const apex = [cx, apexY];
  let s = '';
  for (let i = 0; i < n; i++){ const A = base[i], B = base[(i + 1) % n];
    s += shLine(A, B, (A[1] < cyBase - 0.5 && B[1] < cyBase - 0.5)); }
  for (let i = 0; i < n; i++) s += shLine(apex, base[i], base[i][1] < cyBase - 0.5);
  return s;
}
/* Dodecahedron — standard face-on projection: central pentagon, surrounding
   decagon, five spokes forming the five near pentagonal faces. */
function dodecaSvg(){
  const cx = 150, cy = 112;
  const P = regPolyPts(5, cx, cy, 44, -90);
  const D = regPolyPts(10, cx, cy, 92, -90);
  let s = shPoly(D);
  s += shPoly(P);
  for (let i = 0; i < 5; i++) s += shLine(P[i], D[(i * 2) % 10]);
  return s;
}

/* Each entry: name, dim, and variants[] of SVG inner strings (regular first). */
const SHAPE_LIB = {
  // ── 2D: side-count polygons (regular + irregular) ──
  triangle:  { name:'Triangle',  dim:'2D', variants:[ shPoly(regPolyPts(3,150,120,84,-90)), shPoly([[58,172],[242,150],[176,54]]), shPoly([[70,58],[70,176],[224,176]]) ] },
  pentagon:  { name:'Pentagon',  dim:'2D', variants:[ shPoly(regPolyPts(5,150,112,80,-90)), shPoly(irregPolyPts(5,150,112,82,-90)) ] },
  hexagon:   { name:'Hexagon',   dim:'2D', variants:[ shPoly(regPolyPts(6,150,110,82,-90)), shPoly(irregPolyPts(6,150,110,84,-60)) ] },
  heptagon:  { name:'Heptagon',  dim:'2D', variants:[ shPoly(regPolyPts(7,150,110,82,-90)), shPoly(irregPolyPts(7,150,110,84,-90)) ] },
  octagon:   { name:'Octagon',   dim:'2D', variants:[ shPoly(regPolyPts(8,150,110,82,-67.5)), shPoly(irregPolyPts(8,150,110,84,-67.5)) ] },
  nonagon:   { name:'Nonagon',   dim:'2D', variants:[ shPoly(regPolyPts(9,150,110,82,-90)), shPoly(irregPolyPts(9,150,110,84,-90)) ] },
  decagon:   { name:'Decagon',   dim:'2D', variants:[ shPoly(regPolyPts(10,150,110,82,-90)), shPoly(irregPolyPts(10,150,110,84,-90)) ] },
  // ── 2D: shapes defined by properties (single canonical drawing) ──
  square:        { name:'Square',        dim:'2D', variants:[ shPoly([[95,55],[205,55],[205,165],[95,165]]) ] },
  rectangle:     { name:'Rectangle',     dim:'2D', variants:[ shPoly([[62,72],[238,72],[238,158],[62,158]]) ] },
  circle:        { name:'Circle',        dim:'2D', variants:[ shCirc(150,110,72) ] },
  parallelogram: { name:'Parallelogram', dim:'2D', variants:[ shPoly([[92,60],[240,60],[208,165],[60,165]]) ] },
  rhombus:       { name:'Rhombus',       dim:'2D', variants:[ shPoly([[150,48],[230,110],[150,172],[70,110]]) ] },
  trapezium:     { name:'Trapezium',     dim:'2D', variants:[ shPoly([[95,60],[205,60],[248,165],[52,165]]) ] },
  kite:          { name:'Kite',          dim:'2D', variants:[ shPoly([[150,40],[216,102],[150,188],[84,102]]) ] },
  // ── 3D ── (near/front solid, hidden edges dashed)
  cube: { name:'Cube', dim:'3D', variants:[
    shPoly([[80,90],[180,90],[180,190],[80,190]]) +
    shLine([80,90],[125,52]) + shLine([180,90],[225,52]) + shLine([180,190],[225,152]) +
    shLine([125,52],[225,52]) + shLine([225,52],[225,152]) +
    shLine([80,190],[125,152],true) + shLine([125,52],[125,152],true) + shLine([125,152],[225,152],true) ] },
  cuboid: { name:'Rectangular prism', dim:'3D', variants:[
    shPoly([[62,95],[202,95],[202,180],[62,180]]) +
    shLine([62,95],[107,60]) + shLine([202,95],[247,60]) + shLine([202,180],[247,145]) +
    shLine([107,60],[247,60]) + shLine([247,60],[247,145]) +
    shLine([62,180],[107,145],true) + shLine([107,60],[107,145],true) + shLine([107,145],[247,145],true) ] },
  cylinder: { name:'Cylinder', dim:'3D', variants:[
    shEll(150,58,58,17) + shLine([92,58],[92,168]) + shLine([208,58],[208,168]) +
    shPath('M92,168 A58,17 0 0 0 208,168') + shPath('M92,168 A58,17 0 0 1 208,168', true) ] },
  cone: { name:'Cone', dim:'3D', variants:[
    shLine([150,45],[92,168]) + shLine([150,45],[208,168]) +
    shPath('M92,168 A58,17 0 0 0 208,168') + shPath('M92,168 A58,17 0 0 1 208,168', true) ] },
  sphere: { name:'Sphere', dim:'3D', variants:[ shCirc(150,110,72) + shEll(150,110,72,22,true) ] },
  hemisphere: { name:'Hemisphere', dim:'3D', variants:[
    shEll(150,100,74,20) + shPath('M76,100 A74,74 0 0 0 224,100') ] },
  torus: { name:'Torus', dim:'3D', variants:[
    shEll(150,110,84,42) +
    shPath('M116,110 A34,13 0 0 1 184,110') + shPath('M116,110 A34,13 0 0 0 184,110', true) ] },
  triangularPrism:  { name:'Triangular prism',  dim:'3D', variants:[ prism3D(3,120,158,56,-90,54,-36) ] },
  pentagonalPrism:  { name:'Pentagonal prism',  dim:'3D', variants:[ prism3D(5,120,132,54,-90,58,-40) ] },
  hexagonalPrism:   { name:'Hexagonal prism',   dim:'3D', variants:[ prism3D(6,118,130,54,-90,60,-40) ] },
  triangularPyramid:{ name:'Triangular pyramid', dim:'3D', variants:[ pyramid3D(3,150,158,74,90,54) ] },
  squarePyramid:    { name:'Square pyramid',     dim:'3D', variants:[ pyramid3D(4,150,158,82,45,52) ] },
  pentagonalPyramid:{ name:'Pentagonal pyramid', dim:'3D', variants:[ pyramid3D(5,150,158,78,-90,50) ] },
  hexagonalPyramid: { name:'Hexagonal pyramid',  dim:'3D', variants:[ pyramid3D(6,150,158,80,0,50) ] },
  dodecahedron:     { name:'Dodecahedron',       dim:'3D', variants:[ dodecaSvg() ] },
};

/* Level pools (which shapes appear) + confusable families (L3 distractors). */
const NSH_L1 = ['triangle','square','rectangle','circle','pentagon','hexagon',
                'parallelogram','rhombus','trapezium','kite'];   // v56: all quads incl. special
const NSH_L2 = ['cube','cuboid','cylinder','cone','sphere','hemisphere','torus',
                'triangularPrism','pentagonalPrism','hexagonalPrism',
                'triangularPyramid','squarePyramid','pentagonalPyramid','hexagonalPyramid','dodecahedron'];
const NSH_L3 = ['heptagon','octagon','nonagon','decagon',
                'parallelogram','rhombus','trapezium','kite',
                'triangularPrism','pentagonalPrism','hexagonalPrism',
                'squarePyramid','pentagonalPyramid','hexagonalPyramid','triangularPyramid','cube','cuboid'];
const NSH_GROUPS = {
  poly:     ['triangle','pentagon','hexagon','heptagon','octagon','nonagon','decagon'],
  quad:     ['square','rectangle','parallelogram','rhombus','trapezium','kite'],
  prismpyr: ['cube','cuboid','triangularPrism','pentagonalPrism','hexagonalPrism',
             'triangularPyramid','squarePyramid','pentagonalPyramid','hexagonalPyramid'],
  curved:   ['cylinder','cone','sphere','hemisphere','torus','dodecahedron'],
};
function nshFamily(key){
  for (const g in NSH_GROUPS) if (NSH_GROUPS[g].includes(key)) return NSH_GROUPS[g];
  return NSH_L1;
}
function genNameShapes(el){
  // v74.4 (Laura): L4 regular/irregular, L5 convex/concave — drawn polygons, fixed 2-option choice.
  if(level === 4 || level === 5){
    el.style.fontSize = '1.05rem';
    let pts, correct, opts, promptTxt;
    if(level === 4){
      const n = rr(4, 8), reg = Math.random() < 0.5;
      pts = reg ? polyRegPts(n) : polyJitterPts(n);
      opts = ['Regular','Irregular']; correct = reg ? 'Regular' : 'Irregular';
      promptTxt = 'Is this polygon regular or irregular?';
      qData.workSteps = reg
        ? 'All ' + n + ' sides and all ' + n + ' angles are equal, so it is <b>regular</b>.'
        : 'The sides and angles are not all equal, so it is <b>irregular</b>.';
    } else {
      const n = rr(4, 7), concave = Math.random() < 0.5;
      pts = concave ? polyConcavePts(n) : (Math.random() < 0.5 ? polyRegPts(n) : polyJitterPts(n));
      opts = ['Convex','Concave']; correct = concave ? 'Concave' : 'Convex';
      promptTxt = 'Is this polygon convex or concave?';
      qData.workSteps = concave
        ? 'One vertex caves inwards — its angle is more than 180° (a reflex angle) — so it is <b>concave</b>.'
        : 'Every angle is less than 180° (no dents), so it is <b>convex</b>.';
    }
    qData.chosen = null;
    qData.choices = opts.map(function(t, i){ return { code:'o'+i, html:t }; });   // fixed order (no shuffle)
    qData.choiceText = {}; opts.forEach(function(t, i){ qData.choiceText['o'+i] = t; });
    qData.choiceAns = 'o' + opts.indexOf(correct);
    el.innerHTML = '<div style="'+A_LBL+'">' + promptTxt + '</div>' + polyShapeSVG(pts, null);
    return;
  }
  const pool = level === 1 ? NSH_L1 : level === 2 ? NSH_L2 : NSH_L3;
  const key = pool[ri(pool.length)];
  const shape = SHAPE_LIB[key];

  // L1/L2: distractors from the level pool (distinct, level-appropriate).
  // L3: distractors from the answer's own confusable family (hard).
  const src = (level === 3 ? nshFamily(key) : pool).filter(function(k){ return k !== key; });
  const picks = [], bag = src.slice();
  while (picks.length < 3 && bag.length) picks.push(bag.splice(ri(bag.length), 1)[0]);
  if (picks.length < 3){ const extra = pool.filter(function(k){ return k !== key && picks.indexOf(k) < 0; });
    while (picks.length < 3 && extra.length) picks.push(extra.splice(ri(extra.length), 1)[0]); }
  const opts = shuffleArr([key].concat(picks));

  qData.chosen = null;
  qData.choiceAns = key;
  qData.choices = opts.map(function(k){ return { code: k, html: SHAPE_LIB[k].name }; });
  qData.choiceText = {};
  opts.forEach(function(k){ qData.choiceText[k] = SHAPE_LIB[k].name; });
  qData.nshDim = shape.dim;                          // runtime-only test hooks
  qData.nshVariants = shape.variants.length;
  qData.workSteps = nshWhy(key, shape.name);

  el.style.fontSize = '1.1rem';
  el.innerHTML = '<div style="'+A_LBL+'">Name this shape</div>' + shWrap(shape.variants[ri(shape.variants.length)]);
}


/* ═══════════════════════════════════════════════
   NAMING ANGLES, LINES & TRIANGLES  (v61, lvKey nal)
   Multiple-choice ('choice' mode), recall / Fluent-eligible. Four levels, each a
   pure identification task drawn as SVG (own nal* primitives + shared pg* helpers):
     L1  point / ray / line segment / line          (4 options — all four)
     L2  parallel / perpendicular / neither          (3 options — all three)
         NO right-angle square: perpendicular is judged by eye (drawn at a true
         90°); 'neither' is drawn well off-square (40–54°) so it can't be misread.
     L3  acute / right / obtuse / straight / reflex / revolution   (correct + 3)
         A directional arc + arrowhead marks the NAMED angle, so reflex reads as
         the major side, not its inner partner; revolution is a full turn.
     L4  triangles, split by axis so every question has exactly ONE true answer:
           'by its angles' → acute / right / obtuse       (mutually exclusive)
           'by its sides'  → equilateral / isosceles / scalene   (3 options)
         Isosceles = EXACTLY two equal sides (Sandringham convention), so the
         side axis is mutually exclusive too — no co-truth exclusion map needed.
         Angles-axis triangles are drawn to scale (angle judged by eye, no square,
         no 'not to scale' note). Sides-axis triangles carry authoritative side-
         length numbers (drawn shape only reinforces; 'Not to scale' shown).
   Single-answer throughout; random orientation per question so position never
   leaks the answer. Reuses the generic 'choice' render/mark path (qData.choice*).
═══════════════════════════════════════════════ */
function nalWrap(inner){ return '<svg width="300" height="220" viewBox="0 0 300 220" role="img" style="display:block;margin:6px auto 0;max-width:100%">'+inner+'</svg>'; }
function nalLine(a,b){ return '<line x1="'+a[0].toFixed(1)+'" y1="'+a[1].toFixed(1)+'" x2="'+b[0].toFixed(1)+'" y2="'+b[1].toFixed(1)+'" stroke="var(--text)" stroke-width="2.5" stroke-linecap="round"/>'; }
function nalDot(p,r){ return '<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="'+(r||4.5)+'" fill="var(--text)"/>'; }
function nalRot(p,deg,c){ const a=deg*Math.PI/180, co=Math.cos(a), s=Math.sin(a), dx=p[0]-c[0], dy=p[1]-c[1];
  return [c[0]+dx*co-dy*s, c[1]+dx*s+dy*co]; }
function nalRotV(v,ang){ const c=Math.cos(ang), s=Math.sin(ang); return [v[0]*c-v[1]*s, v[0]*s+v[1]*c]; }
/* Arrowhead at tip T pointing along unit travel-dir d (barbs fold back). */
function nalHead(T,d,col,len){ len=len||10; const ang=0.5;
  const b1=nalRotV(d,Math.PI-ang), b2=nalRotV(d,Math.PI+ang);
  const p1=[T[0]+b1[0]*len,T[1]+b1[1]*len], p2=[T[0]+b2[0]*len,T[1]+b2[1]*len];
  return '<polyline points="'+p1[0].toFixed(1)+','+p1[1].toFixed(1)+' '+T[0].toFixed(1)+','+T[1].toFixed(1)+' '+p2[0].toFixed(1)+','+p2[1].toFixed(1)+'" fill="none" stroke="'+col+'" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>'; }
/* Arc from a1→a2 (radians) around V, radius r; arrowhead at the a2 end in the
   sweep direction. acc → orange (marks the named angle). */
function nalArc(V,r,a1,a2,acc){
  const col=acc?'var(--accent)':'var(--text)';
  const steps=Math.max(24, Math.round(Math.abs(a2-a1)/(Math.PI/24)));
  const pts=[];
  for(let i=0;i<=steps;i++){ const a=a1+(a2-a1)*i/steps; pts.push([V[0]+Math.cos(a)*r, V[1]+Math.sin(a)*r]); }
  const poly='<polyline points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="'+col+'" stroke-width="2.5"/>';
  const dir=(a2>=a1)?1:-1, tip=pts[pts.length-1], d=[dir*(-Math.sin(a2)), dir*(Math.cos(a2))];
  return poly + nalHead(tip, d, col, 9);
}
function nalArcDeg(V,r,d1,d2,acc){ return nalArc(V,r,d1*Math.PI/180,d2*Math.PI/180,acc); }

/* ── L1: point / ray / line segment / line ── */
function nalL1(type){
  const C=[150,110], deg=ri(360);
  if(type==='point'){ return nalWrap(nalDot(C,5.5)+pgLbl(C[0],C[1]-16,'P',false)); }
  let A=nalRot([60,110],deg,C), B=nalRot([240,110],deg,C);
  const d=pgU(A,B), dR=[-d[0],-d[1]];
  let s='';
  if(type==='ray')          s=nalLine(A,B)+nalDot(A,5)+nalHead(B,d,'var(--text)',12);
  else if(type==='segment') s=nalLine(A,B)+nalDot(A,5)+nalDot(B,5);
  else                      s=nalLine(A,B)+nalHead(B,d,'var(--text)',12)+nalHead(A,dR,'var(--text)',12); // line
  return nalWrap(s);
}

/* ── L2: parallel / perpendicular / neither (no right-angle square) ── */
function nalL2(type){
  const C=[150,110], deg=ri(360), h=95;
  let seg=[];
  if(type==='parallel'){ const off=32;
    seg=[[[-h,-off],[h,-off]],[[-h,off],[h,off]]]; }
  else if(type==='perpendicular'){
    seg=[[[-h,0],[h,0]],[[0,-h],[0,h]]]; }
  else { const sep=(40+ri(15))*Math.PI/180, a1=-sep/2, a2=sep/2;   // 40–54° between lines
    const u1=[Math.cos(a1),Math.sin(a1)], u2=[Math.cos(a2),Math.sin(a2)];
    seg=[[[-u1[0]*h,-u1[1]*h],[u1[0]*h,u1[1]*h]],[[-u2[0]*h,-u2[1]*h],[u2[0]*h,u2[1]*h]]]; }
  let s='';
  seg.forEach(function(L){ const A=nalRot([C[0]+L[0][0],C[1]+L[0][1]],deg,C), B=nalRot([C[0]+L[1][0],C[1]+L[1][1]],deg,C); s+=nalLine(A,B); });
  return nalWrap(s);
}

/* ── L3: angle types; orange arc + arrow marks the named angle ── */
const NAL_ANGLE = {
  acute:      function(){ return 35+ri(36); },   // 35–70
  right:      function(){ return 90; },
  obtuse:     function(){ return 110+ri(51); },  // 110–160
  straight:   function(){ return 180; },
  reflex:     function(){ return 200+ri(141); }, // 200–340
  revolution: function(){ return 360; },
};
function nalL3(type){
  const V=[150,152], rayLen=80, arcR=30, M=NAL_ANGLE[type]();
  const phi=-90+(ri(61)-30);                       // bisector up-ish, ±30° tilt
  const ang=function(deg){ const a=deg*Math.PI/180; return [V[0]+Math.cos(a)*rayLen, V[1]+Math.sin(a)*rayLen]; };
  let s='';
  if(type==='revolution'){
    s+=nalLine(V,ang(phi))+nalDot(V,4)+nalArcDeg(V,arcR,phi+12,phi+12-350,true);
  } else if(M<=180){
    const half=M/2, r1=phi-half, r2=phi+half;
    s+=nalLine(V,ang(r1))+nalLine(V,ang(r2))+nalDot(V,4)+nalArcDeg(V,arcR,r1,r2,true);
  } else {                                          // reflex: small gap up top, arc the long way
    const g=360-M, half=g/2, r1=phi-half;
    s+=nalLine(V,ang(phi-half))+nalLine(V,ang(phi+half))+nalDot(V,4)+nalArcDeg(V,arcR,r1,r1-M,true);
  }
  return nalWrap(s);
}

/* ── L4: triangles (axis-split) ── */
/* Build a triangle (math y-up) from two interior angles; third = 180−A−B. */
function nalTriFromAngles(Adeg,Bdeg){
  const A=Adeg*Math.PI/180, B=Bdeg*Math.PI/180;
  const t=1/(Math.cos(A)+Math.sin(A)*Math.cos(B)/Math.sin(B));
  return [[0,0],[1,0],[t*Math.cos(A), t*Math.sin(A)]];
}
/* Triangle from three side lengths (SSS) — always matches the labelled numbers, so
   the drawn shape is authoritative and genuinely different for every triple. Edges
   returned in order (P0-P1)=a, (P1-P2)=b, (P2-P0)=c. */
function nalTriFromSides(a,b,c){
  const x=(a*a + c*c - b*b)/(2*a), y=Math.sqrt(Math.max(0.0001, c*c - x*x));
  return [[0,0],[a,0],[x,y]];
}
/* Random interior-angle triple (sums to 180) for the requested class. Wide ranges →
   every triangle looks different. */
function nalAngleTriple(type){
  let a,b,c;
  if(type==='acute'){ do { a=45+ri(41); b=45+ri(41); c=180-a-b; } while(!(c>=10 && c<=89 && a<90 && b<90)); }
  else if(type==='right'){ b=25+ri(41); a=90; c=90-b; }                 // {90, b, 90-b}
  else { do { a=95+ri(46); b=15+ri(50); c=180-a-b; } while(!(b>=10 && c>=10)); } // obtuse
  return [a,b,c];
}
/* Random side triple for the requested class (wider ranges + procedural variety). */
function nalSideTriple(type){
  if(type==='equilateral'){ const n=4+ri(9); return [n,n,n]; }          // 4–12
  if(type==='isosceles'){ let L,b;                                      // exactly two equal
    do { L=5+ri(8); b=3+ri(11); } while(!(b!==L && b < 2*L && b>=2));
    return [b, L, L]; }                                                 // base, leg, leg
  let s; do { s=[4+ri(9),4+ri(9),4+ri(9)].sort(function(p,q){return p-q;}); }
  while(!(s[0]!==s[1] && s[1]!==s[2] && s[0]+s[1] > s[2]));             // scalene, valid
  return shuffleArr(s.slice());
}
function nalTriangle(axis,type){
  let pts, labels, angleLabels=false;
  if(axis==='angles'){
    const t=nalAngleTriple(type); pts=nalTriFromAngles(t[0],t[1]);
    labels=[t[0]+'\u00B0', t[1]+'\u00B0', t[2]+'\u00B0']; angleLabels=true;
  } else {
    const t=nalSideTriple(type); pts=nalTriFromSides(t[0],t[1],t[2]); labels=[t[0],t[1],t[2]];
  }
  const deg=ri(360), flip=Math.random()<0.5;
  const box = angleLabels ? [104,62,196,164] : [96,60,204,166];
  const fit=pgFit(pgRot(pts,deg,flip), box[0],box[1],box[2],box[3]), cen=pgCentroid(fit);
  let inner=pgPoly(fit);
  for(let i=0;i<3;i++){
    if(angleLabels){ const d=pgU(fit[i],cen), P=[fit[i][0]+d[0]*24, fit[i][1]+d[1]*24]; inner+=pgLbl(P[0],P[1],labels[i],false); }
    else { const L=pgOut(fit[i],fit[(i+1)%3],cen,17); inner+=pgLbl(L[0],L[1],labels[i],false); }
  }
  return nalWrap(inner);
}

/* ── notation stimuli (v63): student reads the symbol / size and names the word ── */
const NAL_LETTERS = ['A','B','C','D','E','F','P','Q','R','S','T','X','Y','M','N'];
function nalTwoLetters(){ const i=ri(NAL_LETTERS.length); let j=ri(NAL_LETTERS.length); while(j===i) j=ri(NAL_LETTERS.length); return NAL_LETTERS[i]+NAL_LETTERS[j]; }
function nalBigText(x,y,t,size){ return '<text x="'+x.toFixed(1)+'" y="'+y.toFixed(1)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="'+(size||44)+'" fill="var(--text)" text-anchor="middle" dominant-baseline="central">'+t+'</text>'; }
/* L1: capital letter(s) with an overhead mark — none (point), bar (segment),
   one arrow (ray), double arrow (line). */
function nalNotationL1(type){
  if(type==='point'){ return nalWrap(nalBigText(150,118,NAL_LETTERS[ri(NAL_LETTERS.length)],50)); }
  let s=nalBigText(150,128,nalTwoLetters(),46);
  const y=92, x1=121, x2=179;
  s+=nalLine([x1,y],[x2,y]);
  if(type==='ray')  s+=nalHead([x2,y],[1,0],'var(--text)',10);
  if(type==='line'){ s+=nalHead([x2,y],[1,0],'var(--text)',10)+nalHead([x1,y],[-1,0],'var(--text)',10); }
  return nalWrap(s);
}
/* L2: AB ∥ CD or AB ⊥ CD (symbol drawn as SVG for crispness). Parallel/perp only. */
function nalNotationL2(type){
  let s=nalBigText(90,118,nalTwoLetters(),38)+nalBigText(210,118,nalTwoLetters(),38);
  if(type==='parallel') s+=nalLine([146,102],[146,134])+nalLine([154,102],[154,134]);
  else                  s+=nalLine([138,132],[162,132])+nalLine([150,132],[150,104]);
  return nalWrap(s);
}
/* L3: an angle size to classify. Ranges: acute 1–89, right 90, obtuse 91–179,
   straight 180, reflex 181–359, revolution 360. */
function nalL3Number(type){
  if(type==='acute')    return 5+ri(85);    // 5–89
  if(type==='right')    return 90;
  if(type==='obtuse')   return 91+ri(89);   // 91–179
  if(type==='straight') return 180;
  if(type==='reflex')   return 181+ri(179); // 181–359
  return 360;                               // revolution
}

/* ── generator ── */
const NAL_LV = {
  1: { pool:['point','ray','segment','line'], names:{point:'Point',ray:'Ray',segment:'Line segment',line:'Line'}, picPrompt:'Name this figure', opts:4, build:nalL1 },
  2: { pool:['parallel','perpendicular','neither'], names:{parallel:'Parallel',perpendicular:'Perpendicular',neither:'Neither'}, picPrompt:'Are these two lines parallel, perpendicular or neither?', opts:3, build:nalL2 },
  3: { pool:['acute','right','obtuse','straight','reflex','revolution'], names:{acute:'Acute',right:'Right',obtuse:'Obtuse',straight:'Straight',reflex:'Reflex',revolution:'Revolution'}, picPrompt:'Name this angle', opts:4, build:nalL3 },
};
const NAL_SIDE_NAMES = {equilateral:'Equilateral',isosceles:'Isosceles',scalene:'Scalene'};
const NAL_ANG_NAMES  = {acute:'Acute',right:'Right',obtuse:'Obtuse'};
/* v74.5 (Laura): short, question-specific "why" for the miss review. */
const NAL_WHY_L1 = { point:'A single dot marks a <b>point</b>.', ray:'A <b>ray</b> starts at one endpoint and goes on forever one way (one arrow).', segment:'A <b>line segment</b> has two endpoints and no arrows.', line:'A <b>line</b> goes on forever both ways (an arrow at each end).' };
const NAL_WHY_L2 = { parallel:'The lines never meet — they stay the same distance apart, so they are <b>parallel</b> (∥).', perpendicular:'The lines cross at a right angle (90°), so they are <b>perpendicular</b> (⊥).', neither:'The lines are not parallel and do not meet at a right angle, so <b>neither</b>.' };
const NAL_BAND = { acute:'less than 90°', right:'exactly 90°', obtuse:'between 90° and 180°', straight:'exactly 180°', reflex:'between 180° and 360°', revolution:'a full turn of 360°' };
const NAL_WHY_ANG = { acute:'all three angles are less than 90°', right:'one angle is exactly 90°', obtuse:'one angle is more than 90°' };
const NAL_WHY_SIDE = { equilateral:'all three sides are equal', isosceles:'exactly two sides are equal', scalene:'all three sides are different' };
function nalWhy(lv, ans, num, axis, names){
  if(lv===1) return NAL_WHY_L1[ans] || '';
  if(lv===2) return NAL_WHY_L2[ans] || '';
  if(lv===3){ const nm=(names[ans]||ans).toLowerCase(), band=NAL_BAND[ans]||'';
    return num!=null ? (num + '° is ' + band + ', so it is a <b>' + nm + '</b> angle.')
                     : ('A <b>' + nm + '</b> angle is ' + band + '.'); }
  // L4 triangle classification
  const nm=(names[ans]||ans);
  const why=(axis==='angles') ? NAL_WHY_ANG[ans] : NAL_WHY_SIDE[ans];
  return 'This triangle is <b>' + nm + '</b> — ' + (why||'') + '.';
}
function genNameAnglesLines(el){
  const lv=level;
  qData.chosen=null; qData.nalNumber=null;
  let names, prompt, svg, ans, opts, stim='picture';
  if(lv===4){
    const axis = Math.random()<0.5 ? 'angles' : 'sides';
    const pool = axis==='angles' ? ['acute','right','obtuse'] : ['equilateral','isosceles','scalene'];
    names = axis==='angles' ? NAL_ANG_NAMES : NAL_SIDE_NAMES;
    ans   = pool[ri(pool.length)];
    prompt= axis==='angles' ? 'Name this triangle by its angles' : 'Name this triangle by its sides';
    svg   = nalTriangle(axis, ans);             // v63: angles labelled with 3 interior
                                                // angles; sides via SSS — both to scale,
                                                // wide random variety (not just rotation).
    opts  = pool.slice();                       // fixed canonical order per axis (v62)
    qData.nalAxis = axis;
  } else {
    const cfg=NAL_LV[lv];
    names=cfg.names;
    ans = cfg.pool[ri(cfg.pool.length)];
    qData.nalAxis = null;
    // v63 (Laura): 50/50 picture vs notation, so students link words to symbols/sizes.
    // 'neither' (L2) has no symbol, so it is always shown as a picture.
    const canNotate = (lv===1) || (lv===2 && ans!=='neither') || (lv===3);
    stim = (canNotate && Math.random()<0.5) ? 'notation' : 'picture';
    if(stim==='notation'){
      if(lv===1){ svg=nalNotationL1(ans); prompt='Name the figure this symbol shows'; }
      else if(lv===2){ svg=nalNotationL2(ans); prompt='What does this symbol mean?'; }
      else { const n=nalL3Number(ans); qData.nalNumber=n; svg=nalWrap(nalBigText(150,116,n+'\u00B0',56)); prompt='What type of angle is this?'; }
    } else {
      svg=cfg.build(ans); prompt=cfg.picPrompt;
    }
    if(cfg.opts >= cfg.pool.length){
      // whole pool shown every question → FIXED canonical order (v62; L1, L2).
      opts = cfg.pool.slice();
    } else {
      // L3: correct + 3 random distractors from a pool of 6 → set changes, keep shuffled.
      const bag=cfg.pool.filter(function(k){return k!==ans;}), picks=[];
      while(picks.length < cfg.opts-1 && bag.length) picks.push(bag.splice(ri(bag.length),1)[0]);
      opts = shuffleArr([ans].concat(picks));
    }
  }
  qData.choiceAns = ans;
  qData.choices   = opts.map(function(k){ return { code:k, html:names[k] }; });
  qData.choiceText= {};
  opts.forEach(function(k){ qData.choiceText[k]=names[k]; });
  qData.nalType   = ans;                          // runtime-only test hooks
  qData.nalLevel  = lv;
  qData.nalStim   = stim;                         // 'picture' | 'notation'
  qData.workSteps = nalWhy(lv, ans, qData.nalNumber, qData.nalAxis, names);
  el.style.fontSize='1.1rem';
  el.innerHTML='<div style="'+A_LBL+'">'+prompt+'</div>'+svg;
}

/* ═══════════════════════════════════════════════
   CONGRUENCE & SIMILARITY  (v64, lvKey cs, Yr 8)
   Recall / Fluent-eligible. Base inputMode 'number' with L1–L3 as
   'choice' (levelModes); L4 is the typed method level (target 15).
   ── Levels ──
   L1 [choice]: identify Congruent / Similar / Neither from a pair of
       shapes (triangles + rectangles + regular polygons), judged from
       the labelled measurements. CONGRUENT TRUMPS SIMILAR.
   L2 [choice, fixed 6-button order]: name the congruence test that
       proves the marked pair congruent — SSS / SAS / AAS / RHS —
       "Not congruent" (v76: given side lengths that don't match), or
       "Not enough information" (catches AAA and SSA).
   L3 [choice, fixed 6-button order]: name the similarity test —
       SSS / AAA / SAS / RHS — "Not similar" (v76: sides given but not
       in a constant ratio), or "Not enough information" (catches
       SSA-similar and lone facts).
   L4 [number]: find a missing side or angle in a congruent / similar
       pair. Integers only.
   ── Conventions ──
   Matching tick counts = equal sides; matching arc counts = equal
   angles; small square = right angle. Numeric side labels on BOTH
   triangles carry actual lengths: at L3 they establish a side ratio
   (proportional → similar; not → "Not similar"); at L2 the DIFF case
   shows lengths that don't match (→ "Not congruent"). Diagrams are
   schematic ("Not to scale") — the marks and numbers are authoritative.
   The correct answer for L2/L3 is re-derived independently by
   csCongruenceVerdict / csSimilarityVerdict from the stored mark plan,
   so EXACTLY ONE option (a test, "notsim/notcong", or "none") can ever
   be right. Asserted in test_congrusimilar.js.
═══════════════════════════════════════════════ */
/* Edge i joins vertex i and (i+1)%3. Angle at vertex i lies between edges
   i and (i+2)%3. Hypotenuse (right angle at r) is the opposite edge (r+1)%3. */
function csEdgeVerts(i){ return [i, (i+1)%3]; }
function csSharedVertex(i,j){ const a=csEdgeVerts(i), b=csEdgeVerts(j); for(const v of a){ if(b.indexOf(v)>=0) return v; } return -1; }

/* ── independent verdicts (also called by the test suite) ── */
function csCongruenceVerdict(sideTicks, angArcs, angRight, sideA, sideB){
  /* v76: numeric side lengths given on BOTH triangles let us DISPROVE congruence.
     If every known matching side is equal we fall through to the marks-based tests;
     if any known matching side differs, the triangles cannot be congruent. */
  if(sideA && sideB){
    const known=[]; for(let i=0;i<3;i++){ if(sideA[i]!=null && sideB[i]!=null) known.push(i); }
    if(known.length>=1){
      const allEqual=known.every(function(i){ return sideA[i]===sideB[i]; });
      if(!allEqual) return 'notcong';
      if(known.length===3) return 'SSS';
    }
  }
  const S=[],Aarc=[],R=[];
  for(let i=0;i<3;i++){ if(sideTicks[i]) S.push(i); if(angArcs[i]) Aarc.push(i); if(angRight[i]) R.push(i); }
  const nAng=Aarc.length+R.length;
  if(S.length===3) return 'SSS';
  if(R.length===1 && Aarc.length===0 && S.length===2){ const hyp=(R[0]+1)%3; if(S.indexOf(hyp)>=0) return 'RHS'; }
  if(S.length===2 && Aarc.length===1 && R.length===0){ const sv=csSharedVertex(S[0],S[1]); if(sv===Aarc[0]) return 'SAS'; }
  if(nAng>=2 && S.length>=1) return 'AAS';
  return 'none';
}
function csSimilarityVerdict(A, B, eqAngles, rightV){
  const ratioIdx=[]; for(let i=0;i<3;i++){ if(A[i]!=null && B[i]!=null) ratioIdx.push(i); }
  let ratiosEqual=false;
  if(ratioIdx.length>=1){ const ks=ratioIdx.map(function(i){return B[i]/A[i];}); ratiosEqual=ks.every(function(k){return Math.abs(k-ks[0])<1e-9;}); }
  const eq=eqAngles.slice(); if(rightV>=0) eq.push(rightV);
  /* v76: two or more known matching side-pairs that are NOT in a constant ratio
     DISPROVE similarity — the scale factor isn't the same. */
  if(ratioIdx.length>=2 && !ratiosEqual) return 'notsim';
  if(eqAngles.length>=2) return 'AAA';
  if(ratioIdx.length===3 && ratiosEqual) return 'SSS';
  if(ratioIdx.length===2 && ratiosEqual){ const sv=csSharedVertex(ratioIdx[0],ratioIdx[1]); if(eq.indexOf(sv)>=0) return 'SAS'; }
  if(rightV>=0 && ratioIdx.length===2 && ratiosEqual){ const hyp=(rightV+1)%3; if(ratioIdx.indexOf(hyp)>=0) return 'RHS'; }
  return 'none';
}

/* ── SVG helpers ── */
function csWrap(inner){ return pgSvgWrap(inner); }            // 300×240 + "Not to scale"
const CS_BOX_L=[26,58,140,172], CS_BOX_R=[160,58,274,172];
function csTicks(A,B,n){
  const M=pgMid(A,B), d=pgU(A,B), perp=[-d[1],d[0]], gap=5, len=6; let s='';
  for(let i=0;i<n;i++){ const off=(i-(n-1)/2)*gap, c=[M[0]+d[0]*off, M[1]+d[1]*off];
    const p1=[c[0]+perp[0]*len,c[1]+perp[1]*len], p2=[c[0]-perp[0]*len,c[1]-perp[1]*len];
    s+='<line x1="'+p1[0].toFixed(1)+'" y1="'+p1[1].toFixed(1)+'" x2="'+p2[0].toFixed(1)+'" y2="'+p2[1].toFixed(1)+'" stroke="var(--text)" stroke-width="2" stroke-linecap="round"/>'; }
  return s;
}
function csAngArcs(V,P,Q,n,acc){
  const d1=pgU(V,P), d2=pgU(V,Q); let a1=Math.atan2(d1[1],d1[0]), a2=Math.atan2(d2[1],d2[0]);
  let dd=a2-a1; while(dd>Math.PI)dd-=2*Math.PI; while(dd<-Math.PI)dd+=2*Math.PI;
  const col=acc?'var(--accent)':'var(--text)'; let s='';
  for(let k=0;k<n;k++){ const r=12+k*4, pts=[];
    for(let i=0;i<=14;i++){ const a=a1+dd*i/14; pts.push([V[0]+Math.cos(a)*r, V[1]+Math.sin(a)*r]); }
    s+='<polyline points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="'+col+'" stroke-width="2"/>'; }
  return s;
}
function csAngLabel(V,P,Q,txt,acc){
  const d1=pgU(V,P), d2=pgU(V,Q); let bis=[d1[0]+d2[0],d1[1]+d2[1]]; const bl=Math.hypot(bis[0],bis[1])||1; bis=[bis[0]/bl,bis[1]/bl];
  const p=[V[0]-bis[0]*20, V[1]-bis[1]*20]; return pgLbl(p[0],p[1],txt,acc);   // v65: OUTSIDE the vertex for legibility (Laura)
}
/* Render one triangle from fitted pts + a mark/label plan. */
function csTriRender(pts, plan){
  const cen=pgCentroid(pts); let s=pgPoly(pts);
  const sT=plan.sideTicks||[], sL=plan.sideLbl||[], aA=plan.angArcs||[], aR=plan.angRight||[], aL=plan.angLbl||[];
  for(let i=0;i<3;i++){ const A=pts[i], B=pts[(i+1)%3];
    if(sT[i]) s+=csTicks(A,B,sT[i]);
    if(sL[i]!=null){ const L=pgOut(A,B,cen,15); s+=pgLbl(L[0],L[1],String(sL[i]), plan.accSide===i); } }
  for(let i=0;i<3;i++){ const V=pts[i], P=pts[(i+1)%3], Q=pts[(i+2)%3];
    if(aR[i]) s+=pgRA(V,P,Q);
    else if(aA[i]) s+=csAngArcs(V,P,Q,aA[i], plan.accAng===i);
    if(aL[i]!=null) s+=csAngLabel(V,P,Q,String(aL[i]), plan.accAng===i); }
  return s;
}
/* Base schematic triangle (unit-ish) from angles; right=true → right angle at V0. */
function csBaseTri(right){
  if(right){ const b=32+ri(27); return nalTriFromAngles(90,b); }         // right at V0
  let a,b,c,g=0; do{ a=42+ri(29); b=42+ri(29); c=180-a-b; g++; }
  while(g<60 && !(c>=36 && c<=94 && Math.abs(a-b)>7 && Math.abs(a-c)>7 && Math.abs(b-c)>7));
  return nalTriFromAngles(a,b);
}
/* Draw a same-orientation pair (each fitted to fill its own box → equal on-screen size). */
function csTriPairSVG(basePts, planA, planB, deg){
  const rot=pgRot(basePts, deg, false);
  const ptsA=pgFit(rot, CS_BOX_L[0],CS_BOX_L[1],CS_BOX_L[2],CS_BOX_L[3]);
  const ptsB=pgFit(rot, CS_BOX_R[0],CS_BOX_R[1],CS_BOX_R[2],CS_BOX_R[3]);
  return csWrap(csTriRender(ptsA,planA)+csTriRender(ptsB,planB));
}

/* ── L1 shapes: fit any point-set to a box and label edges ── */
function csGCentroid(pts){ let x=0,y=0; pts.forEach(function(p){x+=p[0];y+=p[1];}); return [x/pts.length, y/pts.length]; }
function csPolyLabelled(pts, edgeLbls){   // edgeLbls: {edgeIndex: text}
  const cen=csGCentroid(pts); let s='<polygon points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="var(--text)" stroke-width="2.5" stroke-linejoin="round"/>';
  for(const k in edgeLbls){ const i=+k, A=pts[i], B=pts[(i+1)%pts.length], L=pgOut(A,B,cen,15); s+=pgLbl(L[0],L[1],String(edgeLbls[k]),false); }
  return s;
}
function csRegPolyPts(n){ const pts=[]; for(let i=0;i<n;i++){ const a=(-90+i*360/n)*Math.PI/180; pts.push([Math.cos(a),Math.sin(a)]); } return pts; }
function csRegPolyRender(pts, lenLabel, ticks){
  const cen=csGCentroid(pts);
  let s='<polygon points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="var(--text)" stroke-width="2.5" stroke-linejoin="round"/>';
  for(let i=0;i<pts.length;i++){ if(ticks) s+=csTicks(pts[i], pts[(i+1)%pts.length], ticks); }
  const L=pgOut(pts[0], pts[1], cen, 15); s+=pgLbl(L[0],L[1],String(lenLabel),false);
  return s;
}
function csRectPts(w,h){ return [[0,0],[w,0],[w,h],[0,h]]; }

function csL1Verdict(fam, A, B){
  if(fam==='triangle'){ const sa=A.slice().sort(function(p,q){return p-q;}), sb=B.slice().sort(function(p,q){return p-q;});
    if(sa.every(function(v,i){return v===sb[i];})) return 'congruent';
    const ks=sa.map(function(v,i){return sb[i]/v;}); if(ks.every(function(k){return Math.abs(k-ks[0])<1e-9;})) return 'similar'; return 'neither'; }
  if(fam==='rectangle'){ const na=[Math.min(A[0],A[1]),Math.max(A[0],A[1])], nb=[Math.min(B[0],B[1]),Math.max(B[0],B[1])];
    if(na[0]===nb[0] && na[1]===nb[1]) return 'congruent';
    if(Math.abs(na[1]/na[0]-nb[1]/nb[0])<1e-9) return 'similar'; return 'neither'; }
  // regpoly: A=[n,s] B=[n,s]
  if(A[0]!==B[0]) return 'neither'; if(A[1]===B[1]) return 'congruent'; return 'similar';
}

/* v66 (Laura): faithful similar-triangle diagrams. Each triangle is built from its
   ACTUAL measurements so the picture genuinely demonstrates the test; B is a true scaled
   copy for the 'similar' answers, or a genuinely non-similar triangle for the 'not enough
   information' answers. The answer logic (csSimilarityVerdict on the marked arrays) is
   unchanged — only the drawing is rebuilt. */
function csPtsTwoSidesIncl(e0, e1, thetaDeg){    // edge0=V0V1=e0, edge1=V1V2=e1, included angle at V1
  const th=thetaDeg*Math.PI/180;
  return [[e0,0],[0,0],[e1*Math.cos(th), e1*Math.sin(th)]];
}
function csRenderSimPair(pA, planA, pB, planB, deg){
  const fA=pgFit(pgRot(pA,deg,false), CS_BOX_L[0],CS_BOX_L[1],CS_BOX_L[2],CS_BOX_L[3]);
  const fB=pgFit(pgRot(pB,deg,false), CS_BOX_R[0],CS_BOX_R[1],CS_BOX_R[2],CS_BOX_R[3]);
  return csWrap(csTriRender(fA,planA)+csTriRender(fB,planB));
}
function csSimPairSVG(scen, A, B, deg){
  const nn=function(arr){ return arr.filter(function(v){return v!=null;}); };
  let pA,pB,planA,planB;
  if(scen==='SSS'||scen==='NOTPROP'){
    pA=nalTriFromSides(A[0],A[1],A[2]); pB=nalTriFromSides(B[0],B[1],B[2]);
    planA={sideLbl:[A[0],A[1],A[2]]}; planB={sideLbl:[B[0],B[1],B[2]]};
  } else if(scen==='AAA'){
    let a,b,c,g=0; do{ a=42+ri(30); b=42+ri(30); c=180-a-b; g++; }
    while(g<60 && !(c>=32 && Math.abs(a-b)>8 && Math.abs(a-c)>8 && Math.abs(b-c)>8));
    pA=nalTriFromAngles(a,b); pB=nalTriFromAngles(a,b);
    planA={angArcs:[1,2,0]}; planB={angArcs:[1,2,0]};
  } else if(scen==='SAS'){
    const sa=nn(A)[0], sb=nn(A)[1], k=nn(B)[0]/sa, th=45+ri(30);
    pA=csPtsTwoSidesIncl(sa,sb,th); pB=csPtsTwoSidesIncl(sa*k,sb*k,th);
    planA={sideLbl:[sa,sb,null],angArcs:[0,1,0]}; planB={sideLbl:[sa*k,sb*k,null],angArcs:[0,1,0]};
  } else if(scen==='RHS'){
    const hyp=A[1], leg=A[0], other=Math.sqrt(Math.max(1,hyp*hyp-leg*leg)), k=B[0]/leg;
    pA=[[leg,0],[0,0],[0,other]]; pB=[[leg*k,0],[0,0],[0,other*k]];   // right angle at V1, hyp=V1V2, leg=V0V1
    planA={sideLbl:[leg,hyp,null],angRight:[0,1,0]}; planB={sideLbl:[leg*k,hyp*k,null],angRight:[0,1,0]};
  } else if(scen==='TWOS'){
    const sa=A[0], sb=A[1], k=B[0]/sa, thA=40+ri(22), thB=thA+24+ri(18);
    pA=csPtsTwoSidesIncl(sa,sb,thA); pB=csPtsTwoSidesIncl(sa*k,sb*k,thB);   // different included angle → not similar
    planA={sideLbl:[sa,sb,null]}; planB={sideLbl:[sa*k,sb*k,null]};
  } else if(scen==='ONEA'){
    const al=44+ri(30); const b1=40+ri(24); let b2,g=0;
    do{ b2=40+ri(30); g++; }while(g<40 && (Math.abs(b2-b1)<12 || (180-al-b2)<26));
    pA=nalTriFromAngles(al,b1); pB=nalTriFromAngles(al,b2);   // share one angle, different shape
    planA={angArcs:[1,0,0]}; planB={angArcs:[1,0,0]};
  } else {   // SSA — ambiguous pair: two sides (ratio k) + equal non-included angle, different shape
    const k=2+ri(2), phi=28+ri(12); let sa,sb,gA,g=0;
    do{ sa=10+ri(4); sb=7+ri(3); const sg=sa*Math.sin(phi*Math.PI/180)/sb; g++;
        gA=(sg<1)?Math.asin(sg)*180/Math.PI:0; }
    while(g<50 && !(sa>sb && gA>0 && (180-phi-(180-gA))>16));
    const gB=180-gA, bA=180-phi-gA, bB=180-phi-gB;
    const sinp=Math.sin(phi*Math.PI/180);
    const dA=sb*Math.sin(bA*Math.PI/180)/sinp, dB=sb*Math.sin(bB*Math.PI/180)/sinp;
    pA=nalTriFromSides(sa,sb,dA); pB=nalTriFromSides(sa*k,sb*k,dB*k);   // angle at V0 = phi on both
    planA={sideLbl:[sa,sb,null],angArcs:[1,0,0]}; planB={sideLbl:[sa*k,sb*k,null],angArcs:[1,0,0]};
  }
  return csRenderSimPair(pA,planA,pB,planB,deg);
}
function genCongruSimilar(el){
  el.style.fontSize='1.05rem';
  qData.chosen=null; qData.csPlan=null; qData.csL4=null;
  const lv=level;

  /* ───────── L1 ───────── */
  if(lv===1){
    const fam=['triangle','triangle','rectangle','regpoly'][ri(4)];
    const rel=['congruent','similar','neither'][ri(3)];
    const k=(Math.random()<0.5)?2:3;
    let svgA,svgB, Anum, Bnum;
    if(fam==='triangle'){
      let T; do{ T=nalSideTriple('scalene'); }while(!(T[0]!==T[1]&&T[1]!==T[2]&&T[0]!==T[2]));
      Anum=T.slice();
      if(rel==='congruent'){ Bnum=shuffleArr(T.slice()); }
      else if(rel==='similar'){ Bnum=T.map(function(v){return v*k;}); }
      else { // neither: scale then bump one side, keep a valid triangle & non-proportional
        let cand,g=0; do{ cand=T.map(function(v){return v*k;}); const j=ri(3); cand[j]+=(Math.random()<0.5?1:-1)*(1+ri(2)); g++; }
        while(g<40 && !(cand[0]+cand[1]>cand[2] && cand[1]+cand[2]>cand[0] && cand[0]+cand[2]>cand[1] && !csProp(T,cand))); Bnum=cand; }
      const pA=nalTriFromSides(Anum[0],Anum[1],Anum[2]), pB=nalTriFromSides(Bnum[0],Bnum[1],Bnum[2]);
      const dA=-25+ri(51), dB=-25+ri(51);
      const fA=pgFit(pgRot(pA,dA,Math.random()<0.5),CS_BOX_L[0],CS_BOX_L[1],CS_BOX_L[2],CS_BOX_L[3]);
      const fB=pgFit(pgRot(pB,dB,Math.random()<0.5),CS_BOX_R[0],CS_BOX_R[1],CS_BOX_R[2],CS_BOX_R[3]);
      svgA=csTriRender(fA,{sideLbl:Anum}); svgB=csTriRender(fB,{sideLbl:Bnum});
    } else if(fam==='rectangle'){
      const w=4+ri(7), h=3+ri(5); Anum=[w,h];
      if(rel==='congruent'){ Bnum=(Math.random()<0.5)?[w,h]:[h,w]; }
      else if(rel==='similar'){ Bnum=[w*k,h*k]; }
      else { let w2,h2,g=0; do{ w2=4+ri(9); h2=3+ri(8); g++; }while(g<50 && (Math.abs(w2/h2-w/h)<1e-9 || Math.abs(h2/w2-w/h)<1e-9)); Bnum=[w2,h2]; }
      const fA=pgFit(csRectPts(Anum[0],Anum[1]),CS_BOX_L[0],CS_BOX_L[1],CS_BOX_L[2],CS_BOX_L[3]);
      const fB=pgFit(csRectPts(Bnum[0],Bnum[1]),CS_BOX_R[0],CS_BOX_R[1],CS_BOX_R[2],CS_BOX_R[3]);
      svgA=csPolyLabelled(fA,{0:Anum[0],3:Anum[1]}); svgB=csPolyLabelled(fB,{0:Bnum[0],1:Bnum[1]});   // left: width on top, height on OUTER (left) edge so it never crowds the right shape
    } else { // regpoly: n in {4,5,6}
      const n=[4,5,6][ri(3)], s=4+ri(7); Anum=[n,s];
      if(rel==='congruent'){ Bnum=[n,s]; }
      else if(rel==='similar'){ Bnum=[n,s*k]; }
      else { let n2; do{ n2=[4,5,6][ri(3)]; }while(n2===n); Bnum=[n2,4+ri(7)]; }
      const fA=pgFit(csRegPolyPts(Anum[0]),CS_BOX_L[0],CS_BOX_L[1],CS_BOX_L[2],CS_BOX_L[3]);
      const fB=pgFit(csRegPolyPts(Bnum[0]),CS_BOX_R[0],CS_BOX_R[1],CS_BOX_R[2],CS_BOX_R[3]);
      const csCongr=(Anum[0]===Bnum[0] && Anum[1]===Bnum[1]);   // regular polygons: tick every side (regular);
      svgA=csRegPolyRender(fA,Anum[1],1); svgB=csRegPolyRender(fB,Bnum[1], csCongr?1:2);   // same tick count = equal (congruent); different = not
    }
    const ans=csL1Verdict(fam,Anum,Bnum);
    const order=['congruent','similar','neither'], names={congruent:'Congruent',similar:'Similar',neither:'Neither'};
    qData.choiceAns=ans; qData.choices=order.map(function(c){return {code:c,html:names[c]};});
    qData.choiceText={}; order.forEach(function(c){qData.choiceText[c]=names[c];});
    qData.csLevel=1; qData.csFam=fam; qData.csRel=ans; qData.csA=Anum; qData.csB=Bnum;
    qData.workSteps=({
      congruent:'Matching sides are equal, so the shapes are the same size and shape → <b>congruent</b>.',
      similar:'Every side of one is the same multiple of the other — same shape, just scaled → <b>similar</b>.',
      neither:'The sides are not all equal and not in a constant ratio, so <b>neither</b>.'
    })[ans] || '';
    el.innerHTML='<div style="'+A_LBL+'">Are these two shapes congruent, similar, or neither?</div>'+csWrap(svgA+svgB);
    return;
  }

  /* ───────── L2 (congruence test) ───────── */
  if(lv===2){
    const scen=['SSS','SAS','AAS','RHS','SSA','AAA','AA','SS','DIFF'][ri(9)];
    const sideTicks=[0,0,0], angArcs=[0,0,0], angRight=[false,false,false];
    let sideA=[null,null,null], sideB=[null,null,null];   // v76: numeric side lengths (DIFF only)
    let right=false, planA=null, planB=null;
    if(scen==='SSS'){ sideTicks[0]=1; sideTicks[1]=2; sideTicks[2]=3; }
    else if(scen==='SAS'){ const v=ri(3); const e1=v, e2=(v+2)%3; sideTicks[e1]=1; sideTicks[e2]=2; angArcs[v]=1; }
    else if(scen==='AAS'){ const va=ri(3); let vb; do{ vb=ri(3); }while(vb===va); angArcs[va]=1; angArcs[vb]=2; const se=(Math.random()<0.5?va:vb+1)%3; sideTicks[se]=1; }
    else if(scen==='RHS'){ right=true; angRight[0]=true; sideTicks[1]=1; sideTicks[0]=2; }   // hyp e1 + leg e0
    else if(scen==='SSA'){ sideTicks[0]=1; sideTicks[1]=2; angArcs[(Math.random()<0.5?0:2)]=1; }  // non-included (share V1)
    else if(scen==='AAA'){ angArcs[0]=1; angArcs[1]=2; angArcs[2]=3; }
    else if(scen==='AA'){ const va=ri(3); let vb; do{ vb=ri(3);}while(vb===va); angArcs[va]=1; angArcs[vb]=2; }
    else if(scen==='SS'){ sideTicks[0]=1; sideTicks[1]=2; }   // SS
    else { // DIFF: three side lengths on each, at least one matching side different → not congruent
      let sA,g=0; do{ sA=[6+ri(8),6+ri(8),6+ri(8)]; g++; }
      while(g<60 && !(sA[0]+sA[1]>sA[2] && sA[1]+sA[2]>sA[0] && sA[0]+sA[2]>sA[1]));
      let sB,h=0; do{ sB=sA.slice(); const j=ri(3); sB[j]+=(Math.random()<0.5?1:-1)*(1+ri(3)); h++; }
      while(h<60 && !((sB[0]!==sA[0]||sB[1]!==sA[1]||sB[2]!==sA[2]) && sB[0]+sB[1]>sB[2] && sB[1]+sB[2]>sB[0] && sB[0]+sB[2]>sB[1]));
      sideA=sA.slice(); sideB=sB.slice();
      planA={sideLbl:sA.slice()}; planB={sideLbl:sB.slice()};
    }
    const ans=csCongruenceVerdict(sideTicks,angArcs,angRight,sideA,sideB);
    const base=csBaseTri(right), deg=-28+ri(57);
    if(!planA){ planA={sideTicks:sideTicks,angArcs:angArcs,angRight:angRight}; planB=planA; }
    const svg=csTriPairSVG(base, planA, planB, deg);
    const order=['SSS','SAS','AAS','RHS','notcong','none'], names={SSS:'SSS',SAS:'SAS',AAS:'AAS',RHS:'RHS',notcong:'Not congruent',none:'Not enough information'};
    qData.choiceAns=ans; qData.choices=order.map(function(c){return {code:c,html:names[c]};});
    qData.choiceText={}; order.forEach(function(c){qData.choiceText[c]=names[c];});
    qData.csLevel=2; qData.csScenario=scen; qData.csPlan={level:2,sideTicks:sideTicks,angArcs:angArcs,angRight:angRight,sideA:sideA,sideB:sideB};
    qData.workSteps=({
      SSS:'All three pairs of sides are marked equal → <b>SSS</b>.',
      SAS:'Two pairs of sides and the angle between them are equal → <b>SAS</b>.',
      AAS:'Two pairs of angles and a matching side are equal → <b>AAS</b>.',
      RHS:'A right angle, the hypotenuse and one leg are equal → <b>RHS</b>.',
      notcong:'The side lengths given don’t all match, so the triangles are a different size → <b>not congruent</b>.',
      none:'The marked facts aren’t enough to prove the triangles are identical, so <b>not enough information</b>.'
    })[ans] || '';
    el.innerHTML='<div style="'+A_LBL+'">Which test shows these two triangles are congruent?</div>'+svg;
    return;
  }

  /* ───────── L3 (similarity test) ───────── */
  if(lv===3){
    const scen=['SSS','AAA','SAS','RHS','SSA','ONEA','TWOS','NOTPROP'][ri(8)];
    const A=[null,null,null], B=[null,null,null], angArcs=[0,0,0], angRight=[false,false,false];
    const k=(Math.random()<0.5)?2:3; let rightV=-1, eqAngles=[], right=false;
    const three=function(){ let s,g=0; do{ s=[5+ri(7),5+ri(7),5+ri(7)]; g++; }
      while(g<60 && !(s[0]!==s[1]&&s[1]!==s[2]&&s[0]!==s[2] && s[0]+s[1]>s[2] && s[1]+s[2]>s[0] && s[0]+s[2]>s[1])); return s; };
    if(scen==='SSS'){ const s=three(); for(let i=0;i<3;i++){ A[i]=s[i]; B[i]=s[i]*k; } }
    else if(scen==='AAA'){ const va=ri(3); let vb; do{ vb=ri(3);}while(vb===va); angArcs[va]=1; angArcs[vb]=2; eqAngles=[va,vb]; }
    else if(scen==='SAS'){ const v=ri(3), e1=v, e2=(v+2)%3, a=5+ri(7), b=6+ri(7); A[e1]=a; A[e2]=b; B[e1]=a*k; B[e2]=b*k; angArcs[v]=1; eqAngles=[v]; }
    else if(scen==='RHS'){ right=true; angRight[0]=true; rightV=0; const hyp=13+ri(8), leg=5+ri(6); A[1]=hyp; A[0]=leg; B[1]=hyp*k; B[0]=leg*k; }  // hyp e1 + leg e0
    else if(scen==='SSA'){ const a=5+ri(7), b=6+ri(7); A[0]=a; A[1]=b; B[0]=a*k; B[1]=b*k; const na=(Math.random()<0.5?0:2); angArcs[na]=1; eqAngles=[na]; } // non-included
    else if(scen==='ONEA'){ const v=ri(3); angArcs[v]=1; eqAngles=[v]; }
    else if(scen==='TWOS'){ const a=5+ri(7), b=6+ri(7); A[0]=a; A[1]=b; B[0]=a*k; B[1]=b*k; }   // two sides, no angle
    else { const s=three(); for(let i=0;i<3;i++){ A[i]=s[i]; } let t,g=0; do{ t=[s[0]*k,s[1]*k,s[2]*k]; const j=ri(3); t[j]+=(Math.random()<0.5?1:-1)*(1+ri(2)); g++; }while(g<60 && (csProp(s,t) || !(t[0]+t[1]>t[2]&&t[1]+t[2]>t[0]&&t[0]+t[2]>t[1]))); for(let i=0;i<3;i++) B[i]=t[i]; }  // NOTPROP
    const ans=csSimilarityVerdict(A,B,eqAngles,rightV);
    const deg=-28+ri(57);
    const svg=csSimPairSVG(scen, A, B, deg);
    const order=['SSS','AAA','SAS','RHS','notsim','none'], names={SSS:'SSS',AAA:'AAA',SAS:'SAS',RHS:'RHS',notsim:'Not similar',none:'Not enough information'};
    qData.choiceAns=ans; qData.choices=order.map(function(c){return {code:c,html:names[c]};});
    qData.choiceText={}; order.forEach(function(c){qData.choiceText[c]=names[c];});
    qData.csLevel=3; qData.csScenario=scen; qData.csPlan={level:3,A:A,B:B,eqAngles:eqAngles,rightV:rightV};
    qData.workSteps=({
      SSS:'All three pairs of sides are in the same ratio → <b>SSS</b>.',
      AAA:'Two pairs of angles are equal (so all three are) → <b>AAA</b>.',
      SAS:'Two pairs of sides in the same ratio with an equal angle between them → <b>SAS</b>.',
      RHS:'A right angle with the hypotenuse and one side in the same ratio → <b>RHS</b>.',
      notsim:'The sides given aren’t in a constant ratio (the scale factor isn’t the same), so the triangles are <b>not similar</b>.',
      none:'The marked facts aren’t enough to prove the triangles are the same shape, so <b>not enough information</b>.'
    })[ans] || '';
    el.innerHTML='<div style="'+A_LBL+'">Which test shows these two triangles are similar?</div>'+svg;
    return;
  }

  /* ───────── L4 (find x) ───────── */
  const kind=['simside','simside','simside','congside','simang','congang'][ri(6)];
  const angA=nalAngLabelTriple();      // three plausible integer angles summing to 180 for angle cases
  // v65 (Laura): for the angle cases, build the triangle FROM those angles so the
  // labelled/target vertex is drawn at its true size (an obtuse-ish x looks right).
  const _isAng=(kind==='simang'||kind==='congang');
  const base=_isAng ? nalTriFromAngles(angA[0], angA[1]) : csBaseTri(false), deg=-22+ri(45);
  let planA={}, planB={}, ans, work, prompt, part, ptsA=null, ptsB=null;   // v66: ptsA/ptsB → faithful side-case drawing
  if(kind==='simside'){
    // v66 (Laura): draw genuine similar triangles (B = k×A) so the scale factor is visible.
    part='side'; const k=(Math.random()<0.5)?2:3; const Ap=5+ri(9), Au=5+ri(9), th=45+ri(30);
    planA={sideLbl:[Ap,Au,null],angArcs:[0,1,0]};
    planB={sideLbl:[Ap*k,'x',null],angArcs:[0,1,0],accSide:1};
    ptsA=csPtsTwoSidesIncl(Ap,Au,th); ptsB=csPtsTwoSidesIncl(Ap*k,Au*k,th);
    ans=k*Au; work='Scale factor = '+(Ap*k)+' ÷ '+Ap+' = '+k+'.<br>x = '+k+' × '+Au+' = <b>'+ans+'</b>';
    prompt='The two triangles are similar. Work out the length x.';
  } else if(kind==='congside'){
    part='side'; let sides,g=0; do{ sides=[6+ri(9),6+ri(9),6+ri(9)]; g++; }
    while(g<60 && !(sides[0]+sides[1]>sides[2] && sides[1]+sides[2]>sides[0] && sides[0]+sides[2]>sides[1]));
    const u=ri(3); const slB=[null,null,null]; slB[u]='x';
    planA={sideTicks:[1,2,3],sideLbl:sides.slice()}; planB={sideTicks:[1,2,3],sideLbl:slB,accSide:u};
    ptsA=nalTriFromSides(sides[0],sides[1],sides[2]); ptsB=nalTriFromSides(sides[0],sides[1],sides[2]);
    ans=sides[u]; work='The triangles are congruent, so matching sides are equal.<br>x = <b>'+ans+'</b>';
    prompt='The two triangles are congruent. Work out the length x.';
  } else if(kind==='simang' || kind==='congang'){
    part='angle'; const sim=(kind==='simang'); const v=ri(3); const alpha=angA[v];
    const alA=[null,null,null], alB=[null,null,null]; alA[v]=alpha+'\u00B0'; alB[v]='x';
    planA={angArcs:mark1(v),angLbl:alA}; planB={angArcs:mark1(v),angLbl:alB,accAng:v};
    ans=alpha; work='Matching angles in '+(sim?'similar':'congruent')+' triangles are equal.<br>x = <b>'+alpha+'°</b>';
    prompt='The two triangles are '+(sim?'similar':'congruent')+'. Work out the angle x (in degrees).';
  }
  const svg=(ptsA&&ptsB) ? csRenderSimPair(ptsA,planA,ptsB,planB,deg) : csTriPairSVG(base, planA, planB, deg);
  qData.ans=ans; qData.workSteps=work;
  qData.csLevel=4; qData.csL4={kind:kind,part:part}; qData.csAns=ans;
  el.innerHTML='<div style="'+A_LBL+'">'+prompt+'</div>'+svg;
}
/* helpers used above */
function csProp(a,b){ const ks=a.map(function(v,i){return b[i]/v;}); return ks.every(function(x){return Math.abs(x-ks[0])<1e-9;}); }
function mark1(v){ const m=[0,0,0]; m[v]=1; return m; }
function nalAngLabelTriple(){ let a,b,c,g=0; do{ a=35+ri(46); b=35+ri(46); c=180-a-b; g++; }while(g<60 && !(c>=25 && c<=95)); if(c<25||c>95){a=60;b=70;c=50;} return [a,b,c]; }

/* ═══════════════════════════════════════════════
   EULER'S RULE — V + F = E + 2   (v59; working reformatted v60, lvKey eul)
   L1: a 3D solid is shown (reusing the SHAPE_LIB wireframes); the student counts
   one of faces / vertices / edges. POLYHEDRA ONLY — curved solids break Euler's
   rule and their F/V/E is curriculum-contested, so they are excluded here.
   L2: no diagram and no name — two of F/V/E are given as numbers and the student
   finds the third with the rule. Values come from real solids (prisms and
   pyramids with 3–15 sides, plus the dodecahedron), so every triple is a genuine
   polyhedron. Whole-number 'number' answers throughout.
═══════════════════════════════════════════════ */
/* L1 diagram pool — SHAPE_LIB keys with their {F,V,E}. Dodecahedron is omitted
   here (30 edges can't be counted off the small diagram) but is used in L2. */
const EULER_L1 = [
  { key:'cube',              F:6, V:8,  E:12 },
  { key:'cuboid',            F:6, V:8,  E:12 },
  { key:'triangularPrism',   F:5, V:6,  E:9  },
  { key:'pentagonalPrism',   F:7, V:10, E:15 },
  { key:'hexagonalPrism',    F:8, V:12, E:18 },
  { key:'triangularPyramid', F:4, V:4,  E:6  },
  { key:'squarePyramid',     F:5, V:5,  E:8  },
  { key:'pentagonalPyramid', F:6, V:6,  E:10 },
  { key:'hexagonalPyramid',  F:7, V:7,  E:12 },
];
const EULER_NAME = { F:'faces', V:'vertices', E:'edges' };

/* A real polyhedron's {F,V,E} for L2. Prism (n sides): F=n+2, V=2n, E=3n.
   Pyramid (n sides): F=n+1, V=n+1, E=2n. n runs 3–15. Plus the dodecahedron. */
function eulerSolid(){
  const r = ri(21);
  if (r < 10){ const n = rr(3,15); return { F:n+2, V:2*n, E:3*n }; }   // prism
  if (r < 20){ const n = rr(3,15); return { F:n+1, V:n+1, E:2*n }; }   // pyramid
  return { F:12, V:20, E:30 };                                          // dodecahedron
}

function eulerWorking(s, ask){
  // Laid out the way we teach it: state the rule V + F = E + 2, substitute the
  // two knowns, rearrange, then solve — one step per line.
  var rule = 'V + F = E + 2';
  if (ask === 'V')
    return rule
      + '<br>V + ' + s.F + ' = ' + s.E + ' + 2'
      + '<br>V = ' + (s.E + 2) + ' − ' + s.F
      + '<br>V = <b>' + s.V + '</b>';
  if (ask === 'F')
    return rule
      + '<br>' + s.V + ' + F = ' + s.E + ' + 2'
      + '<br>F = ' + (s.E + 2) + ' − ' + s.V
      + '<br>F = <b>' + s.F + '</b>';
  return rule
    + '<br>' + s.V + ' + ' + s.F + ' = E + 2'
    + '<br>' + (s.V + s.F) + ' = E + 2'
    + '<br>E = ' + (s.V + s.F) + ' − 2'
    + '<br>E = <b>' + s.E + '</b>';
}

function genEuler(el){
  el.style.fontSize = '1.1rem';
  const askKeys = ['F', 'V', 'E'];
  const ask = askKeys[ri(3)];

  if (level === 1){
    const s = EULER_L1[ri(EULER_L1.length)];
    qData.ans     = s[ask];
    qData.eulFVE  = { F:s.F, V:s.V, E:s.E };   // runtime-only test hooks (not stored)
    qData.eulAsk  = ask;
    qData.eulKey  = s.key;
    qData.workSteps = 'Count the ' + EULER_NAME[ask] + ' on the solid. (V + F = E + 2 is a handy check.)';
    el.innerHTML = '<div style="'+A_LBL+'">How many ' + EULER_NAME[ask] + ' does this solid have?</div>'
      + shWrap(SHAPE_LIB[s.key].variants[0]);
  } else {
    const s = eulerSolid();
    qData.ans     = s[ask];
    qData.eulFVE  = { F:s.F, V:s.V, E:s.E };
    qData.eulAsk  = ask;
    qData.eulKey  = null;
    const given = askKeys.filter(function(k){ return k !== ask; });   // the two we show, in F,V,E order
    const g0 = given[0], g1 = given[1];
    qData.workSteps = eulerWorking(s, ask);
    el.innerHTML = '<div style="'+A_LBL+'">A solid has ' + s[g0] + ' ' + EULER_NAME[g0]
      + ' and ' + s[g1] + ' ' + EULER_NAME[g1]
      + '. How many ' + EULER_NAME[ask] + ' does it have?</div>';
  }
}

/* ═══════════════════════════════════════════════
   ANGLE GEOMETRY — BATCH C  (v54)
   Three method skills, flat T=5, whole-number answers. (v58: Fluency unlocked —
   L2+ carry a "Best played in Challenge" hint via LEVEL_REC; no longer forced.)
   Per-level input mode: L1 is tap-to-identify ('choice', reusing the generalised
   choice engine); L2+ are typed numbers ('number', exactly like the equation and
   interior-angle skills). Quadrilaterals is numeric at every level. All diagrams
   are quality SVG built on the shared pg* geometry helpers; angle positions are
   schematic (the pgSvgWrap frame already prints "Not to scale").
═══════════════════════════════════════════════ */
function angRay(V, deg, len){ const a = deg * Math.PI / 180; return [V[0] + Math.cos(a) * len, V[1] + Math.sin(a) * len]; }
/* Angle label sized + pushed out so it clears the rays. Long algebraic labels
   ((2x + 14)°) get a smaller font and a larger offset than a short 70°. */
function angLabel(x, y, t, acc){ const size = (t.length > 5) ? 13 : 16;
  return '<text x="'+x.toFixed(1)+'" y="'+y.toFixed(1)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="'+size+'" fill="'+(acc?'var(--accent)':'var(--text)')+'" text-anchor="middle" dominant-baseline="central">'+t+'</text>'; }
function angLabelPos(V, P1, P2, txt, extra){
  const u1 = pgU(V,P1), u2 = pgU(V,P2);
  let bx = u1[0]+u2[0], by = u1[1]+u2[1]; const bl = Math.hypot(bx,by) || 1; bx/=bl; by/=bl;
  const dot = Math.max(-1, Math.min(1, u1[0]*u2[0]+u1[1]*u2[1]));
  const half = Math.max(0.18, Math.acos(dot)/2);
  const size = (txt.length > 5) ? 13 : 16;
  const wpx = txt.length*0.58*size, hpx = size, sn = Math.sin(half);
  const off = Math.min(92, Math.max((hpx/2+5)/sn, wpx/(2*sn), wpx/2+8, 26) + 5) + (extra || 0);
  return [V[0]+bx*off, V[1]+by*off];
}
function angArc(V, P1, P2, txt, acc){
  const A = pgArc(V, P1, P2, acc);
  if (txt == null) return A.arc;
  const p = angLabelPos(V, P1, P2, txt, 0);
  return A.arc + angLabel(p[0], p[1], txt, acc);
}

/* ---- Skill 3: Angle Relationships ---- */
const ANG_REL = { comp:'Complementary', supp:'Supplementary', vert:'Vertically opposite', point:'Angles at a point' };
/* Build the diagram for a relationship. vals = label strings for the marked
   angles in the relationship's canonical order (null → schematic/identify), acc
   = index of the unknown (or -1). */
function angArcSweep(V, startDeg, sweepDeg, r, txt, acc){
  const n=Math.max(8, Math.round(Math.abs(sweepDeg)/10)), pts=[];
  for(let i=0;i<=n;i++){ const a=(startDeg+sweepDeg*i/n)*Math.PI/180; pts.push([V[0]+Math.cos(a)*r, V[1]+Math.sin(a)*r]); }
  let out='<polyline points="'+pts.map(function(p){return p[0].toFixed(1)+','+p[1].toFixed(1);}).join(' ')+'" fill="none" stroke="'+(acc?'var(--accent)':'var(--text)')+'" stroke-width="2"/>';
  if(txt!=null){ const ba=(startDeg+sweepDeg/2)*Math.PI/180, off=r+(String(txt).length>3?20:15), lp=[V[0]+Math.cos(ba)*off, V[1]+Math.sin(ba)*off]; out+=angLabel(lp[0],lp[1],txt,acc); }
  return out;
}
/* Build the diagram for a relationship. vals = label strings for the marked angles
   (null -> schematic/identify); accIdx = index of the unknown (or -1); measures =
   numeric degree size of each marked angle so the diagram is drawn TO SCALE — an
   obtuse answer looks obtuse, an acute one acute (v65, Laura). Null measures keeps
   the schematic look for the L1 identify screens. */
function angRelDiagram(key, vals, accIdx, rot, measures){
  rot = rot || 0;
  const R2 = function(d){ return d + rot; };
  let s = '';
  const AC = function(i){ return accIdx === i || accIdx === 'all'; };
  const M = measures || null;
  if (key === 'comp'){
    const V=[150,132], L=106, m0 = M ? M[0] : 45;
    s += shLine(V,angRay(V,R2(0),L)) + shLine(V,angRay(V,R2(-90),L)) + shLine(V,angRay(V,R2(-m0),L));
    s += pgRA(V, angRay(V,R2(0),20), angRay(V,R2(-90),20));
    s += angArcSweep(V, R2(0), -m0, 34, vals?vals[0]:null, AC(0));
    s += angArcSweep(V, R2(-m0), -(90-m0), 34, vals?vals[1]:null, AC(1));
  } else if (key === 'supp'){
    const V=[150,140], L=112, m0 = M ? M[0] : 108;
    s += shLine(angRay(V,R2(180),L), angRay(V,R2(0),L)) + shLine(V, angRay(V,R2(180+m0),L));
    s += angArcSweep(V, R2(180), m0, 32, vals?vals[0]:null, AC(0));
    s += angArcSweep(V, R2(180+m0), 180-m0, 32, vals?vals[1]:null, AC(1));
  } else if (key === 'vert'){
    const V=[150,120], L=112, th = M ? M[0] : 152;
    s += shLine(angRay(V,R2(0),L), angRay(V,R2(180),L)) + shLine(angRay(V,R2(th),L), angRay(V,R2(180+th),L));
    s += angArcSweep(V, R2(0), th, 30, vals?vals[0]:null, AC(0));
    s += angArcSweep(V, R2(180), th, 30, vals?vals[1]:null, AC(1));
  } else { // point
    const V=[150,120], L=104, m = M ? M : [125,110,125];
    const d0=R2(-90), d1=d0+m[0], d2=d1+m[1];
    s += shLine(V,angRay(V,d0,L)) + shLine(V,angRay(V,d1,L)) + shLine(V,angRay(V,d2,L));
    s += angArcSweep(V, d0, m[0], 30, vals?vals[0]:null, AC(0));
    s += angArcSweep(V, d1, m[1], 30, vals?vals[1]:null, AC(1));
    s += angArcSweep(V, d2, m[2], 30, vals?vals[2]:null, AC(2));
  }
  return pgSvgWrap(s);
}
function genAngleRel(el){
  el.style.fontSize = '1.05rem';
  const rot = -55 + ri(111);   // orientation variety so the answer isn't always in the same spot
  if (level === 1){
    const keys = ['comp','supp','vert','point'], key = keys[ri(4)];
    qData.chosen = null; qData.choiceAns = key;
    // v57 (Laura): fixed canonical order — positions stay put every question to cut
    // cognitive load. The diagram still rotates + the relationship is random, so the
    // answer is NOT position-predictable. Order: Complementary, Supplementary,
    // Vertically opposite, Angles at a point.
    const opts = keys.slice();
    qData.choices = opts.map(function(k){ return { code:k, html:ANG_REL[k] }; });
    qData.choiceText = {}; opts.forEach(function(k){ qData.choiceText[k] = ANG_REL[k]; });
    qData.workSteps = ({
      comp:'The two angles sit inside a right angle — together they make 90°, so they are <b>complementary</b>.',
      supp:'The two angles lie along a straight line — together they make 180°, so they are <b>supplementary</b>.',
      vert:'The two angles are opposite each other where the lines cross, so they are <b>vertically opposite</b> (equal).',
      point:'The angles meet at one point and fill the whole turn of 360°, so they are <b>angles at a point</b>.'
    })[key] || '';
    el.innerHTML = '<div style="'+A_LBL+'">What is the relationship between the marked angles?</div>' + angRelDiagram(key, null, 'all', rot);
    return;
  }
  const alg = (level === 4);
  let key, vals, ans, work;
  if (level === 2) key = ['comp','supp','vert'][ri(3)];
  else if (level === 3) key = ['comp','supp','vert','point'][ri(4)];
  else key = ['comp','supp','vert'][ri(3)];   // L4 algebra incl. complementary (Laura)

  if (!alg){
    if (key === 'comp'){ const a = (level===2)?rr(2,17)*5:rr(11,79); ans = 90-a; vals=[a+'°','x']; qData.ans=ans; qData.angCheck={mode:'sum',total:a+ans,expect:90};
      work = 'Complementary → both add to 90°.<br>x = 90° − '+a+'° = <b>'+ans+'°</b>'; }
    else if (key === 'supp'){ const a = (level===2)?rr(3,35)*5:rr(21,159); ans = 180-a; vals=[a+'°','x']; qData.ans=ans; qData.angCheck={mode:'sum',total:a+ans,expect:180};
      work = 'Supplementary → both add to 180°.<br>x = 180° − '+a+'° = <b>'+ans+'°</b>'; }
    else if (key === 'vert'){ const a = (level===2)?rr(4,34)*5:rr(25,155); ans = a; vals=[a+'°','x']; qData.ans=ans; qData.angCheck={mode:'eq',total:a,other:ans};
      work = 'Vertically opposite angles are equal → x = <b>'+ans+'°</b>'; }
    else { // point: two known + x
      const p = angPointVals(level); ans = p.x; vals = [p.a+'°', p.b+'°', 'x']; qData.ans = ans; qData._pa=p.a; qData._pb=p.b; qData.angCheck={mode:'sum',total:p.a+p.b+ans,expect:360};
      work = 'Angles at a point add to 360°.<br>x = 360° − '+p.a+'° − '+p.b+'° = <b>'+ans+'°</b>'; }
    const accIdx = (key==='point') ? 2 : 1;
    let measures;
    if (key==='comp') measures=[90-ans, ans];
    else if (key==='supp') measures=[180-ans, ans];
    else if (key==='vert') measures=[ans, ans];
    else measures=[qData._pa, qData._pb, ans];
    el.innerHTML = '<div style="'+A_LBL+'">Find the size of angle x (in degrees)</div>' + angRelDiagram(key, vals, accIdx, rot, measures);
  } else {
    const eq = angAlgPair(key);   // {labels:[l0,l1], x, work}
    qData.ans = eq.x; qData.angCheck=eq.chk;
    el.innerHTML = '<div style="'+A_LBL+'">Solve for x</div>' + angRelDiagram(key, eq.labels, -1, rot, eq.measures);
    work = eq.work;
  }
  qData.workSteps = work;
}
function angPointVals(level){
  let a,b,x,g=0;
  do { a = (level===2)?rr(4,20)*5 : rr(40,150); b = (level===2)?rr(4,20)*5 : rr(40,150); x = 360-a-b; g++; }
  while ((x < 25 || x > 250) && g < 60);
  if (x < 25 || x > 250){ a=120; b=100; x=140; }
  return { a:a, b:b, x:x };
}
/* Algebraic pair for L4. Equal-type (comp/supp use a sum; vert uses equality). */
function angAlgPair(key){
  if (key === 'vert'){
    // equal angles: (2x + b1) = (x + b2), so x = b2 − b1; both angles positive.
    const x = rr(8,30), b1 = rr(5,40), b2 = x + b1;
    const l0 = coefLbl(2,b1), l1 = coefLbl(1,b2);
    return { labels:[l0, l1], x:x, chk:{mode:'eq',total:2*x+b1,other:x+b2}, measures:[2*x+b1, x+b2],
      work:'Vertically opposite → equal.<br>'+stripDeg(l0)+' = '+stripDeg(l1)+' → x = <b>'+x+'</b>' };
  }
  // sum type: two positive angles adding to S, each written (m x + b).
  const S = (key==='comp') ? 90 : 180, T = rr(2,3);
  let x = 6, cs = 0;
  for (let t=0;t<60;t++){ x = rr(5, Math.floor((S-16)/T)); cs = S - T*x; if (cs>=12 && cs<=58) break; }
  if (!(cs>=12 && cs<=58)){ x = Math.max(5, Math.floor((S-36)/T)); cs = S - T*x; }
  const m1 = rr(1, T-1), m2 = T - m1;
  let b1 = Math.max(4, Math.floor(cs/2)), b2 = cs - b1;
  if (m1===m2 && b1===b2){ b1 -= 2; b2 += 2; }   // distinct expressions
  const l0 = coefLbl(m1,b1), l1 = coefLbl(m2,b2);
  const word = (key==='comp') ? 'Complementary → add to 90°.' : 'Supplementary → add to 180°.';
  return { labels:[l0,l1], x:x, chk:{mode:'sum',total:(m1*x+b1)+(m2*x+b2),expect:S}, measures:[m1*x+b1, m2*x+b2],
    work:word+'<br>'+stripDeg(l0)+' + '+stripDeg(l1)+' = '+S+' → x = <b>'+x+'</b>' };
}
function coefLbl(m,b){ const vx = (m===1)?'x':(m+'x'); if (b===0) return vx+'°'; const bp = (b>0)?(' + '+b):(' − '+Math.abs(b)); return '('+vx+bp+')°'; }
function stripDeg(l){ return l.replace(/°$/,''); }

/* ---- Skill 4: Angles on Parallel Lines ---- */
const ANG_PL = { corr:'Corresponding', alt:'Alternate', coint:'Co-interior', vert:'Vertically opposite' };
function plChevron(C){ return shLine([C[0]-8,C[1]-6],[C[0],C[1]]) + shLine([C[0]-8,C[1]+6],[C[0],C[1]]); }
/* v66 (Laura): shade the marked angle wedge so the angle being found is unmistakable —
   accent fill for the unknown (x), a soft neutral fill for the given angle. */
function plWedge(V, d0, d1, r, acc){
  const a0=Math.atan2(d0[1],d0[0]); const a1=Math.atan2(d1[1],d1[0]); let dd=a1-a0;
  while(dd>Math.PI)dd-=2*Math.PI; while(dd<-Math.PI)dd+=2*Math.PI;
  const P0=[V[0]+d0[0]*r, V[1]+d0[1]*r], P1=[V[0]+d1[0]*r, V[1]+d1[1]*r];
  const sweep=(dd>0)?1:0, col=acc?'var(--accent)':'var(--text)';
  return '<path d="M '+V[0].toFixed(1)+' '+V[1].toFixed(1)+' L '+P0[0].toFixed(1)+' '+P0[1].toFixed(1)+' A '+r+' '+r+' 0 0 '+sweep+' '+P1[0].toFixed(1)+' '+P1[1].toFixed(1)+' Z" fill="'+col+'" fill-opacity="'+(acc?0.20:0.12)+'" stroke="none"/>';
}
function plAngle(I, hu, tu, quad, txt, acc){
  const H=hu, Hn=[-hu[0],-hu[1]], T=tu, Tn=[-tu[0],-tu[1]], L=27;
  const map = { BR:[H,T], BL:[T,Hn], TL:[Hn,Tn], TR:[Tn,H] };
  const d = map[quad];
  const P1=[I[0]+d[0][0]*L, I[1]+d[0][1]*L], P2=[I[0]+d[1][0]*L, I[1]+d[1][1]*L];
  return plWedge(I, d[0], d[1], 20, acc) + angArc(I, P1, P2, txt, acc);
}
function plLeanFor(quad, valAcute){
  const acuteWhenPlus = (quad==='BR' || quad==='TL');   // this quadrant is acute when lean=+1
  return acuteWhenPlus ? (valAcute ? 1 : -1) : (valAcute ? -1 : 1);
}
function plDiagram(marks, vals, theta, lean){
  const cx=150, cy=126, x0=40, x1=260;
  // v65 (Laura): steepness + lean derived from the actual angle sizes so the marked
  // angles are drawn TO SCALE (an obtuse x looks obtuse). theta = the acute angle the
  // transversal makes; null theta/lean keeps the random look for the L1 identify screen.
  // v66 (Laura): the two intersections are centred and the transversal half-length L is
  // capped so BOTH intersections + their marked wedges/labels stay on the 300×240 canvas
  // — previously a shallow angle spread them to the edges and clipped the x angle.
  if (lean == null) lean = (Math.random() < 0.5) ? 1 : -1;
  const angDeg = (theta == null) ? (62 + ri(20)) : theta;  // acute angle from horizontal
  const ang = angDeg * Math.PI/180;
  const u = [Math.cos(ang)*lean, Math.sin(ang)];            // transversal dir (points down)
  const L = Math.min(52/Math.max(0.08, Math.abs(u[0])), 52/Math.max(0.08, u[1]));
  const I1=[cx - u[0]*L, cy - u[1]*L];                      // upper line intersection → at:1
  const I2=[cx + u[0]*L, cy + u[1]*L];                      // lower line intersection → at:2
  const topY=I1[1], botY=I2[1], tu=pgU(I1,I2), hu=[1,0];
  const Ta=[cx - u[0]*(L+34), cy - u[1]*(L+34)], Tb=[cx + u[0]*(L+34), cy + u[1]*(L+34)];
  let s = shLine([x0,topY],[x1,topY]) + shLine([x0,botY],[x1,botY]) + shLine(Ta,Tb);
  s += plChevron([(x0+x1)/2, topY]) + plChevron([(x0+x1)/2, botY]);
  marks.forEach(function(m,i){ const I = (m.at===1)?I1:I2;
    s += plAngle(I, hu, tu, m.quad, vals?vals[i]:null, !!m.acc); });
  return pgSvgWrap(s);
}
/* mark specs per relationship (given angle first, unknown second) */
const PL_MARKS = {
  corr:  [{at:1,quad:'BR'},{at:2,quad:'BR'}],
  alt:   [{at:1,quad:'BL'},{at:2,quad:'TR'}],
  coint: [{at:1,quad:'BR'},{at:2,quad:'TR'}],
  vert:  [{at:1,quad:'BR'},{at:1,quad:'TL'}],
};
function genAngleParallel(el){
  el.style.fontSize = '1.05rem';
  if (level === 1){
    const keys=['corr','alt','coint','vert'], key=keys[ri(4)];
    qData.chosen=null; qData.choiceAns=key;
    // v57 (Laura): fixed canonical order — Corresponding, Alternate, Co-interior,
    // Vertically opposite. Diagram marks vary + relationship is random, so position
    // never leaks the answer. See Angle Relationships L1 for rationale.
    const opts=keys.slice();
    qData.choices=opts.map(function(k){ return {code:k, html:ANG_PL[k]}; });
    qData.choiceText={}; opts.forEach(function(k){ qData.choiceText[k]=ANG_PL[k]; });
    qData.workSteps=({
      corr:'The angles are in the same position at each intersection (an F-shape), so they are <b>corresponding</b> — and equal.',
      alt:'The angles are on opposite sides of the transversal between the lines (a Z-shape), so they are <b>alternate</b> — and equal.',
      coint:'The angles are on the same side of the transversal between the lines (a C-shape), so they are <b>co-interior</b> — and add to 180°.',
      vert:'The angles are opposite each other at one intersection, so they are <b>vertically opposite</b> — and equal.'
    })[key] || '';
    const marks = PL_MARKS[key].map(function(m){ return {at:m.at, quad:m.quad, acc:true}; });
    el.innerHTML='<div style="'+A_LBL+'">Two parallel lines are cut by a transversal. What is the relationship between the marked angles?</div>'+plDiagram(marks, null);
    return;
  }
  if (level === 4){
    const e = plAlgPair();     // {key, labels, x, work, measures}
    qData.ans = e.x; qData.angCheck = e.chk;
    const marks = PL_MARKS[e.key].map(function(m,i){ return {at:m.at, quad:m.quad, acc:false}; });
    const _v0 = e.measures[0], _gq4 = PL_MARKS[e.key][0].quad;
    const _th4 = Math.min(_v0, 180-_v0), _ln4 = plLeanFor(_gq4, _v0 < 90);
    el.innerHTML='<div style="'+A_LBL+'">Parallel lines — solve for x</div>'+plDiagram(marks, e.labels, _th4, _ln4);
    qData.workSteps = e.work; return;
  }
  // L2 single step, L3 two-step chain. L3 uses only the cross-line relationships
  // (corr/alt/coint) — the unknown is flipped to the opposite corner, which for a
  // single-intersection 'vert' base would land on the given angle itself.
  const key = (level===2) ? ['corr','alt','coint','vert'][ri(4)] : ['corr','alt','coint'][ri(3)];
  const given = rr(25,155);
  let ans, work;
  if (key==='coint'){ ans = 180-given; work = 'Co-interior angles add to 180°.<br>x = 180° − '+given+'° = <b>'+ans+'°</b>'; }
  else { ans = given; const nm = ANG_PL[key].toLowerCase(); work = 'Angles '+(key==='vert'?'vertically opposite':nm)+' are equal.<br>x = <b>'+ans+'°</b>'; }
  const marks = PL_MARKS[key].map(function(m,i){ return {at:m.at, quad:m.quad, acc:(i===1)}; });
  if (level === 3){
    // two-step: the unknown sits a further hop away (vertically opposite of the partner)
    const key2 = key;
    const step = (key2==='coint');
    const second = step ? ('It is also vertically opposite that angle, so x keeps the same value.') : ('Then x is vertically opposite that angle, so it is equal.');
    // move the unknown to the opposite corner at its intersection
    const flip = { BR:'TL', TL:'BR', BL:'TR', TR:'BL' };
    marks[1] = { at:marks[1].at, quad:flip[marks[1].quad], acc:true };
    work = (key2==='coint')
      ? 'Co-interior with the given angle → 180° − '+given+'° = '+(180-given)+'°.<br>Vertically opposite that → x = <b>'+(180-given)+'°</b>'
      : ANG_PL[key2]+' angles are equal → '+given+'°.<br>Vertically opposite that → x = <b>'+given+'°</b>';
    ans = (key2==='coint') ? 180-given : given;
  }
  qData.ans = ans;
  qData.angCheck = (key==='coint') ? {mode:'sum',total:given+ans,expect:180} : {mode:'eq',total:given,other:ans};
  const _gq = PL_MARKS[key][0].quad;                       // the given angle's quadrant
  const _theta = Math.min(given, 180-given), _lean = plLeanFor(_gq, given < 90);
  el.innerHTML='<div style="'+A_LBL+'">Find the size of angle x (in degrees)</div>'+plDiagram(marks, markVals(marks, given, 1), _theta, _lean);
  qData.workSteps = work;
}
function markVals(marks, given, unknownIdx){ return marks.map(function(m,i){ return i===unknownIdx ? 'x' : (given+'°'); }); }
function plAlgPair(){
  const keys=['corr','alt','vert','coint'], key=keys[ri(4)];
  if (key==='coint'){
    const T=rr(2,3); let x=6, cs=0;
    for (let t=0;t<60;t++){ x = rr(5, Math.floor((180-16)/T)); cs = 180 - T*x; if (cs>=12 && cs<=58) break; }
    if (!(cs>=12 && cs<=58)){ x = Math.max(5, Math.floor((180-36)/T)); cs = 180 - T*x; }
    const m1=rr(1,T-1), m2=T-m1; let b1=Math.max(4,Math.floor(cs/2)), b2=cs-b1;
    if (m1===m2 && b1===b2){ b1 -= 2; b2 += 2; }
    return { key:key, labels:[coefLbl(m1,b1), coefLbl(m2,b2)], x:x, chk:{mode:'sum',total:(m1*x+b1)+(m2*x+b2),expect:180}, measures:[m1*x+b1, m2*x+b2],
      work:'Co-interior → add to 180°.<br>'+stripDeg(coefLbl(m1,b1))+' + '+stripDeg(coefLbl(m2,b2))+' = 180 → x = <b>'+x+'</b>' };
  }
  const x=rr(8,30), b1=rr(5,40), b2=x+b1;   // (2x+b1)=(x+b2) → equal
  return { key:key, labels:[coefLbl(2,b1), coefLbl(1,b2)], x:x, chk:{mode:'eq',total:2*x+b1,other:x+b2}, measures:[2*x+b1, x+b2],
    work:ANG_PL[key]+' → equal.<br>'+stripDeg(coefLbl(2,b1))+' = '+stripDeg(coefLbl(1,b2))+' → x = <b>'+x+'</b>' };
}

/* ---- Skill 5: Angles in Quadrilaterals ---- */
/* v65 (Laura): quads are now BUILT from their four interior angles, so the target
   angle sits in its true size category — including genuinely concave (reflex) quads,
   which are mixed into L1/L2 so students meet both. A quadrilateral is not fixed by
   its angles alone, so we pick a construction: split it across the P0-P2 diagonal
   into two triangles (law-of-sines exact). Any reflex angle is rotated onto a
   diagonal endpoint so its split stays valid. L3 shapes are built parametrically so
   they still read clearly as a parallelogram / trapezium / kite. */
function angQuadFromAngles(ang){
  let rot=0; for(let k=0;k<4;k++){ if(ang[k]>180 && k%2===1){ rot=1; break; } }
  const a=ang.slice(rot).concat(ang.slice(0,rot));
  const A=a[0],B=a[1],C=a[2];
  const lo=Math.max(3, A-177, 182-B-C), hi=Math.min(177, A-3, 178-B, 358-B-C);
  let A1=(lo<=hi)?(lo+hi)/2:Math.max(3,Math.min(A-3,(180-B)/2));
  const C1=180-B-A1, A2=A-A1, C2=C-C1;
  const up=nalTriFromAngles(A1,C1)[2], dn=nalTriFromAngles(A2,C2)[2];
  let pts=[[0,0], up, [1,0], [dn[0],-dn[1]]];
  if(rot){ pts=pts.slice(4-rot).concat(pts.slice(0,4-rot)); }
  return pts;
}
function quadPara(a){ const r=a*Math.PI/180, w=1.7, h=1.05;
  return [[0,0],[w,0],[w+h*Math.cos(r), h*Math.sin(r)],[h*Math.cos(r), h*Math.sin(r)]]; }
function quadTrap(a){ const r=a*Math.PI/180, b=2.0, leg=1.15, dx=leg*Math.cos(r), dy=leg*Math.sin(r);
  return [[0,0],[b,0],[b-dx,dy],[dx,dy]]; }
function quadKite(a){ const p=(180-a)*0.40*Math.PI/180, q=(180-a)*0.60*Math.PI/180, dx=0.95;
  const top=dx/Math.tan(p), bot=dx/Math.tan(q);
  return [[0,top],[dx,0],[0,-bot],[-dx,0]]; }
/* Draw the quad fitted to a box; each labelled vertex gets an arc drawn to its true
   measure (reflex vertices sweep the long way) and a label radiating outward. */
function quadDiagram(pts, vals, accIdx, measures){
  const fit=pgFit(pts, 60, 58, 240, 174), cen=pgCentroid(fit);
  let s=pgPoly(fit);
  for (let i=0;i<4;i++){ if (vals[i]==null) continue;
    const V=fit[i], n1=fit[(i+3)%4], n2=fit[(i+1)%4], acc=(i===accIdx), m=measures?measures[i]:null;
    if (m!=null){
      const u1=pgU(V,n1), u2=pgU(V,n2);
      const a1=Math.atan2(u1[1],u1[0])*180/Math.PI, a2=Math.atan2(u2[1],u2[0])*180/Math.PI;
      let best=1,bestErr=1e9; for(const sg of [1,-1]){ const e=Math.abs(((a1+sg*m-a2)%360+540)%360-180); if(e<bestErr){bestErr=e;best=sg;} }
      s+=angArcSweep(V, a1, best*m, (m>180?13:16), null, acc);
    } else { s+=pgArc(V,n1,n2).arc; }
    // place the label on the EXTERNAL bisector: for a convex vertex that's just
    // outside the corner; for a reflex vertex it points into the wide major-arc
    // region, clear of the concave notch (v65 fix, Laura).
    const u1b=pgU(V,n1), u2b=pgU(V,n2); let bx=-(u1b[0]+u2b[0]), by=-(u1b[1]+u2b[1]); let bl=Math.hypot(bx,by);
    if (bl<0.05){ const e=pgU(n1,n2); bx=-e[1]; by=e[0]; const oc=pgU(cen,V); if (bx*oc[0]+by*oc[1]<0){ bx=-bx; by=-by; } bl=1; }
    bx/=bl; by/=bl;
    // reflex labels sit tight to their own vertex (small offset) so they don't shoot
    // across a compact dart into the far edge; convex labels sit just outside the corner.
    const off = (m!=null && m>180) ? 24 : (16 + (String(vals[i]).length>3 ? 17 : 13));
    s+=pgLbl(V[0]+bx*off, V[1]+by*off, String(vals[i]), acc);
  }
  return pgSvgWrap(s);
}
function genAngleQuad(el){
  el.style.fontSize = '1.05rem';
  if (level === 1 || level === 2){
    let vals4, g=0; const concave = Math.random() < 0.34;   // ~1/3 concave (Laura: practise both)
    if (concave){
      const R = 190 + ri(36);              // 190..225 reflex vertex (shallow enough to label cleanly)
      const S = 360 - R; let x1,x2,x3,h=0;
      do { x1=28+ri(Math.max(1,S-84)); x2=28+ri(Math.max(1,S-x1-56)); x3=S-x1-x2; h++; } while (x3<28 && h<60);
      if (x3<28){ x1=Math.round(S/3); x2=Math.round(S/3); x3=S-x1-x2; }
      const rpos=ri(4), others=[x1,x2,x3]; vals4=[]; let oi=0;
      for (let k=0;k<4;k++) vals4.push(k===rpos ? R : others[oi++]);
    } else {
      do {
        if (level===1){ vals4=[rr(11,33)*5, rr(11,33)*5, rr(11,33)*5, 0]; }
        else { vals4=[rr(40,160), rr(40,160), rr(40,160), 0]; }
        vals4[3]=360-vals4[0]-vals4[1]-vals4[2]; g++;
      } while ((vals4[3]<25 || vals4[3]>170) && g<80);
      if (vals4[3]<25 || vals4[3]>170){ vals4=[80,100,90,90]; }
    }
    const hide = ri(4);
    const labels = vals4.map(function(v,i){ return i===hide ? 'x' : v+'°'; });
    qData.ans = vals4[hide];
    qData.angCheck = {mode:'sum', total:vals4[0]+vals4[1]+vals4[2]+vals4[3], expect:360};
    qData.workSteps = 'Angles in a quadrilateral add to 360°.<br>x = 360° − '+vals4.filter(function(_,i){return i!==hide;}).join('° − ')+'° = <b>'+vals4[hide]+'°</b>';
    el.innerHTML='<div style="'+A_LBL+'">Find the unknown angle x (in degrees)</div>'+quadDiagram(angQuadFromAngles(vals4), labels, hide, vals4);
    return;
  }
  if (level === 3){
    const which = ['para_opp','para_adj','trap','kite'][ri(4)];
    let pts, meas, labels=[null,null,null,null], ans, work, acc, given;
    if (which==='para_opp'){ const a=rr(9,27)*5; given=a; pts=quadPara(a); meas=[a,180-a,a,180-a]; labels[0]=a+'°'; labels[2]='x'; ans=a; acc=2;
      work='In a parallelogram, opposite angles are equal → x = <b>'+a+'°</b>'; }
    else if (which==='para_adj'){ const a=rr(9,27)*5; given=a; pts=quadPara(a); meas=[a,180-a,a,180-a]; labels[0]=a+'°'; labels[1]='x'; ans=180-a; acc=1;
      work='In a parallelogram, adjacent (co-interior) angles add to 180°.<br>x = 180° − '+a+'° = <b>'+ans+'°</b>'; }
    else if (which==='trap'){ const a=rr(11,15)*5; given=a; pts=quadTrap(a); meas=[a,a,180-a,180-a]; labels[0]=a+'°'; labels[1]='x'; ans=a; acc=1;
      work='An isosceles trapezium has equal base angles → x = <b>'+a+'°</b>'; }
    else { const a=rr(11,29)*5; given=a; pts=quadKite(a); const p2=(180-a)*0.80, q2=(180-a)*1.20; meas=[p2,a,q2,a]; labels[1]=a+'°'; labels[3]='x'; ans=a; acc=3;
      work='A kite has one pair of equal opposite angles → x = <b>'+a+'°</b>'; }
    qData.ans = ans;
    qData.angCheck = (which==='para_adj') ? {mode:'sum',total:given+ans,expect:180} : {mode:'eq',total:given,other:ans};
    qData.workSteps = work;
    el.innerHTML='<div style="'+A_LBL+'">Use the shape\'s properties to find x (in degrees)</div>'+quadDiagram(pts, labels, acc, meas);
    return;
  }
  // level 4: algebra (sum 360). Bound x so mx, x, c and d all stay in (20,170).
  const m = [1,2,2,3][ri(4)];
  const xmax = m===3 ? 46 : m===2 ? 58 : 70;
  const xmin = (m===1) ? 25 : 20;                 // keep c,d <=155 feasible (no near-straight vertex)
  const x = rr(xmin, xmax), R = 360 - (m+1)*x;    // R = c + d
  const clo = Math.max(40, R-155), chi = Math.min(155, R-40);
  const c = (clo<=chi) ? rr(clo,chi) : Math.floor(R/2), d = R - c;
  const labels=[coefLbl(m,0), coefLbl(1,0), c+'°', d+'°'];
  const meas=[m*x, x, c, d];
  qData.ans = x; qData.angCheck = {mode:'sum', total:(m*x)+x+c+d, expect:360};
  qData.workSteps = 'Angles in a quadrilateral add to 360°.<br>'+stripDeg(coefLbl(m,0))+' + '+stripDeg(coefLbl(1,0))+' + '+c+' + '+d+' = 360 → '+(m+1)+'x = '+(360-c-d)+' → x = <b>'+x+'</b>';
  el.innerHTML='<div style="'+A_LBL+'">Solve for x</div>'+quadDiagram(angQuadFromAngles(meas), labels, -1, meas);
}
/* ═══════════════════════════════════════════════
   QUESTION ENGINE
═══════════════════════════════════════════════ */
/* v92: in a Mixed Practice round the skill and level change between
   questions. Everything below this wrapper still reads the module-scoped
   `skill` / `level`, so the only thing needed is to set them (and re-derive the
   answer panel) before the generator runs. Nothing else in the app changed. */
function nextQ() {
  if (mixQueue && mixQueue.length) mixAdvance();
  nextQCore();
}
function nextQCore() {
  // Reset input state
  clearInputState();
  setText('feedback','');
  if (!id('qText')) { // after innerHTML reset
    id('qBox').innerHTML = '<div class="q-text" id="qText"></div>';
  }
  const el = id('qText');
  el.style.fontSize = '2.8rem';
  el.style.textAlign = '';   // reset any per-skill override (e.g. word problems)
  el.style.lineHeight = '';

  qData = {};

  /* v100: the level ORDER is a display/storage concern; the generators still
     speak the numbering they were written against. Swap it in for the length of
     one question and put it back before enableInputs(), which reads the level to
     work out the input mode. Nothing else in the file had to change. */
  const _dispLevel = level;
  level = genLevelOf(lvKey, level);

  /* v93: word-problem levels are appended to skills that already exist, and
     percentage error is a new L4 on Percentage Increase & Decrease. Routing both
     from here rather than from inside eleven generators means no existing
     generator changed at all. */
  if (skill === 'pctChange' && level === 4) { genPctError(el); }
  /* v105: Year 8 gap levels and skills, one map and one dispatcher */
  else if (isV105Level()) { genV105Level(el); }
  else if (WORD_LEVEL[skill] === level) { genWordProblem(el); }
  else if (isV96Level()) { genV96Level(el); }
  else if (isV98Level()) { genV98Level(el); }
  else if (isV99Level()) { genV99Level(el); }
  /* v101 — the whole probability strand routes through one dispatcher. */
  else if (isProbSkill()) { genProb(el); }
  /* v102: the measurement strand, the same way. */
  else if (isMeasSkill()) { genMeas(el); }
  else if (skill === 'timesTables') {
    const tbl = ttList();
    const n1 = tbl[ri(tbl.length)], n2 = tbl[ri(tbl.length)];
    qData.ans = n1 * n2;
    el.textContent = `${n1} × ${n2}`;
  }
  else if (skill === 'division') {
    const mx = [5,12,20][level-1];
    const n2 = rr(2,mx); // rr(2,...) guarantees n2 >= 2, never zero
    const ans = rr(1,mx);
    qData.ans = ans;
    el.textContent = `${n2*ans} ÷ ${n2}`;
  }
  else if (skill === 'addition') {
    const [a,b] = asNums(false);
    qData.ans = a + b;
    id('qBox').innerHTML = `<div style="font-family:'Nunito',sans-serif;font-weight:900;font-size:2.4rem;text-align:right;line-height:1.4;border-bottom:3px solid var(--text);padding-bottom:6px;min-width:140px;display:inline-block"><div>${a}</div><div>+&nbsp;${b}</div></div>`;
  }
  else if (skill === 'subtraction') {
    const [a,b] = asNums(true);
    qData.ans = a - b;
    id('qBox').innerHTML = `<div style="font-family:'Nunito',sans-serif;font-weight:900;font-size:2.4rem;text-align:right;line-height:1.4;border-bottom:3px solid var(--text);padding-bottom:6px;min-width:140px;display:inline-block"><div>${a}</div><div>−&nbsp;${b}</div></div>`;
  }
  else if (skill === 'intAddSub') {
    const mx = [10,20,50][level-1];
    const a = rr(-mx,mx), b = rr(-mx,mx);
    /* v98: on L3 only, half the questions chain a THIRD term — both ALT 1
       papers open with (−13) + (−12) + 5 and the generator stopped at two. */
    if (level === 3 && Math.random() < 0.5) {
      const c = rr(-mx, mx);
      const op1 = Math.random() < 0.5, op2 = Math.random() < 0.5;
      const v1 = op1 ? a + b : a - b;
      qData.ans = op2 ? v1 + c : v1 - c;
      el.textContent = `${f(a)} ${op1 ? '+' : '−'} ${f(b)} ${op2 ? '+' : '−'} ${f(c)}`;
      qData.workSteps = 'Work from the left: ' + a + (op1 ? ' + ' : ' − ') + b + ' = ' + v1
        + ', then ' + v1 + (op2 ? ' + ' : ' − ') + c + ' = <b>' + qData.ans + '</b>.'
        + ' Remember + (−n) is the same as − n, and − (−n) is the same as + n.';
    }
    else if (Math.random() < 0.5) {
      qData.ans = a+b; el.textContent = `${f(a)} + ${f(b)}`;
      qData.workSteps = (b<0)
        ? `Adding a negative is the same as subtracting: ${f(a)} + (${b}) = ${a} − ${Math.abs(b)} = <b>${a+b}</b>.`
        : `${a} + ${b} = <b>${a+b}</b>.`;
    } else {
      qData.ans = a-b; el.textContent = `${f(a)} − ${f(b)}`;
      qData.workSteps = (b<0)
        ? `Subtracting a negative is the same as adding: ${f(a)} − (${b}) = ${a} + ${Math.abs(b)} = <b>${a-b}</b>.`
        : `${a} − ${b} = <b>${a-b}</b>.`;
    }
  }
  else if (skill === 'intMultDiv') {
    const mx = [6,10,15][level-1];
    let a = nz(rr(-mx,mx)), b = nz(rr(-mx,mx));
    // nz() ensures neither is zero; extra guard for b in division
    if (b === 0) b = 1;
    if (Math.random() < 0.5) {
      qData.ans = a*b; el.textContent = `${f(a)} × ${f(b)}`;
      const same = (a<0)===(b<0);
      qData.workSteps = `${Math.abs(a)} × ${Math.abs(b)} = ${Math.abs(a*b)}. ${same?'Same signs give a positive':'Different signs give a negative'}, so the answer is <b>${a*b}</b>.`;
    } else {
      qData.ans = a; el.textContent = `${f(a*b)} ÷ ${f(b)}`;
      const same = ((a*b)<0)===(b<0);
      qData.workSteps = `${Math.abs(a*b)} ÷ ${Math.abs(b)} = ${Math.abs(a)}. ${same?'Same signs give a positive':'Different signs give a negative'}, so the answer is <b>${a}</b>.`;
    }
  }
  else if (skill === 'squares') {
    const mx = [10,15,20][level-1];
    const n = rr(1,mx);
    qData.ans = n*n;
    el.textContent = `${n}²`;
  }
  else if (skill === 'roots') {
    const mx = [10,15,20][level-1];
    const n = rr(1,mx);
    qData.ans = n;
    el.textContent = `√${n*n}`;
  }
  else if (skill === 'orderOps')  { genOO(el); }
  else if (skill === 'cubes')         { genCubes(false); }
  else if (skill === 'cubeRoots')    { genCubes(true); }
  else if (skill === 'indexMult')    { genIndexMult(); }
  else if (skill === 'indexDiv')     { genIndexDiv(); }
  else if (skill === 'indexPow')     { genIndexPow(); }
  else if (skill === 'sciTo')        { genSciTo(); }
  else if (skill === 'sciFrom')      { genSciFrom(); }
  else if (skill === 'fracSimplify') { genFracSimplify(); }
  else if (skill === 'fracAddSub')    { genFracAddSub(); }
  else if (skill === 'fracMultiply')  { genFracMultiply(); }
  else if (skill === 'fracDivide')    { genFracDivide(); }
  else if (skill === 'intSquareCube') { genIntSquareCube(); }
  else if (skill === 'intOrderOps')   { genIntOrderOps(); }
  else if (skill === 'sigFigs')       { genSigFigs(); }
  else if (skill === 'mixedToImp')    { genMixedToImp(); }
  else if (skill === 'impToMixed')    { genImpToMixed(); }
  else if (skill === 'fracOrderOps')  { genFracOrderOps(); }
  else if (skill === 'decAddSub')     { genDecAddSub(); }
  else if (skill === 'decAddSubNeg')  { genDecAddSubNeg(); }
  else if (skill === 'fdAddSub')      { genFracDecAddSub(); }
  else if (skill === 'fdMultiply')    { genFracDecMultiply(); }
  else if (skill === 'decMulDivNeg')  { genDecMulDivNeg(); }
  else if (skill === 'decLeadEst')    { genDecLeadEst(); }
  else if (skill === 'decSqCubeRoot') { genDecSqCubeRoot(); }
  else if (skill === 'decAdd')        { genDecAdd(); }
  else if (skill === 'decSub')        { genDecSub(); }
  else if (skill === 'decMultiply')   { genDecMultiply(); }
  else if (skill === 'decDivide')     { genDecDivide(); }
  else if (skill === 'decPow10')      { genDecPow10(); }
  else if (skill === 'decSquareCube') { genDecSquareCube(); }
  else if (skill === 'decOrderOps')   { genDecOrderOps(); }
  else if (skill === 'decRound')      { genDecRound(); }
  else if (skill === 'decPlaceValue') { genDecPlaceValue(el); }
  else if (skill === 'decExpand')     { genDecExpand(el); }
  else if (skill === 'decIdentify')   { genDecIdentify(el); }
  else if (skill === 'decToFrac')     { genDecToFrac(el); }
  else if (skill === 'fracToDec')     { genFracToDec(el); }
  else if (skill === 'compareDec')    { genCompareDec(el); }
  else if (skill === 'pctIdentify')   { genPctIdentify(el); }
  else if (skill === 'pctDecConv')    { genPctDecConv(el); }
  else if (skill === 'fracPctConv')   { genFracPctConv(el); }
  else if (skill === 'pctFDP')        { genPctFDP(el); }
  else if (skill === 'pctExpress')    { genPctExpress(el); }
  else if (skill === 'pctOfAmount')   { genPctOfAmount(el); }
  else if (skill === 'pctChange')     { genPctChange(el); }
  else if (skill === 'pctProfitLoss') { genPctProfitLoss(el); }
  else if (skill === 'pctReverse')    { genPctReverse(el); }
  else if (skill === 'numberBonds')   { genNumberBonds(el); }
  else if (skill === 'factorsMultiples') { genFactorsMultiples(el); }
  else if (skill === 'hcfLcm')        { genHcfLcm(el); }
  else if (skill === 'roundEst')      { genRoundEst(el); }
  else if (skill === 'fracOfAmount')  { genFracOfAmount(el); }
  else if (skill === 'fracCompare')   { genFracCompare(el); }
  else if (skill === 'negIndices')    { genNegIndices(el); }
  else if (skill === 'surdSimplify')  { genSurdSimplify(el); }
  else if (skill === 'surdAddSub')    { genSurdAddSub(el); }
  else if (skill === 'surdMultiply')  { genSurdMultiply(el); }
  else if (skill === 'surdDivide')    { genSurdDivide(el); }
  else if (skill === 'bestBuy')       { genBestBuy(el); }
  else if (skill === 'primeFactor')   { genPrimeFactor(el); }
  else if (skill === 'rearrange')     { genRearrange(el); }
  else if (skill === 'anglePoly')     { genAnglePoly(el); }
  else if (skill === 'ratioSimplify') { genRatioSimplify(); }
  else if (skill === 'ratioEquiv')    { genRatioEquiv(); }
  else if (skill === 'ratioShare')    { genRatioShare(); }
  else if (skill === 'rateSimplify')  { genRateSimplify(); }
  else if (skill === 'rateConvert')   { genRateConvert(); }
  else if (skill === 'algParts')      { genAlgParts(el); }
  else if (skill === 'algSub')        { genAlgSub(el); }
  else if (skill === 'algLikeTerms')  { genAlgLikeTerms(el); }
  else if (skill === 'algMultiply')   { genAlgMultiply(el); }
  else if (skill === 'algDivide')     { genAlgDivide(el); }
  else if (skill === 'algExpand')     { genAlgExpand(el); }
  else if (skill === 'algExpandTwo')  { genAlgExpandTwo(el); }
  else if (skill === 'algExpandBinom'){ genAlgExpandBinom(el); }
  else if (skill === 'algFactorMonic'){ genAlgFactorMonic(el); }
  else if (skill === 'algFactorHCF')  { genAlgFactorHCF(el); }
  else if (skill === 'algFactorGroup'){ genAlgFactorGroup(el); }
  else if (skill === 'eqOneStepAddSub') { genEqOneStepAddSub(el); }
  else if (skill === 'eqOneStepMulDiv') { genEqOneStepMulDiv(el); }
  else if (skill === 'eqTwoStep')       { genEqTwoStep(el); }
  else if (skill === 'eqTwoStepFrac')   { genEqTwoStepFrac(el); }
  else if (skill === 'eqVarDenom')      { genEqVarDenom(el); }
  else if (skill === 'eqBothSides')     { genEqBothSides(el); }
  else if (skill === 'ineqLinear')      { genIneqLinear(el); }
  else if (skill === 'pythagoras')      { genPythagoras(el); }
  else if (skill === 'interiorAngles')  { genInteriorAngles(el); }
  else if (skill === 'nameShapes')      { genNameShapes(el); }
  else if (skill === 'nameAnglesLines') { genNameAnglesLines(el); }
  else if (skill === 'eulerRule')       { genEuler(el); }
  else if (skill === 'netsViews')       { genNetsViews(el); }
  else if (skill === 'decRecurring')    { genDecRecurring(el); }
  else if (skill === 'fracIdentify')    { genFracIdentify(el); }
  else if (skill === 'indexExpand')     { genIndexExpand(el); }
  else if (skill === 'dataQuartiles')   { genDataQuartiles(el); }
  else if (skill === 'gradEqn')         { genGradEqn(el); }
  else if (skill === 'eqnGraph')        { genEqnGraph(el); }
  else if (skill === 'sketchLinear')    { genSketchLinear(el); }
  else if (skill === 'angleRel')        { genAngleRel(el); }
  else if (skill === 'angleParallel')   { genAngleParallel(el); }
  else if (skill === 'angleQuad')       { genAngleQuad(el); }
  else if (skill === 'congruSimilar')   { genCongruSimilar(el); }
  else if (skill === 'trigExactDeg')    { genTrigExact(el, false); }
  else if (skill === 'trigExactRad')    { genTrigExact(el, true); }
  // v77
  else if (skill === 'numClass')        { genNumClass(el); }
  else if (skill === 'quadVerify')      { genQuadVerify(el); }
  else if (skill === 'quadSolve')       { genQuadSolve(el); }
  else if (skill === 'cartesian')       { genCartesian(el); }
  else if (skill === 'tableValues')     { genTableValues(el); }   // v78.2
  // v78.3
  else if (skill === 'linearApps')      { genLinearApps(el); }
  else if (skill === 'timeConvert')     { genTimeConvert(el); }
  else if (skill === 'timetables')      { genTimetables(el); }
  else if (skill === 'distTime')        { genDistTime(el); }
  // v79 — transformations
  else if (skill === 'translate')       { genTranslate(el); }
  else if (skill === 'reflect')         { genReflect(el); }
  else if (skill === 'dilate')          { genDilate(el); }
  else if (skill === 'rotate')          { genRotate(el); }
  else if (skill === 'combine')         { genCombine(el); }
  else if (skill === 'shapeTrans')      { genShapeTrans(el); }
  else if (skill === 'linearNonlinear') { genLinearNonlinear(el); }
  else if (skill === 'intercepts')      { genIntercepts(el); }
  else if (skill === 'gradientSeg')     { genGradientSeg(el); }
  else if (skill === 'gst')             { genGst(el); }
  else if (skill === 'simpleInterest')  { genSimpleInterest(el); }
  else if (skill === 'sequences')       { genSequences(el); }
  // v78
  else if (skill === 'seqWords')        { genSeqWords(el); }
  else if (skill === 'arithSeq')        { genArithSeq(el); }
  else if (skill === 'geoSeq')          { genGeoSeq(el); }
  else if (skill === 'recurrence')      { genRecurrence(el); }
  else if (skill === 'flatDep')         { genFlatDep(el); }
  // v84 — Data Analysis
  else if (skill === 'dataClassify')    { genDataClassify(el); }
  else if (skill === 'freqTables')      { genFreqTables(el); }
  else if (skill === 'dataRead')        { genDataRead(el); }
  // v87 — Data Analysis Release 2
  else if (skill === 'dataMean')        { genDataMean(el); }
  else if (skill === 'dataMode')        { genDataMode(el); }
  else if (skill === 'dataMedian')      { genDataMedian(el); }
  else if (skill === 'dataRange')       { genDataRange(el); }
  // v88 — Data Analysis Release 3
  else if (skill === 'dataShape')       { genDataShape(el); }
  else if (skill === 'dataOutliers')    { genDataOutliers(el); }

  level = _dispLevel;
  enableInputs();
}

function clearInputState() {
  const mode = getInputMode();
  // Always reset the wholeFromFrac flag and hint label
  id('stdAnsWrap').dataset.wholeFromFrac = '';
  id('fracAlgLabel').classList.add('hide');
  if (mode === 'fraction') {
    id('fracNum').value = ''; id('fracDen').value = '';
    id('fracAnsWrap').classList.remove('ok','bad');
    id('fracNum').style.borderColor = ''; id('fracDen').style.borderColor = '';
    // Re-show stacked input in case it was hidden for a whole-number question
    id('fracAnsWrap').classList.add('visible');
    id('stdAnsWrap').style.display = 'none';
    id('ansInput').classList.remove('ok','bad');
  } else if (mode === 'mixed') {
    id('fracNum').value = ''; id('fracDen').value = '';
    id('mixedWhole').value = ''; id('mixedNum').value = ''; id('mixedDen').value = '';
    id('fracAnsWrap').classList.remove('ok','bad');
    id('mixedAnsWrap').classList.remove('ok','bad');
  } else if (mode === 'index' || mode === 'sci') {
    ['idxCoeff','idxExp','idxExpB','idxExpC','sciCoeff','sciExp'].forEach(i => {
      const el = id(i); if(el){el.value='';el.classList.remove('ok','bad');}
    });
    // Reset sub-row visibility — setupIndexInput/setupSciInput will re-show correct one
    id('idxPowerOnlyRow').style.display  = 'none';
    id('idxCoeffPowerRow').style.display = 'none';
    id('idxSciRow').style.display        = 'none';
    setText('idxInstruction','');
  } else if (mode === 'ratio') {
    id('ratioA').value = ''; id('ratioB').value = '';
    id('ratioA').classList.remove('ok','bad');
    id('ratioB').classList.remove('ok','bad');
    id('ratioAnsWrap').classList.remove('ok','bad');
  } else if (mode === 'algebra') {
    ['algC0','algC1','algC2','algP0','algP1','algP2'].forEach(i => {
      const el = id(i); if (el) { el.value = ''; el.classList.remove('ok','bad'); }
    });
    // Hide all slots/separators — setupAlgInput re-shows the right ones
    id('algTermRow').style.display = 'none';
    for (let i = 0; i < 3; i++) {
      id('algCoeffGroup' + i).style.display = 'none';
      id('algVarGroup' + i).style.display   = 'none';
      if (i > 0) id('algSep' + i).style.display = 'none';
    }
    setText('algInstruction', '');
  } else if (mode === 'algType' || mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored') {
    const inp = id('algTypeInput');
    inp.value = ''; inp.classList.remove('ok','bad','kb-focused');
  } else if (mode === 'choice') {
    id('choiceGrid').innerHTML = '';
  } else if (mode === 'arrange') {
    id('arrangeAnswer').innerHTML = '';
    id('arrangePool').innerHTML = '';
    const cb = id('arrangeCheckBtn'); if (cb) cb.disabled = true;
  } else if (mode === 'factor') {
    ['factorBox0','factorBox1'].forEach(i => {
      const el = id(i); if (el) { el.value = ''; el.classList.remove('ok','bad','kb-focused'); }
    });
  } else if (mode === 'pctTable') {
    ['pctP0','pctD0','pctFn0','pctFd0','pctP1','pctD1','pctFn1','pctFd1','pctP2','pctD2','pctFn2','pctFd2'].forEach(i => {
      const el = id(i); if (el) { el.value = ''; el.classList.remove('ok','bad','kb-focused'); }
    });
    const cb = id('pctCheckBtn'); if (cb) cb.disabled = false;
  } else if (mode === 'gapFill') {
    ['gap0','gap1','gap2','gap3','gap4'].forEach(i => {
      const el = id(i); if (el) { el.value = ''; el.classList.remove('ok','bad','kb-focused'); }
    });
    gapStow();
    id('gapRow').innerHTML = '';
    const cb = id('gapCheckBtn'); if (cb) cb.disabled = false;
  } else if (mode === 'multiSel') {
    id('msGrid').innerHTML = '';
    const cb = id('msCheckBtn'); if (cb) cb.disabled = false;
  } else if (mode === 'gridFill') {
    ['grid0','grid1','grid2','grid3','grid4','grid5','grid6','grid7','grid8'].forEach(i => {
      const el = id(i); if (el) { el.value = ''; el.classList.remove('ok','bad','kb-focused'); }
    });
    gridStow();
    { const gh = id('gridHost'); if (gh) gh.innerHTML = ''; }
    const gcb = id('gridCheckBtn'); if (gcb) gcb.disabled = false;
  } else if (mode === 'plotPts') {
    const cb = id('plotCheckBtn'); if (cb) cb.disabled = false;
    setText('plotCount', '');
  } else if (mode === 'plToggle') {
    id('ansInput').value = '';
    id('ansInput').classList.remove('ok','bad','kb-focused');
    plResetButtons();
  } else {
    id('ansInput').value = '';
    id('ansInput').classList.remove('ok','bad','kb-focused');
  }
  // Clear kb-focused from all inputs
  KB_INPUTS.forEach(i => { const el = document.getElementById(i); if(el) el.classList.remove('kb-focused'); });
  kbTarget = null;
}

/* ── TIMES TABLES ── */
function ttList() {
  if (level===1) return [2,4,5,10];
  if (level===2) return [...Array(11)].map((_,i)=>i+2);
  return [...Array(19)].map((_,i)=>i+2);
}

/* ── ADD/SUB NUMBERS ── */
function asNums(sub) {
  let a, b;
  if (level===1) { a=rr(1,9); b=rr(1,9); }
  else if (level===2) { a=rr(10,99); b=rr(1,99); }
  else { a=rr(100,999); b=rr(1,999); }
  if (sub && b>a) [a,b]=[b,a];
  return [a,b];
}

/* ── ORDER OF OPS ── */
function genOO(el) {
  // All answers guaranteed positive — regenerate if negative
  let a,b,c,d, ans, txt, work;
  let safety = 0;
  do {
    a=rr(1,10); b=rr(1,10); c=rr(1,10); d=rr(1,5);
    if (level===1) {
      if (Math.random()<0.5) { ans=a+b*c; txt=`${a} + ${b} × ${c}`; work=`Do × first: ${b} × ${c} = ${b*c}, then ${a} + ${b*c} = <b>${ans}</b>.`; }
      else { ans=a*b+c; txt=`${a} × ${b} + ${c}`; work=`Do × first: ${a} × ${b} = ${a*b}, then ${a*b} + ${c} = <b>${ans}</b>.`; }
    } else if (level===2) {
      if (Math.random()<0.5) { ans=(a+b)*c; txt=`(${a} + ${b}) × ${c}`; work=`Brackets first: (${a} + ${b}) = ${a+b}, then ${a+b} × ${c} = <b>${ans}</b>.`; }
      else { ans=a*(b+c); txt=`${a} × (${b} + ${c})`; work=`Brackets first: (${b} + ${c}) = ${b+c}, then ${a} × ${b+c} = <b>${ans}</b>.`; }
    } else if (level===3) {
      const t=r(3);
      // L3: use only forms that can't go negative given our ranges
      if (t===1) {
        // ensure b*c > d so subtraction stays positive
        if (b*c > d) { ans=a+b*c-d; txt=`${a} + ${b} × ${c} − ${d}`; work=`Do × first: ${b} × ${c} = ${b*c}, then ${a} + ${b*c} − ${d} = <b>${ans}</b>.`; }
        else { ans=a+b*c; txt=`${a} + ${b} × ${c}`; work=`Do × first: ${b} × ${c} = ${b*c}, then ${a} + ${b*c} = <b>${ans}</b>.`; } // fallback
      } else if (t===2) {
        ans=(a+b)*c; txt=`(${a} + ${b}) × ${c}`; work=`Brackets first: (${a} + ${b}) = ${a+b}, then ${a+b} × ${c} = <b>${ans}</b>.`;
      } else {
        ans=a*b+c*d; txt=`${a} × ${b} + ${c} × ${d}`; work=`Do each × first: ${a} × ${b} = ${a*b} and ${c} × ${d} = ${c*d}, then ${a*b} + ${c*d} = <b>${ans}</b>.`;
      }
    } else {
      // L4: indices + brackets (do the power right after brackets)
      const t=r(3);
      if (t===1) { const g=rr(2,6); ans=a+g*g*c; txt=`${a} + ${g}² × ${c}`; work=`Power first: ${g}² = ${g*g}, then × : ${g*g} × ${c} = ${g*g*c}, then ${a} + ${g*g*c} = <b>${ans}</b>.`; }
      else if (t===2) { const s=a+b; ans=s*s-d; txt=`(${a} + ${b})² − ${d}`; work=`Brackets then the power: (${a} + ${b}) = ${s}, ${s}² = ${s*s}, then ${s*s} − ${d} = <b>${ans}</b>.`; }
      else { const g=rr(3,9); ans=g*g-c*d; txt=`${g}² − ${c} × ${d}`; work=`Power & × first: ${g}² = ${g*g}, ${c} × ${d} = ${c*d}, then ${g*g} − ${c*d} = <b>${ans}</b>.`; }
    }
    safety++;
  } while (ans <= 0 && safety < 50);

  qData.ans = ans;
  qData.workSteps = work;
  el.textContent = txt;
  el.style.fontSize = '1.8rem';
}


/* ════════════════════════════════════════════
   EXPONENT / INDEX QUESTION GENERATORS
════════════════════════════════════════════ */

/* ── CUBE NUMBERS & CUBE ROOTS ── */
function genCubes(isRoot) {
  const maxes = [5, 10, 15];
  const mx = maxes[level-1];
  const el = id('qText');
  if (isRoot) {
    qData.ans = rr(1, mx);
    el.textContent = '∛' + (qData.ans ** 3);
  } else {
    const n = rr(1, mx);
    qData.ans = n ** 3;
    el.textContent = n + '³';
  }
}

/* ── Render index question in qBox ── */
function renderIdxQ(html) {
  id('qBox').innerHTML = `<div class="idx-q-display">${html}</div>`;
}

/* Superscript helper — uses CSS class for proper vertical positioning */
function sup(base, exp) {
  if (base === '') return `<sup class="idx-sup">${exp}</sup>`;
  return `<span class="idx-base-exp"><span class="idx-base">${base}</span><sup class="idx-sup">${exp}</sup></span>`;
}

/* Variable span — serif italic font for x, y to look mathematical */
function vr(v) {
  return `<span class="idx-var">${v}</span>`;
}

/* ── MULTIPLICATION LAW ── */
function genIndexMult() {
  if (level === 1) {
    // numbers only: base^m × base^n = base^(m+n)
    const base = rr(2,9), m = rr(1,6), n = rr(1,6);
    qData.idxMode = 'expOnly';
    qData.ansExp  = m + n;
    qData.idxHint = `Multiply the powers: ${m} + ${n} = ?`;
    setText('idxBaseLabel', base + '');
    qData.workSteps = `Same base — add the powers: ${sup(base,m)} × ${sup(base,n)} = ${sup(base, m+'+'+n)} = <b>${sup(base, m+n)}</b>.`;
    renderIdxQ(`${sup(base,m)} × ${sup(base,n)} = ${sup(base,"?")}`);
  } else if (level === 2) {
    // one variable: a·x^m × b·x^n = (a·b)·x^(m+n)
    const a = rr(1,6), b = rr(1,6), m = rr(1,5), n = rr(1,5);
    qData.idxMode  = 'coeffXExp';
    qData.ansCoeff = a * b;
    qData.ansExp   = m + n;
    qData.var1     = 'x';
    qData.idxHint  = '';
    const am = a===1?'':a, bm = b===1?'':b;
    qData.workSteps = `Multiply the numbers in front: ${a} × ${b} = ${a*b}. Add the x powers: ${m} + ${n} = ${m+n}. Answer: <b>${a*b===1?'':a*b}${sup(vr('x'),m+n)}</b>.`;
    renderIdxQ(`${am}${sup(vr('x'),m)} × ${bm}${sup(vr('x'),n)} =`);
  } else {
    // two variables: a·x^m·y^p × b·x^n·y^q = (ab)·x^(m+n)·y^(p+q)
    const a=rr(1,4),b=rr(1,4),m=rr(1,4),n=rr(1,4),p=rr(1,3),q=rr(1,3);
    qData.idxMode  = 'coeffXExp';
    qData.ansCoeff = a*b;
    qData.ansExp   = m+n;
    qData.ansExpY  = p+q;
    qData.var1     = 'x';
    qData.var2     = 'y';
    qData.idxHint  = '';
    const am=a===1?'':a, bm=b===1?'':b;
    qData.workSteps = `Numbers: ${a} × ${b} = ${a*b}. x powers: ${m} + ${n} = ${m+n}. y powers: ${p} + ${q} = ${p+q}. Answer: <b>${a*b===1?'':a*b}${sup(vr('x'),m+n)}${sup(vr('y'),p+q)}</b>.`;
    renderIdxQ(`${am}${sup(vr('x'),m)}${sup(vr('y'),p)} × ${bm}${sup(vr('x'),n)}${sup(vr('y'),q)}`);
  }
}

/* ── DIVISION LAW ── */
function genIndexDiv() {
  if (level === 1) {
    const base = rr(2,9);
    const res = rr(1,5), n = rr(1,4);
    const m = res + n; // m - n = res, m > n always
    qData.idxMode = 'expOnly';
    qData.ansExp  = res;
    qData.idxHint = `Subtract the powers: ${m} − ${n} = ?`;
    setText('idxBaseLabel', base + '');
    qData.workSteps = `Same base — subtract the powers: ${sup(base,m)} ÷ ${sup(base,n)} = ${sup(base, m+'−'+n)} = <b>${sup(base, res)}</b>.`;
    renderIdxQ(`${sup(base,m)} ÷ ${sup(base,n)} = ${sup(base,"?")}`);
  } else if (level === 2) {
    const bFact = rr(2,5), mult = rr(2,5);
    const aFact = bFact * mult; // always divisible
    const m=rr(2,6), n=rr(1,m-1);
    qData.idxMode  = 'coeffXExp';
    qData.ansCoeff = mult;
    qData.ansExp   = m - n;
    qData.var1     = 'x';
    qData.idxHint  = '';
    qData.workSteps = `Divide the numbers in front: ${aFact} ÷ ${bFact} = ${mult}. Subtract the x powers: ${m} − ${n} = ${m-n}. Answer: <b>${mult===1?'':mult}${sup(vr('x'),m-n)}</b>.`;
    renderIdxQ(`${aFact}${sup(vr('x'),m)} ÷ ${bFact}${sup(vr('x'),n)} =`);
  } else {
    const a=rr(2,6),b=rr(1,a),m=rr(2,5),n=rr(1,m-1),p=rr(2,4),q=rr(1,p-1);
    qData.idxMode  = 'coeffXExp';
    qData.ansCoeff = a/b;
    qData.ansExp   = m-n;
    qData.ansExpY  = p-q;
    qData.var1     = 'x';
    qData.var2     = 'y';
    qData.idxHint  = '';
    qData.workSteps = `Numbers: ${a} ÷ ${b} = ${a/b}. x powers: ${m} − ${n} = ${m-n}. y powers: ${p} − ${q} = ${p-q}. Answer: <b>${(a/b)===1?'':a/b}${sup(vr('x'),m-n)}${sup(vr('y'),p-q)}</b>.`;
    renderIdxQ(`${a}${sup(vr('x'),m)}${sup(vr('y'),p)} ÷ ${b}${sup(vr('x'),n)}${sup(vr('y'),q)}`);
  }
}

/* ── POWER OF A POWER ── */
function genIndexPow() {
  if (level === 1) {
    const base=rr(2,7), m=rr(2,4), n=rr(2,4);
    qData.idxMode = 'expOnly';
    qData.ansExp  = m*n;
    qData.idxHint = `Multiply the powers: ${m} × ${n} = ?`;
    setText('idxBaseLabel', base + '');
    qData.workSteps = `Power of a power — multiply the powers: (${sup(base,m)})${sup('',n)} = ${sup(base, m+'×'+n)} = <b>${sup(base, m*n)}</b>.`;
    id('qBox').innerHTML = `<div class="idx-q-display">(${sup(base,m)})<sup class="idx-sup">${n}</sup> = ${sup(base,'?')}</div>`;
  } else if (level === 2) {
    const a=rr(1,5), m=rr(2,4), n=rr(2,3);
    qData.idxMode  = 'coeffXExp';
    qData.ansCoeff = a===1 ? 1 : Math.pow(a,n);
    qData.ansExp   = m*n;
    qData.var1     = 'x';
    qData.idxHint  = '';
    const am = a===1?'':a, cf = a===1?1:Math.pow(a,n);
    qData.workSteps = `Raise the number to the outer power: ${a}${sup('',n)} = ${cf}. Multiply the x powers: ${m} × ${n} = ${m*n}. Answer: <b>${cf===1?'':cf}${sup(vr('x'),m*n)}</b>.`;
    id('qBox').innerHTML = `<div class="idx-q-display">(${am}${sup(vr('x'),m)})<sup class="idx-sup">${n}</sup></div>`;
  } else {
    const a=rr(1,4), m=rr(2,3), p=rr(1,3), n=rr(2,3);
    qData.idxMode  = 'coeffXExp';
    qData.ansCoeff = a===1?1:Math.pow(a,n);
    qData.ansExp   = m*n;
    qData.ansExpY  = p*n;
    qData.var1     = 'x';
    qData.var2     = 'y';
    qData.idxHint  = '';
    const am = a===1?'':a, cf = a===1?1:Math.pow(a,n);
    qData.workSteps = `Number: ${a}${sup('',n)} = ${cf}. x powers: ${m} × ${n} = ${m*n}. y powers: ${p} × ${n} = ${p*n}. Answer: <b>${cf===1?'':cf}${sup(vr('x'),m*n)}${sup(vr('y'),p*n)}</b>.`;
    id('qBox').innerHTML = `<div class="idx-q-display">(${am}${sup(vr('x'),m)}${sup(vr('y'),p)})<sup class="idx-sup">${n}</sup></div>`;
  }
}

/* ── SCIENTIFIC NOTATION: number → sci ── */
function genSciTo() {
  let coeff, exp;
  if (level === 1) {
    // whole numbers, positive powers 1–6
    exp = rr(1,6);
    const c = rr(1,9);
    coeff = c; // e.g. 3, so number = 3 × 10^exp
    qData.sciCoeffAns = c;   // student types e.g. 3.0
    qData.sciExpAns   = exp;
    const numDisplay = (c * Math.pow(10, exp)).toLocaleString();
    qData.workSteps = `Put one non-zero digit in front of the decimal: ${numDisplay} = <b>${c} × 10${sup('',''+exp)}</b> (the decimal moved ${exp} place${exp>1?'s':''}).`;
    id('qBox').innerHTML = `<div style="font-family:'Nunito',sans-serif;font-weight:900;font-size:2.2rem;text-align:center">${numDisplay}</div>`;
  } else if (level === 2) {
    // decimal coefficient, positive powers
    exp = rr(2,8);
    // coefficient has 1 or 2 decimal places
    const mantissa = (rr(10,99)/10); // e.g. 3.2
    qData.sciCoeffAns = mantissa;
    qData.sciExpAns   = exp;
    const val = mantissa * Math.pow(10, exp);
    const numDisplay = val >= 1000 ? val.toLocaleString() : val.toPrecision(4);
    qData.workSteps = `Put one non-zero digit in front of the decimal: ${numDisplay} = <b>${mantissa} × 10${sup('',''+exp)}</b> (the decimal moved ${exp} places).`;
    id('qBox').innerHTML = `<div style="font-family:'Nunito',sans-serif;font-weight:900;font-size:2rem;text-align:center">${numDisplay}</div>`;
  } else {
    // positive and negative powers
    exp = Math.random()<0.5 ? rr(1,6) : -rr(1,6);
    const mantissa = (rr(10,99)/10);
    qData.sciCoeffAns = mantissa;
    qData.sciExpAns   = exp;
    let numDisplay;
    const val = mantissa * Math.pow(10, exp);
    if (exp < 0) numDisplay = val.toFixed(Math.abs(exp)+2).replace(/0+$/,'').replace(/\.$/, '');
    else numDisplay = val >= 1000 ? val.toLocaleString() : val.toString();
    qData.workSteps = `Put one non-zero digit in front of the decimal: ${numDisplay} = <b>${mantissa} × 10${sup('',''+exp)}</b>` + (exp < 0 ? ` — a number below 1 gives a negative power (${exp}).` : ` — the decimal moved ${exp} places, so the power is ${exp}.`);
    id('qBox').innerHTML = `<div style="font-family:'Nunito',sans-serif;font-weight:900;font-size:2rem;text-align:center">${numDisplay}</div>`;
  }
}

/* ── SCIENTIFIC NOTATION: sci → number ── */
function genSciFrom() {
  const el = id('qText');
  let exp, mantissa;
  if (level === 1) {
    exp = rr(1,5); mantissa = rr(1,9);
  } else if (level === 2) {
    exp = rr(1,8); mantissa = rr(10,99)/10;
  } else {
    exp = Math.random()<0.5 ? rr(1,6) : -rr(1,6);
    mantissa = rr(10,99)/10;
  }
  const val = mantissa * Math.pow(10, exp);
  qData.ans = Math.round(val * 1e9) / 1e9; // avoid float dust
  qData.workSteps = `${mantissa} × 10${sup('',''+exp)} → move the decimal ${Math.abs(exp)} place${Math.abs(exp)>1?'s':''} ${exp<0?'left (the number gets smaller)':'right (the number gets bigger)'} = <b>${qData.ans}</b>.`;
  // Display as a × 10^n
  id('qBox').innerHTML = `<div style="font-family:'Nunito',sans-serif;font-weight:900;font-size:2rem;text-align:center">${mantissa} × 10${sup('',''+exp)}</div>`;
  el.textContent = ''; // qBox replaced
}

/* ════════════════════════════════════════════
   FRACTION QUESTION GENERATORS
════════════════════════════════════════════ */

function gcd(a,b) { a=Math.abs(a); b=Math.abs(b); while(b){[a,b]=[b,a%b];} return a; }
function lcm(a,b) { return Math.abs(a*b)/gcd(a,b); }
function simplify(n,d) { const g=gcd(Math.abs(n),Math.abs(d)); return [n/g, d/g]; }

/* Render fraction in question box */
function renderFracQuestion(html) {
  id('qBox').innerHTML = html;
}
/* ── SIMPLIFY FRACTIONS ── */
function genFracSimplify() {
  let num, den, ansNum, ansDen;

  if (level === 1) {
    // Factor of 2 or 5
    const factors = [2, 5, 10];
    const factor = factors[ri(factors.length)];
    ansNum = rr(1, 8);
    ansDen = rr(ansNum+1, 10);
    // ensure they are coprime after the factor
    const g = gcd(ansNum, ansDen);
    ansNum = ansNum/g; ansDen = ansDen/g;
    num = ansNum * factor; den = ansDen * factor;
  } else if (level === 2) {
    // Any common factor 2–12
    const factor = rr(2, 12);
    ansNum = rr(1, 8);
    ansDen = rr(ansNum+1, 10);
    const g = gcd(ansNum, ansDen);
    ansNum = ansNum/g; ansDen = ansDen/g;
    num = ansNum * factor; den = ansDen * factor;
  } else {
    // Algebraic: n·x / d — answer is ansNum (coeff) and ansDen
    const factor = rr(2, 10);
    ansNum = rr(1, 9);
    ansDen = rr(2, 9);
    const g = gcd(ansNum, ansDen);
    ansNum = ansNum/g; ansDen = ansDen/g;
    num = ansNum * factor; den = ansDen * factor;
    qData.ansNum = ansNum; qData.ansDen = ansDen;
    qData.isAlgebraic = true;
    const ga = gcd(num, den);
    qData.workSteps = `HCF of ${num} and ${den} is ${ga}. Divide top and bottom by ${ga}: ${fracHTML(num+'x', den)} = <b>${fracHTML((num/ga)+'x', den/ga)}</b>.`;
    // show label above input
    id('fracAlgLabel').textContent = `Simplify: enter the coefficient of x on top, the number on the bottom`;
    id('fracAlgLabel').classList.remove('hide');
    renderFracQuestion(`<div class="q-expr">${fracHTML(num+'x', den)}</div>`);
    return;
  }

  qData.ansNum = ansNum;
  qData.ansDen = ansDen;
  const g2 = gcd(num, den);
  qData.workSteps = `The HCF of ${num} and ${den} is ${g2}. Divide top and bottom by ${g2}: ${fracHTML(num, den)} = <b>${fracHTML(ansNum, ansDen)}</b>.`;
  id('fracAlgLabel').classList.add('hide');
  renderFracQuestion(`<div class="q-expr">${fracHTML(num, den)}</div>`);
}

/* ── IMPROPER / MIXED ── */
function genFracMixed() {
  const den = rr(2, 10);
  const whole = rr(1, 9);
  const remNum = rr(1, den-1);

  let toImproper;
  if (level === 1) toImproper = true;
  else if (level === 2) toImproper = false;
  else toImproper = Math.random() < 0.5;

  qData.mixedMode = toImproper ? 'toImproper' : 'toMixed';

  if (toImproper) {
    // Show mixed number → student enters improper fraction
    qData.ansNum = whole * den + remNum;
    qData.ansDen = den;
    renderFracQuestion(`<div class="q-expr" style="font-size:2rem;font-weight:900;align-items:center;gap:6px">
      <span>${whole}</span>${fracHTML(remNum, den)}
      <span style="font-size:1.4rem;color:var(--muted)">→ improper</span>
    </div>`);
  } else {
    // Show improper fraction → student enters mixed number
    const impNum = whole * den + remNum;
    const wholeAns = Math.floor(impNum / den);
    const remAns = impNum % den;
    qData.ansWhole = wholeAns;
    qData.ansNum = remAns;
    qData.ansDen = den;
    renderFracQuestion(`<div class="q-expr" style="font-size:2rem;font-weight:900;align-items:center;gap:6px">
      ${fracHTML(impNum, den)}
      <span style="font-size:1.4rem;color:var(--muted)">→ mixed</span>
    </div>`);
  }
}

/* ── ADD / SUBTRACT FRACTIONS ── */
function genFracAddSub() {
  // Level 4 → mixed numbers
  if (level === 4) { genFracAddSubMixed(); return; }

  let d1, d2, n1, n2, resNum, resDen, sign;

  if (level === 1) {
    // Same denominator
    d1 = rr(2, 10); d2 = d1;
    n1 = rr(1, d1-1); n2 = rr(1, d2-1);
  } else if (level === 2) {
    // Related denominators: d2 is a multiple of d1
    d1 = rr(2, 6);
    const mult = rr(2, 4);
    d2 = d1 * mult;
    n1 = rr(1, d1-1); n2 = rr(1, d2-1);
  } else {
    // Any denominators, possibly negative
    d1 = rr(2, 10); d2 = rr(2, 10);
    while (d2 === d1) d2 = rr(2, 10);
    n1 = rr(1, d1-1); n2 = rr(1, d2-1);
    if (level === 3 && Math.random() < 0.3) n1 = -n1;
    if (level === 3 && Math.random() < 0.3) n2 = -n2;
  }

  // For L1 and L2, decide operation AFTER picking numbers so subtraction stays positive.
  // Convert both fractions to the common denominator, then decide which is larger.
  const subtract = Math.random() < 0.5;

  if ((level === 1 || level === 2) && subtract) {
    // Ensure n1/d1 >= n2/d2 so the result is non-negative
    // Compare cross-multiplied: n1*d2 vs n2*d1
    const commonD = lcm(d1, d2);
    const val1 = n1 * (commonD / d1);
    const val2 = n2 * (commonD / d2);
    if (val1 < val2) {
      // Swap to keep result positive
      [n1, n2] = [n2, n1];
      [d1, d2] = [d2, d1];
    }
  }

  sign = subtract ? -1 : 1;
  const commonD = lcm(d1, d2);
  resNum = (n1 * (commonD/d1)) + sign * (n2 * (commonD/d2));
  resDen = commonD;
  const [sn, sd] = simplify(resNum, resDen);
  qData.ansNum = sn; qData.ansDen = sd;

  // Handle negative denominator
  if (qData.ansDen < 0) { qData.ansNum = -qData.ansNum; qData.ansDen = -qData.ansDen; }

  const op = subtract ? '−' : '+';
  // Worked review using THIS question's numbers.
  const s1 = n1 * (commonD/d1), s2 = n2 * (commonD/d2);
  const pre = (d1 === d2)
    ? `The denominators already match (${commonD}). `
    : `Rewrite both over the common denominator ${commonD}. `;
  const simplified = (sn !== resNum || sd !== resDen);
  const finalAns = (sd === 1) ? String(sn) : fracHTML(sn, sd);
  const ws = pre + `${fracHTML(n1<0?`(${n1})`:n1, d1)} ${op} ${fracHTML(n2<0?`(${n2})`:n2, d2)} = ${fracHTML(s1, commonD)} ${op} ${fracHTML(s2, commonD)} = ` + (simplified ? `${fracHTML(resNum, resDen)} = <b>${finalAns}</b>` : `<b>${finalAns}</b>`);
  qData.workSteps = ws + '.';
  id('fracAlgLabel').classList.add('hide');
  renderFracQuestion(`<div class="q-expr" style="font-size:1.9rem;gap:8px;align-items:center">
    ${fracHTML(n1<0?`(${n1})`:n1, d1)}
    <span>${op}</span>
    ${fracHTML(n2<0?`(${n2})`:n2, d2)}
    <span>=</span>
  </div>`);
}

/* ── ADD / SUBTRACT MIXED NUMBERS (Level 4) ── */
/* Displays two mixed numbers, answer is a simplified improper fraction */
function genFracAddSubMixed() {
  const subtract = Math.random() < 0.5;

  // Generate two mixed numbers: whole + num/den (proper fractions only)
  let w1 = rr(1, 5), d1 = rr(2, 8), n1 = rr(1, d1 - 1);
  let w2 = rr(1, 5), d2 = rr(2, 8), n2 = rr(1, d2 - 1);

  // Convert to improper fractions: w*d + n / d
  let imp1n = w1 * d1 + n1; // numerator of first as improper
  let imp2n = w2 * d2 + n2; // numerator of second as improper

  // For subtraction: ensure first operand >= second (so result is positive)
  if (subtract) {
    const val1 = imp1n / d1;
    const val2 = imp2n / d2;
    if (val1 < val2) {
      // swap everything
      [w1, w2]     = [w2, w1];
      [d1, d2]     = [d2, d1];
      [n1, n2]     = [n2, n1];
      [imp1n, imp2n] = [imp2n, imp1n];
    }
  }

  // Compute result via LCM
  const commonD = lcm(d1, d2);
  const scaled1 = imp1n * (commonD / d1);
  const scaled2 = imp2n * (commonD / d2);
  const resNum = subtract ? scaled1 - scaled2 : scaled1 + scaled2;

  const [fn, fd] = simplify(resNum, commonD);
  qData.ansNum = fn; qData.ansDen = fd;
  if (qData.ansDen < 0) { qData.ansNum = -qData.ansNum; qData.ansDen = -qData.ansDen; }

  const op = subtract ? '−' : '+';
  // Worked review: mixed → improper → common denominator → answer, on THIS question.
  {
    const simp = (fn !== resNum || fd !== commonD);
    const finalAns = (fd === 1) ? String(fn) : fracHTML(fn, fd);
    let ws = `Change to improper fractions: ${w1}${fracHTML(n1,d1)} = ${fracHTML(imp1n,d1)}, ${w2}${fracHTML(n2,d2)} = ${fracHTML(imp2n,d2)}. `;
    ws += `Common denominator ${commonD}: ${fracHTML(scaled1,commonD)} ${op} ${fracHTML(scaled2,commonD)} = ` + (simp ? `${fracHTML(resNum,commonD)} = <b>${finalAns}</b>` : `<b>${finalAns}</b>`);
    qData.workSteps = ws + '.';
  }
  // Only show the improper-fraction label when the answer isn't a whole number.
  // When ansDen === 1, enableInputs() will switch to the plain number box and
  // set its own "Answer is a whole number" label automatically.
  if (qData.ansDen !== 1) {
    id('fracAlgLabel').textContent = 'Give the answer as a simplified improper fraction';
    id('fracAlgLabel').classList.remove('hide');
  } else {
    id('fracAlgLabel').classList.add('hide');
  }
  renderFracQuestion(`<div class="q-expr" style="font-size:1.6rem;gap:6px;align-items:center;flex-wrap:wrap">
    <span style="font-weight:900">${w1}</span>${fracHTML(n1, d1)}
    <span>${op}</span>
    <span style="font-weight:900">${w2}</span>${fracHTML(n2, d2)}
    <span>=</span>
  </div>`);
}

/* ── MULTIPLY FRACTIONS ── */
function genFracMultiply() {
  let n1 = rr(1,8), d1 = rr(2,9), n2 = rr(1,8), d2 = rr(2,9);

  // For level 1: guarantee answer needs no simplifying (GCD of product = 1)
  if (level === 1) {
    let safety = 0;
    while (gcd(n1*n2, d1*d2) !== 1 && safety++ < 200) {
      n1=rr(1,7); d1=rr(2,9); n2=rr(1,7); d2=rr(2,9);
    }
  }

  if (level === 3 && Math.random() < 0.4) n1 = -n1;
  if (level === 3 && Math.random() < 0.4) n2 = -n2;

  const rawNum = n1 * n2, rawDen = d1 * d2;
  const [sn, sd] = simplify(rawNum, rawDen);
  qData.ansNum = sn; qData.ansDen = sd;
  if (qData.ansDen < 0) { qData.ansNum = -qData.ansNum; qData.ansDen = -qData.ansDen; }

  {
    const simp = (sn !== rawNum || sd !== rawDen);
    const finalAns = (sd === 1) ? String(sn) : fracHTML(sn, sd);
    const ws = `Multiply the tops and multiply the bottoms: ${fracHTML(n1<0?`(${n1})`:n1, d1)} × ${fracHTML(n2<0?`(${n2})`:n2, d2)} = ` + (simp ? `${fracHTML(rawNum, rawDen)} = <b>${finalAns}</b>` : `<b>${finalAns}</b>`);
    qData.workSteps = ws + '.';
  }
  id('fracAlgLabel').classList.add('hide');
  renderFracQuestion(`<div class="q-expr" style="font-size:2rem;gap:8px;align-items:center">
    ${fracHTML(n1<0?`(${n1})`:n1, d1)}
    <span>×</span>
    ${fracHTML(n2<0?`(${n2})`:n2, d2)}
    <span>=</span>
  </div>`);
}

/* ── DIVIDE FRACTIONS ── */
function genFracDivide() {
  let n1 = rr(1,8), d1 = rr(2,9), n2 = rr(1,8), d2 = rr(2,9);

  // Level 1: guarantee answer (n1*d2)/(d1*n2) needs no simplifying
  if (level === 1) {
    let safety = 0;
    while (gcd(n1*d2, d1*n2) !== 1 && safety++ < 200) {
      n1=rr(1,7); d1=rr(2,9); n2=rr(1,7); d2=rr(2,9);
    }
  }

  if (level === 3 && Math.random() < 0.4) n1 = -n1;
  if (level === 3 && Math.random() < 0.4) n2 = -n2;

  // a/b ÷ c/d = a*d / b*c
  const rawNum = n1 * d2, rawDen = d1 * n2;
  const [sn, sd] = simplify(rawNum, rawDen);
  qData.ansNum = sn; qData.ansDen = Math.abs(sd);
  if (qData.ansDen < 0) { qData.ansNum = -qData.ansNum; qData.ansDen = -qData.ansDen; }
  if (sd < 0) { qData.ansNum = -qData.ansNum; }

  {
    const simp = (sn !== rawNum || Math.abs(sd) !== rawDen);
    const finalAns = (qData.ansDen === 1) ? String(qData.ansNum) : fracHTML(qData.ansNum, qData.ansDen);
    const ws = `Keep, flip, multiply — turn ÷ into × by flipping the second fraction: `
      + `${fracHTML(n1<0?`(${n1})`:n1, d1)} ÷ ${fracHTML(n2<0?`(${n2})`:n2, d2)} = ${fracHTML(n1<0?`(${n1})`:n1, d1)} × ${fracHTML(d2, n2)} = `
      + (simp ? `${fracHTML(rawNum, rawDen)} = <b>${finalAns}</b>` : `<b>${finalAns}</b>`);
    qData.workSteps = ws + '.';
  }
  id('fracAlgLabel').classList.add('hide');
  renderFracQuestion(`<div class="q-expr" style="font-size:2rem;gap:8px;align-items:center">
    ${fracHTML(n1<0?`(${n1})`:n1, d1)}
    <span>÷</span>
    ${fracHTML(n2<0?`(${n2})`:n2, d2)}
    <span>=</span>
  </div>`);
}

/* ═══════════════════════════════════════════════
   CHECK ANSWER
═══════════════════════════════════════════════ */
// Keyboard listeners
/* v85 FIX (Laura): this whole keyboard layer used to be attached inside a
   DOMContentLoaded listener. When the app is opened in a context where the
   document has ALREADY finished parsing before the script runs — a preview
   pane, an injected iframe, srcdoc, "open in new tab" from some viewers —
   that event never fires again, so NONE of these listeners were attached:
   no Enter to submit, no digit filtering, no keypad setup. Multiple-choice
   questions still worked, because those are inline onclick attributes, which
   is exactly the symptom that was reported (taps fine, Enter dead).
   ffInitInputs() now runs immediately when the document is already parsed,
   and is guarded so it can never attach twice. */
let ffInputsReady = false;
function ffInitInputs() {
  if (ffInputsReady) return;
  ffInputsReady = true;
  // Keypad setup — must run before any input interactions
  kbSetup();

  // Standard input — filter to numeric chars on desktop
  id('ansInput').addEventListener('keydown', e => {
    const allowed = ['Backspace','Delete','ArrowLeft','ArrowRight','Tab','Enter','-','.'];
    if (getInputMode() === 'ineq') {
      // Inequalities: also allow x, the comparison symbols, / for fractions, = (for <=),
      // and spaces. ≤ / ≥ can't be typed on a physical keyboard — students type <= / >=.
      const extra = ['x','X','<','>','=','/',' ','≤','≥'];
      if (allowed.includes(e.key) || extra.includes(e.key) || (e.key >= '0' && e.key <= '9')) return;
      if (e.ctrlKey || e.metaKey) return;
      e.preventDefault();
      return;
    }
    if (getInputMode() === 'piExact') {
      // v102: exact circle answers. Digits, a point, + and π (or type "pi").
      const extra = ['+', ' ', 'p', 'P', 'i', 'I', 'π'];
      if (allowed.includes(e.key) || extra.includes(e.key) || (e.key >= '0' && e.key <= '9')) return;
      if (e.ctrlKey || e.metaKey) return;
      e.preventDefault();
      return;
    }
    if (getInputMode() === 'decFrac') {
      // Add & Subtract Fractions & Decimals: allow digits, a decimal point and / for fractions.
      if (allowed.includes(e.key) || e.key === '/' || (e.key >= '0' && e.key <= '9')) return;
      if (e.ctrlKey || e.metaKey) return;
      e.preventDefault();
      return;
    }
    if (allowed.includes(e.key) || (e.key >= '0' && e.key <= '9')) return;
    if (e.ctrlKey || e.metaKey) return; // allow copy/paste
    e.preventDefault();
  });
  id('ansInput').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('ansInput').disabled) checkAns();
  });
  // Fraction inputs: Enter on numerator moves to denom, Enter on denom submits
  id('fracNum').addEventListener('keyup', e => {
    if (e.key === 'Enter') { id('fracDen').focus(); }
  });
  id('fracDen').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('fracDen').disabled) checkAns();
  });
  // Mixed number inputs
  id('mixedWhole').addEventListener('keyup', e => {
    if (e.key === 'Enter') id('mixedNum').focus();
  });
  id('mixedNum').addEventListener('keyup', e => {
    if (e.key === 'Enter') id('mixedDen').focus();
  });
  id('mixedDen').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('mixedDen').disabled) checkAns();
  });
  // Index inputs: coeff → exp → submit
  id('idxCoeff').addEventListener('keyup', e => {
    if (e.key === 'Enter') id('idxExpB').focus();
  });
  id('idxExp').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('idxExp').disabled) checkAns();
  });
  id('idxExpB').addEventListener('keyup', e => {
    if (e.key !== 'Enter') return;
    // If y-power box is visible, move to it; otherwise submit
    if (!id('idxExpC').disabled) id('idxExpC').focus();
    else checkAns();
  });
  id('idxExpC').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('idxExpC').disabled) checkAns();
  });
  // Sci notation: coeff → exp → submit
  id('sciCoeff').addEventListener('keyup', e => {
    if (e.key === 'Enter') id('sciExp').focus();
  });
  id('sciExp').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('sciExp').disabled) checkAns();
  });
  // Ratio inputs: ratioA → ratioB → submit (v22)
  id('ratioA').addEventListener('keyup', e => {
    if (e.key === 'Enter') id('ratioB').focus();
  });
  id('ratioB').addEventListener('keyup', e => {
    if (e.key === 'Enter' && !id('ratioB').disabled) checkAns();
  });
  // Algebra inputs: Enter advances through visible slots, submits on the last (v23)
  ['algC0','algC1','algC2','algP0','algP1','algP2'].forEach(idn => {
    const el = id(idn);
    if (!el) return;
    el.addEventListener('keyup', e => {
      if (e.key !== 'Enter') return;
      const order = getKbInputOrder();
      const i = order.indexOf(idn);
      if (i >= 0 && i < order.length - 1) {
        const nx = id(order[i + 1]);
        if (nx && !nx.disabled) { nx.focus(); return; }
      }
      if (!el.disabled) checkAns();
    });
  });
  // Free-text algebra input (v24): allow letters/digits/+/- on desktop; Enter submits
  const algTypeInput = id('algTypeInput');
  if (algTypeInput) {
    algTypeInput.addEventListener('keydown', e => {
      const allowed = ['Backspace','Delete','ArrowLeft','ArrowRight','Tab','Enter','+','-',' ','(',')'];
      if (allowed.includes(e.key) || (e.key >= '0' && e.key <= '9') || /^[a-zA-Z]$/.test(e.key)) return;
      if (e.ctrlKey || e.metaKey) return; // allow copy/paste
      e.preventDefault();
    });
    algTypeInput.addEventListener('keyup', e => {
      if (e.key === 'Enter' && !algTypeInput.disabled) checkAns();
    });
  }
  /* v77.1 (Laura): Enter walks the multi-box answers on a computer instead of the
     student having to click each box. Driven by getKbInputOrder() so it always follows
     THIS question's box order (a gap-fill has 2-5 boxes; the FDP table's blanks vary
     row by row). Enter on the last box submits. Mirrors the algebra-slot behaviour above. */
  ['gap0','gap1','gap2','gap3','gap4',
   'pctP0','pctD0','pctFn0','pctFd0',
   'pctP1','pctD1','pctFn1','pctFd1',
   'pctP2','pctD2','pctFn2','pctFd2'].forEach(idn => {
    const el = id(idn);
    if (!el) return;
    el.addEventListener('keydown', e => {
      const allowed = ['Backspace','Delete','ArrowLeft','ArrowRight','Tab','Enter','-','.'];
      if (allowed.includes(e.key) || (e.key >= '0' && e.key <= '9')) return;
      if (e.ctrlKey || e.metaKey) return;   // allow copy/paste
      e.preventDefault();
    });
    el.addEventListener('keyup', e => {
      if (e.key !== 'Enter') return;
      const order = getKbInputOrder();
      const i = order.indexOf(idn);
      // advance to the next ENABLED box in this question's order
      for (let j = i + 1; i >= 0 && j < order.length; j++) {
        const nx = id(order[j]);
        if (nx && !nx.disabled) { nx.focus(); nx.select && nx.select(); return; }
      }
      if (!el.disabled) checkAns();
    });
  });
  // Factorising boxes (v40): allow letters/digits/+/− on desktop; Enter advances
  // box0 → box1, and submits from box1.
  ['factorBox0','factorBox1'].forEach((idn, i) => {
    const el = id(idn);
    if (!el) return;
    el.addEventListener('keydown', e => {
      const allowed = ['Backspace','Delete','ArrowLeft','ArrowRight','Tab','Enter','+','-',' '];
      if (allowed.includes(e.key) || (e.key >= '0' && e.key <= '9') || /^[a-zA-Z]$/.test(e.key)) return;
      if (e.ctrlKey || e.metaKey) return;
      e.preventDefault();
    });
    el.addEventListener('keyup', e => {
      if (e.key !== 'Enter') return;
      if (i === 0) { const nx = id('factorBox1'); if (nx && !nx.disabled) { nx.focus(); return; } }
      if (!el.disabled) checkAns();
    });
  });
}
/* NOTE: ffInitInputs() is CALLED from the BOOT block at the very end of this
   script, not here. kbSetup() reads module-level `let`s (kbTarget, kbMode)
   that are declared further down the file, so calling it at this point throws
   "Cannot access 'kbTarget' before initialization" — function declarations
   hoist, the `let`s they use do not. The late-init test caught exactly that. */

/* ═══════════════════════════════════════════════
   ALGEBRA GENERATORS (v23)
   inputMode 'number' : algParts, algSub  (qData.ans)
   inputMode 'algebra': algLikeTerms, algMultiply, algDivide,
                        algExpand, algExpandTwo  (qData.alg.slots)
═══════════════════════════════════════════════ */

/* Display helpers — pronumerals render serif italic via the .idx-var class */
function aVar(s)        { return `<span class="idx-var">${s}</span>`; }
function aPow(base, p)  {
  if (p === 1) return aVar(base);
  return `<span class="idx-base-exp"><span class="idx-base idx-var">${base}</span><span class="idx-sup">${p}</span></span>`;
}
function aNum(n)        { return n < 0 ? '−' + Math.abs(n) : String(n); }
function aSupChar(p)    { return p === 2 ? '²' : p === 3 ? '³' : '^' + p; }
function nzrand(a, b)   { let x, t = 0; do { x = rr(a, b); t++; } while (x === 0 && t < 25); return x === 0 ? 1 : x; }

/* Build an expression like "8 − 5x" from terms [{coeff, base, p}]. base '' = constant.
   Coefficient of 1 in front of a variable is hidden; signs joined automatically. */
function aExpr(terms) {
  let html = '';
  terms.forEach((t, i) => {
    const c = t.coeff;
    if (i === 0) { if (c < 0) html += '−'; }
    else         { html += (c < 0) ? ' − ' : ' + '; }
    const mag = Math.abs(c);
    const p   = (t.p === undefined) ? 1 : t.p;
    if (!t.base) { html += String(mag); }
    else {
      const cstr = (mag === 1) ? '' : String(mag);
      html += cstr + aPow(t.base, p);
    }
  });
  return html;
}

/* Plain-text answer string for feedback, e.g. "8x + 2y" or "2x² − 7x + 4" */
function algAnswerStr(slots) {
  let out = '';
  slots.forEach((s, i) => {
    const c = s.coeff, mag = Math.abs(c);
    let term;
    if (!s.varLabel) { term = String(mag); }
    else {
      const cstr = (mag === 1) ? '' : String(mag);
      let varpart = s.varLabel;
      if (s.askPower && s.power && s.power !== 1) varpart = s.varLabel + aSupChar(s.power);
      term = cstr + varpart;
    }
    if (i === 0) out += (c < 0 ? '−' : '') + term;
    else         out += (c < 0 ? ' − ' : ' + ') + term;
  });
  return out;
}
/* v25: format a standalone signed integer with a proper minus (−) for worked steps */
function sgnNum(n) { return n < 0 ? '−' + Math.abs(n) : String(n); }

/* v83: the size is a CSS variable so the desktop stylesheet can scale every
   question prompt at once. Inline styles can't be overridden by a media query,
   and this label is used by 170+ generators. Falls back to 0.95rem (phone). */
const A_LBL = 'font-size:var(--qlbl,0.95rem);font-weight:800;color:var(--muted);margin-bottom:8px;';

/* Parse a typed linear answer like "7x", "8x + 2y", "3x - 6", "x", "-x + 4"
   into a map {variable: coefficient} ('' key = constant). Returns null if the
   format is invalid (e.g. "5xy" — joined letters — or "7x²"), which the caller
   treats as a wrong answer. No powers/brackets: these skills are linear. */
function parseLinearExpr(str) {
  let s = str.toLowerCase().replace(/\s+/g, '').replace(/−/g, '-').replace(/×/g, '').replace(/·/g, '');
  if (s === '') return null;
  if (!/^[0-9a-z+\-]+$/.test(s)) return null;   // only digits, letters, + and -
  const map = {};
  let i = 0;
  const n = s.length;
  let first = true;
  while (i < n) {
    let sign = 1, sawSign = false;
    if (s[i] === '+') { sign = 1; sawSign = true; i++; }
    else if (s[i] === '-') { sign = -1; sawSign = true; i++; }
    // Every term after the first must be separated by + or −
    if (!first && !sawSign) return null;
    let numStr = '';
    while (i < n && s[i] >= '0' && s[i] <= '9') { numStr += s[i]; i++; }
    let varCh = '';
    if (i < n && s[i] >= 'a' && s[i] <= 'z') { varCh = s[i]; i++; }
    // A second letter glued on (e.g. "xy") is the join-letters error → invalid
    if (i < n && s[i] >= 'a' && s[i] <= 'z') return null;
    if (numStr === '' && varCh === '') return null;       // stray sign
    const coeff = sign * (varCh === '' ? parseInt(numStr, 10)
                                       : (numStr === '' ? 1 : parseInt(numStr, 10)));
    map[varCh] = (map[varCh] || 0) + coeff;
    first = false;
  }
  return map;
}
/* slots → {variable: coefficient} expected map (linear, no powers) */
function slotsToMap(slots) {
  const m = {};
  slots.forEach(s => { const k = s.varLabel || ''; m[k] = (m[k] || 0) + s.coeff; });
  return m;
}
/* Convert answer slots to a signature-keyed poly map ('x²'→'x^2') so a typed
   polynomial answer (parsed by parsePoly) can be compared with polyEqual. */
function slotsToPolySig(slots) {
  const m = {};
  slots.forEach(s => {
    const sig = (s.varLabel || '').replace('²', '^2').replace('³', '^3');
    m[sig] = (m[sig] || 0) + s.coeff;
  });
  return m;
}
function algMapsEqual(a, b) {
  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
  for (const k of keys) if ((a[k] || 0) !== (b[k] || 0)) return false;
  return true;
}
/* Distinct variable letters in the answer, in order — used to label keypad keys */
function algVarsInSlots(slots) {
  // Base variable letters only (strip ² / ³ and dedupe) — the keypad's ² key
  // supplies the power, so a quadratic answer still offers just the 'x' key.
  const out = [];
  slots.forEach(s => {
    const v = (s.varLabel || '').replace('²', '').replace('³', '');
    if (v && !out.includes(v)) out.push(v);
  });
  return out;
}

/* 1 — Identifying parts of an expression (numeric answer) */
function genAlgParts(el) {
  el.style.fontSize = '2.0rem';
  let terms, askConst, namedBase, ans;
  if (level === 1) {
    const v = ['x','y','a','m','n'][ri(5)];
    const c = rr(2,9), k = rr(1,12);
    terms = [{coeff:c, base:v}, {coeff:k, base:''}];
    askConst = Math.random() < 0.5; namedBase = v;
    ans = askConst ? k : c;
  } else if (level === 2) {
    const pairs = [['x','y'],['a','b'],['m','n'],['p','q']];
    const [v1, v2] = pairs[ri(pairs.length)];
    const a = rr(2,9), b = rr(2,9), k = rr(1,12);
    terms = [{coeff:a, base:v1}, {coeff:b, base:v2}, {coeff:k, base:''}];
    const pick = ri(3);
    if (pick === 0)      { askConst = false; namedBase = v1; ans = a; }
    else if (pick === 1) { askConst = false; namedBase = v2; ans = b; }
    else                 { askConst = true;  namedBase = v1; ans = k; }
  } else {
    const v = ['x','y','a','m'][ri(4)];
    let c;
    const roll = Math.random();
    if (roll < 0.45)      c = rr(-9,-1);
    else if (roll < 0.65) c = -1;
    else if (roll < 0.80) c = 1;
    else                  c = rr(2,9);
    const k = nzrand(-12,12);
    terms = (Math.random() < 0.5) ? [{coeff:k, base:''},{coeff:c, base:v}]
                                  : [{coeff:c, base:v},{coeff:k, base:''}];
    askConst = Math.random() < 0.4; namedBase = v;
    ans = askConst ? k : c;
  }
  qData.ans = ans;
  const q = askConst ? 'the constant term' : `the coefficient of ${aVar(namedBase)}`;
  qData.workSteps = askConst
    ? `The constant is the term with no letter. Here that is <b>${ans}</b>.`
    : `The coefficient of ${aVar(namedBase)} is the number multiplying ${aVar(namedBase)}. Here that is <b>${ans}</b>.`;
  el.innerHTML = `<div style="${A_LBL}">In this expression, what is ${q}?</div>${aExpr(terms)}`;
}

/* 2 — Substitute values into an expression (numeric answer) */
function genAlgSub(el) {
  el.style.fontSize = '2.0rem';
  if (level === 1) {
    const v = ['x','a','m','y'][ri(4)];
    const a = rr(2,6), b = rr(1,12), xv = rr(2,6);
    qData.ans = a*xv + b;
    qData.workSteps = `Substitute ${aVar(v)} = ${xv}: ${a} × ${xv} + ${b} = ${a*xv} + ${b} = <b>${a*xv+b}</b>.`;
    el.innerHTML = `<div style="${A_LBL}">If ${aVar(v)} = ${xv}, find</div>${aExpr([{coeff:a,base:v},{coeff:b,base:''}])}`;
  } else if (level === 2) {
    const pairs = [['a','b'],['x','y'],['m','n'],['p','q']];
    const [v1, v2] = pairs[ri(pairs.length)];
    const a = rr(2,6), b = rr(2,6), xv = rr(1,6), yv = rr(1,6);
    qData.ans = a*xv + b*yv;
    qData.workSteps = `Substitute ${aVar(v1)} = ${xv} and ${aVar(v2)} = ${yv}: ${a} × ${xv} + ${b} × ${yv} = ${a*xv} + ${b*yv} = <b>${a*xv+b*yv}</b>.`;
    el.innerHTML = `<div style="${A_LBL}">If ${aVar(v1)} = ${xv} and ${aVar(v2)} = ${yv}, find</div>${aExpr([{coeff:a,base:v1},{coeff:b,base:v2}])}`;
  } else if (level === 3) {
    const v = ['x','a','m'][ri(3)];
    const xv = -rr(1,5);
    const type = ri(3);
    if (type === 0) {
      const c = rr(2,6);
      qData.ans = xv*xv + c*xv;
      qData.workSteps = `Substitute ${aVar(v)} = ${xv}: (${xv})² + ${c}(${xv}) = ${xv*xv} + (${c*xv}) = <b>${xv*xv + c*xv}</b>.`;
      el.innerHTML = `<div style="${A_LBL}">If ${aVar(v)} = ${aNum(xv)}, find</div>${aPow(v,2)} + ${c}${aVar(v)}`;
    } else if (type === 1) {
      const a = rr(2,6), b = rr(1,9);
      qData.ans = a*xv + b;
      qData.workSteps = `Substitute ${aVar(v)} = ${xv}: ${a}(${xv}) + ${b} = ${a*xv} + ${b} = <b>${a*xv+b}</b>.`;
      el.innerHTML = `<div style="${A_LBL}">If ${aVar(v)} = ${aNum(xv)}, find</div>${a}${aVar(v)} + ${b}`;
    } else {
      const k = rr(1,9);
      qData.ans = xv*xv - k;
      qData.workSteps = `Substitute ${aVar(v)} = ${xv}: (${xv})² − ${k} = ${xv*xv} − ${k} = <b>${xv*xv - k}</b>.`;
      el.innerHTML = `<div style="${A_LBL}">If ${aVar(v)} = ${aNum(xv)}, find</div>${aPow(v,2)} − ${k}`;
    }
  } else {
    // L4: substitute into a real formula and evaluate (answers are whole numbers)
    el.style.fontSize = '1.5rem';
    const forms = [
      () => { const b = 2*rr(2,6), h = rr(3,9); return { ans: b*h/2, lbl: 'A = ½bh', sub: 'b = '+b+',  h = '+h }; },
      () => { const l = rr(3,12), wd = rr(2,9);  return { ans: 2*(l+wd), lbl: 'P = 2(l + w)', sub: 'l = '+l+',  w = '+wd }; },
      () => { const u = rr(2,9), a = rr(2,6), t = rr(2,6); return { ans: u + a*t, lbl: 'v = u + at', sub: 'u = '+u+',  a = '+a+',  t = '+t }; },
      () => { const l = rr(3,12), wd = rr(2,9);  return { ans: l*wd, lbl: 'A = lw', sub: 'l = '+l+',  w = '+wd }; },
      () => { const s = rr(3,15);                return { ans: 4*s, lbl: 'P = 4s', sub: 's = '+s }; },
    ];
    const f = forms[ri(forms.length)]();
    qData.ans = f.ans;
    qData.workSteps = 'Substitute into ' + f.lbl + ' with ' + f.sub + ' → <b>' + f.ans + '</b>.';
    el.innerHTML = `<div style="${A_LBL}">Substitute into the formula and evaluate</div>`
      + `<div style="text-align:center;font-weight:900;font-size:1.7rem;margin:6px 0;">${f.lbl}</div>`
      + `<div style="text-align:center;font-weight:800;color:var(--muted);">${f.sub}</div>`;
  }
}

/* 3 — Add & subtract like terms (algebra slots) */
function genAlgLikeTerms(el) {
  el.style.fontSize = '2.4rem';
  if (level === 1) {
    const v = ['x','y','a','m','n'][ri(5)];
    const c1 = rr(1,9), c2 = rr(1,9);
    qData.alg = { slots: [{coeff:c1+c2, varLabel:v, askPower:false}] };
    qData.workSteps = `Add the numbers in front of <b>${v}</b>: ${c1} + ${c2} = <b>${c1+c2}</b>.<br>The letter stays the same → <b>${c1+c2}${v}</b>.<br><span class="wk-note">Don't join the letters — ${v} stays ${v}, it doesn't become ${v}².</span>`;
    el.innerHTML = aExpr([{coeff:c1,base:v},{coeff:c2,base:v}]);
  } else if (level === 2) {
    const v = ['x','y','a','m'][ri(4)];
    let c1, c2, c3, total, tries = 0;
    do {
      c1 = rr(2,9);
      c2 = (Math.random() < 0.5 ? 1 : -1) * rr(1,7);
      c3 = (Math.random() < 0.4) ? (Math.random() < 0.5 ? 1 : -1) * rr(1,5) : 0;
      total = c1 + c2 + c3; tries++;
    } while (total < 1 && tries < 30);
    if (total < 1) { c1 = 9; c2 = -2; c3 = 0; total = 7; }
    const terms = [{coeff:c1,base:v},{coeff:c2,base:v}];
    if (c3 !== 0) terms.push({coeff:c3,base:v});
    qData.alg = { slots: [{coeff:total, varLabel:v, askPower:false}] };
    let lt2 = `${c1}`;
    [c2, c3].forEach(c => { if (c !== 0) lt2 += c < 0 ? ` − ${Math.abs(c)}` : ` + ${c}`; });
    qData.workSteps = `Combine the ${v} terms — only the numbers in front add up:<br>${lt2} = <b>${total}</b><br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    el.innerHTML = aExpr(terms);
  } else {
    const pairs = [['x','y'],['a','b'],['m','n'],['p','q']];
    const [v1, v2] = pairs[ri(pairs.length)];
    let a1, a2, b1, b2, sx, sy, tries = 0;
    do {
      a1 = (Math.random()<0.5?1:-1)*rr(1,7); a2 = (Math.random()<0.5?1:-1)*rr(1,7);
      b1 = (Math.random()<0.5?1:-1)*rr(1,6); b2 = (Math.random()<0.5?1:-1)*rr(1,6);
      sx = a1 + a2; sy = b1 + b2; tries++;
    } while ((sx === 0 || sy === 0) && tries < 40);
    if (sx === 0 || sy === 0) { a1=3; a2=2; b1=4; b2=-1; sx=5; sy=3; }
    qData.alg = { slots: [{coeff:sx, varLabel:v1, askPower:false},
                          {coeff:sy, varLabel:v2, askPower:false}] };
    const xExpr = `${sgnNum(a1)}` + (a2 < 0 ? ` − ${Math.abs(a2)}` : ` + ${a2}`);
    const yExpr = `${sgnNum(b1)}` + (b2 < 0 ? ` − ${Math.abs(b2)}` : ` + ${b2}`);
    qData.workSteps = `Group the like terms, then add the numbers in front of each letter:<br><b>${v1}</b>: ${xExpr} = ${sgnNum(sx)} → ${sgnNum(sx)}${v1}<br><b>${v2}</b>: ${yExpr} = ${sgnNum(sy)} → ${sgnNum(sy)}${v2}<br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.<br><span class="wk-note">${v1} and ${v2} are different letters — keep them separate.</span>`;
    el.innerHTML = aExpr([{coeff:a1,base:v1},{coeff:b1,base:v2},{coeff:a2,base:v1},{coeff:b2,base:v2}]);
  }
}

/* ─── Multiply / Divide terms — typed whole-answer engine (v32) ───
   A "factor" is a monomial { coeff, vars:{letter:power} }. Students multiply
   or divide these and type the WHOLE simplified answer (e.g. 12x, 12xyz,
   10xy²z, −24x²y). qData.prodAns holds the canonical answer; the algProd
   branch in checkAns marks the typed string against it (order-insensitive). */

/* Multiply a list of factors: coefficients multiply, like-letter powers add. */
function multiplyFactors(factors) {
  let coeff = 1; const vars = {};
  factors.forEach(f => {
    coeff *= f.coeff;
    for (const k in f.vars) vars[k] = (vars[k] || 0) + f.vars[k];
  });
  for (const k in vars) if (vars[k] === 0) delete vars[k];
  return { coeff, vars };
}
/* Divide num ÷ den: coefficients divide (must be exact), powers subtract. */
function divideFactors(num, den) {
  const coeff = num.coeff / den.coeff;
  const vars = {};
  for (const k in num.vars) vars[k] = num.vars[k];
  for (const k in den.vars) vars[k] = (vars[k] || 0) - den.vars[k];
  for (const k in vars) if (vars[k] === 0) delete vars[k];
  return { coeff, vars };
}
/* Pick k distinct items from arr (no repeats). */
function pickDistinct(arr, k) {
  const c = arr.slice(), out = [];
  for (let i = 0; i < k && c.length; i++) out.push(c.splice(ri(c.length), 1)[0]);
  return out;
}
/* {sign, html} for one factor — coefficient magnitude + letters (sorted) with powers. */
function factorParts(f) {
  const mag = Math.abs(f.coeff);
  const letters = Object.keys(f.vars).filter(k => f.vars[k] !== 0).sort();
  const cstr = letters.length === 0 ? String(mag) : (mag === 1 ? '' : String(mag));
  const body = letters.map(L => aPow(L, f.vars[L])).join('');
  return { sign: f.coeff < 0 ? -1 : 1, html: cstr + body };
}
/* A factor as standalone HTML, with a leading − when negative. */
function factorHtml(f) {
  const p = factorParts(f);
  return (p.sign < 0 ? '−' : '') + p.html;
}
/* Join factors into a question, e.g. "−3x × 2y × (−4x)" — negative non-first
   factors are parenthesised so the operator stays readable. */
function factorsToQ(factors, op) {
  let html = '';
  factors.forEach((f, i) => {
    const p = factorParts(f);
    if (i === 0) html += (p.sign < 0 ? '−' : '') + p.html;
    else html += ` ${op} ` + (p.sign < 0 ? '(−' + p.html + ')' : p.html);
  });
  return html;
}
/* Canonical answer as plain text (feedback) — uses ² / ³ superscript chars. */
function prodAnsStr(p) {
  const mag = Math.abs(p.coeff);
  const letters = Object.keys(p.vars).filter(k => p.vars[k] !== 0).sort();
  const body = letters.map(L => p.vars[L] === 1 ? L : L + aSupChar(p.vars[L])).join('');
  const cstr = letters.length === 0 ? String(mag) : (mag === 1 ? '' : String(mag));
  return (p.coeff < 0 ? '−' : '') + cstr + body;
}
/* Canonical answer as HTML (worked steps) — proper rendered superscripts. */
function prodAnsHtml(p) {
  const mag = Math.abs(p.coeff);
  const letters = Object.keys(p.vars).filter(k => p.vars[k] !== 0).sort();
  const body = letters.map(L => aPow(L, p.vars[L])).join('');
  const cstr = letters.length === 0 ? String(mag) : (mag === 1 ? '' : String(mag));
  return (p.coeff < 0 ? '−' : '') + cstr + body;
}
/* Parse a typed monomial answer into { coeff, vars }.
   Accepts: leading sign, leading coefficient, then letters each with an optional
   power written as a superscript (²/³), a caret (x^2), or trailing digits (x2).
   Repeated letters add powers (xy·x = x²y). Returns null on anything malformed
   (e.g. a stray operator, a sign mid-string, a caret with no number). */
function parseAlgProduct(str) {
  let s = String(str).toLowerCase();
  s = s.replace(/\s+/g, '').replace(/−/g, '-').replace(/[×*·]/g, '');
  s = s.replace(/¹/g, '^1').replace(/²/g, '^2').replace(/³/g, '^3').replace(/⁴/g, '^4').replace(/⁵/g, '^5');
  if (s === '') return null;
  if (!/^[-0-9a-z\^]+$/.test(s)) return null;
  const n = s.length;
  let i = 0, sign = 1;
  if (s[i] === '-') { sign = -1; i++; }
  let numStr = '';
  while (i < n && s[i] >= '0' && s[i] <= '9') { numStr += s[i]; i++; }
  let coeff = (numStr === '' ? 1 : parseInt(numStr, 10)) * sign;
  const vars = {};
  while (i < n) {
    const ch = s[i];
    if (ch >= 'a' && ch <= 'z') {
      i++;
      let pw = 1;
      if (i < n && s[i] === '^') {
        i++;
        let ps = '';
        while (i < n && s[i] >= '0' && s[i] <= '9') { ps += s[i]; i++; }
        if (ps === '') return null;
        pw = parseInt(ps, 10);
      } else {
        let ps = '';
        while (i < n && s[i] >= '0' && s[i] <= '9') { ps += s[i]; i++; }
        if (ps !== '') pw = parseInt(ps, 10);
      }
      vars[ch] = (vars[ch] || 0) + pw;
    } else {
      return null; // stray sign / caret / digit not attached to a letter
    }
  }
  for (const k in vars) if (vars[k] === 0) delete vars[k];
  return { coeff, vars };
}
/* Two monomials equal? Same coefficient and same letter→power map. */
function prodEqual(a, b) {
  if (!a || !b) return false;
  if (a.coeff !== b.coeff) return false;
  const ka = Object.keys(a.vars).filter(k => a.vars[k] !== 0);
  const kb = Object.keys(b.vars).filter(k => b.vars[k] !== 0);
  if (ka.length !== kb.length) return false;
  for (const k of ka) if ((a.vars[k] || 0) !== (b.vars[k] || 0)) return false;
  return true;
}
function mulSteps(factors, ans) {
  const nums = factors.map(f => sgnNum(f.coeff)).join(' × ');
  const numProd = factors.reduce((a, f) => a * f.coeff, 1);
  return `Multiply the numbers: ${nums} = ${sgnNum(numProd)}.<br>`
       + `Multiply the letters — add the powers of any repeated letter.<br>`
       + `Answer: <b>${prodAnsHtml(ans)}</b>.`;
}
function divSteps(num, den, ans) {
  return `Divide the numbers: ${Math.abs(num.coeff)} ÷ ${Math.abs(den.coeff)} = ${Math.abs(num.coeff / den.coeff)}.<br>`
       + `For each matching letter, subtract the powers.<br>`
       + `Answer: <b>${prodAnsHtml(ans)}</b>.`;
}

/* 4 — Multiply terms (typed whole answer) */
function genAlgMultiply(el) {
  el.style.fontSize = '2.2rem';
  const L = ['x','y','z','a','b','m','n','p','q'];

  if (level === 1) {
    // number × term  →  e.g. 4 × 3x = 12x
    const v = pickDistinct(L, 1)[0];
    const fNum  = { coeff: rr(2,9), vars: {} };
    const fTerm = { coeff: rr(2,9), vars: { [v]: 1 } };
    const order = Math.random() < 0.5 ? [fNum, fTerm] : [fTerm, fNum];
    const ans = multiplyFactors(order);
    qData.prodAns = ans;
    el.innerHTML = factorsToQ(order, '×');
    qData.workSteps = mulSteps(order, ans);

  } else if (level === 2) {
    // term × term, all-distinct letters → no powers  →  e.g. 3xy × 4z = 12xyz
    const k = Math.random() < 0.5 ? 2 : 3;          // total distinct letters
    const letters = pickDistinct(L, k);
    const split = (k === 2) ? 1 : (Math.random() < 0.5 ? 1 : 2);
    const v1 = {}, v2 = {};
    letters.slice(0, split).forEach(x => v1[x] = 1);
    letters.slice(split).forEach(x => v2[x] = 1);
    const f1 = { coeff: rr(2,9), vars: v1 }, f2 = { coeff: rr(2,9), vars: v2 };
    const ans = multiplyFactors([f1, f2]);
    qData.prodAns = ans;
    el.innerHTML = factorsToQ([f1, f2], '×');
    qData.workSteps = mulSteps([f1, f2], ans);

  } else if (level === 3) {
    // a shared letter → a power in the answer (capped at ²)  →  5xy × 2yz = 10xy²z
    const [s, o1, o2] = pickDistinct(L, 3);
    const v1 = { [s]: 1 }; if (Math.random() < 0.7) v1[o1] = 1;
    const v2 = { [s]: 1 }; if (Math.random() < 0.7) v2[o2] = 1;
    const f1 = { coeff: rr(2,6), vars: v1 }, f2 = { coeff: rr(2,6), vars: v2 };
    const ans = multiplyFactors([f1, f2]);
    qData.prodAns = ans;
    el.innerHTML = factorsToQ([f1, f2], '×');
    qData.workSteps = mulSteps([f1, f2], ans);

  } else {
    // L4: three terms, negatives, powers up to ³  →  −3x × 2y × 4x = −24x²y
    const [v, w, u] = pickDistinct(L, 3);
    const patt = ri(3);
    let v1, v2, v3;
    if (patt === 0)      { v1 = { [v]: 1 }; v2 = { [v]: 1 }; v3 = { [v]: 1 }; }       // → v³
    else if (patt === 1) { v1 = { [v]: 1 }; v2 = { [w]: 1 }; v3 = { [v]: 1 }; }       // → v² w
    else                 { v1 = { [v]: 1 }; v2 = { [w]: 1 }; v3 = { [u]: 1 }; }       // → vwu
    const sgn = () => (Math.random() < 0.45 ? -1 : 1);
    const f1 = { coeff: sgn() * rr(2,5), vars: v1 };
    const f2 = { coeff: sgn() * rr(2,5), vars: v2 };
    const f3 = { coeff: sgn() * rr(2,5), vars: v3 };
    if (f1.coeff > 0 && f2.coeff > 0 && f3.coeff > 0) f1.coeff = -f1.coeff; // guarantee a negative
    const ans = multiplyFactors([f1, f2, f3]);
    qData.prodAns = ans;
    el.innerHTML = factorsToQ([f1, f2, f3], '×');
    qData.workSteps = mulSteps([f1, f2, f3], ans);
  }
}

/* 5 — Divide terms (typed whole answer) */
function genAlgDivide(el) {
  el.style.fontSize = '2.2rem';
  const L = ['x','y','z','a','b','m','n','p','q'];

  if (level === 1) {
    // term ÷ number, chosen so it divides cleanly  →  12x ÷ 4 = 3x
    const v = pickDistinct(L, 1)[0];
    const q = rr(2,9), d = rr(2,9);
    const num = { coeff: q * d, vars: { [v]: 1 } }, den = { coeff: d, vars: {} };
    const ans = divideFactors(num, den);
    qData.prodAns = ans;
    el.innerHTML = `${factorHtml(num)} ÷ ${d}`;
    qData.workSteps = divSteps(num, den, ans);

  } else if (level === 2) {
    // term ÷ term, a letter cancels  →  28xy ÷ 7y = 4x
    const [keep, cancel] = pickDistinct(L, 2);
    const q = rr(2,6), d = rr(2,6);
    const num = { coeff: q * d, vars: { [keep]: 1, [cancel]: 1 } };
    const den = { coeff: d, vars: { [cancel]: 1 } };
    const ans = divideFactors(num, den);
    qData.prodAns = ans;
    el.innerHTML = `${factorHtml(num)} ÷ (${factorHtml(den)})`;
    qData.workSteps = divSteps(num, den, ans);

  } else if (level === 3) {
    // numerator carries a higher power so the answer keeps one  →  10x³y ÷ 2x = 5x²y
    const [v, w] = pickDistinct(L, 2);
    const q = rr(2,6), d = rr(2,6);
    const numVars = { [v]: 3 };
    if (Math.random() < 0.6) numVars[w] = 1;
    const num = { coeff: q * d, vars: numVars };
    const den = { coeff: d, vars: { [v]: 1 } };
    const ans = divideFactors(num, den);   // → q·v²·(w)
    qData.prodAns = ans;
    el.innerHTML = `${factorHtml(num)} ÷ (${factorHtml(den)})`;
    qData.workSteps = divSteps(num, den, ans);

  } else {
    // L4: divide then multiply, left to right, may be negative
    //     24x²y ÷ 6x × 2y = 8xy²    (built so the division is always exact)
    const [v, w] = pickDistinct(L, 2);
    const m = rr(2,5), b = rr(2,5), c = rr(2,5);
    const A = { coeff: m * b, vars: { [v]: 2, [w]: 1 } };  // numerator
    const B = { coeff: b,     vars: { [v]: 1 } };          // divisor
    const C = { coeff: c,     vars: { [w]: 1 } };          // multiplier
    if (Math.random() < 0.4) A.coeff = -A.coeff;
    if (Math.random() < 0.3) C.coeff = -C.coeff;
    const M = divideFactors(A, B);
    const R = multiplyFactors([M, C]);
    qData.prodAns = R;
    const cHtml = (C.coeff < 0)
      ? '(−' + factorParts({ coeff: Math.abs(C.coeff), vars: C.vars }).html + ')'
      : factorHtml(C);
    el.innerHTML = `${factorHtml(A)} ÷ (${factorHtml(B)}) × ${cHtml}`;
    qData.workSteps = `Work left to right.<br>`
      + `Divide: ${factorHtml(A)} ÷ ${factorHtml(B)} = ${prodAnsHtml(M)}.<br>`
      + `Then multiply by ${factorHtml(C)}: <b>${prodAnsHtml(R)}</b>.`;
  }
}

/* 6 — Expand single brackets (algebra slots, coefficients only) */
function genAlgExpand(el) {
  el.style.fontSize = '2.2rem';
  if (level === 1) {
    const v = ['x','y','a','m'][ri(4)];
    const k = rr(2,6), a = rr(1,9);
    qData.alg = { slots: [{coeff:k, varLabel:v, askPower:false},
                          {coeff:k*a, varLabel:'', askPower:false}] };
    qData.workSteps = `Multiply <b>${k}</b> by each term inside the bracket:<br>${k} × ${v} = ${k}${v}<br>${k} × ${a} = ${k*a}<br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    el.innerHTML = `${k}(${aVar(v)} + ${a})`;
  } else if (level === 2) {
    const v = ['x','y','a','m'][ri(4)];
    const k = rr(2,5), a = rr(2,5), b = rr(1,9);
    const minus = Math.random() < 0.6;
    qData.alg = { slots: [{coeff:k*a, varLabel:v, askPower:false},
                          {coeff:(minus?-1:1)*k*b, varLabel:'', askPower:false}] };
    qData.workSteps = `Multiply <b>${k}</b> by each term inside the bracket:<br>${k} × ${a}${v} = ${k*a}${v}<br>${k} × ${b} = ${k*b}<br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    el.innerHTML = `${k}(${a}${aVar(v)} ${minus?'−':'+'} ${b})`;
  } else {
    const v = ['x','a','m'][ri(3)];
    const c = rr(2,5), a = rr(1,6);
    const minus = Math.random() < 0.6;
    qData.alg = { slots: [{coeff:c, varLabel:v+'²', askPower:false},
                          {coeff:(minus?-1:1)*c*a, varLabel:v, askPower:false}] };
    qData.workSteps = `Multiply <b>${c}${v}</b> by each term inside the bracket:<br>${c}${v} × ${v} = ${c}${v}²<br>${c}${v} × ${a} = ${c*a}${v}<br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    el.innerHTML = `${c}${aVar(v)}(${aVar(v)} ${minus?'−':'+'} ${a})`;
  }
}

/* 7 — Expand & simplify two brackets, one pronumeral (algebra slots) */
function genAlgExpandTwo(el) {
  el.style.fontSize = '2.0rem';
  if (level === 1) {
    const p = rr(2,5), q = rr(1,5), a = rr(1,6), b = rr(1,6);
    qData.alg = { slots: [{coeff:p+q, varLabel:'x', askPower:false},
                          {coeff:p*a+q*b, varLabel:'', askPower:false}] };
    qData.workSteps = `Expand each bracket, then collect like terms:<br>${p}(x + ${a}) = ${p}x + ${p*a}<br>${q}(x + ${b}) = ${q}x + ${q*b}<br>x terms: ${p}x + ${q}x = ${p+q}x<br>numbers: ${p*a} + ${q*b} = ${p*a+q*b}<br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    const qstr = (q === 1) ? '' : q;
    el.innerHTML = `${p}(${aVar('x')} + ${a}) + ${qstr}(${aVar('x')} + ${b})`;
  } else if (level === 2) {
    let p, q, a, b, xc, kc, tries = 0;
    do { p = rr(2,6); q = rr(2,5); a = rr(1,6); b = rr(1,6); xc = p-q; kc = p*a-q*b; tries++; }
    while ((xc === 0 || kc === 0) && tries < 40);
    if (xc === 0 || kc === 0) { p=5; q=3; a=2; b=1; xc=2; kc=7; }
    qData.alg = { slots: [{coeff:xc, varLabel:'x', askPower:false},
                          {coeff:kc, varLabel:'', askPower:false}] };
    qData.workSteps = `Expand each bracket — watch the minus on the second one:<br>${p}(x + ${a}) = ${p}x + ${p*a}<br>−${q}(x + ${b}) = −${q}x − ${q*b}<br>x terms: ${p}x − ${q}x = ${sgnNum(xc)}x<br>numbers: ${p*a} − ${q*b} = ${sgnNum(kc)}<br>Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    const qstr = (q === 1) ? '' : q;
    el.innerHTML = `${p}(${aVar('x')} + ${a}) − ${qstr}(${aVar('x')} + ${b})`;
  } else {
    let c, d, e, g, s, xc, kc, tries = 0;
    do {
      c = rr(2,3); d = nzrand(-5,5); e = rr(2,5); g = nzrand(-5,5);
      s = (Math.random() < 0.5) ? 1 : -1;
      xc = d + s*e; kc = s*e*g; tries++;
    } while ((xc === 0 || kc === 0) && tries < 60);
    if (xc === 0 || kc === 0) { c=2; d=-3; e=4; g=-1; s=-1; xc=-7; kc=4; }
    qData.alg = { slots: [{coeff:c,  varLabel:'x²', askPower:false},
                          {coeff:xc, varLabel:'x',  askPower:false},
                          {coeff:kc, varLabel:'',   askPower:false}] };
    const se = s*e;
    qData.workSteps = `Expand each part, then collect like terms:<br>` +
      `x(${c}x ${d<0?'−':'+'} ${Math.abs(d)}) = ${c}x² ${d<0?'−':'+'} ${Math.abs(d)}x<br>` +
      `${s<0?'−':'+'}${e}(x ${g<0?'−':'+'} ${Math.abs(g)}) = ${sgnNum(se)}x ${kc<0?'− '+Math.abs(kc):'+ '+kc}<br>` +
      `x terms: ${sgnNum(d)} ${se<0?'−':'+'} ${Math.abs(se)} = ${sgnNum(xc)}<br>` +
      `Answer: <b>${algAnswerStr(qData.alg.slots)}</b>.`;
    const b1 = `${aVar('x')}(${c}${aVar('x')} ${d<0?'−':'+'} ${Math.abs(d)})`;
    const b2 = `${e}(${aVar('x')} ${g<0?'−':'+'} ${Math.abs(g)})`;
    el.innerHTML = `${b1} ${s<0?'−':'+'} ${b2}`;
  }
}

/* ─── FACTORISING — typed-into-brackets engine ('factor' input mode) ───
   The student types each bracket's contents into a fixed ( … )( … ) scaffold,
   never typing the brackets themselves (the keypad has no bracket key). Each box
   is parsed as a LINEAR expression (reuse parseLinearExpr), the two are multiplied
   out, and the product is compared to the original expression. This marks ANY
   equivalent factorisation correct and is order-insensitive automatically:
   (x−2)(x−3), (x−3)(x−2) and (−x+2)(−x+3) all expand to the same quadratic. */

/* Multiply two linear maps ({'':const, x:coeff, …}) into a polynomial map keyed
   by a canonical monomial signature ('' = constant, 'x', 'x^2', sorted letters). */
function monoKey(ka, kb) {
  const letters = [];
  if (ka) letters.push(ka);
  if (kb) letters.push(kb);
  letters.sort();
  if (letters.length === 0) return '';
  if (letters.length === 2 && letters[0] === letters[1]) return letters[0] + '^2';
  return letters.join('');
}
function multiplyLinear(a, b) {
  const out = {};
  for (const ka in a) {
    for (const kb in b) {
      const key = monoKey(ka, kb);
      out[key] = (out[key] || 0) + a[ka] * b[kb];
    }
  }
  for (const k in out) if (out[k] === 0) delete out[k];
  return out;
}
/* Two polynomial maps equal? (ignores zero coefficients) */
function polyEqual(a, b) {
  if (!a || !b) return false;
  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
  for (const k of keys) if ((a[k] || 0) !== (b[k] || 0)) return false;
  return true;
}

/* ─── General polynomial machinery (HCF & grouping factorisation) ───
   A polynomial is a map { signature: coeff }, where a signature is the
   canonical monomial string: '' (constant), 'x', 'x^2', 'pq', 'p^2q', …
   (letters sorted; power written as ^n, omitted when 1). */
function monoToSig(vars) {
  const letters = Object.keys(vars).filter(k => vars[k] !== 0).sort();
  if (letters.length === 0) return '';
  return letters.map(L => vars[L] === 1 ? L : L + '^' + vars[L]).join('');
}
function sigToMono(sig) {
  const m = {};
  let i = 0;
  while (i < sig.length) {
    const L = sig[i]; i++;
    let pw = 1;
    if (sig[i] === '^') { i++; let ps = ''; while (i < sig.length && sig[i] >= '0' && sig[i] <= '9') { ps += sig[i]; i++; } pw = parseInt(ps, 10); }
    m[L] = (m[L] || 0) + pw;
  }
  return m;
}
function mulSig(s1, s2) {
  const m1 = sigToMono(s1), m2 = sigToMono(s2), out = {};
  for (const k in m1) out[k] = (out[k] || 0) + m1[k];
  for (const k in m2) out[k] = (out[k] || 0) + m2[k];
  return monoToSig(out);
}
function multiplyPoly(a, b) {
  const out = {};
  for (const sa in a) for (const sb in b) {
    const sig = mulSig(sa, sb);
    out[sig] = (out[sig] || 0) + a[sa] * b[sb];
  }
  for (const k in out) if (out[k] === 0) delete out[k];
  return out;
}
/* Parse a typed polynomial (sum of monomials, no brackets) into a poly map.
   Each term is parsed by parseAlgProduct (coeff + letters + powers via ²/³/^/
   trailing digits). Returns null on brackets, stray operators, or garbage. */
function parsePoly(str) {
  let s = String(str).toLowerCase().replace(/\s+/g, '').replace(/−/g, '-').replace(/[×*·]/g, '');
  if (s === '') return null;
  if (/[()]/.test(s)) return null;                  // a single box never contains brackets
  // Split into signed terms, keeping the sign with each term.
  const terms = [];
  let cur = '';
  for (let i = 0; i < s.length; i++) {
    const ch = s[i];
    if ((ch === '+' || ch === '-') && cur !== '') { terms.push(cur); cur = ch; }
    else cur += ch;
  }
  if (cur !== '') terms.push(cur);
  const poly = {};
  for (let t of terms) {
    if (t[0] === '+') t = t.slice(1);               // parseAlgProduct rejects a leading '+'
    if (t === '' || t === '-' || t === '+') return null;
    const mono = parseAlgProduct(t);                // reuses the monomial parser
    if (!mono) return null;
    const sig = monoToSig(mono.vars);
    poly[sig] = (poly[sig] || 0) + mono.coeff;
  }
  for (const k in poly) if (poly[k] === 0) delete poly[k];
  return Object.keys(poly).length ? poly : null;
}
/* Is a polynomial map a non-constant (contains at least one variable term)? */
function polyHasVar(p) { return p && Object.keys(p).some(k => k !== ''); }

/* Parse a typed FACTORISED expression — an optional leading monomial followed by
   one or more bracketed factors, e.g. "8(x-5)", "4x(2x-5)", "(x+2)(x+3)",
   "(3p+1)(q+2)". Returns { factors:[polyMap,…], product:polyMap } or null.
   A plain polynomial with no brackets parses as a single factor (used to detect
   "not actually factorised"). No nested brackets; nothing may follow a ')'
   except another '('. */
function parseFactored(str) {
  let s = String(str).toLowerCase().replace(/\s+/g, '').replace(/−/g, '-').replace(/[×*·]/g, '');
  if (s === '') return null;
  const factors = [];
  let i = 0, lead = '';
  while (i < s.length && s[i] !== '(') { lead += s[i]; i++; }
  if (lead !== '') {
    if (i >= s.length) {                         // no brackets at all → one flat factor
      const p = parsePoly(lead);
      return p ? { factors: [p], product: p } : null;
    }
    const m = parseAlgProduct(lead);             // leading monomial only (e.g. 8, 4x, -2)
    if (!m) return null;
    const fm = {}; fm[monoToSig(m.vars)] = m.coeff;
    factors.push(fm);
  }
  while (i < s.length) {
    if (s[i] !== '(') return null;
    i++;
    let inner = '';
    while (i < s.length && s[i] !== ')') { if (s[i] === '(') return null; inner += s[i]; i++; }
    if (i >= s.length) return null;              // unbalanced
    i++;                                         // consume ')'
    const p = parsePoly(inner);
    if (!p) return null;
    factors.push(p);
  }
  if (factors.length === 0) return null;
  let product = { '': 1 };
  for (const f of factors) product = multiplyPoly(product, f);
  return { factors, product };
}

/* Factorise monic quadratics  (lvKey afm)  →  x² + bx + c = (x + p)(x + q)
   p·q = c, p + q = b. L1 both positive, L2 mixed signs (c < 0),
   L3 both negative (b < 0, c > 0) plus harder mixed cases. */
function genAlgFactorMonic(el) {
  el.style.fontSize = '2.2rem';
  let p, q, tries = 0;
  do {
    if (level === 1) { p = rr(1, 9); q = rr(1, 9); }                 // both +
    else if (level === 2) { p = rr(1, 9); q = -rr(1, 9); }           // mixed → c < 0
    else {                                                            // L3
      if (Math.random() < 0.6) { p = -rr(1, 9); q = -rr(1, 9); }     // both − → b<0, c>0
      else { p = rr(1, 9); q = -rr(1, 9); }                          // harder mixed
    }
    tries++;
  } while ((p + q === 0 || p === q) && tries < 40);   // skip difference-of-squares & perfect squares (out of scope)
  if (p + q === 0 || p === q) { p = 2; q = 3; }
  const b = p + q;     // middle coefficient
  const c = p * q;     // constant
  // Target = expanded quadratic, built through the SAME machinery students hit.
  qData.factorTarget = multiplyLinear({ x: 1, '': p }, { x: 1, '': q });
  qData.factorVars = ['x'];
  qData.factorBoxes = 2;
  qData.factorP = p; qData.factorQ = q;   // per-question only (not persisted)
  // Worked answer string for feedback / review.
  const facTxt  = (n) => `(x ${n < 0 ? '− ' + Math.abs(n) : '+ ' + n})`;
  const facHtml = (n) => `(${aVar('x')} ${n < 0 ? '− ' + Math.abs(n) : '+ ' + n})`;
  qData.factorAnsText = `${facTxt(p)}${facTxt(q)}`;
  qData.factorAnsHtml = `${facHtml(p)}${facHtml(q)}`;
  // Question display: x² + bx + c
  let qhtml = aPow('x', 2);
  if (b !== 0) qhtml += b < 0 ? ` − ${Math.abs(b)}${aVar('x')}` : ` + ${b}${aVar('x')}`;
  if (c !== 0) qhtml += c < 0 ? ` − ${Math.abs(c)}` : ` + ${c}`;
  el.innerHTML = `<div style="${A_LBL}">Factorise</div>${qhtml}`;
  qData.workSteps =
    `Find two numbers that multiply to ${aNum(c)} and add to ${aNum(b)}: <b>${aNum(p)}</b> and <b>${aNum(q)}</b>.<br>`
    + `Put each number in its own bracket with x:<br>Answer: <b>${qData.factorAnsHtml}</b>.`;
}

/* ─── Expanding Binomial Brackets (algebra slot mode, quadratic answer) ───
   Every level expands to a x² + b x + c, entered into three coefficient slots
   (x², x, constant) — the same structured mode algExpandTwo uses. */
function genAlgExpandBinom(el) {
  el.style.fontSize = '2.0rem';
  // Render a bracket "(px ± q)"; p is the x-coefficient (≥1), q the constant.
  const bin = (p, q) => `(${p === 1 ? '' : p}${aVar('x')} ${q < 0 ? '− ' + Math.abs(q) : '+ ' + q})`;
  let a2, bx, c, disp, expandNote;

  if (level === 1) {
    let b, d;
    do { b = nzrand(-9, 9); d = nzrand(-9, 9); } while (b + d === 0);   // avoid a 0 middle term
    a2 = 1; bx = b + d; c = b * d;
    disp = `${bin(1, b)}${bin(1, d)}`;
    expandNote = `Multiply each pair (FOIL): x·x = x², then the outer + inner x terms add to ${sgnNum(bx)}x, and ${aNum(b)}·${aNum(d)} = ${aNum(c)}.`;
  } else if (level === 2) {
    let a, b, q1, q2, tries = 0;
    do { a = rr(2, 5); b = rr(2, 5); q1 = nzrand(-9, 9); q2 = nzrand(-9, 9); tries++; }
    while ((a * q2 + b * q1 === 0) && tries < 50);
    a2 = a * b; bx = a * q2 + b * q1; c = q1 * q2;
    disp = `${bin(a, q1)}${bin(b, q2)}`;
    expandNote = `FOIL: ${a}x·${b}x = ${a2}x², the outer + inner terms give ${sgnNum(bx)}x, and ${aNum(q1)}·${aNum(q2)} = ${aNum(c)}.`;
  } else if (level === 3) {
    if (Math.random() < 0.5) {
      const b = nzrand(-9, 9);
      a2 = 1; bx = 2 * b; c = b * b;
      disp = `${bin(1, b)}²`;
      expandNote = `Perfect square (A + B)² = A² + 2AB + B²: x² + 2·(${aNum(b)})·x + (${aNum(b)})² = x² ${bx < 0 ? '− ' + Math.abs(bx) : '+ ' + bx}x + ${c}.`;
    } else {
      const a = rr(2, 5), b = nzrand(-9, 9);
      a2 = a * a; bx = 2 * a * b; c = b * b;
      disp = `${bin(a, b)}²`;
      expandNote = `Perfect square (A + B)² = A² + 2AB + B²: (${a}x)² + 2·${a}x·(${aNum(b)}) + (${aNum(b)})² = ${a2}x² ${bx < 0 ? '− ' + Math.abs(bx) : '+ ' + bx}x + ${c}.`;
    }
  } else {
    // L4 — coefficient (possibly negative) in front of the brackets.
    const k = nz((Math.random() < 0.5 ? -1 : 1) * rr(2, 5));
    let ia2, ibx, ic, inner;
    const roll = Math.random();
    if (roll < 0.4) {                       // k(x ± b)(x ± d)
      let b, d; do { b = nzrand(-6, 6); d = nzrand(-6, 6); } while (b + d === 0);
      ia2 = 1; ibx = b + d; ic = b * d; inner = `${bin(1, b)}${bin(1, d)}`;
    } else if (roll < 0.7) {                // k(x ± b)²
      const b = nzrand(-6, 6); ia2 = 1; ibx = 2 * b; ic = b * b; inner = `${bin(1, b)}²`;
    } else {                                // k(ax ± b)(cx ± d)
      let a, cc, b, d, tries = 0;
      do { a = rr(2, 3); cc = rr(2, 3); b = nzrand(-6, 6); d = nzrand(-6, 6); tries++; }
      while ((a * d + cc * b === 0) && tries < 50);
      ia2 = a * cc; ibx = a * d + cc * b; ic = b * d; inner = `${bin(a, b)}${bin(cc, d)}`;
    }
    a2 = k * ia2; bx = k * ibx; c = k * ic;
    disp = `${aNum(k)}${inner}`;
    expandNote = `Expand the brackets to ${algAnswerStr([{coeff:ia2,varLabel:'x²'},{coeff:ibx,varLabel:'x'},{coeff:ic,varLabel:''}])}, then multiply every term by ${aNum(k)}.`;
  }

  const slots = [
    { coeff: a2, varLabel: 'x²', askPower: false },
    { coeff: bx, varLabel: 'x',  askPower: false },
    { coeff: c,  varLabel: '',   askPower: false },
  ];
  qData.alg = { slots };
  qData.workSteps = `${expandNote}<br>Answer: <b>${algAnswerStr(slots)}</b>.`;
  el.innerHTML = disp;
}

/* ─── Factorise: Highest Common Factor (factor mode, monoBracket layout) ───
   Answer = HCF × ( polynomial ). The student types the HCF in box0 and the
   remaining polynomial in box1. Marking requires box0 to equal the FULL HCF and
   the product to equal the original expression. */
function genAlgFactorHCF(el) {
  el.style.fontSize = '2.0rem';
  qData.factorLayout = 'monoBracket';
  qData.factorKind = 'hcf';
  qData.factorVars = ['x'];
  qData.factorAllowPow = (level === 3);
  let hcf, target, ansHcfTxt, ansInnerTxt;

  if (level === 1) {
    // Number HCF, two terms: k(ax ± b), gcd(a,|b|)=1 so k is the FULL HCF.
    const k = rr(2, 9); let a, b;
    do { a = rr(1, 4); b = nzrand(-9, 9); } while (gcd(a, Math.abs(b)) !== 1);
    hcf = { '': k };
    target = multiplyPoly({ '': k }, { 'x': a, '': b });
    ansHcfTxt = `${k}`;
    ansInnerTxt = `${a === 1 ? '' : a}x ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b}`;
    qData.factorAnsHtml = `${k}(${a === 1 ? '' : a}${aVar('x')} ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b})`;
  } else if (level === 2) {
    // kx(ax ± b):  ka x² + kb x, HCF = kx
    const k = rr(2, 6); let a, b;
    do { a = rr(2, 5); b = nzrand(-9, 9); } while (gcd(a, Math.abs(b)) !== 1);
    hcf = { 'x': k };
    target = multiplyPoly({ 'x': k }, { 'x': a, '': b });
    ansHcfTxt = `${k}x`;
    ansInnerTxt = `${a}x ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b}`;
    qData.factorAnsHtml = `${k}${aVar('x')}(${a}${aVar('x')} ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b})`;
  } else {
    // k(ax² ± bx ± c):  three terms, HCF = k (a number), inner is a quadratic
    const k = rr(2, 6); let a, b, c;
    do { a = rr(2, 4); b = nzrand(-6, 6); c = nzrand(-9, 9); }
    while (gcd(gcd(a, Math.abs(b)), Math.abs(c)) !== 1 || b === 0 || c === 0);
    hcf = { '': k };
    target = multiplyPoly({ '': k }, { 'x^2': a, 'x': b, '': c });
    ansHcfTxt = `${k}`;
    ansInnerTxt = `${a}x² ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b}x ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c}`;
    qData.factorAnsHtml = `${k}(${a}${aPow('x', 2)} ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b}${aVar('x')} ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c})`;
  }
  qData.hcf = hcf;
  qData.factorTarget = target;
  qData.factorB0 = ansHcfTxt;
  qData.factorB1 = ansInnerTxt;
  qData.factorAnsText = `${ansHcfTxt}(${ansInnerTxt})`;
  el.innerHTML = `<div style="${A_LBL}">Factorise (take out the HCF)</div>${polyHtml(target)}`;
  qData.workSteps = `Find the highest common factor of every term: <b>${ansHcfTxt}</b>.<br>`
    + `Divide each term by it and write the result inside the bracket.<br>Answer: <b>${qData.factorAnsHtml}</b>.`;
}

/* ─── Factorise by Grouping (factor mode, twoBrackets layout) ───
   Answer = ( … )( … ), two general binomials. Marking expands both boxes and
   compares to the original, accepting ANY equivalent factorisation. Both boxes
   must be non-constant (rules out the "(whole)(1)" non-answer). */
function genAlgFactorGroup(el) {
  el.style.fontSize = '1.9rem';
  qData.factorLayout = 'twoBrackets';
  qData.factorKind = 'group';
  qData.factorAllowPow = true;

  if (level === 1) {
    // Common bracket visible:  a(x ± k) + b·x(x ± k)  →  (x ± k)(b x + a)
    const k = nzrand(-6, 6); let a, b;
    do { a = rr(2, 6); b = rr(2, 5); } while (gcd(a, b) !== 1);   // keep (bx+a) primitive
    qData.factorVars = ['x'];
    const f1 = { 'x': 1, '': k }, f2 = { 'x': b, '': a };
    qData.factorTarget = multiplyPoly(f1, f2);
    const br = `(${aVar('x')} ${k < 0 ? '− ' + Math.abs(k) : '+ ' + k})`;
    el.innerHTML = `<div style="${A_LBL}">Factorise</div>${a}${br} + ${b}${aVar('x')}${br}`;
    qData.factorAnsText = `(x ${k < 0 ? '− ' + Math.abs(k) : '+ ' + k})(${b}x + ${a})`;
    qData.factorB0 = `x ${k < 0 ? '- ' + Math.abs(k) : '+ ' + k}`;
    qData.factorB1 = `${b}x + ${a}`;
    qData.factorAnsHtml = `${br}(${b}${aVar('x')} + ${a})`;
    qData.workSteps = `The bracket ${br} is common to both parts.<br>Take it out: ${br}(${b}${aVar('x')} + ${a}).<br>Answer: <b>${qData.factorAnsHtml}</b>.`;
  } else if (level === 2) {
    // Two-variable grouping:  (a v1 ± b)(c v2 ± d)  →  ac·v1v2 + ad·v1 + bc·v2 + bd
    const [v1, v2] = [['p', 'q'], ['a', 'b'], ['x', 'y'], ['m', 'n']][ri(4)];
    let a, c, b, d;
    do { a = rr(2, 4); c = rr(2, 4); b = nzrand(-5, 5); d = nzrand(-5, 5); }
    while (gcd(a, Math.abs(b)) !== 1 || gcd(c, Math.abs(d)) !== 1);   // primitive brackets
    qData.factorVars = [v1, v2];
    const f1 = {}, f2 = {};
    f1[v1] = a; f1[''] = b; f2[v2] = c; f2[''] = d;
    qData.factorTarget = multiplyPoly(f1, f2);
    const t = qData.factorTarget;
    // Display in grouping order: (v1v2) (v1) (v2) (const). Leading term has no sign.
    const sigV1V2 = monoToSig({ [v1]: 1, [v2]: 1 });
    const lead = `${t[sigV1V2]}${v1}${v2}`;
    const disp = `${lead} ${termHtml(t[v1], v1)} ${termHtml(t[v2], v2)} ${termHtml(t[''], '')}`;
    el.innerHTML = `<div style="${A_LBL}">Factorise</div>${disp}`;
    qData.factorAnsText = `(${a}${v1} ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b})(${c}${v2} ${d < 0 ? '− ' + Math.abs(d) : '+ ' + d})`;
    qData.factorB0 = `${a}${v1} ${b < 0 ? '- ' + Math.abs(b) : '+ ' + b}`;
    qData.factorB1 = `${c}${v2} ${d < 0 ? '- ' + Math.abs(d) : '+ ' + d}`;
    qData.factorAnsHtml = qData.factorAnsText;
    qData.workSteps = `Group in pairs and factor each pair, then take out the common bracket.<br>Answer: <b>${qData.factorAnsText}</b>.`;
  } else {
    // Cubic grouping:  (x² ± b)(x ± c)  →  x³ ± c x² ± b x ± bc
    const b = nzrand(-7, 7), c = nzrand(-6, 6);
    qData.factorVars = ['x'];
    const f1 = { 'x^2': 1, '': b }, f2 = { 'x': 1, '': c };
    qData.factorTarget = multiplyPoly(f1, f2);
    const t = qData.factorTarget;
    const disp = `${aPow('x', 3)} ${termHtml(t['x^2'], 'x', false, 2)} ${termHtml(t['x'], 'x')} ${termHtml(t[''], '')}`;
    el.innerHTML = `<div style="${A_LBL}">Factorise</div>${disp}`;
    qData.factorAnsText = `(x² ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b})(x ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c})`;
    qData.factorB0 = `x2 ${b < 0 ? '- ' + Math.abs(b) : '+ ' + b}`;
    qData.factorB1 = `x ${c < 0 ? '- ' + Math.abs(c) : '+ ' + c}`;
    qData.factorAnsHtml = `(${aPow('x', 2)} ${b < 0 ? '− ' + Math.abs(b) : '+ ' + b})(${aVar('x')} ${c < 0 ? '− ' + Math.abs(c) : '+ ' + c})`;
    qData.workSteps = `Group the first two and last two terms, factor each pair, then take out the common bracket.<br>Answer: <b>${qData.factorAnsHtml}</b>.`;
  }
}

/* Render a single signed term "± k<var><pow>" for a question display (not the
   leading term — always shows its sign). pow defaults to 1; var '' = constant. */
function termHtml(coeff, varName, isProduct, pow) {
  if (!coeff) coeff = 0;
  const sign = coeff < 0 ? '−' : '+';
  const mag = Math.abs(coeff);
  let body;
  if (varName === '') body = String(mag);
  else if (isProduct) body = (mag === 1 ? '' : mag) + varName;     // e.g. "3pq"
  else body = (mag === 1 ? '' : mag) + (pow === 2 ? aPow(varName, 2) : aVar(varName));
  return `${sign} ${body}`;
}
/* Render a whole polynomial map as a question expression (descending-ish). */
function polyHtml(poly) {
  const order = ['x^2', 'x', ''];
  const parts = [];
  order.forEach(sig => {
    if (poly[sig]) {
      const coeff = poly[sig];
      if (parts.length === 0) {
        const mag = Math.abs(coeff);
        const body = sig === '' ? String(mag) : (mag === 1 ? '' : mag) + (sig === 'x^2' ? aPow('x', 2) : aVar('x'));
        parts.push((coeff < 0 ? '−' : '') + body);
      } else {
        parts.push(termHtml(coeff, sig === '' ? '' : 'x', false, sig === 'x^2' ? 2 : 1));
      }
    }
  });
  return parts.join(' ');
}

/* v25: read back what the student actually entered, as a display string, for the
   end-of-session review. Reads inputs before they're cleared. */
function readUserAnswer(mode) {
  const g = i => { const e = document.getElementById(i); return e ? e.value.trim() : ''; };
  try {
    if (mode === 'number') return g('ansInput') || '—';
    if (mode === 'fraction') {
      const w = id('stdAnsWrap');
      if (w && w.dataset.wholeFromFrac === 'true') return g('ansInput') || '—';
      return `${g('fracNum') || '?'}/${g('fracDen') || '?'}`;
    }
    if (mode === 'mixed') {
      if (qData.mixedMode === 'toImproper') return `${g('fracNum') || '?'}/${g('fracDen') || '?'}`;
      const w = g('mixedWhole');
      return `${w ? w + ' ' : ''}${g('mixedNum') || '?'}/${g('mixedDen') || '?'}`;
    }
    if (mode === 'index') {
      if ((qData.idxMode || 'expOnly') === 'expOnly') return `power ${g('idxExp') || '?'}`;
      const hasY = qData.ansExpY !== undefined && qData.ansExpY !== null;
      const v = qData.var1 || 'x';
      return `${g('idxCoeff') || '?'}${v}^${g('idxExpB') || '?'}${hasY ? ` y^${g('idxExpC') || '?'}` : ''}`;
    }
    if (mode === 'sci') return `${g('sciCoeff') || '?'} × 10^${g('sciExp') || '?'}`;
    if (mode === 'ratio') return `${g('ratioA') || '?'} : ${g('ratioB') || '?'}`;
    if (mode === 'algebra') {
      const slots = (qData.alg && qData.alg.slots) || [];
      const parts = slots.map((s, i) => {
        const c = g('algC' + i) || '?';
        const p = s.askPower ? '^' + (g('algP' + i) || '?') : '';
        return `${c}${s.varLabel || ''}${p}`;
      });
      return parts.length ? parts.join(' + ') : '—';
    }
    if (mode === 'algType' || mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored') return g('algTypeInput') || '—';
    if (mode === 'surd' || mode === 'ineq' || mode === 'decFrac' || mode === 'piExact') return g('ansInput') || '—';
    if (mode === 'choice') {
      if (qData.chosen == null) return '—';
      if (qData.choiceText) return qData.choiceText[qData.chosen] || '—';
      return TRIG_VALS[qData.chosen] ? TRIG_VALS[qData.chosen].t : '—';
    }
    if (mode === 'arrange') {
      const chosen = qData.arrangeChosen || [];
      if (!chosen.length) return '—';
      return chosen.map(function(code){ return (qData.arrangeText && qData.arrangeText[code]) || '?'; }).join(' , ');
    }
    if (mode === 'factor') {
      const x0 = g('factorBox0') || '?', x1 = g('factorBox1') || '?';
      return (qData.factorLayout === 'monoBracket') ? `${x0}(${x1})` : `(${x0})(${x1})`;
    }
    if (mode === 'plToggle') {
      const a = g('ansInput') || '?';
      return a + (qData.plMode === 'pct' ? '%' : '') + (qData.plChosen ? ' ' + qData.plChosen : '');
    }
    if (mode === 'pctTable' || mode === 'gridFill') {
      return (qData._boxPts != null) ? (qData._boxPts + '/' + qData._boxTot + ' boxes') : '—';
    }
    if (mode === 'gapFill') {
      const n = (qData.gapAns || []).length;
      const parts = [];
      for (let i = 0; i < n; i++) parts.push(g('gap' + i) || '?');
      return parts.length ? parts.join(', ') : '—';
    }
    if (mode === 'plotPts') {
      const chosen = qData.plotChosen || [];
      if (!chosen.length) return 'nothing plotted';
      return chosen.map(function(p){ return '(' + sgnNum(p[0]) + ', ' + sgnNum(p[1]) + ')'; }).join(' ');
    }
    if (mode === 'multiSel') {
      const chosen = qData.msChosen || [];
      if (!chosen.length) return 'nothing ticked';
      const lbl = {};
      (qData.msOptions || []).forEach(function(o){ lbl[o.code] = o.label; });
      return chosen.map(function(c){ return lbl[c] || c; }).join(', ');
    }
  } catch (e) {}
  return '—';
}

function checkAns() {
  if (mixQueue && mixQueue.length) {
    const s0 = skill, l0 = level, sc0 = score, at0 = attempts;
    checkAnsCore();
    if (attempts > at0) mixTally(s0, l0, score > sc0);
    return;
  }
  checkAnsCore();
}
function checkAnsCore() {
  const mode = getInputMode();
  let correct = false;
  let feedbackStr = '';

  attempts++;

  if (mode === 'number') {
    const raw = id('ansInput').value.trim();
    // Reject empty / incomplete entries without counting as attempt
    if (raw === '' || raw === '-' || raw === '.') { attempts--; id('ansInput').focus(); return; }
    // Always parseFloat — safe for integers (parseFloat('7') === 7) and decimals
    const val = parseFloat(raw);
    if (isNaN(val)) { attempts--; id('ansInput').focus(); return; }
    // Tolerance for decimal floating-point (e.g. 0.1+0.2 = 0.30000000001).
    // Recurring-value conversions set qData.ansTol (e.g. ±0.2 on a %, ±0.01 on a
    // decimal) so a sensibly rounded answer like 33.3% or 0.33 is accepted (v75).
    const tol = (qData.ansTol != null) ? qData.ansTol : 0.0001;
    correct = Math.abs(val - qData.ans) <= tol;
    if (!correct) feedbackStr = `Answer: ${qData.ansDisplay != null ? qData.ansDisplay : qData.ans}`;
    /* v102: a 2 d.p. circle answer worked with 3.14 instead of the π key gets its
       own line (Laura: correct with π only). Only set by the measurement levels. */
    if (!correct && qData.pi314 != null && Math.abs(val - qData.pi314) < 0.0051)
      feedbackStr = `That is the answer using 3.14. Use the π key instead. Answer: ${qData.ansDisplay != null ? qData.ansDisplay : qData.ans}`;
    id('ansInput').classList.remove('ok','bad');
    id('ansInput').classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'piExact') {
    // v102: exact circle answers, kπ or a + kπ in either order. A decimal is
    // wrong; if it is the right SIZE, say so, the way probability says "now
    // simplify". Empty / unparseable entries don't count as an attempt.
    const raw = id('ansInput').value.trim();
    const p = piParse(raw);
    if (p === null || p.invalid) { attempts--; id('ansInput').focus(); return; }
    if (p.plain) {
      correct = false;
      const near = Math.abs(p.v - qData.piDec) <= Math.max(0.011, 0.003 * Math.abs(qData.piDec));
      feedbackStr = near ? `Right size, now give it exactly: ${qData.ansDisplay}` : `Answer: ${qData.ansDisplay}`;
    } else {
      correct = Math.abs(p.a - qData.piAns.a) < 1e-9 && Math.abs(p.k - qData.piAns.k) < 1e-9;
      if (!correct) feedbackStr = `Answer: ${qData.ansDisplay}`;
    }
    id('ansInput').classList.remove('ok','bad');
    id('ansInput').classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'surd') {
    // Exact-value entry (Pythagoras). Accept any equivalent exact form via
    // canonicalisation; a decimal is marked wrong (with the exact value shown);
    // empty / unparseable entries don't count as an attempt.
    const raw = id('ansInput').value.trim();
    const parsed = surdParse(raw);
    if (parsed === null || (parsed.invalid === 'form')) { attempts--; id('ansInput').focus(); return; }
    if (parsed.invalid === 'decimal') {
      correct = false;
      feedbackStr = `Give the exact value: ${qData.ansDisplay}`;
    } else {
      correct = (parsed.c === qData.ansSurd.c && parsed.r === qData.ansSurd.r);
      if (!correct) feedbackStr = `Answer: ${qData.ansDisplay}`;
    }
    id('ansInput').classList.remove('ok','bad');
    id('ansInput').classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'ineq') {
    // Inequality entry (e.g. x > 3/2). Accept either orientation and any
    // equivalent value; incomplete / unparseable entries don't count as an
    // attempt. The inequality SIGN must match (including after any flip).
    const raw = id('ansInput').value.trim();
    const p = ineqParse(raw);
    if (p === null || p.invalid === 'form') { attempts--; id('ansInput').focus(); return; }
    let valOK;
    if (p.isDecimal) valOK = Math.abs(p.dec - qData.ansNum / qData.ansDen) < 1e-9;
    else             valOK = (p.num * qData.ansDen === qData.ansNum * p.den);
    correct = (p.op === qData.ansOp) && valOK;
    if (!correct) feedbackStr = `Answer: ${qData.ansDisplay}`;
    id('ansInput').classList.remove('ok','bad');
    id('ansInput').classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'fraction') {
    // Whole-number answer — student used the standard number box
    if (id('stdAnsWrap').dataset.wholeFromFrac === 'true') {
      const val = parseFloat(id('ansInput').value.trim());
      correct = !isNaN(val) && Math.abs(val - qData.ansNum) < 0.0001; // ansDen is 1
      if (!correct) feedbackStr = isEquationSkill()
        ? `Answer: ${qData.solveVar} = ${aNum(qData.ansNum)}`
        : `Answer: ${qData.ansNum}`;
      id('ansInput').classList.remove('ok','bad');
      id('ansInput').classList.add(correct ? 'ok' : 'bad');
    } else {

    const un = parseInt(id('fracNum').value, 10);
    const ud = parseInt(id('fracDen').value, 10);
    if (isNaN(un) || isNaN(ud) || ud === 0) { attempts--; id('fracDen').focus(); return; }

    if (isEquationSkill()) {
      // Solution must equal the answer (sign placement tolerant) AND be in
      // lowest terms — so −7/4 and 7/−4 both pass, but 14/8 is rejected.
      const studentIsSimplified = gcd(Math.abs(un), Math.abs(ud)) === 1;
      const equalValue = un * qData.ansDen === qData.ansNum * ud;
      correct = studentIsSimplified && equalValue;
      if (!correct) feedbackStr = `Answer: ${qData.solveVar} = ${aNum(qData.ansNum)}/${qData.ansDen}`;
    } else if (skill === 'fracSimplify') {
      // Must be FULLY simplified — exact match only (simplify the student input
      // and check it equals the stored fully-simplified answer AND that the
      // student didn't just re-enter the original unsimplified fraction)
      const [sn, sd] = simplify(un, ud);
      const studentAlreadySimplified = gcd(Math.abs(un), Math.abs(ud)) === 1;
      correct = studentAlreadySimplified && sn === qData.ansNum && sd === qData.ansDen;
      if (!correct) {
        feedbackStr = qData.isAlgebraic
          ? `Simplified: ${qData.ansNum}x / ${qData.ansDen}`
          : `Simplified: ${qData.ansNum}/${qData.ansDen}`;
      }
    } else if (skill === 'decPlaceValue') {
      // v70 (Laura): place-value L2 — accept BOTH the place-value fraction (8/100) AND any
      // simplified / equivalent form (2/25). Any fraction equal in value to the digit-over-
      // place answer is correct.
      correct = (un * qData.ansDen === qData.ansNum * ud);
      if (!correct) feedbackStr = `Answer: ${qData.ansNum}/${qData.ansDen}`;
    } else if (qData.probMark) {
      /* v101 — probability. The rule TIGHTENS as the ladder climbs (Laura, 1 Sep):
         PROB_LENIENT levels accept any equivalent fraction, everything above them
         needs simplest form. When the value is right but not simplified the miss
         review says SO — otherwise the tightening reads as the app changing its
         mind about what a correct probability is. */
      const equalValue = (un * qData.ansDen === qData.ansNum * ud);
      const studentIsSimplified = gcd(Math.abs(un), Math.abs(ud)) === 1;
      if (qData.probAnyEquiv) {
        correct = equalValue;
        if (!correct) feedbackStr = `Answer: ${qData.ansNum}/${qData.ansDen}`;
      } else {
        correct = equalValue && studentIsSimplified;
        if (!correct) feedbackStr = equalValue
          ? `Right probability — now simplify it: ${qData.ansNum}/${qData.ansDen}`
          : `Answer: ${qData.ansNum}/${qData.ansDen}`;
      }
    } else {
      // Add/subtract, multiply, divide — answer MUST be fully simplified.
      // Student input must have no common factors (gcd == 1) AND equal the stored answer.
      const studentIsSimplified = gcd(Math.abs(un), Math.abs(ud)) === 1;
      const [sn, sd] = simplify(un, ud);
      correct = studentIsSimplified && sn === qData.ansNum && sd === qData.ansDen;
      if (!correct) {
        feedbackStr = `Simplified answer: ${qData.ansNum}/${qData.ansDen}`;
      }
    }
    id('fracAnsWrap').classList.remove('ok','bad');
    id('fracAnsWrap').classList.add(correct ? 'ok' : 'bad');
    } // end non-whole branch
  }
  else if (mode === 'mixed') {
    if (qData.mixedMode === 'toImproper') {
      // They used fracAnsWrap
      const un = parseInt(id('fracNum').value, 10);
      const ud = parseInt(id('fracDen').value, 10);
      if (isNaN(un) || isNaN(ud) || ud === 0) { attempts--; id('fracDen').focus(); return; }
      // Accept any equivalent fraction (cross-multiply)
      correct = un * qData.ansDen === qData.ansNum * ud;
      if (!correct) feedbackStr = `Answer: ${qData.ansNum}/${qData.ansDen}`;
      id('fracAnsWrap').classList.remove('ok','bad');
      id('fracAnsWrap').classList.add(correct ? 'ok' : 'bad');
    } else {
      // toMixed → they used mixedAnsWrap
      const w = parseInt(id('mixedWhole').value, 10) || 0;
      const un = parseInt(id('mixedNum').value, 10);
      const ud = parseInt(id('mixedDen').value, 10);
      if (isNaN(un) || isNaN(ud) || ud === 0) { attempts--; id('mixedDen').focus(); return; }
      // The fractional part must be in lowest terms (e.g. 5 1/2, not 5 2/4).
      const fracSimplified = gcd(Math.abs(un), Math.abs(ud)) === 1;
      correct = w === qData.ansWhole && fracSimplified && un === qData.ansNum && ud === qData.ansDen;
      if (!correct) feedbackStr = `Answer: ${qData.ansWhole} and ${qData.ansNum}/${qData.ansDen}`;
      id('mixedAnsWrap').classList.remove('ok','bad');
      id('mixedAnsWrap').classList.add(correct ? 'ok' : 'bad');
    }
  }

  else if (mode === 'index') {
    const m = qData.idxMode || 'expOnly';
    if (m === 'expOnly') {
      const userExp = parseInt(id('idxExp').value, 10);
      if (isNaN(userExp)) { attempts--; id('idxExp').focus(); return; }
      correct = userExp === qData.ansExp;
      if (!correct) feedbackStr = `Power should be: ${qData.ansExp}`;
      id('idxExp').classList.remove('ok','bad');
      id('idxExp').classList.add(correct ? 'ok' : 'bad');
    } else {
      const userCoeff = parseFloat(id('idxCoeff').value);
      const userExp   = parseInt(id('idxExpB').value, 10);
      if (isNaN(userCoeff)) { attempts--; id('idxCoeff').focus(); return; }
      if (isNaN(userExp))   { attempts--; id('idxExpB').focus(); return; }

      const hasY    = qData.ansExpY !== undefined && qData.ansExpY !== null;
      const coeffOk = Math.round(userCoeff * 100) === Math.round(qData.ansCoeff * 100);
      const expOk   = userExp === qData.ansExp;

      let expYOk = true;
      if (hasY) {
        const userExpY = parseInt(id('idxExpC').value, 10);
        if (isNaN(userExpY)) { attempts--; id('idxExpC').focus(); return; }
        expYOk = userExpY === qData.ansExpY;
      }

      correct = coeffOk && expOk && expYOk;

      const varPart = qData.var1 ? `${qData.var1}^${qData.ansExp}` : `^${qData.ansExp}`;
      const yPart   = hasY ? ` y^${qData.ansExpY}` : '';
      if (!correct) feedbackStr = `Answer: ${qData.ansCoeff}${varPart}${yPart}`;

      [['idxCoeff', coeffOk],['idxExpB', expOk]].forEach(([inp, ok]) => {
        const el = id(inp); el.classList.remove('ok','bad'); el.classList.add(correct ? 'ok' : ok ? 'ok' : 'bad');
      });
      if (hasY) {
        const el = id('idxExpC'); el.classList.remove('ok','bad'); el.classList.add(correct ? 'ok' : expYOk ? 'ok' : 'bad');
      }
    }
  }
  else if (mode === 'sci') {
    const userCoeff = parseFloat(id('sciCoeff').value);
    const userExp   = parseInt(id('sciExp').value, 10);
    if (isNaN(userCoeff)) { attempts--; id('sciCoeff').focus(); return; }
    if (isNaN(userExp))   { attempts--; id('sciExp').focus(); return; }
    const coeffOk = Math.round(userCoeff * 100) === Math.round(qData.sciCoeffAns * 100);
    const expOk   = userExp === qData.sciExpAns;
    correct = coeffOk && expOk;
    if (!correct) feedbackStr = `Answer: ${qData.sciCoeffAns} × 10^${qData.sciExpAns}`;
    [['sciCoeff', coeffOk],['sciExp', expOk]].forEach(([inp, ok]) => {
      const el = id(inp); el.classList.remove('ok','bad'); el.classList.add(correct ? 'ok' : ok ? 'ok' : 'bad');
    });
  }
  else if (mode === 'ratio') {
    // Two-part ratio answer. Must be FULLY simplified (gcd == 1) AND match stored ratio.
    const a = parseInt(id('ratioA').value, 10);
    const b = parseInt(id('ratioB').value, 10);
    if (isNaN(a) || isNaN(b) || a < 0 || b < 0) { attempts--; id('ratioA').focus(); return; }
    if (a === 0 && b === 0) { attempts--; id('ratioA').focus(); return; }
    const studentSimplified = gcd(a, b) === 1;
    correct = studentSimplified && a === qData.ansA && b === qData.ansB;
    if (!correct) feedbackStr = `Simplified: ${qData.ansA} : ${qData.ansB}`;
    id('ratioAnsWrap').classList.remove('ok','bad');
    id('ratioAnsWrap').classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'algebra') {
    const slots = (qData.alg && qData.alg.slots) || [];
    let allOk = true;
    for (let i = 0; i < slots.length; i++) {
      const s  = slots[i];
      const ci = id('algC' + i);
      const uc = parseInt(ci.value, 10);
      if (isNaN(uc)) { attempts--; ci.focus(); return; }
      let slotOk = (uc === s.coeff);
      let pi = null;
      if (s.askPower) {
        pi = id('algP' + i);
        const up = parseInt(pi.value, 10);
        if (isNaN(up)) { attempts--; pi.focus(); return; }
        slotOk = slotOk && (up === s.power);
      }
      ci.classList.remove('ok','bad'); ci.classList.add(slotOk ? 'ok' : 'bad');
      if (pi) { pi.classList.remove('ok','bad'); pi.classList.add(slotOk ? 'ok' : 'bad'); }
      if (!slotOk) allOk = false;
    }
    correct = allOk;
    if (!correct) feedbackStr = `Answer: ${algAnswerStr(slots)}`;
  }
  else if (mode === 'algType') {
    const inp = id('algTypeInput');
    const raw = inp.value.trim();
    if (raw === '') { attempts--; inp.focus(); return; }
    const slots = (qData.alg && qData.alg.slots) || [];
    const got = parseLinearExpr(raw);
    correct = got !== null && algMapsEqual(got, slotsToMap(slots));
    if (!correct) feedbackStr = `Answer: ${algAnswerStr(slots)}`;
    inp.classList.remove('ok','bad');
    inp.classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'algProd') {
    const inp = id('algTypeInput');
    const raw = inp.value.trim();
    // Don't burn an attempt on an empty / lone-sign entry
    if (raw === '' || raw === '-' || raw === '−') { attempts--; inp.focus(); return; }
    const got = parseAlgProduct(raw);
    correct = prodEqual(got, qData.prodAns);
    if (!correct) feedbackStr = `Answer: ${prodAnsStr(qData.prodAns)}`;
    inp.classList.remove('ok','bad');
    inp.classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'algPoly') {
    // Typed expanded answer (e.g. x² + 5x + 6). Marked order-insensitively
    // against the answer slots the generator already built.
    const inp = id('algTypeInput');
    const raw = inp.value.trim();
    if (raw === '' || raw === '-' || raw === '−') { attempts--; inp.focus(); return; }
    const slots = (qData.alg && qData.alg.slots) || [];
    const got = parsePoly(raw);
    correct = got !== null && polyEqual(got, slotsToPolySig(slots));
    if (!correct) feedbackStr = `Answer: ${algAnswerStr(slots)}`;
    inp.classList.remove('ok','bad');
    inp.classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'algFactored') {
    // Typed factorised answer, e.g. (x+2)(x+3), 8(x-5), (3p+1)(q+2).
    const inp = id('algTypeInput');
    const raw = inp.value.trim();
    if (raw === '' || raw === '-' || raw === '−') { attempts--; inp.focus(); return; }
    const parsed = parseFactored(raw);
    if (!parsed) {
      correct = false;
    } else {
      const kind = qData.factorKind || 'monic';
      const prodOk = polyEqual(parsed.product, qData.factorTarget);
      if (kind === 'hcf') {
        // The monomial pulled out the front must be the FULL HCF, and there must
        // be a genuine bracket left over.
        const mono = parsed.factors.filter(f => Object.keys(f).length === 1);
        const multi = parsed.factors.filter(f => Object.keys(f).length > 1);
        let outFactor = { '': 1 };
        mono.forEach(f => { outFactor = multiplyPoly(outFactor, f); });
        correct = prodOk && multi.length >= 1 && polyEqual(outFactor, qData.hcf);
      } else {
        // monic / group: must be broken into ≥2 genuine factors (not left flat).
        correct = prodOk && parsed.factors.length >= 2 && parsed.factors.every(f => polyHasVar(f));
      }
    }
    if (!correct) feedbackStr = `Answer: ${qData.factorAnsText}`;
    inp.classList.remove('ok','bad');
    inp.classList.add(correct ? 'ok' : 'bad');
  }
  else if (mode === 'choice') {
    // The tapped option was stored in qData.chosen by chooseTrig().
    if (qData.chosen == null) { attempts--; return; }
    correct = qData.chosen === qData.choiceAns;
    if (!correct) {
      const t = qData.choiceText ? qData.choiceText[qData.choiceAns]
              : (TRIG_VALS[qData.choiceAns] ? TRIG_VALS[qData.choiceAns].t : '?');
      feedbackStr = `Answer: ${t}`;
    }
    document.querySelectorAll('#choiceGrid .choice-btn').forEach(b => {
      if (b.dataset.code === qData.chosen) b.classList.add(correct ? 'ok' : 'bad');
      else if (!correct && b.dataset.code === qData.choiceAns) b.classList.add('ok');
    });
  }
  else if (mode === 'arrange') {
    // v71: the tapped sequence in qData.arrangeChosen must match the required order.
    const tiles = qData.arrangeTiles || [];
    const chosen = qData.arrangeChosen || [];
    if (chosen.length !== tiles.length) { attempts--; return; }
    const dir = qData.arrangeDir;
    const valOf = function(code){ const t = tiles.find(function(x){ return x.code === code; }); return t ? t.val : NaN; };
    const chosenVals = chosen.map(valOf);
    const expected = tiles.map(function(t){ return t.val; }).slice().sort(function(a,b){ return dir === 'asc' ? a - b : b - a; });
    correct = chosenVals.every(function(v, i){ return Math.abs(v - expected[i]) < 1e-9; });
    if (!correct) feedbackStr = 'Answer: ' + qData.arrangeAns.map(function(code){ return qData.arrangeText[code]; }).join(' , ');
    document.querySelectorAll('#arrangeAnswer .arrange-tile').forEach(function(b) {
      const pos = chosen.indexOf(b.dataset.code);
      const good = pos >= 0 && Math.abs(valOf(b.dataset.code) - expected[pos]) < 1e-9;
      b.classList.add(good ? 'ok' : 'bad');
      b.disabled = true;
    });
    document.querySelectorAll('#arrangePool .arrange-tile').forEach(function(b){ b.disabled = true; });
    const cb = id('arrangeCheckBtn'); if (cb) cb.disabled = true;
    const clb = id('arrangeClearBtn'); if (clb) clb.disabled = true;
  }
  else if (mode === 'factor') {
    const b0 = id('factorBox0'), b1 = id('factorBox1');
    const r0 = b0.value.trim(), r1 = b1.value.trim();
    // Don't burn an attempt on an empty box.
    if (r0 === '' || r1 === '') { attempts--; (r0 === '' ? b0 : b1).focus(); return; }
    const kind = qData.factorKind || 'monic';
    if (kind === 'monic') {
      // Each bracket is a linear binomial; product must equal the original.
      const m0 = parseLinearExpr(r0), m1 = parseLinearExpr(r1);
      correct = (m0 !== null && m1 !== null) && polyEqual(multiplyLinear(m0, m1), qData.factorTarget);
    } else if (kind === 'group') {
      // Two general binomials; both must be non-constant; product equals original.
      const m0 = parsePoly(r0), m1 = parsePoly(r1);
      correct = (m0 !== null && m1 !== null) && polyHasVar(m0) && polyHasVar(m1)
                && polyEqual(multiplyPoly(m0, m1), qData.factorTarget);
    } else { // 'hcf'
      // box0 must be the FULL HCF; box1 a non-constant polynomial; product equals original.
      const m0 = parsePoly(r0), m1 = parsePoly(r1);
      correct = (m0 !== null && m1 !== null) && polyEqual(m0, qData.hcf) && polyHasVar(m1)
                && polyEqual(multiplyPoly(m0, m1), qData.factorTarget);
    }
    if (!correct) feedbackStr = `Answer: ${qData.factorAnsText}`;
    [b0, b1].forEach(b => { b.classList.remove('ok','bad'); b.classList.add(correct ? 'ok' : 'bad'); });
  }
  else if (mode === 'pctTable') {
    // Fill-the-blanks Fraction/Decimal/Percentage table — 1 point per correct box.
    const rows = qData.pctRows || [];
    let filled = 0, boxTot = 0, boxPts = 0;
    rows.forEach(function(r, i){
      if (r.given !== 'pct') {
        boxTot++;
        const inp = id('pctP' + i), raw = inp.value.trim(); let ok = false;
        if (raw !== '') { filled++; const v = parseFloat(raw); const tol = r.recurring ? 0.2 : 0.01; ok = !isNaN(v) && Math.abs(v - r.pctExact) <= tol; }
        inp.classList.remove('ok','bad'); inp.classList.add(ok ? 'ok' : 'bad'); if (ok) boxPts++;
      }
      if (r.given !== 'dec') {
        boxTot++;
        const inp = id('pctD' + i), raw = inp.value.trim(); let ok = false;
        if (raw !== '') { filled++; const v = parseFloat(raw); const tol = r.recurring ? 0.01 : 0.001; ok = !isNaN(v) && Math.abs(v - r.decExact) <= tol; }
        inp.classList.remove('ok','bad'); inp.classList.add(ok ? 'ok' : 'bad'); if (ok) boxPts++;
      }
      if (r.given !== 'frac') {
        boxTot++;
        const nIn = id('pctFn' + i), dIn = id('pctFd' + i), rn = nIn.value.trim(), rd = dIn.value.trim(); let ok = false;
        if (rn !== '' && rd !== '') { filled++; const un = parseInt(rn, 10), ud = parseInt(rd, 10); ok = !isNaN(un) && !isNaN(ud) && ud !== 0 && (un * r.d === r.n * ud); }
        [nIn, dIn].forEach(function(x){ x.classList.remove('ok','bad'); x.classList.add(ok ? 'ok' : 'bad'); });
        if (ok) boxPts++;
      }
    });
    if (filled === 0) { attempts--; return; }        // accidental empty submit — no penalty
    qData._boxPts = boxPts; qData._boxTot = boxTot;
    correct = (boxPts === boxTot);
    if (!correct) feedbackStr = boxPts + ' / ' + boxTot + ' boxes correct';
    const cb = id('pctCheckBtn'); if (cb) cb.disabled = true;
  }
  else if (mode === 'gridFill') {
    // Complete the table — 1 point per correct box, like the FDP table.
    const want = qData.gridAns || [];
    let filled = 0, boxPts = 0;
    for (let i = 0; i < want.length; i++) {
      const b = id('grid' + i), raw = b ? b.value.trim() : '';
      let ok = false;
      if (raw !== '') { filled++; const v = parseFloat(raw); ok = !isNaN(v) && Math.abs(v - want[i]) <= 0.0001; }
      if (b) { b.classList.remove('ok','bad'); b.classList.add(ok ? 'ok' : 'bad'); }
      if (ok) boxPts++;
    }
    if (filled === 0) { attempts--; return; }        // accidental empty submit — no penalty
    qData._boxPts = boxPts; qData._boxTot = want.length;
    correct = (boxPts === want.length);
    if (!correct) feedbackStr = boxPts + ' / ' + want.length + ' boxes correct';
    const gridCb = id('gridCheckBtn'); if (gridCb) gridCb.disabled = true;
  }
  else if (mode === 'gapFill') {
    // Fill-the-gap rule / recurrence / coordinate / solution pair. Every box must be
    // right (all-or-nothing). qData.gapUnordered accepts the answers in either order.
    const n = (qData.gapAns || []).length;
    const boxes = [], vals = [];
    for (let i = 0; i < n; i++) {
      const b = id('gap' + i), raw = b.value.trim();
      if (raw === '' || raw === '-' || raw === '−' || raw === '.') { attempts--; b.focus(); return; }
      const v = parseFloat(raw.replace('−','-'));
      if (isNaN(v)) { attempts--; b.focus(); return; }
      boxes.push(b); vals.push(v);
    }
    const want = (qData.gapAns || []).slice();
    const near = function(a, b){ return Math.abs(a - b) <= (qData.gapTol != null ? qData.gapTol : 0.0001); };
    const okFlags = new Array(n).fill(false);
    if (qData.gapUnordered) {
      const pool = want.slice();
      vals.forEach(function(v, i){
        const j = pool.findIndex(function(x){ return x != null && near(v, x); });
        if (j >= 0) { pool[j] = null; okFlags[i] = true; }
      });
      correct = okFlags.every(Boolean);
    } else {
      for (let i = 0; i < n; i++) okFlags[i] = near(vals[i], want[i]);
      correct = okFlags.every(Boolean);
    }
    boxes.forEach(function(b, i){ b.classList.remove('ok','bad'); b.classList.add(okFlags[i] ? 'ok' : 'bad'); });
    if (!correct) feedbackStr = 'Answer: ' + (qData.gapAnsText || want.join(', '));
    const gcb = id('gapCheckBtn'); if (gcb) gcb.disabled = true;
  }
  else if (mode === 'multiSel') {
    // Tick every set that applies — all-or-nothing (every correct box ticked, none extra).
    const chosen = qData.msChosen || [];
    if (!chosen.length) { attempts--; id('feedback').style.color = 'var(--amber)'; setText('feedback', 'Tick at least one box'); return; }
    const want = qData.msAns || [];
    correct = chosen.length === want.length && want.every(function(c){ return chosen.indexOf(c) >= 0; });
    qData.msMarked = true;
    const lbl = {}; (qData.msOptions || []).forEach(function(o){ lbl[o.code] = o.label; });
    if (!correct) feedbackStr = 'Answer: ' + want.map(function(c){ return lbl[c] || c; }).join(', ');
    document.querySelectorAll('#msGrid .ms-btn').forEach(function(b){
      const picked = chosen.indexOf(b.dataset.code) >= 0;
      const should = want.indexOf(b.dataset.code) >= 0;
      b.classList.remove('sel');
      if (picked === should) { if (picked) b.classList.add('ok'); }
      else b.classList.add(picked ? 'bad' : 'ok');
      b.disabled = true;
    });
    const mcb = id('msCheckBtn'); if (mcb) mcb.disabled = true;
  }
  else if (mode === 'plotPts') {
    /* Plot the points — all-or-nothing: every required point plotted and none extra.
       Marked the same way as multiSel so it scores and bands like every other skill. */
    const chosen = qData.plotChosen || [];
    const want = qData.plotAns || [];
    if (!chosen.length) { attempts--; id('feedback').style.color = 'var(--amber)'; setText('feedback', 'Tap the grid to plot a point'); return; }
    const key = function(p){ return p[0] + ',' + p[1]; };
    if (qData.plotLine) {
      /* v97: any set of points that actually lies on the line is a correct
         sketch. Only the anchor points the named method needs are compulsory. */
      correct = plotLineCorrect();
      qData.plotMarked = true;
      if (!correct) {
        const missing = plotLineMissing();
        feedbackStr = missing.length
          ? 'Must include ' + missing.map(function(p){ return '(' + sgnNum(p[0]) + ', ' + sgnNum(p[1]) + ')'; }).join(' ')
          : 'Those points are not both on the line';
      }
      plotRender();
      const pcb0 = id('plotCheckBtn'); if (pcb0) pcb0.disabled = true;
    } else if (qData.plotOrdered) {
      // a path: the same corners in the wrong ORDER is a different journey
      correct = chosen.length === want.length
        && want.every(function(p, i){ return key(chosen[i]) === key(p); });
    } else {
      const wantKeys = want.map(key);
      correct = chosen.length === want.length && wantKeys.every(function(k){ return chosen.some(function(c){ return key(c) === k; }); });
    }
    if (!qData.plotLine) {
      qData.plotMarked = true;
      if (!correct) feedbackStr = 'Answer: ' + want.map(function(p){ return '(' + sgnNum(p[0]) + ', ' + sgnNum(p[1]) + ')'; }).join(' ');
      plotRender();            // re-draw showing right/wrong/missed
      const pcb = id('plotCheckBtn'); if (pcb) pcb.disabled = true;
    }
  }
  else if (mode === 'plToggle') {
    const raw = id('ansInput').value.trim();
    if (raw === '' || raw === '.') { attempts--; id('ansInput').focus(); return; }
    const val = parseFloat(raw);
    if (isNaN(val)) { attempts--; id('ansInput').focus(); return; }
    if (!qData.plChosen) { attempts--; id('feedback').style.color = 'var(--amber)'; setText('feedback', 'Tap Profit or Loss'); return; }
    const amtOk = Math.abs(val - qData.ans) <= 0.01;
    const dirOk = qData.plChosen === qData.plDir;
    correct = amtOk && dirOk;
    qData.plMarked = true;
    const shownAns = (qData.plMode === 'pct') ? (qData.ans + '% ' + qData.plDir) : ('$' + qData.ans + ' ' + qData.plDir);
    if (!correct) feedbackStr = 'Answer: ' + shownAns;
    id('ansInput').classList.remove('ok','bad'); id('ansInput').classList.add(amtOk ? 'ok' : 'bad');
    ['plProfitBtn','plLossBtn'].forEach(function(b){ id(b).classList.remove('sel'); });
    id(qData.plChosen === 'profit' ? 'plProfitBtn' : 'plLossBtn').classList.add(dirOk ? 'ok' : 'bad');
    if (!dirOk) id(qData.plDir === 'profit' ? 'plProfitBtn' : 'plLossBtn').classList.add('ok');
  }
  else if (mode === 'decFrac') {
    // Add & Subtract Fractions & Decimals — accept a decimal OR a fraction. A
    // recurring-decimal answer can ONLY be given as a fraction (a decimal is
    // rejected with a nudge). Empty / unparseable entries don't count as an attempt.
    const raw = id('ansInput').value.trim();
    const p = decFracParse(raw);
    if (p === null) { attempts--; id('ansInput').focus(); return; }
    if (p.kind === 'frac') {
      correct = (p.num * qData.ansDen === qData.ansNum * p.den);   // equal value, any equivalent fraction
      if (!correct) feedbackStr = `Answer: ${qData.ansDisplay}`;
    } else if (qData.terminates) {
      correct = Math.abs(p.dec - qData.ansNum / qData.ansDen) < 1e-9;
      if (!correct) feedbackStr = `Answer: ${qData.ansDisplay}`;
    } else {
      correct = false;
      feedbackStr = `This decimal doesn't stop — give your answer as a fraction: ${qData.ansDisplay}`;
    }
    id('ansInput').classList.remove('ok','bad');
    id('ansInput').classList.add(correct ? 'ok' : 'bad');
  }

  // Scoring — pctTable awards 1 point per correct box (attsThis boxes); all other
  // modes are one point for one question.
  let gained = correct ? 1 : 0;
  let attsThis = 1;
  if (mode === 'pctTable' || mode === 'gridFill') { gained = qData._boxPts || 0; attsThis = qData._boxTot || 1; }
  if (attsThis > 1) attempts += (attsThis - 1);
  score += gained;

  if (correct) {
    streak++;
    if (streak > bestStreak) bestStreak = streak;
    setText('feedback','');
    // Update streak pill
    setText('gStreak', streak);
    const sp = id('streakPill');
    sp.style.display = 'flex';
    sp.classList.remove('hot');
    void sp.offsetWidth; // force reflow for animation restart
    if (streak >= 3) sp.classList.add('hot');
  } else {
    streak = 0;
    setText('gStreak', '0');
    id('streakPill').classList.remove('hot');
    id('feedback').style.color = 'var(--red)';
    setText('feedback', '✕  ' + feedbackStr);
    // v25: record the miss for end-of-session review
    missed.push({
      q: id('qBox') ? id('qBox').innerHTML : '',
      you: readUserAnswer(mode),
      ans: feedbackStr.replace(/^[^:]*:\s*/, '').trim(),
      worked: qData.workSteps || METHOD_TIP[skill] || ''
    });
  }

  setText('gScore', score);
  // Refresh keypad display after check (value gets cleared by clearInputState)
  kbRefreshDisplay();
  const accPct = Math.round(score / attempts * 100);
  setText('accPct', accPct + '%');
  const fill = id('accFill');
  fill.style.width = accPct + '%';
  fill.style.background = accPct >= 80 ? 'var(--green)' : accPct >= 60 ? 'var(--amber)' : 'var(--red)';

  if (!correct && accPct < 70 && attempts >= 5) {
    id('feedback').style.color = 'var(--amber)';
    setText('feedback', `✕ ${feedbackStr} — slow down, accuracy first`);
  }

  tickCPM();

  // Pause before the next question: short when correct, longer when wrong so the
  // student actually reads the correct answer (v26).
  setTimeout(() => {
    if (!gameOver) { clearInputState(); nextQ(); }
  }, correct ? 420 : 1300);
}

function tickCPM() {
  if (!startTime) return;
  const m = (Date.now() - startTime) / 60000;
  setText('gCpm', m > 0.08 ? Math.round(score / m) : '–');
}

function endSession() {
  if (gameOver) return;
  gameOver = true;
  clearInterval(timer);
  ['ansInput','fracNum','fracDen','mixedWhole','mixedNum','mixedDen','idxCoeff','idxExp','sciCoeff','sciExp','ratioA','ratioB','algC0','algC1','algC2','algP0','algP1','algP2','algTypeInput'].forEach(i => {
    const el = document.getElementById(i);
    if (el) el.disabled = true;
  });

  const acc  = attempts > 0 ? score / attempts : 0;
  const mins = (Date.now() - startTime) / 60000;
  const cpm  = mins > 0 ? Math.round(score / mins) : 0;
  // Score = CPM × accuracy²  (clean number, same scale as CPM)
  const fluency = Math.round(cpm * acc * acc);

  pushTrend(skill, level, fluency);
  const trend = getTrend(skill, level);

  const oldPB = getPB(skill, level);
  // v43: did this scored session lift the stored PB into a higher animal band?
  sessionBandUp = (fluency > oldPB) &&
    (animalIndexFor(fluency, skill, level) > animalIndexFor(oldPB, skill, level));
  let pbResult = 'below';
  if (fluency > oldPB) { setPB(skill, level, fluency); pbResult = 'new'; }
  else if (fluency === oldPB && oldPB > 0) pbResult = 'equal';
  const newPB = getPB(skill, level);

  // Record in today's queue (both fluency and challenge — practice is unscored)
  if (sessionMode === 'fluency' || sessionMode === 'challenge') {
    recordSession(skill, level, fluency, score, Math.round(acc * 100), cpm, pbResult === 'new');
    // Dormant since v43: the fluent flag is no longer surfaced (replaced by the
    // animal band), but we keep setting it so the ff_fl_ key stays storage-safe.
    if (getLevelKind(skill, level) === 'recall') {
      const tgt = getFluencyTarget(skill, level);
      if (tgt && cpm >= tgt && acc >= FLUENT_ACC) setFluent(skill, level);
    }
  }

  // v27: stamp session history (last-played, accuracy, daily tally, streak)
  recordActivity(skill, level, Math.round(acc * 100), (Date.now() - startTime) / 1000);

  showResults(fluency, score, acc, cpm, pbResult, newPB, trend);
}

/* ═══════════════════════════════════════════════
   RESULTS
═══════════════════════════════════════════════ */
function showResults(fluency, correct, acc, cpm, pbResult, pb, trend) {
  show('s-results');
  const scoredTop = sessionMode === 'fluency' || sessionMode === 'challenge';
  const formula = sessionMode === 'fluency'
    ? 'Fluency Score = correct per minute × accuracy²'
    : sessionMode === 'challenge'
    ? 'Challenge Score = correct per minute × accuracy²'
    : 'Practice Score = correct answers × accuracy';

  setText('rCorrect', correct);
  setText('rAcc', Math.round(acc*100) + '%');
  setText('rCpm', cpm);
  setText('rScoreVal', fluency);
  setText('rSparkSkill', skillMeta ? skillMeta.name.replace(/&amp;/g,'&') + ' · L' + level : '');

  // v49: scored sessions LEAD with the band hero and move the score into a 4th
  // stat box; practice keeps the big score number + formula (no band applies).
  if (scoredTop) {
    id('rBandHero').style.display = 'block';
    id('rScore').style.display = 'none';
    id('rLabel').style.display = 'none';
    id('rScoreBox').style.display = '';
    id('rStats').classList.add('four');
    id('rFormula').style.display = 'block';
    setText('rFormula', formula);
  } else {
    id('rBandHero').style.display = 'none';
    id('rScore').style.display = 'block';
    id('rLabel').style.display = 'block';
    setText('rScore', fluency);
    setText('rLabel', formula);
    id('rScoreBox').style.display = 'none';
    id('rStats').classList.remove('four');
    id('rFormula').style.display = 'none';
  }

  const banner = id('rPbBanner');
  // v30: practice sessions are now queued for sharing too, so show the share
  // button on every results screen (fluency, challenge AND practice).
  const shareBtn = id('resultsShareBtn');
  if (shareBtn) shareBtn.style.display = 'block';

  if (pbResult === 'practice') {
    banner.className = 'pb-banner pb-below';
    banner.textContent = `Practice session complete — best streak: ${bestStreak}`;
  } else if (pbResult === 'new') {
    banner.className = 'pb-banner pb-new';
    banner.textContent = `🎉 New Personal Best! PB: ${pb}`;
  } else if (pbResult === 'equal') {
    banner.className = 'pb-banner pb-equal';
    banner.textContent = `⚡ Matched your personal best of ${pb}!`;
  } else {
    banner.className = 'pb-banner pb-below';
    banner.textContent = pb > 0 ? `Personal best: ${pb} — keep going!` : `First attempt — you've set a score to beat!`;
  }

  const spark = id('rSpark');
  spark.innerHTML = '';
  const sw = id('rSparkWrap');
  if (trend.length > 1) {
    sw.style.display = 'block';
    const mx = Math.max(...trend, 1);
    trend.forEach((v, i) => {
      const bar = document.createElement('div');
      bar.className = 'sl-bar' + (i === trend.length-1 ? ' latest' : '');
      bar.style.height = Math.max(6, v/mx*44) + 'px';
      const lbl = document.createElement('div');
      lbl.className = 'sl-val'; lbl.textContent = v;
      bar.appendChild(lbl); spark.appendChild(bar);
    });
  } else { sw.style.display = 'none'; }

  // ── Animal-band verdict (v43) ──
  // Scored sessions (Fluency/Challenge) show the animal earned from this
  // session's Fluency Score. Practice shows NO animal — recall keeps its
  // "try Fluency mode" nudge, method keeps its accuracy message.
  const kind = getLevelKind(skill, level);
  const scored = sessionMode === 'fluency' || sessionMode === 'challenge';
  const v = id('rVerdict');
  if (scored) {
    const accPctR = Math.round(acc * 100);
    const a = animalForScore(fluency, skill, level);
    const bi = animalIndexFor(fluency, skill, level);
    const atTop = a.key === 'cheetah';
    // v45: Fluent (recall skills only) = reaching Antelope (band index ≥ 3).
    const recallFluentNow = kind === 'recall' && bi >= FLUENT_BAND_INDEX;
    const fluentTag = recallFluentNow ? ' <span class="fluent-badge">🎯 Fluent</span>' : '';
    const newTag = sessionBandUp ? ' <span class="res-newband">⬆ New band!</span>' : '';

    // v49: the band is now the prominent hero (big coloured chip), with the
    // next-level target underneath. Folds the old single verdict line in here.
    id('rBandChip').innerHTML = animalChipHTML(a, 'res-band-chip') + fluentTag + newTag;
    let nextHtml;
    if (atTop) {
      nextHtml = `Top band — you've maxed this level! 🐆`;
    } else {
      const nb = nextBandInfo(fluency, skill, level);
      nextHtml = `Next: ${nb.next.emoji} <b>${nb.next.name}</b> at a score of <b>${nb.at}</b>`;
      // For recall skills, reaching Antelope is also where you become Fluent.
      if (kind === 'recall' && nb.next.key === 'antelope') nextHtml += ` — become Fluent 🎯`;
    }
    id('rBandNext').innerHTML = nextHtml;
    v.className = 'res-verdict';
    v.innerHTML = '';   // verdict text folded into the band hero above
  } else if (kind === 'recall') {
    const tgt = getFluencyTarget(skill, level);
    v.className = 'res-verdict';
    v.innerHTML = tgt ? `Practice run — try Fluency or Challenge to earn an animal band. 🐆` : '';
  } else {
    const a = Math.round(acc * 100);
    v.className = 'res-verdict method';
    if (a >= 90)      v.innerHTML = `🧠 Strong work — ${a}% correct. The method is sticking.`;
    else if (a >= 70) v.innerHTML = `🧠 ${a}% correct — check the misses below to push higher.`;
    else              v.innerHTML = `🧠 ${a}% correct — slow down and use “Show me how” below.`;
  }

  // ── v25: missed-question review ──
  const rw = id('reviewWrap');
  if (missed.length) {
    rw.style.display = 'block';
    setText('reviewHdr', `Review — ${missed.length} to fix`);
    id('reviewList').innerHTML = missed.map((m, i) => {
      const how = m.worked
        ? `<button class="rv-how" onclick="toggleHow(${i})">Show me how ▾</button>` +
          `<div class="rv-work" id="rvWork${i}" style="display:none">${m.worked}</div>`
        : '';
      return `<div class="rv-item"><div class="rv-q">${m.q}</div>` +
             `<div class="rv-ans"><span class="rv-you">✗ you: ${m.you}</span>` +
             `<span class="rv-correct">✓ answer: ${m.ans}</span></div>${how}</div>`;
    }).join('');
  } else {
    rw.style.display = 'none';
    id('reviewList').innerHTML = '';
  }
}

function toggleHow(i) {
  const w = id('rvWork' + i);
  if (!w) return;
  const open = w.style.display === 'none';
  w.style.display = open ? 'block' : 'none';
  const btn = w.previousElementSibling;
  if (btn && btn.classList.contains('rv-how')) btn.textContent = open ? 'Hide ▴' : 'Show me how ▾';
}

/* v26: dark mode */
function toggleTheme() {
  const dark = document.body.classList.toggle('dark');
  try { localStorage.setItem('ff_theme', dark ? 'dark' : 'light'); } catch (e) {}
  syncThemeButton();
}
function syncThemeButton() {
  const b = document.getElementById('themeToggleBtn');
  if (!b) return;
  const dark = document.body.classList.contains('dark');
  // v92: the header control is an icon button now, so the label lives in the
  // tooltip rather than beside the glyph.
  if (b.classList.contains('hh-icon')) {
    b.textContent = dark ? '\u2600\ufe0f' : '\ud83c\udf19';
    b.title = dark ? 'Switch to light mode' : 'Switch to dark mode';
  } else {
    b.textContent = dark ? '\u2600\ufe0f Light' : '\ud83c\udf19 Dark';
  }
}

function tryAgain() { prepGameScreen(); }

/* ═══════════════════════════════════════════════
   LEADERBOARD
═══════════════════════════════════════════════ */
function goLeaderboard() {
  show('s-lb'); lbPidx = pidx;
  renderLBTabs(); renderLB();
}
function renderLBTabs() {
  const tabs = id('lbTabs'); tabs.innerHTML = '';
  profiles.forEach((p, i) => {
    const t = document.createElement('button');
    t.className = 'lb-tab' + (i===lbPidx?' active':'');
    t.textContent = p.name;
    t.onclick = () => { lbPidx=i; renderLBTabs(); renderLB(); };
    tabs.appendChild(t);
  });
}

/* Sparkline for level selection card */
function buildLvlSpark(trend, pb) {
  if (!trend || trend.length === 0) return '';
  const mx = Math.max(pb, ...trend, 1);
  const bars = trend.map((v, i) => {
    const h = Math.max(4, Math.round(v / mx * 22));
    const isLast = i === trend.length - 1;
    const col = isLast ? 'var(--accent)' : 'rgba(67,56,202,0.25)';
    return `<span style="display:inline-block;width:12px;height:${h}px;background:${col};border-radius:2px 2px 0 0;vertical-align:bottom;margin-right:3px" title="Score: ${v}"></span>`;
  });
  return `<span style="display:inline-flex;align-items:flex-end;height:22px;gap:0;margin-top:4px">${bars.join('')}</span><span style="font-size:0.7rem;color:var(--muted);font-weight:700;margin-left:6px;vertical-align:bottom">recent scores</span>`;
}

function renderLB() {
  const div = id('lbContent'); div.innerHTML = '';
  const rows = [];
  Object.values(CATS).forEach(cat => cat.skills.forEach(s => [1,2,3,4].forEach(lv => {
    const pb = getPB(s.id, lv, lbPidx);
    if (pb > 0) {
      // Get trend for this profile — temporarily swap pidx
      const savedPidx = pidx;
      pidx = lbPidx;
      const trend = getTrend(s.id, lv).slice(-3); // last 3 scores
      pidx = savedPidx;
      rows.push({ id: s.id, name: s.name.replace(/&amp;/g,'&'), lv, pb, trend });
    }
  })));
  rows.sort((a,b) => b.pb - a.pb);
  if (!rows.length) {
    div.innerHTML = '<div class="lb-empty">No scores yet.<br>Complete a Challenge session to record your first score!</div>';
    return;
  }
  const tbl = document.createElement('table');
  tbl.className = 'lb-table';
  tbl.innerHTML = '<thead><tr><th>Skill</th><th>Lvl</th><th>Band</th><th>Last 3</th><th>Best</th></tr></thead>';
  const tbody = document.createElement('tbody');
  rows.forEach(r => {
    const tr = document.createElement('tr');
    const sparkHtml = buildLBSpark(r.trend, r.pb);
    // v45: highest animal band for this skill+level (from its PB), plus a Fluent
    // tick for recall skills that have reached Antelope+.
    const animalChip = animalChipHTML(animalForScore(r.pb, r.id, r.lv));
    const isRecall = getLevelKind(r.id, r.lv) === 'recall';
    const fluentTick = (isRecall && animalIndexFor(r.pb, r.id, r.lv) >= FLUENT_BAND_INDEX)
      ? ' <span class="fluent-badge">🎯</span>' : '';
    tr.innerHTML = `<td>${r.name}</td><td>L${r.lv}</td><td style="white-space:nowrap">${animalChip}${fluentTick}</td><td>${sparkHtml}</td><td>${r.pb}</td>`;
    tbody.appendChild(tr);
  });
  tbl.appendChild(tbody); div.appendChild(tbl);
}

/* Build a tiny inline sparkline for the leaderboard */
function buildLBSpark(trend, pb) {
  if (!trend || trend.length === 0) return '<span style="color:var(--border);font-size:0.75rem">–</span>';
  const mx = Math.max(pb, ...trend, 1);
  const bars = trend.map((v, i) => {
    const h = Math.max(4, Math.round(v / mx * 28));
    const isLast = i === trend.length - 1;
    const col = isLast ? 'var(--accent)' : 'var(--border)';
    return `<span style="display:inline-block;width:10px;height:${h}px;background:${col};border-radius:2px 2px 0 0;vertical-align:bottom;margin-right:2px" title="${v}"></span>`;
  });
  return `<span style="display:inline-flex;align-items:flex-end;height:28px;gap:0">${bars.join('')}</span>`;
}


/* ════════════════════════════════════════════
   NEW SKILL GENERATORS
════════════════════════════════════════════ */


/* Convert decimal to simplified fraction */
function toRat(dec) {
  // Use 1000 as denominator, then simplify
  const n = Math.round(dec * 1000), d = 1000;
  const g = gcd(Math.abs(n), d);
  return [n/g, d/g];
}

/* fracHTML helper (if not already accessible) */
function fracHTML(n, d, col) {
  const c = col ? `style="color:${col}"` : '';
  return `<div class="q-frac" ${c}><div class="fnum">${n}</div><div class="fline"></div><div class="fden">${d}</div></div>`;
}

/* ── DECIMAL GENERATORS ── */



/* ════════════════════════════════════════════
   INTEGER SQUARES & CUBES
════════════════════════════════════════════ */
function genIntSquareCube() {
  const el = id('qText');
  // Levels unchanged: L1 squares, L2 cubes, L3 mix. Each question randomly uses a
  // positive base (n²), a bracketed negative base ((−n)²), or a negative OUTSIDE
  // the bracket (−(n)²) — so students learn (−2)² = 4 but −(2)² = −4.
  const mx = [8, 6, 8][level - 1];
  const n  = rr(1, mx);
  const p  = (level === 1) ? 2 : (level === 2) ? 3 : (Math.random() < 0.5 ? 2 : 3);
  const pw = p === 2 ? '²' : '³';
  const np = Math.pow(n, p);                       // n^p (positive)
  const form = ['pos', 'negIn', 'negOut'][ri(3)];
  const expand = (base) => p === 2 ? `${base} × ${base}` : `${base} × ${base} × ${base}`;
  if (form === 'pos') {
    qData.ans = np;
    el.textContent = `${n}${pw}`;
    qData.workSteps = `${n}${pw} means ${expand(n)} = <b>${np}</b>.`;
  } else if (form === 'negIn') {
    // (−n)^p  →  + for even powers, − for odd
    qData.ans = (p % 2 === 0) ? np : -np;
    el.textContent = `(−${n})${pw}`;
    qData.workSteps = `The whole −${n} is raised to the power: ${expand('(−'+n+')')} = <b>${qData.ans}</b>. `
      + (p % 2 === 0 ? `An even power of a negative is positive.` : `An odd power of a negative stays negative.`);
  } else {
    // −(n)^p  →  always negative (the power applies before the leading minus)
    qData.ans = -np;
    el.textContent = `−(${n})${pw}`;
    qData.workSteps = `Do the power first, then the minus: ${n}${pw} = ${np}, so −(${n})${pw} = <b>${-np}</b>.`;
  }
}

/* ════════════════════════════════════════════
   ORDER OF OPERATIONS WITH INTEGERS
════════════════════════════════════════════ */
function genIntOrderOps() {
  const el = id('qText');
  el.style.fontSize = '1.8rem';
  let ans, txt, work, safety = 0;
  do {
    const a = rr(1, 8), b = rr(1, 6), c = rr(1, 6);
    const na = -a, nb = -b, nc = -c;
    if (level === 1) {
      const t = r(3);
      if (t === 1) { ans = na + b * c;  txt = `${na} + ${b} × ${c}`; work = `Do × first: ${na} + ${b} × ${c} = ${na} + ${b*c} = <b>${ans}</b>.`; }
      else if (t === 2) { ans = a * nb + c; txt = `${a} × (${nb}) + ${c}`; work = `Do × first: ${a} × (${nb}) = ${a*nb}, then ${a*nb} + ${c} = <b>${ans}</b>.`; }
      else { ans = a + b * nc; txt = `${a} + ${b} × (${nc})`; work = `Do × first: ${b} × (${nc}) = ${b*nc}, then ${a} + (${b*nc}) = <b>${ans}</b>.`; }
    } else if (level === 2) {
      const t = r(2);
      if (t === 1) { ans = (na + b) * c;  txt = `(${na} + ${b}) × ${c}`; work = `Brackets first: (${na} + ${b}) = ${na+b}, then ${na+b} × ${c} = <b>${ans}</b>.`; }
      else { ans = a * (nb + c); txt = `${a} × (${nb} + ${c})`; work = `Brackets first: (${nb} + ${c}) = ${nb+c}, then ${a} × (${nb+c}) = <b>${ans}</b>.`; }
    } else if (level === 3) {
      const t = r(3);
      if (t === 1) { ans = na + b * nc; txt = `${na} + ${b} × (${nc})`; work = `Do × first: ${b} × (${nc}) = ${b*nc}, then ${na} + (${b*nc}) = <b>${ans}</b>.`; }
      else if (t === 2) { ans = (na + b) * nc; txt = `(${na} + ${b}) × (${nc})`; work = `Brackets first: (${na} + ${b}) = ${na+b}, then ${na+b} × (${nc}) = <b>${ans}</b>.`; }
      else { ans = a * nb + c * na; txt = `${a} × (${nb}) + ${c} × (${na})`; work = `Do each × first: ${a} × (${nb}) = ${a*nb} and ${c} × (${na}) = ${c*na}, then ${a*nb} + (${c*na}) = <b>${ans}</b>.`; }
    } else {
      // L4: indices with negatives & brackets. (−a)² = a²; but −a² = −(a²).
      const t = r(3);
      if (t === 1) { ans = a * a + b * nc; txt = `(${na})² + ${b} × (${nc})`; work = `Powers & × first: (${na})² = ${a*a}, ${b} × (${nc}) = ${b*nc}, then ${a*a} + (${b*nc}) = <b>${ans}</b>.`; }
      else if (t === 2) { const s = na + b; ans = s * s - c; txt = `(${na} + ${b})² − ${c}`; work = `Brackets, then the power: (${na} + ${b}) = ${s}, (${s})² = ${s*s}, then ${s*s} − ${c} = <b>${ans}</b>.`; }
      else { ans = -(a * a) + b * c; txt = `−${a}² + ${b} × ${c}`; work = `Power before the minus: ${a}² = ${a*a} so −${a}² = ${-(a*a)}; ${b} × ${c} = ${b*c}; then ${-(a*a)} + ${b*c} = <b>${ans}</b>.`; }
    }
    safety++;
  } while (safety < 50 && (isNaN(ans) || !isFinite(ans)));
  qData.ans = ans;
  qData.workSteps = work;
  el.textContent = txt;
}

/* ════════════════════════════════════════════
   SIGNIFICANT FIGURES  (2 levels only)
════════════════════════════════════════════ */
function genSigFigs() {
  const el = id('qText');
  el.style.fontSize = '2rem';
  if (level === 1) {
    // Count sig figs — generate a variety of number forms
    const types = ['leadingZero','trailing','decimal','plain'];
    const t = types[ri(types.length)];
    let num, sfCount, display;
    if (t === 'leadingZero') {
      // e.g. 0.0043 → 2 sig figs
      const exp = rr(1, 4), sig = rr(1, 9);
      num = sig / Math.pow(10, exp + 1);
      sfCount = 1;
      display = num.toFixed(exp + 1).replace(/0+$/, '') || '0';
      sfCount = 1;
    } else if (t === 'trailing') {
      // e.g. 4700 → could be 2,3,4 — we use unambiguous cases
      const base = rr(1, 9), extra = rr(1, 3);
      num = base * Math.pow(10, extra);
      sfCount = 1; // we only count the non-zero leading digit for simplicity
      display = String(num);
      sfCount = String(base).replace(/0/g,'').length;
    } else if (t === 'decimal') {
      // e.g. 3.05 → 3 sig figs
      const a = rr(1, 9), b = rr(0, 9), c = rr(1, 9);
      display = `${a}.${b}${c}`;
      sfCount = b === 0 ? 2 : 3;
    } else {
      // plain integer
      const digits = rr(2, 4);
      const n = rr(Math.pow(10, digits-1), Math.pow(10, digits) - 1);
      display = String(n);
      sfCount = digits;
    }
    qData.ans = sfCount;
    el.textContent = `sig figs in ${display}`;
    const plural = sfCount === 1 ? 'significant figure' : 'significant figures';
    qData.workSteps = (t === 'leadingZero')
      ? `Leading zeros don't count — start at the first non-zero digit. So ${display} has <b>${sfCount}</b> ${plural}.`
      : (t === 'trailing')
      ? `Count the non-zero digits (the trailing zeros here just show size): ${display} has <b>${sfCount}</b> ${plural}.`
      : `Count every digit from the first non-zero one: ${display} has <b>${sfCount}</b> ${plural}.`;
  } else {
    // Level 2: Round to given sig figs
    // Generate a number and ask to round to 1, 2, or 3 s.f.
    const sf = rr(1, 3);
    const rawInt = rr(1000, 9999);
    const factor = Math.pow(10, 4 - sf);
    const rounded = Math.round(rawInt / factor) * factor;
    qData.ans = rounded;
    el.textContent = `${rawInt} to ${sf} s.f.`;
    el.style.fontSize = '1.7rem';
    const digits = String(rawInt);
    const nextDigit = digits[sf];
    qData.workSteps = `Keep the first ${sf} digit${sf>1?'s':''} of ${rawInt}. The next digit is ${nextDigit} (${Number(nextDigit) >= 5 ? '5 or more → round up' : 'less than 5 → round down'}), giving <b>${rounded}</b>.`;
  }
}

/* ════════════════════════════════════════════
   MIXED NUMBER ↔ IMPROPER FRACTION
════════════════════════════════════════════ */
function genMixedImpMix() {
  // L1: always mixed→improper; L2: always improper→mixed; L3: random
  const doToImproper = (level === 1) ? true : (level === 2) ? false : Math.random() < 0.5;
  qData.mixedMode = doToImproper ? 'toImproper' : 'toMixed';
  if (doToImproper) {
    genMixedToImp();
  } else {
    genImpToMixed();
  }
}

function genMixedToImp() {
  // Convert mixed number → improper fraction
  const denMax = [5, 12, 15][level - 1];
  const wholeMax = [5, 9, 15][level - 1];
  const den = rr(2, denMax);
  const whole = rr(1, wholeMax);
  // Keep the fractional part of the displayed mixed number in lowest terms so
  // the question never shows a sloppy form like "5 2/4", and so the resulting
  // improper fraction is already fully simplified (gcd(num,den)=1 implies
  // gcd(whole*den+num, den)=1). This stops a correct simplified improper
  // answer from being rejected in the fraction checker.
  let num = rr(1, den - 1);
  let guard = 0;
  while (gcd(num, den) !== 1 && guard++ < 50) num = rr(1, den - 1);
  const [impN, impD] = simplify(whole * den + num, den);
  qData.ansNum = impN;
  qData.ansDen = impD;
  qData.workSteps = `Multiply the whole by the bottom, then add the top: ${whole} × ${den} + ${num} = ${whole*den+num}. Keep the same denominator: <b>${fracHTML(impN, impD)}</b>.`;
  // Display as mixed number
  id('qBox').innerHTML = `<div class="idx-q-display" style="font-size:2rem;gap:8px;align-items:center">
    <span>${whole}</span>${fracHTML(num, den)}
    <span style="font-size:1.2rem;color:var(--muted)">→ improper</span>
  </div>`;
}

function genImpToMixed() {
  // Convert improper fraction → mixed number
  const denMax = [5, 12, 15][level - 1];
  const wholeMax = [5, 9, 15][level - 1];
  const den = rr(2, denMax);
  const whole = rr(1, wholeMax);
  const num = rr(1, den - 1);
  const impNum = whole * den + num;
  // Store the answer as a FULLY SIMPLIFIED mixed number. The displayed improper
  // fraction may be unreduced (e.g. 22/4), so the fractional part of the mixed
  // number must be reduced too (2/4 -> 1/2). Otherwise a correct simplified
  // answer like "5 1/2" is wrongly rejected in favour of "5 2/4".
  const wholeAns = Math.floor(impNum / den);
  const [remN, remD] = simplify(impNum % den, den);
  qData.ansWhole = wholeAns;
  qData.ansNum = remN;
  qData.ansDen = remD;
  {
    let ws = `Divide the top by the bottom: ${impNum} ÷ ${den} = ${wholeAns} remainder ${impNum%den}. That's ${wholeAns} and ${fracHTML(impNum%den, den)}`;
    if (remN !== (impNum%den) || remD !== den) ws += ` = ${wholeAns} ${fracHTML(remN, remD)}`;
    qData.workSteps = ws + `. Answer: <b>${wholeAns} ${fracHTML(remN, remD)}</b>.`;
  }
  // Display improper fraction
  id('qBox').innerHTML = `<div class="idx-q-display" style="font-size:2rem;gap:8px;align-items:center">
    ${fracHTML(impNum, den)}
    <span style="font-size:1.2rem;color:var(--muted)">→ mixed</span>
  </div>`;
}

/* ════════════════════════════════════════════
   ORDER OF OPERATIONS WITH FRACTIONS
════════════════════════════════════════════ */
function genFracOrderOps() {
  let ansNum, ansDen, html, work, safety = 0;
  const fin = (n, d) => (d === 1 ? `<b>${n}</b>` : `<b>${fracHTML(n, d)}</b>`);
  do {
    const d = rr(2, 8);
    const n1 = rr(1, d - 1), n2 = rr(1, d - 1), w = rr(2, 5);
    if (level === 1) {
      ansNum = n1 + n2 * w; ansDen = d;
      const [sn, sd] = simplify(ansNum, ansDen);
      ansNum = sn; ansDen = sd;
      html = `${fracHTML(n1, d)} + ${fracHTML(n2, d)} × ${w}`;
      work = `Do × first: ${fracHTML(n2, d)} × ${w} = ${fracHTML(n2*w, d)}, then ${fracHTML(n1, d)} + ${fracHTML(n2*w, d)} = ${fracHTML(n1+n2*w, d)} = ${fin(ansNum, ansDen)}.`;
    } else if (level === 2) {
      ansNum = (n1 + n2) * w; ansDen = d;
      const [sn, sd] = simplify(ansNum, ansDen);
      ansNum = sn; ansDen = sd;
      html = `(${fracHTML(n1, d)} + ${fracHTML(n2, d)}) × ${w}`;
      work = `Brackets first: ${fracHTML(n1, d)} + ${fracHTML(n2, d)} = ${fracHTML(n1+n2, d)}, then × ${w} = ${fracHTML((n1+n2)*w, d)} = ${fin(ansNum, ansDen)}.`;
    } else if (level === 3) {
      const d2 = rr(2, 6);
      const n3 = rr(1, d - 1);
      const prodN = n1 * n2, prodD = d * d2;
      const commonD = lcm(prodD, d);
      const totalN = (prodN * (commonD / prodD)) + (n3 * (commonD / d));
      const [sn, sd] = simplify(totalN, commonD);
      ansNum = sn; ansDen = sd;
      html = `${fracHTML(n1, d)} × ${fracHTML(n2, d2)} + ${fracHTML(n3, d)}`;
      work = `Do × first: ${fracHTML(n1, d)} × ${fracHTML(n2, d2)} = ${fracHTML(prodN, prodD)}, then add ${fracHTML(n3, d)} = ${fin(ansNum, ansDen)}.`;
    } else {
      // L4: a squared fraction, then the rest of BODMAS
      const sqN = n1 * n1, sqD = d * d;
      const t = r(3);
      if (t === 1) {
        const cD = lcm(sqD, d);
        const tot = sqN * (cD / sqD) + n2 * (cD / d);
        const [sn, sd] = simplify(tot, cD); ansNum = sn; ansDen = sd;
        html = `(${fracHTML(n1, d)})² + ${fracHTML(n2, d)}`;
        work = `Power first: (${fracHTML(n1, d)})² = ${fracHTML(sqN, sqD)}, then + ${fracHTML(n2, d)} = ${fin(ansNum, ansDen)}.`;
      } else if (t === 2) {
        const [sn, sd] = simplify(sqN * w, sqD); ansNum = sn; ansDen = sd;
        html = `(${fracHTML(n1, d)})² × ${w}`;
        work = `Power first: (${fracHTML(n1, d)})² = ${fracHTML(sqN, sqD)}, then × ${w} = ${fin(ansNum, ansDen)}.`;
      } else {
        const [sn, sd] = simplify(sqD - sqN, sqD); ansNum = sn; ansDen = sd;
        html = `1 − (${fracHTML(n1, d)})²`;
        work = `Power first: (${fracHTML(n1, d)})² = ${fracHTML(sqN, sqD)}, then 1 − ${fracHTML(sqN, sqD)} = ${fin(ansNum, ansDen)}.`;
      }
    }
    safety++;
  } while (ansNum <= 0 && safety < 50);

  qData.ansNum = ansNum;
  qData.ansDen = ansDen;
  qData.workSteps = work;
  if (ansDen === 1) qData.ans = ansNum;
  id('qBox').innerHTML = `<div class="idx-q-display" style="font-size:1.6rem;gap:8px;align-items:center;flex-wrap:wrap">${html} =</div>`;
}

/* ════════════════════════════════════════════
   DECIMAL GENERATORS
   All answers stored with limited precision to avoid
   floating point display issues.
════════════════════════════════════════════ */
function dp(n, places) { return Math.round(n * Math.pow(10, places)) / Math.pow(10, places); }

/* ── v71 (Laura): vertical column layouts for decimal +/−/×/÷ ──
   A monospace stack so digits line up. decColPointHTML aligns on the DECIMAL POINT
   (add/subtract — blank-aligned, no padding zeros, per Laura). decColRightHTML
   right-aligns the whole numbers (the standard set-up for × and ÷ written
   vertically). The operator sits to the left of the last row; the bottom border
   is the answer line. */
function decSplitParts(s){ s = String(s); const i = s.indexOf('.'); return i < 0 ? {ip:s, fp:''} : {ip:s.slice(0,i), fp:s.slice(i+1)}; }
function decColWrap(inner){
  return '<div style="text-align:center;">'
    + '<div style="font-family:ui-monospace,\'SF Mono\',\'Roboto Mono\',Menlo,Consolas,monospace;'
    + 'font-weight:800;font-size:2.4rem;line-height:1.4;display:inline-block;text-align:left;'
    + 'border-bottom:3px solid var(--text);padding:2px 10px 8px 10px;white-space:pre;min-width:120px;">'
    + inner + '</div></div>';
}
function decColPointHTML(rows, op){
  const NB = ' ';
  const parts = rows.map(decSplitParts);
  const maxIp = Math.max.apply(null, parts.map(p=>p.ip.length));
  const maxFp = Math.max.apply(null, parts.map(p=>p.fp.length));
  const lines = parts.map(function(p, idx){
    const ipPad = NB.repeat(maxIp - p.ip.length) + p.ip;
    let right = '';
    if (maxFp > 0) right = (p.fp.length ? '.' + p.fp : NB) + NB.repeat(maxFp - p.fp.length);
    const opCell = (idx === rows.length - 1) ? op : NB;
    return '<div>' + opCell + NB + ipPad + right + '</div>';
  });
  return decColWrap(lines.join(''));
}
function decColRightHTML(rows, op){
  const NB = ' ';
  const strs = rows.map(String);
  const maxLen = Math.max.apply(null, strs.map(s=>s.length));
  const lines = strs.map(function(s, idx){
    const padded = NB.repeat(maxLen - s.length) + s;
    const opCell = (idx === rows.length - 1) ? op : NB;
    return '<div>' + opCell + NB + padded + '</div>';
  });
  return decColWrap(lines.join(''));
}

function genDecAddSub(forceOp) {
  // L4 (combined skill only) — real-life money / bank-balance word problems.
  if (forceOp === undefined && level === 4) { genDecWordProblem(); return; }
  let a, b, ans;
  // forceOp: 'add' → always +, 'sub' → always −, undefined → random (combined skill).
  const sub = (forceOp === 'sub') ? true : (forceOp === 'add') ? false : (Math.random() < 0.5);
  if (level === 1) {
    a = dp(rr(10, 99) / 10, 1); b = dp(rr(10, 99) / 10, 1);
  } else if (level === 2) {
    a = dp(rr(100, 999) / 100, 2); b = dp(rr(100, 999) / 100, 2);
  } else {
    a = dp(rr(10, 99) / 10, 1); b = dp(rr(100, 999) / 100, 2);
  }
  if (sub && b > a) [a, b] = [b, a];
  ans = dp(sub ? a - b : a + b, 3);
  qData.ans = ans;
  // v71: stacked column aligned on the decimal point (blank-align, no padding zeros).
  const op = sub ? '−' : '+';
  qData.workSteps = `Line up the decimal points, then ${sub?'subtract':'add'}: ${a} ${op} ${b} = <b>${ans}</b>.`;
  id('qBox').innerHTML = decColPointHTML([String(a), String(b)], op);
}

// Add-only / Subtract-only — same levels, layout and gameplay as the combined skill.
function genDecAdd() { genDecAddSub('add'); }
function genDecSub() { genDecAddSub('sub'); }

/* Add & Subtract Decimals — Level 4: real-life money & bank-balance word problems.
   Answers are plain numbers (dollars); balance problems can finish negative (the − key
   is switched on for this level). Answer shown money-formatted in feedback/review. */
function money(n){ n = dp(n, 2); return (n < 0 ? '−$' : '$') + Math.abs(n).toFixed(2); }
function genDecWordProblem() {
  const el = id('qText');
  el.style.fontSize = '1.2rem';
  el.style.lineHeight = '1.5';
  el.style.textAlign = 'left';
  const items = ['book','pen','pencil','ruler','drink','sandwich','magazine','notebook',
                 'water bottle','sticker pack','comic','poster','muffin','apple'];
  function item(){ return items[ri(items.length)]; }
  function cash(loC, hiC){ return dp(rr(loC, hiC) / 100, 2); }   // cents range → dollars, 2 d.p.
  const type = ri(5);
  let text, ans, work;
  if (type === 0) {
    const i1 = item(); let i2 = item(); while (i2 === i1) i2 = item();
    const a = cash(150, 950), b = cash(150, 950);
    ans = dp(a + b, 2);
    text = `A ${i1} costs ${money(a)} and a ${i2} costs ${money(b)}. What is the total cost?`;
    work = `Add the two prices: ${money(a)} + ${money(b)} = <b>${money(ans)}</b>.`;
  } else if (type === 1) {
    const a = cash(120, 600), b = cash(120, 600), c = cash(120, 600);
    ans = dp(a + b + c, 2);
    text = `At the canteen you buy three items costing ${money(a)}, ${money(b)} and ${money(c)}. How much do you spend altogether?`;
    work = `Add the three amounts: ${money(a)} + ${money(b)} + ${money(c)} = <b>${money(ans)}</b>.`;
  } else if (type === 2) {
    const note = [20, 50, 100][ri(3)];
    const cap = note * 100 / 2 - 100;
    const a = cash(150, cap), b = cash(150, cap);
    ans = dp(note - a - b, 2);
    text = `You have ${money(note)} and spend ${money(a)}, then ${money(b)}. How much money do you have left?`;
    work = `Start with ${money(note)} and subtract what you spend: ${money(note)} − ${money(a)} − ${money(b)} = <b>${money(ans)}</b>.`;
  } else if (type === 3) {
    let a = cash(200, 950), b = cash(200, 950); while (a === b) b = cash(200, 950);
    const hi = Math.max(a, b), lo = Math.min(a, b);
    ans = dp(hi - lo, 2);
    text = `A ${item()} costs ${money(hi)} and a ${item()} costs ${money(lo)}. How much more expensive is the dearer one?`;
    work = `Find the difference: ${money(hi)} − ${money(lo)} = <b>${money(ans)}</b>.`;
  } else {
    const start = -cash(500, 4000);     // negative starting balance
    const dep = cash(2000, 7000);       // deposit
    const wdr = cash(500, 6000);        // withdrawal
    ans = dp(start + dep - wdr, 2);
    text = `A bank account balance is ${money(start)}. A deposit of ${money(dep)} is made, then ${money(wdr)} is withdrawn. What is the new balance?`;
    work = `Work through it in order: ${money(start)} + ${money(dep)} − ${money(wdr)} = <b>${money(ans)}</b>.`;
  }
  qData.ans = ans;
  qData.ansDisplay = money(ans);   // money-formatted answer for feedback + review
  qData.workSteps = work;
  el.textContent = text;
}

/* ── v74.7 helpers & generators ─────────────────────────────────────────── */
function decMinus(x){ return String(x).replace('-', '−'); }   // display a real minus sign
function signedDec(dpn){ const m = Math.pow(10, dpn); let n; do { n = rr(-(m*10 - 1), m*10 - 1); } while (n === 0); return dp(n / m, dpn); }
function signedInt(lo, hi){ return (Math.random() < 0.5 ? -1 : 1) * rr(lo, hi); }
// Round to the leading (first non-zero) digit — 1 significant figure.
function leadRound(x){ if (x === 0) return 0; const s = x < 0 ? -1 : 1; const a = Math.abs(x); const e = Math.floor(Math.log10(a) + 1e-9); const f = Math.pow(10, e); return dp(s * Math.round(a / f) * f, 6); }

/* Add & Subtract Decimals (Positive & Negative) — number answers, may be negative. */
function genDecAddSubNeg(){
  const el = id('qText'); el.style.fontSize = '2.2rem';
  let a, b;
  if (level === 1) { a = signedDec(1); b = signedDec(1); }
  else if (level === 2) { a = signedDec(2); b = signedDec(2); }
  else { a = signedDec(1); b = signedDec(2); }
  const sub = Math.random() < 0.5;
  const ans = dp(sub ? a - b : a + b, 3);
  const op = sub ? '−' : '+';
  const bShown = b < 0 ? `(${decMinus(b)})` : decMinus(b);
  let hint = '';
  if (!sub && b < 0) hint = ' Adding a negative is the same as subtracting.';
  else if (sub && b < 0) hint = ' Subtracting a negative is the same as adding.';
  qData.ans = ans; qData.ansDisplay = decMinus(ans);
  qData.workSteps = `${decMinus(a)} ${op} ${bShown} = <b>${decMinus(ans)}</b>.${hint}`;
  el.textContent = `${decMinus(a)} ${op} ${bShown}`;
}

/* Multiply & Divide Decimals (Positive & Negative) — number answers, may be negative. */
function genDecMulDivNeg(){
  const el = id('qText'); el.style.fontSize = '2.2rem';
  const doMul = (level === 1) ? true : (level === 2) ? false : (Math.random() < 0.5);
  let a, b, ans, op;
  if (doMul) {
    a = signedDec(1);
    b = (Math.random() < 0.5) ? signedInt(2, 9) : signedDec(1);
    ans = dp(a * b, 2); op = '×';
  } else {
    b = signedDec(1); ans = signedDec(1); a = dp(ans * b, 2); op = '÷';
  }
  const bShown = b < 0 ? `(${decMinus(b)})` : decMinus(b);
  const same = (a < 0) === (b < 0);
  qData.ans = ans; qData.ansDisplay = decMinus(ans);
  qData.workSteps = `${doMul ? 'Multiply' : 'Divide'} the numbers, then decide the sign: ${dp(Math.abs(a),2)} ${op} ${Math.abs(b)} = ${Math.abs(ans)}. ${same ? 'Same signs → positive' : 'Different signs → negative'}, so <b>${decMinus(ans)}</b>.`;
  el.textContent = `${decMinus(a)} ${op} ${bShown}`;
}

/* Multiply / Divide Decimals — Level 4 word problems (mixed real-life contexts). */
function genDecMulDivWord(kind){
  const el = id('qText'); el.style.fontSize = '1.2rem'; el.style.lineHeight = '1.5'; el.style.textAlign = 'left';
  function cash(loC, hiC){ return dp(rr(loC, hiC) / 100, 2); }
  let text, ans, work, disp;
  if (kind === 'mul') {
    const t = ri(3);
    if (t === 0) {
      const x = dp(rr(15, 60) / 10, 1), y = dp(rr(15, 60) / 10, 1); ans = dp(x * y, 2);
      text = `A rug measures ${x} m by ${y} m. What is its area, in m²?`;
      work = `Area = length × width: ${x} × ${y} = <b>${ans} m²</b>.`; disp = `${ans} m²`;
    } else if (t === 1) {
      const n = rr(3, 9), p = cash(120, 1500); ans = dp(n * p, 2);
      text = `${n} tickets cost ${money(p)} each. What is the total cost?`;
      work = `Multiply the price by how many: ${n} × ${money(p)} = <b>${money(ans)}</b>.`; disp = money(ans);
    } else {
      const r = dp(rr(120, 220) / 100, 2), l = rr(5, 40); ans = dp(r * l, 2);
      text = `Petrol costs ${money(r)} per litre. How much does ${l} litres cost?`;
      work = `Multiply the rate by the litres: ${money(r)} × ${l} = <b>${money(ans)}</b>.`; disp = money(ans);
    }
  } else {
    const t = ri(3);
    if (t === 0) {
      const n = rr(3, 8), each = cash(150, 900), total = dp(each * n, 2); ans = each;
      text = `${money(total)} is shared equally among ${n} people. How much does each person get?`;
      work = `Divide the total by the number of people: ${money(total)} ÷ ${n} = <b>${money(each)}</b>.`; disp = money(each);
    } else if (t === 1) {
      const n = rr(3, 8), each = cash(80, 400), total = dp(each * n, 2); ans = each;
      text = `${n} identical items cost ${money(total)} altogether. What is the price of one?`;
      work = `Divide the total by how many: ${money(total)} ÷ ${n} = <b>${money(each)}</b>.`; disp = money(each);
    } else {
      const piece = dp(rr(2, 9) / 10, 1), count = rr(4, 12), total = dp(piece * count, 2); ans = count;
      text = `A ${total} m length of ribbon is cut into ${piece} m pieces. How many pieces are there?`;
      work = `Divide the length by the piece size: ${total} ÷ ${piece} = <b>${count} pieces</b>.`; disp = `${count} pieces`;
    }
  }
  qData.ans = ans; qData.ansDisplay = disp; qData.workSteps = work; el.textContent = text;
}

/* Leading Digit Estimation — round to 1 significant figure, then estimate. */
function genDecLeadEst(){
  const el = id('qText'); el.style.fontSize = '1.7rem';
  const opWord = o => ({'+':'add','−':'subtract','×':'multiply','÷':'divide'})[o];
  function sigVal(){ const d = rr(1, 9), e = rr(-2, 1); return dp(d * Math.pow(10, e), 4); }
  function messyFor(t){
    const e = (t === 0) ? 0 : Math.floor(Math.log10(Math.abs(t)) + 1e-9);
    const step = Math.pow(10, e);
    let v, guard = 0;
    do { v = dp(t + (Math.random() - 0.5) * 0.9 * step, Math.max(0, e) + 2); guard++; } while ((leadRound(v) !== t || v <= 0) && guard < 60);
    if (leadRound(v) !== t) v = t;
    return v;
  }
  if (level === 1) {
    const t = sigVal(), x = messyFor(t);
    qData.ans = t; qData.ansDisplay = String(t);
    qData.workSteps = `Keep the first non-zero digit and make the rest zeros: ${x} → <b>${t}</b>.`;
    el.textContent = `Round ${x} to its leading digit`;
    return;
  }
  if (level === 2) {
    const roll = ri(4);
    let op, ta, tb, ans;
    if (roll === 3) {
      const q = rr(2, 9); let db, eb; do { db = rr(1, 4); eb = rr(-2, 1); } while (q * db > 9);
      tb = dp(db * Math.pow(10, eb), 4); ta = dp(q * db * Math.pow(10, eb), 4); op = '÷'; ans = q;
    } else if (roll === 2) { op = '×'; ta = sigVal(); tb = sigVal(); ans = dp(ta * tb, 6); }
    else if (roll === 1) { op = '−'; ta = sigVal(); tb = sigVal(); if (tb > ta) { const s = ta; ta = tb; tb = s; } ans = dp(ta - tb, 6); }
    else { op = '+'; ta = sigVal(); tb = sigVal(); ans = dp(ta + tb, 6); }
    const x = messyFor(ta), y = messyFor(tb);
    qData.ans = ans; qData.ansDisplay = String(ans);
    qData.workSteps = `Round each to its leading digit, then ${opWord(op)}: ${x} ${op} ${y} → ${ta} ${op} ${tb} = <b>${ans}</b>.`;
    el.textContent = `Estimate:  ${x} ${op} ${y}`;
    el.style.fontSize = '1.6rem';
    return;
  }
  // Level 3 — leading digit with BODMAS (× before + / −)
  const pat = ri(3);
  let ta = sigVal(), tb = sigVal(), tc = sigVal(), ans, exprR, exprX;
  const x = () => messyFor(ta), y = () => messyFor(tb), z = () => messyFor(tc);
  const mx = x(), my = y(), mz = z();
  if (pat === 0) { ans = dp(ta * tb + tc, 6); exprX = `${mx} × ${my} + ${mz}`; exprR = `${ta} × ${tb} + ${tc}`; }
  else if (pat === 1) { ans = dp(ta + tb * tc, 6); exprX = `${mx} + ${my} × ${mz}`; exprR = `${ta} + ${tb} × ${tc}`; }
  else {
    const prod = dp(ta * tb, 6); let g = 0; while (tc >= prod && g++ < 60) tc = sigVal();
    if (tc >= prod) tc = leadRound(prod / 2) || dp(prod / 2, 4);
    const mz2 = messyFor(tc);
    ans = dp(prod - tc, 6); exprX = `${mx} × ${my} − ${mz2}`; exprR = `${ta} × ${tb} − ${tc}`;
  }
  qData.ans = ans; qData.ansDisplay = String(ans);
  qData.workSteps = `Round each to its leading digit, then use BODMAS (× before + and −): ${exprX} → ${exprR} = <b>${ans}</b>.`;
  el.textContent = `Estimate:  ${exprX}`;
  el.style.fontSize = '1.5rem';
}

/* Square Roots & Cube Roots of Decimals — number answers (clean decimals). */
function genDecSqCubeRoot(){
  const el = id('qText'); el.style.fontSize = '2.4rem';
  function sqRoot(){ const r = dp(rr(1, 15) / 10, 1); return { sym: '√', val: dp(r * r, 2), ans: r, verb: 'squared', prod: `${r} × ${r}` }; }
  function cbRoot(){ const r = dp(rr(1, 12) / 10, 1); return { sym: '∛', val: dp(r * r * r, 3), ans: r, verb: 'cubed', prod: `${r} × ${r} × ${r}` }; }
  const q = (level === 1) ? sqRoot() : (level === 2) ? cbRoot() : (Math.random() < 0.5 ? sqRoot() : cbRoot());
  qData.ans = q.ans; qData.ansDisplay = String(q.ans);
  qData.workSteps = `Which number ${q.verb} gives ${q.val}?  ${q.prod} = ${q.val}, so <b>${q.ans}</b>.`;
  el.textContent = `${q.sym}${q.val}`;
}

/* ── Add & Subtract Fractions & Decimals (decFrac mode) ──────────────────────
   One operand is a decimal, the other a fraction; combine them. The answer may be
   typed as EITHER a decimal or a fraction (parsed by decFracParse). When the exact
   answer is a recurring decimal it can only be given as a fraction — a decimal is
   rejected with a nudge. Levels: L1 tenths · L2 quarters/fifths & hundredths ·
   L3 mixed incl. thirds/sixths/ninths (recurring). */
function decFracParse(raw){
  if (raw == null) return null;
  let s = String(raw).replace(/\s+/g, '').replace(/^\+/, '');
  if (s === '' || s === '-' || s === '.' || s === '/') return null;
  let m;
  if ((m = s.match(/^(-?\d+)\/(-?\d+)$/))){
    let num = parseInt(m[1], 10), den = parseInt(m[2], 10);
    if (den === 0 || isNaN(num) || isNaN(den)) return null;
    if (den < 0){ num = -num; den = -den; }
    return { kind:'frac', num: num, den: den };
  }
  if (/^-?\d+$/.test(s)) return { kind:'dec', dec: parseInt(s, 10) };
  if (/^-?\d*\.\d+$/.test(s)) return { kind:'dec', dec: parseFloat(s) };
  return null;
}
function fdReduce(n, d){ if (d < 0){ n = -n; d = -d; } const g = gcd(Math.abs(n), Math.abs(d)) || 1; return [n / g, d / g]; }
function fdTerminates(d){ d = Math.abs(d); if (d === 0) return true; while (d % 2 === 0) d /= 2; while (d % 5 === 0) d /= 5; return d === 1; }
function genFracDecAddSub() {
  const el = id('qText');
  el.style.fontSize = '2.2rem';
  // Build the decimal operand and the fraction operand for the current level.
  let decNum, decDen, decDisp, fn, fd;
  if (level === 1) {
    decNum = rr(1, 9); decDen = 10; decDisp = String(dp(decNum / 10, 1));
    fn = rr(1, 9); fd = 10;
  } else if (level === 2) {
    fd = [2, 4, 5][ri(3)]; fn = rr(1, fd - 1);
    const dc = rr(1, 19) * 5;                 // 5..95 cents, i.e. multiples of 0.05
    decNum = dc; decDen = 100; decDisp = String(dp(dc / 100, 2));
  } else {
    fd = [3, 6, 9, 8, 4, 5][ri(6)]; fn = rr(1, fd - 1);
    if (Math.random() < 0.6) { decNum = rr(1, 9); decDen = 10; decDisp = String(dp(decNum / 10, 1)); }
    else { const dc = rr(1, 19) * 5; decNum = dc; decDen = 100; decDisp = String(dp(dc / 100, 2)); }
  }
  const sub = Math.random() < 0.5;
  const decVal = decNum / decDen, frVal = fn / fd;
  // Order operands so subtraction never goes negative; addition keeps decimal first.
  let aDisp, aN, aD, bDisp, bN, bD;
  const decOp  = { disp: decDisp, n: decNum, d: decDen };
  const fracOp = { disp: fn + '/' + fd, n: fn, d: fd };
  let first, second;
  if (!sub) { first = decOp; second = fracOp; }
  else if (decVal >= frVal) { first = decOp; second = fracOp; }
  else { first = fracOp; second = decOp; }
  aDisp = first.disp; aN = first.n; aD = first.d;
  bDisp = second.disp; bN = second.n; bD = second.d;
  const op = sub ? '−' : '+';
  const combined = sub ? [aN * bD - bN * aD, aD * bD] : [aN * bD + bN * aD, aD * bD];
  const [rn, rd] = fdReduce(combined[0], combined[1]);
  const terminates = fdTerminates(rd);
  qData.ansNum = rn; qData.ansDen = rd;
  qData.terminates = terminates;
  const finalDisp = terminates ? String(dp(rn / rd, 6)) : (rn + '/' + rd);
  qData.ansDisplay = finalDisp;
  qData.workSteps = `Convert to the same type, then ${sub ? 'subtract' : 'add'}: ${aDisp} ${op} ${bDisp} = <b>${finalDisp}</b>.`
    + (terminates ? '' : ' It is a recurring decimal, so leave the answer as a fraction.');
  el.textContent = `${aDisp} ${op} ${bDisp}`;
}

/* Multiply Decimals & Fractions (decFrac mode) — same input as the add/subtract skill:
   type a decimal OR a fraction, and a recurring answer must be given as a fraction. */
function genFracDecMultiply() {
  const el = id('qText');
  el.style.fontSize = '2.2rem';
  let decNum, decDen, decDisp, fn, fd;
  if (level === 1) {
    decNum = rr(1, 9); decDen = 10; decDisp = String(dp(decNum / 10, 1));
    fn = rr(1, 9); fd = 10;
  } else if (level === 2) {
    fd = [2, 4, 5][ri(3)]; fn = rr(1, fd - 1);
    const dc = rr(1, 19) * 5; decNum = dc; decDen = 100; decDisp = String(dp(dc / 100, 2));
  } else {
    fd = [3, 6, 9, 8, 4, 5][ri(6)]; fn = rr(1, fd - 1);
    if (Math.random() < 0.6) { decNum = rr(1, 9); decDen = 10; decDisp = String(dp(decNum / 10, 1)); }
    else { const dc = rr(1, 19) * 5; decNum = dc; decDen = 100; decDisp = String(dp(dc / 100, 2)); }
  }
  const [rn, rd] = fdReduce(decNum * fn, decDen * fd);
  const terminates = fdTerminates(rd);
  qData.ansNum = rn; qData.ansDen = rd; qData.terminates = terminates;
  const finalDisp = terminates ? String(dp(rn / rd, 6)) : (rn + '/' + rd);
  qData.ansDisplay = finalDisp;
  const decFirst = (level === 1) || Math.random() < 0.5;
  const aDisp = decFirst ? decDisp : (fn + '/' + fd), bDisp = decFirst ? (fn + '/' + fd) : decDisp;
  qData.workSteps = `Convert to the same type, then multiply: ${aDisp} × ${bDisp} = <b>${finalDisp}</b>.`
    + (terminates ? '' : ' It is a recurring decimal, so leave the answer as a fraction.');
  el.textContent = `${aDisp} × ${bDisp}`;
}

// Multiply & Divide by 10, 100, 1000 (and, at L4, by multiples like 20/50/400).
// RECALL / Fluent-eligible. Multiplies compute the answer; divides are BUILT FROM
// the answer (a = answer × divisor) so every answer stays a clean ≤3 dp decimal.
function genDecPow10() {
  const el = id('qText');
  el.style.fontSize = '2rem';
  const POW = [10, 100, 1000, 10000];   // v98: the Yr 7 paper asks about 10 000
  // a decimal with a genuine fractional part (1–3 dp, at most 3 significant digits)
  function decVal() {
    const d = rr(1, 3);
    let raw;
    do { raw = rr(1, 999); } while (raw % 10 === 0);   // non-zero last digit ⇒ exactly d dp
    return dp(raw / Math.pow(10, d), d);
  }
  function doMultiply(m) { const a = decVal();            qData.ans = dp(a * m, 3); qData.workSteps = `Multiplying makes it bigger — the digits shift left: ${a} × ${m} = <b>${qData.ans}</b>.`; return `${a} × ${m}`; }
  function doDivide(m)   { const q = decVal();            qData.ans = q; qData.workSteps = `Dividing makes it smaller — the digits shift right: ${dp(q * m, 3)} ÷ ${m} = <b>${q}</b>.`; return `${dp(q * m, 3)} ÷ ${m}`; }

  let m, txt;
  if (level === 1) {                      // multiply by a pure power of ten
    m = POW[rr(0, 3)]; txt = doMultiply(m);
  } else if (level === 2) {               // divide by a pure power of ten
    m = POW[rr(0, 3)]; txt = doDivide(m);
  } else if (level === 3) {               // mixed × / ÷ by a pure power of ten
    m = POW[rr(0, 3)]; txt = (Math.random() < 0.5) ? doMultiply(m) : doDivide(m);
  } else {                                // L4: multiples of ten (20, 50, 400, …)
    m = rr(2, 9) * POW[rr(0, 2)];         // leading digit 2–9 × a power of ten
    txt = (Math.random() < 0.5) ? doMultiply(m) : doDivide(m);
  }
  el.textContent = txt;
}

function genDecMultiply() {
  if (level === 4) { genDecMulDivWord('mul'); return; }   // L4 word problems
  let a, b, ans;
  if (level === 1) {
    a = dp(rr(10, 99) / 10, 1); b = rr(2, 9);
    ans = dp(a * b, 2);
  } else if (level === 2) {
    a = dp(rr(10, 99) / 10, 1); b = dp(rr(10, 99) / 10, 1);
    ans = dp(a * b, 2);
  } else {
    a = dp(rr(10, 99) / 10, 1); b = dp(rr(100, 999) / 100, 2);
    ans = dp(a * b, 3);
  }
  qData.ans = ans;
  {
    const da = decSplitParts(String(a)).fp.length, db = decSplitParts(String(b)).fp.length;
    const ai = Math.round(a * Math.pow(10, da)), bi = Math.round(b * Math.pow(10, db));
    const tot = da + db;
    qData.workSteps = `Ignore the points and multiply: ${ai} × ${bi} = ${ai*bi}. The question has ${tot} decimal place${tot===1?'':'s'} in total, so put the point back: <b>${ans}</b>.`;
  }
  // v71 (Laura): vertical multiplication algorithm — numbers right-aligned, × on the last row.
  id('qBox').innerHTML = decColRightHTML([String(a), String(b)], '×');
}

function genDecDivide() {
  if (level === 4) { genDecMulDivWord('div'); return; }   // L4 word problems
  let a, b, ans;
  if (level === 1) {
    // dividend / whole = nice decimal
    b = rr(2, 9); ans = dp(rr(10, 99) / 10, 1);
    a = dp(ans * b, 2);
  } else if (level === 2) {
    // divide by decimal — use multiples to keep clean
    b = dp(rr(2, 9) / 10, 1); ans = rr(1, 9);
    a = dp(ans * b, 2);
  } else {
    b = dp(rr(10, 99) / 10, 1); ans = dp(rr(10, 99) / 10, 1);
    a = dp(ans * b, 2);
  }
  qData.ans = ans;
  {
    const k = decSplitParts(String(b)).fp.length;
    if (k > 0) {
      const a2 = dp(a * Math.pow(10, k), 3), b2 = Math.round(b * Math.pow(10, k));
      qData.workSteps = `Shift both numbers ${k} place${k>1?'s':''} so you divide by a whole number: ${a} ÷ ${b} = ${a2} ÷ ${b2} = <b>${ans}</b>.`;
    } else {
      qData.workSteps = `${a} ÷ ${b} = <b>${ans}</b>.`;
    }
  }
  // v71 (Laura): written as a vertical expression (÷ on the last row), NOT short division.
  id('qBox').innerHTML = decColRightHTML([String(a), String(b)], '÷');
}

function genDecSquareCube() {
  const el = id('qText');
  let n, ans;
  if (level === 1) {
    // squares of x.x decimals
    n = dp(rr(1, 9) / 10, 1);
    ans = dp(n * n, 2);
    el.textContent = `${n}²`;
    qData.workSteps = `${n}² means ${n} × ${n} = <b>${ans}</b>.`;
  } else if (level === 2) {
    // cubes of x.x decimals
    n = dp(rr(1, 5) / 10, 1);
    ans = dp(n * n * n, 3);
    el.textContent = `${n}³`;
    qData.workSteps = `${n}³ means ${n} × ${n} × ${n} = <b>${ans}</b>.`;
  } else {
    // mix including 2 d.p.
    const doSquare = Math.random() < 0.5;
    n = doSquare ? dp(rr(10, 99) / 100, 2) : dp(rr(1, 5) / 10, 1);
    ans = doSquare ? dp(n * n, 4) : dp(n * n * n, 3);
    el.textContent = `${n}${doSquare ? '²' : '³'}`;
    qData.workSteps = doSquare
      ? `${n}² means ${n} × ${n} = <b>${ans}</b>.`
      : `${n}³ means ${n} × ${n} × ${n} = <b>${ans}</b>.`;
  }
  qData.ans = ans;
}

function genDecOrderOps() {
  const el = id('qText');
  el.style.fontSize = '1.8rem';
  let ans, txt, work, safety = 0;
  do {
    const a = dp(rr(1, 9) / 10, 1), b = dp(rr(1, 9) / 10, 1), c = rr(2, 5);
    if (level === 1) {
      if (Math.random() < 0.5) { ans = dp(a + b * c, 2); txt = `${a} + ${b} × ${c}`; work = `Do × first: ${b} × ${c} = ${dp(b*c,2)}, then ${a} + ${dp(b*c,2)} = <b>${ans}</b>.`; }
      else { ans = dp(a * c + b, 2); txt = `${a} × ${c} + ${b}`; work = `Do × first: ${a} × ${c} = ${dp(a*c,2)}, then ${dp(a*c,2)} + ${b} = <b>${ans}</b>.`; }
    } else if (level === 2) {
      if (Math.random() < 0.5) { ans = dp((a + b) * c, 2); txt = `(${a} + ${b}) × ${c}`; work = `Brackets first: (${a} + ${b}) = ${dp(a+b,1)}, then × ${c} = <b>${ans}</b>.`; }
      else { ans = dp(a * (b + c), 2); txt = `${a} × (${b} + ${c})`; work = `Brackets first: (${b} + ${c}) = ${dp(b+c,1)}, then ${a} × ${dp(b+c,1)} = <b>${ans}</b>.`; }
    } else if (level === 3) {
      const sub = dp(rr(1,9)/10, 1);
      ans = dp(a + b * c - sub, 2);
      txt = `${a} + ${b} × ${c} − ${sub}`;
      work = `Do × first: ${b} × ${c} = ${dp(b*c,2)}, then ${a} + ${dp(b*c,2)} − ${sub} = <b>${ans}</b>.`;
    } else {
      // L4: a squared decimal, with brackets (power straight after brackets)
      const t = r(3);
      if (t === 1) { ans = dp(a * a + b, 2); txt = `${a}² + ${b}`; work = `Power first: ${a}² = ${dp(a*a,2)}, then + ${b} = <b>${ans}</b>.`; }
      else if (t === 2) { const s = dp(a + b, 1); ans = dp(s * s, 2); txt = `(${a} + ${b})²`; work = `Brackets then the power: (${a} + ${b}) = ${s}, ${s}² = <b>${ans}</b>.`; }
      else { ans = dp(a * a * c, 2); txt = `${a}² × ${c}`; work = `Power first: ${a}² = ${dp(a*a,2)}, then × ${c} = <b>${ans}</b>.`; }
    }
    safety++;
  } while ((ans <= 0 || !isFinite(ans)) && safety < 50);
  qData.ans = ans;
  qData.workSteps = work;
  el.textContent = txt;
}

function genDecRound() {
  const el = id('qText');
  el.style.fontSize = '1.9rem';
  // Level 3 — round each of two numbers to the named place, then estimate.
  if (level === 3) { genDecRoundEstimate(el); return; }
  // Generate a decimal then ask student to round it
  let num, places, ans;
  if (level === 1) {
    // Always round to 1 d.p. v98: the last digit is forced non-zero, so the
    // number always HAS a hundredths digit to decide on — the old version could
    // hand a student "6 to 1 d.p.", which is not a rounding question.
    let raw; do { raw = rr(100, 999); } while (raw % 10 === 0);
    num = dp(raw / 100, 2); // e.g. 3.47
    places = 1;
  } else {
    // v98: a mix of 1, 2 AND 3 d.p. — both ALT papers round to three. Same
    // non-zero-last-digit guard, so the number always has one more decimal
    // place than the question asks for.
    places = rr(1, 3);
    let raw; do { raw = rr(10000, 99999); } while (raw % 10 === 0);
    num = dp(raw / 10000, 4); // e.g. 3.4672
  }
  ans = dp(Math.round(num * Math.pow(10, places)) / Math.pow(10, places), places);
  qData.ans = ans;
  const nextDigit = Math.floor(num * Math.pow(10, places + 1)) % 10;
  qData.workSteps = `Rounding ${num} to ${places} d.p. — look at the next digit, ${nextDigit}: ${nextDigit >= 5 ? '5 or more → round up' : 'less than 5 → round down'}, giving <b>${ans}</b>.`;
  el.textContent = `${num} to ${places} d.p.`;
}

/* Rounding Decimals — Level 3: round BOTH numbers to the place named in the
   brackets (whole number / tenths / hundredths), then add or subtract the rounded
   values to estimate. The estimate is the typed answer; kept ≥ 0 for subtraction. */
function genDecRoundEstimate(el) {
  el.style.fontSize = '1.7rem';
  const place = ri(3);                         // 0 whole · 1 tenths · 2 hundredths
  const placeName  = place === 0 ? 'whole number' : place === 1 ? 'tenths' : 'hundredths';
  const bracketLbl = place === 0 ? 'whole' : placeName;
  const P = Math.pow(10, place);
  function operand(){
    const d = place + 1 + ri(2);               // more decimal places than `place`
    const D = Math.pow(10, d);
    return dp(rr(D, 10 * D - 1) / D, d);        // ~1.0 … 9.9…, exactly d d.p.
  }
  const roundTo = x => dp(Math.round(x * P) / P, place);
  let a = operand(), b = operand();
  let ra = roundTo(a), rb = roundTo(b);
  const sub = Math.random() < 0.5;
  if (sub && rb > ra) { [a, b] = [b, a]; [ra, rb] = [rb, ra]; }   // keep the estimate ≥ 0
  const est = dp(sub ? ra - rb : ra + rb, place);
  const op = sub ? '−' : '+';
  qData.ans = est;
  qData.ansDisplay = String(est);
  qData.workSteps = `Round each to the ${placeName}: ${a} → ${ra}, ${b} → ${rb}. Then estimate: ${ra} ${op} ${rb} = <b>${est}</b>.`;
  el.textContent = `${a} ${op} ${b}  (${bracketLbl})`;
}

/* ═══════════════════════════════════════════════
   DECIMAL UNDERSTANDING SKILLS (v67, Laura sign-off)
   Place Value · Expanded Form · Identify · Convert. Method skills (accuracy-first),
   banded flat Lion 8 / Cheetah 12 (placeholder). Tap-to-answer only where the digit
   keypad can't type the answer (naming a place, an expanded-form expression) — with
   the wrong options set to the classic misconceptions; everything numeric is typed.
═══════════════════════════════════════════════ */
const DPV_PLACES = [
  {code:'tenths',         name:'Tenths',          den:10},
  {code:'hundredths',     name:'Hundredths',      den:100},
  {code:'thousandths',    name:'Thousandths',     den:1000},
  {code:'tenthousandths', name:'Ten-thousandths', den:10000},
];
function decSvg(inner, h, maxW){ h=h||150; return '<svg width="300" height="'+h+'" viewBox="0 0 300 '+h+'" role="img" style="display:block;margin:8px auto 0;max-width:'+(maxW?maxW+'px':'100%')+';'+(maxW?'width:100%;height:auto;':'')+'">'+inner+'</svg>'; }
function SUP(i){ return ({1:'',2:'²',3:'³',4:'⁴'})[i] || ''; }
// v69 (Laura): render "d × 1/10^k" as a real stacked fraction so the powers-of-ten
// expanded form reads clearly instead of as confusing inline "1/10²" text.
function powFracHTML(d, k){
  return d+' × <span class="ef-frac"><span class="ef-num">1</span><span class="ef-line"></span><span class="ef-den">10'+SUP(k)+'</span></span>';
}
function decPlaceStr(d,i){ return '0.' + (i>1 ? '0'.repeat(i-1) : '') + d; }
function fmtDec(x){ return String(dp(x, 6)); }
function fracHTML(n,d){ return '<span style="display:inline-block;text-align:center;font-family:Nunito,sans-serif;font-weight:900;vertical-align:middle;"><span style="display:block;border-bottom:3px solid var(--text);padding:0 10px;">'+n+'</span><span style="display:block;padding:0 10px;">'+d+'</span></span>'; }
function decSetChoice(el, promptHtml, options, correctText, noShuffle){
  // v74.2 (Laura): pass noShuffle=true for questions whose option SET is identical every
  // time (e.g. Yes/No, Prime/Not prime) so the buttons stay in the same spot — this stops
  // "silly errors" from the answer jumping position. Questions with different options each
  // time (expanded forms, exact values, best-buy pairs) keep the default shuffle.
  const order = noShuffle ? options.slice() : shuffleArr(options.slice());
  qData.choices = order.map(function(t,i){ return {code:'o'+i, html:t}; });
  qData.choiceText = {}; qData.choices.forEach(function(c){ qData.choiceText[c.code] = c.html; });
  qData.choiceAns = 'o' + order.indexOf(correctText);
  el.innerHTML = promptHtml;
}
function dpvMakeNumber(maxPlaces){
  const nd = rr(2, maxPlaces), t = ri(nd), digits = [];
  for(let i=0;i<nd;i++){ digits.push(i===t ? rr(1,9) : ri(10)); }
  const intStr = (Math.random()<0.5) ? String(rr(0,99)) : String(rr(0,9));
  return {intStr:intStr, digits:digits, nd:nd, t:t};
}
function dpvNumberHTML(n, hi){
  let s = '<span style="font-family:Nunito,sans-serif;font-weight:900;font-size:2.4rem;">'+n.intStr+'.';
  for(let i=0;i<n.nd;i++){
    s += (hi && i===n.t) ? '<span style="color:var(--accent);text-decoration:underline;">'+n.digits[i]+'</span>' : n.digits[i];
  }
  return s + '</span>';
}
function genDecPlaceValue(el){
  el.style.fontSize = '1.05rem';
  if(level===1){
    const n = dpvMakeNumber(4), P = DPV_PLACES[n.t], order = DPV_PLACES.slice(0,4);
    qData.choiceAns = P.code;
    qData.choices = order.map(function(p){ return {code:p.code, html:p.name}; });
    qData.choiceText = {}; order.forEach(function(p){ qData.choiceText[p.code] = p.name; });
    qData.workSteps = 'Count the places after the decimal point: 1st = tenths, 2nd = hundredths, 3rd = thousandths, 4th = ten-thousandths. The highlighted digit is in place ' + (n.t+1) + ' → <b>' + P.name.toLowerCase() + '</b>.';
    el.innerHTML = '<div style="'+A_LBL+'">What is the place value of the highlighted digit?</div>'
      + '<div style="text-align:center;margin:16px 0;">'+dpvNumberHTML(n,true)+'</div>';
    return;
  }
  if(level===2){
    const n = dpvMakeNumber(4), P = DPV_PLACES[n.t], digit = n.digits[n.t];
    qData.ansNum = digit; qData.ansDen = P.den;
    qData.workSteps = 'The highlighted digit is in the '+P.name.toLowerCase()+' place, so its value is '+digit+'/'+P.den+' (written over its place value, not simplified).';
    el.innerHTML = '<div style="'+A_LBL+'">Write the value of the highlighted digit as a fraction.</div>'
      + '<div style="text-align:center;margin:16px 0;">'+dpvNumberHTML(n,true)+'</div>';
    return;
  }
  const dv = rr(1,3); let k; do{ k = rr(1, Math.pow(10,dv)-1); } while(k % 10 === 0);
  const p = rr(dv, 3), P = DPV_PLACES[p-1], val = k/Math.pow(10,dv);
  qData.ans = k * Math.pow(10, p-dv);
  qData.workSteps = fmtDec(val)+' = '+qData.ans+' '+P.name.toLowerCase()+' (× '+Math.pow(10,p)+').';
  el.style.fontSize = '1.6rem';
  el.innerHTML = '<div style="'+A_LBL+'">How many '+P.name.toLowerCase()+'?</div>'
    + '<div style="text-align:center;margin:12px 0;font-weight:900;">'+fmtDec(val)+' &nbsp;=&nbsp; ▢ '+P.name.toLowerCase()+'</div>';
}
function genDecExpand(el){
  el.style.fontSize = '1.05rem';
  if(level===1){
    const intPart = rr(1,9), nd = rr(2,3), digits = [];
    for(let i=0;i<nd;i++) digits.push(rr(1,9));
    const numStr = intPart+'.'+digits.join('');
    const correct = [String(intPart)].concat(digits.map(function(d,i){ return decPlaceStr(d,i+1); })).join(' + ');
    const dropPV  = [String(intPart)].concat(digits.map(String)).join(' + ');
    const shifted = [String(intPart)].concat(digits.map(function(d,i){ return decPlaceStr(d,i+2); })).join(' + ');
    const combine = intPart+' + 0.'+digits.join('');
    decSetChoice(el, '<div style="'+A_LBL+'">Which is the expanded form of this number?</div>'
      + '<div style="text-align:center;margin:12px 0;font-weight:900;font-size:2.2rem;">'+numStr+'</div>',
      [correct, dropPV, shifted, combine], correct);
    qData.workSteps = 'Split each digit into its place value: ' + numStr + ' = <b>' + correct + '</b>.';
    return;
  }
  if(level===2){
    const nd = rr(2,3), digits = [];
    for(let i=0;i<nd;i++) digits.push(rr(1,9));
    const numStr = '0.'+digits.join('');
    const correct = digits.map(function(d,i){ return powFracHTML(d,i+1); }).join(' + ');
    const samePow = digits.map(function(d){ return powFracHTML(d,1); }).join(' + ');
    const mulPow  = digits.map(function(d,i){ return d+' × 10'+SUP(i+1); }).join(' + ');
    const shifted = digits.map(function(d,i){ return powFracHTML(d,i+2); }).join(' + ');
    decSetChoice(el, '<div style="'+A_LBL+'">Which is the expanded form using powers of ten?</div>'
      + '<div style="text-align:center;margin:12px 0;font-weight:900;font-size:2.2rem;">'+numStr+'</div>',
      [correct, samePow, mulPow, shifted], correct);
    qData.workSteps = 'Each digit sits over its power of ten: ' + numStr + ' = <b>' + correct + '</b>.';
    return;
  }
  const style = (Math.random()<0.5) ? 'std' : 'exp';
  const nd = rr(2,3), intPart = (Math.random()<0.5) ? rr(1,9) : 0, digits = [];
  for(let i=0;i<nd;i++) digits.push(rr(1,9));
  qData.ans = dp(intPart + digits.reduce(function(a,d,i){ return a + d/Math.pow(10,i+1); }, 0), nd);
  const parts = [], partsTxt = [];
  if(intPart){ parts.push(String(intPart)); partsTxt.push(String(intPart)); }
  digits.forEach(function(d,i){
    if(style==='std'){ const t = decPlaceStr(d,i+1); parts.push(t); partsTxt.push(t); }
    else { parts.push(powFracHTML(d,i+1)); partsTxt.push(d+'×1/10'+SUP(i+1)); }
  });
  qData.workSteps = partsTxt.join(' + ')+' = '+String(qData.ans);
  el.style.fontSize = '1.5rem';
  el.innerHTML = '<div style="'+A_LBL+'">Write this as a decimal.</div>'
    + '<div style="text-align:center;margin:12px 0;font-weight:900;">'+parts.join(' + ')+'</div>';
}
function decNumLineSVG(a, t){
  const x0=30, x1=280, y=95; let s='<line x1="'+x0+'" y1="'+y+'" x2="'+x1+'" y2="'+y+'" stroke="var(--text)" stroke-width="2.5"/>';
  for(let i=0;i<=10;i++){ const x=x0+(x1-x0)*i/10, big=(i===0||i===10);
    s+='<line x1="'+x.toFixed(1)+'" y1="'+(y-(big?9:5))+'" x2="'+x.toFixed(1)+'" y2="'+(y+(big?9:5))+'" stroke="var(--text)" stroke-width="'+(big?2.5:1.5)+'"/>'; }
  s+='<text x="'+x0+'" y="'+(y+30)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="16" fill="var(--text)" text-anchor="middle">'+a+'</text>';
  s+='<text x="'+x1+'" y="'+(y+30)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="16" fill="var(--text)" text-anchor="middle">'+(a+1)+'</text>';
  const px=x0+(x1-x0)*t/10;
  s+='<line x1="'+px.toFixed(1)+'" y1="'+(y-2)+'" x2="'+px.toFixed(1)+'" y2="'+(y-22)+'" stroke="var(--accent)" stroke-width="2.5"/>';
  s+='<polygon points="'+px.toFixed(1)+','+(y-1)+' '+(px-6).toFixed(1)+','+(y-16)+' '+(px+6).toFixed(1)+','+(y-16)+'" fill="var(--accent)"/>';
  return decSvg(s, 135);
}
function decStripSVG(n, sh){
  const totalW=250, X0=(300-totalW)/2, y0=45, h=48, cell=totalW/n; let out='';
  for(let i=0;i<n;i++){ out+='<rect x="'+(X0+i*cell).toFixed(1)+'" y="'+y0+'" width="'+cell.toFixed(1)+'" height="'+h+'" fill="var(--accent)" fill-opacity="'+(i<sh?0.6:0)+'" stroke="var(--text)" stroke-width="1.5"/>'; }
  return decSvg(out, y0+h+22);
}
function decGrid100SVG(sh){
  const cell=17, X0=(300-cell*10)/2, y0=8; let out='';
  for(let r=0;r<10;r++) for(let c=0;c<10;c++){ const idx=r*10+c;
    out+='<rect x="'+(X0+c*cell)+'" y="'+(y0+r*cell)+'" width="'+cell+'" height="'+cell+'" fill="var(--accent)" fill-opacity="'+(idx<sh?0.6:0)+'" stroke="var(--text)" stroke-width="0.8"/>'; }
  return decSvg(out, y0+cell*10+14);
}
function genDecIdentify(el){
  el.style.fontSize = '1.05rem';
  if(level===1){
    const a = rr(0,5), t = rr(1,9);
    qData.ans = dp(a + t/10, 1);
    qData.workSteps = 'From '+a+' to '+(a+1)+' is split into ten equal steps; the arrow is '+t+' steps along = '+String(qData.ans)+'.';
    el.innerHTML = '<div style="'+A_LBL+'">What decimal is shown by the arrow?</div>'+decNumLineSVG(a,t);
    return;
  }
  if(level===2){
    if(Math.random()<0.5){
      const sh = rr(1,9); qData.ans = dp(sh/10,1);
      qData.workSteps = sh+' of 10 equal parts shaded = '+sh+'/10 = '+String(qData.ans)+'.';
      el.innerHTML = '<div style="'+A_LBL+'">What decimal is shaded? (10 equal parts)</div>'+decStripSVG(10,sh);
    } else {
      const sh = rr(1,99); qData.ans = dp(sh/100,2);
      qData.workSteps = sh+' of 100 small squares shaded = '+sh+'/100 = '+String(qData.ans)+'.';
      el.innerHTML = '<div style="'+A_LBL+'">What decimal is shaded? (100 small squares)</div>'+decGrid100SVG(sh);
    }
    return;
  }
  const n = [4,5,20,25][ri(4)], sh = rr(1,n-1);
  qData.ans = dp(sh/n, 4);
  qData.workSteps = sh+' of '+n+' equal parts = '+sh+'/'+n+' = '+String(qData.ans)+'.';
  el.innerHTML = '<div style="'+A_LBL+'">What decimal is shaded? ('+n+' equal parts)</div>'+decStripSVG(n,sh);
}
function decFracConvPick(){
  let den, num;
  if(level===1){ den = [10,100,1000][ri(3)]; do{ num = rr(1,den-1); } while(gcd(num,den)!==1); }   // v70: base level — unsimplifiable
  else if(level===2){ den = [2,4,5,20,25,50][ri(6)]; num = rr(1,den-1); }
  else { den = [8,16,40,80,200,250][ri(6)]; do{ num = rr(1,den-1); } while(gcd(num,den)!==1); }
  return {num:num, den:den};
}
// Decimal → fraction in simplest form (always the num/den boxes).
function genDecToFrac(el){
  el.style.fontSize = '2.0rem';
  const p = decFracConvPick(), num = p.num, den = p.den;
  const decVal = num/den, g = gcd(num,den), sn = num/g, sd = den/g;
  qData.ansNum = sn; qData.ansDen = sd;
  qData.workSteps = fmtDec(decVal)+' = '+num+'/'+den+(sn!==num?(' = '+sn+'/'+sd+' (simplest form)'):' (already simplest)')+'.';
  // v71 (Laura): L1 is a base level whose fraction is already in simplest form (nothing to
  // cancel), so the prompt just says "as a fraction". L2/L3 still require simplest form.
  const dtfPrompt = (level === 1) ? 'Write this decimal as a fraction.' : 'Write this decimal as a fraction in simplest form.';
  el.innerHTML = '<div style="'+A_LBL+'">'+dtfPrompt+'</div>'
    + '<div style="text-align:center;margin:14px 0;font-weight:900;font-size:2.4rem;">'+fmtDec(decVal)+'</div>';
}
// Fraction → decimal (always the number box).
function genFracToDec(el){
  el.style.fontSize = '2.0rem';
  const p = decFracConvPick(), num = p.num, den = p.den, decVal = num/den;
  qData.ans = dp(decVal, 6);
  qData.workSteps = num+'/'+den+' = '+fmtDec(decVal)+'.';
  el.innerHTML = '<div style="'+A_LBL+'">Write this fraction as a decimal.</div>'
    + '<div style="text-align:center;margin:14px 0;">'+fracHTML(num,den)+'</div>';
}

/* ═══════════════════════════════════════════════
   COMPARE & ORDER DECIMALS (v71, Laura sign-off) — METHOD skill.
   L1/L3 = tap the correct inequality ('choice' mode). L2/L4 = drag values into
   ascending/descending order ('arrange' mode). L3/L4 mix fractions, decimals and
   whole numbers. Placed before Rounding Decimals.
═══════════════════════════════════════════════ */
// A comparable "value tile": {kind, val (number), html (rendered), text (plain)}.
function cmpDecTile(){
  const kind = 'dec';
  // 1 or 2 decimal places in [0.05, 3.95]; varied lengths surface the "more digits
  // = bigger" misconception (0.45 vs 0.5).
  const places = (Math.random() < 0.5) ? 1 : 2;
  const v = (places === 1) ? dp(rr(1, 39) / 10, 1) : dp(rr(5, 395) / 100, 2);
  const s = String(v);
  return { kind:kind, val:v, html:'<b>'+s+'</b>', text:s };
}
function cmpFracTile(){
  const POOL = [[1,2],[1,4],[3,4],[1,5],[2,5],[3,5],[4,5],[1,3],[2,3],[1,10],[3,10],[7,10],[9,10],[5,4],[3,2],[7,4],[1,8],[3,8],[5,8],[7,8]];
  const p = POOL[ri(POOL.length)];
  return { kind:'frac', val:p[0]/p[1], html:fracHTML(p[0], p[1]), text:p[0]+'/'+p[1] };
}
function cmpIntTile(){
  const n = rr(0, 3);
  return { kind:'int', val:n, html:'<b>'+n+'</b>', text:String(n) };
}
// v72: a signed tile — a decimal / fraction / integer that may be negative. Used by L5.
function cmpSignedTile(){
  const r = Math.random();
  const base = (r < 0.34) ? cmpDecTile() : (r < 0.67 ? cmpFracTile() : cmpIntTile());
  if(base.val !== 0 && Math.random() < 0.5){
    if(base.kind === 'frac') return { kind:'frac', val:-base.val, html:'<b>−</b>'+base.html, text:'-'+base.text };
    return { kind:base.kind, val:-base.val, html:'<b>−'+base.text+'</b>', text:'-'+base.text };
  }
  return base;
}
// Draw n distinct-value tiles from the given kind-makers (values must differ).
function cmpDrawTiles(makers, n){
  const tiles = [], safety = 500; let tries = 0;
  while(tiles.length < n && tries < safety){
    tries++;
    const t = makers[tiles.length % makers.length]();
    if(tiles.every(function(x){ return Math.abs(x.val - t.val) > 1e-9; })) tiles.push(t);
  }
  return tiles;
}
// Build the three inequality options (choice mode) for two value tiles A and B.
function cmpSetInequality(el, A, B){
  const va = A.val, vb = B.val;
  const opts = [
    { code:'lt', html: A.html + ' &nbsp;&lt;&nbsp; ' + B.html, text: A.text + ' < ' + B.text },
    { code:'gt', html: A.html + ' &nbsp;&gt;&nbsp; ' + B.html, text: A.text + ' > ' + B.text },
    { code:'eq', html: A.html + ' &nbsp;=&nbsp; ' + B.html,   text: A.text + ' = ' + B.text },
  ];
  // v74.2 (Laura): keep <, >, = in fixed positions every question (same option set) so
  // students don't make silly errors from the signs jumping around.
  qData.choices = opts.map(function(o){ return {code:o.code, html:o.html}; });
  qData.choiceText = {}; opts.forEach(function(o){ qData.choiceText[o.code] = o.text; });
  qData.choiceAns = (Math.abs(va - vb) < 1e-9) ? 'eq' : (va < vb ? 'lt' : 'gt');
  qData.chosen = null;
  qData.workSteps = 'Compare the values: ' + qData.choiceText[qData.choiceAns] + '.';
  el.innerHTML = '<div style="'+A_LBL+'">Which sign makes this true?</div>'
    + '<div style="text-align:center;margin:16px 0;font-weight:900;font-size:2.2rem;display:flex;align-items:center;justify-content:center;gap:18px;">'
    + '<span>'+A.html+'</span><span style="color:var(--accent);">?</span><span>'+B.html+'</span></div>';
}
// Set up an ordering question (arrange mode) from a set of value tiles.
// forceDir ('asc'|'desc') pins the direction; omit it to randomise.
function cmpSetOrder(el, tiles, forceDir){
  const dir = forceDir || ((Math.random() < 0.5) ? 'asc' : 'desc');
  const ordered = tiles.slice().sort(function(a,b){ return dir === 'asc' ? a.val - b.val : b.val - a.val; });
  // Assign stable codes, then present the pool in a shuffled order (never already sorted).
  let pool;
  do { pool = shuffleArr(tiles.slice()); }
  while(tiles.length > 1 && pool.every(function(t,i){ return t === ordered[i]; }));
  qData.arrangeTiles = pool.map(function(t,i){ return {code:'t'+i, html:t.html, text:t.text, val:t.val}; });
  qData.arrangeDir = dir;
  qData.arrangeChosen = [];
  // Correct sequence of codes, in the requested direction.
  const codeByTile = new Map(); qData.arrangeTiles.forEach(function(c){ codeByTile.set(c.val, c.code); });
  qData.arrangeAns = ordered.map(function(t){ return codeByTile.get(t.val); });
  qData.arrangeText = {}; qData.arrangeTiles.forEach(function(c){ qData.arrangeText[c.code] = c.text; });
  const dirWord = dir === 'asc' ? 'ascending order (smallest first)' : 'descending order (largest first)';
  qData.arrangeInstr = 'Tap the values into ' + dirWord + '.';
  qData.workSteps = 'In order: ' + qData.arrangeAns.map(function(code){ return qData.arrangeText[code]; }).join(' , ') + '.';
  el.innerHTML = '<div style="'+A_LBL+'">Put these in ' + dirWord + '.</div>';
}
function genCompareDec(el){
  el.style.fontSize = '1.05rem';
  if(level === 1){
    const t = cmpDrawTiles([cmpDecTile], 2);
    // ~20% of the time make an equal-value pair (same value, different digit lengths).
    if(Math.random() < 0.2){ const v = dp(rr(1,9)/10, 1); t[0] = {kind:'dec',val:v,html:'<b>'+v+'</b>',text:String(v)}; t[1] = {kind:'dec',val:v,html:'<b>'+v.toFixed(2)+'</b>',text:v.toFixed(2)}; }
    cmpSetInequality(el, t[0], t[1]);
  } else if(level === 2){
    cmpSetOrder(el, cmpDrawTiles([cmpDecTile], 4), 'asc');   // v72 (Laura): L2 fixed ASCENDING
  } else if(level === 3){
    const makers = shuffleArr([cmpFracTile, cmpDecTile, cmpIntTile, cmpFracTile]);
    const t = cmpDrawTiles(makers, 2);
    // ~20% equal-value (e.g. 3/4 vs 0.75) to make '=' a real answer.
    if(Math.random() < 0.2){ const p = [[1,2,0.5],[1,4,0.25],[3,4,0.75],[1,5,0.2],[2,5,0.4],[1,10,0.1],[3,10,0.3]][ri(7)];
      t[0] = {kind:'frac',val:p[2],html:fracHTML(p[0],p[1]),text:p[0]+'/'+p[1]};
      t[1] = {kind:'dec',val:p[2],html:'<b>'+p[2]+'</b>',text:String(p[2])}; }
    cmpSetInequality(el, t[0], t[1]);
  } else if(level === 4){
    // L4 — order a mix of fraction / decimal / integer (force variety of kinds).
    const makers = shuffleArr([cmpIntTile, cmpFracTile, cmpDecTile, cmpFracTile]);
    cmpSetOrder(el, cmpDrawTiles(makers, 4), 'desc');   // v72 (Laura): L4 fixed DESCENDING
  } else {
    // L5 (v72, Laura) — order a mix of POSITIVE and NEGATIVE integers, fractions, decimals.
    // Direction randomised; guarantee at least one negative and one positive value.
    let tiles, tries = 0;
    do { tiles = cmpDrawTiles([cmpSignedTile], 4); tries++; }
    while(tries < 60 && !(tiles.some(function(t){return t.val < 0;}) && tiles.some(function(t){return t.val > 0;})));
    cmpSetOrder(el, tiles);
  }
}

/* ═══════════════════════════════════════════════
   PERCENTAGES (v74, Laura sign-off; v75 conversion skills added)
   pctIdentify   — read a shaded grid (RECALL, typed %)
   pctDecConv    — convert % ⇄ decimal, single answer (v75, RECALL, number box)
   fracPctConv   — convert fraction ⇄ % , single answer (v75, RECALL; L1–2 fraction→%
                   number box, L3–4 %→fraction box; direction fixed per level)
   pctFDP        — fill-the-blanks Fraction/Decimal/Percentage table
                   (METHOD, bespoke 'pctTable' mode, 1 point per box)
   pctExpress    — one amount as a percentage of another (METHOD, typed %)
   pctOfAmount   — find a percentage of an amount (RECALL, typed value)
   pctChange     — percentage increase & decrease (METHOD; L3 worded)
   pctProfitLoss — profit & loss $ then % (METHOD, 'plToggle' mode)
   All typed answers are plain numbers; the unit (%, $) is stated in the prompt.
═══════════════════════════════════════════════ */
// A decimal terminates iff its denominator (lowest terms) has only 2s and 5s.
function pctTerminates(d){ d = Math.abs(d); while(d % 2 === 0) d /= 2; while(d % 5 === 0) d /= 5; return d === 1; }
// Draw a general n-part grid with `sh` parts shaded (reuses the decimal renderers).
function pctGridSVG(n, sh){
  if(n === 100) return decGrid100SVG(sh);
  if(n <= 25)   return decStripSVG(n, sh);
  const cols = 10, rows = Math.ceil(n / cols), cell = 17, X0 = (300 - cell * cols) / 2, y0 = 8; let out = '';
  for(let i = 0; i < n; i++){ const r = Math.floor(i / cols), c = i % cols;
    out += '<rect x="' + (X0 + c * cell) + '" y="' + (y0 + r * cell) + '" width="' + cell + '" height="' + cell + '" fill="var(--accent)" fill-opacity="' + (i < sh ? 0.6 : 0) + '" stroke="var(--text)" stroke-width="0.8"/>'; }
  return decSvg(out, y0 + cell * rows + 14);
}

function genPctIdentify(el){
  el.style.fontSize = '1.05rem';
  let n, sh, svg;
  if(level === 1){
    if(Math.random() < 0.5){ n = 100; sh = rr(1, 99); svg = decGrid100SVG(sh); }
    else { n = 10; sh = rr(1, 9); svg = decStripSVG(10, sh); }
  } else if(level === 2){
    n = [4, 5, 20, 25, 50][ri(5)]; sh = rr(1, n - 1); svg = pctGridSVG(n, sh);
  } else {
    n = [8, 16, 40][ri(3)]; sh = rr(1, n - 1); svg = pctGridSVG(n, sh);
  }
  const pct = dp(100 * sh / n, 2);
  qData.ans = pct;
  qData.workSteps = sh + ' of ' + n + ' shaded = ' + sh + '/' + n + ' = ' + String(pct) + '%.';
  el.innerHTML = '<div style="' + A_LBL + '">What percentage is shaded? (' + n + ' equal parts)</div>' + svg;
}

/* ── Convert Percentages ⇄ Decimals (v75, Laura) — single answer, number box ──
   Both directions live in one skill because both answers are plain numbers. Each
   question randomly asks %→decimal or decimal→%. L3 recurring rows are shown as a
   nice percentage (33⅓%) and answered as a decimal, accepted to ±0.01 (qData.ansTol). */
const PDC_L1   = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90];
const PDC_OVER = [120, 125, 150, 175, 225, 240, 250];
const PDC_REC  = [{disp:'33⅓%', v:1/3}, {disp:'66⅔%', v:2/3}, {disp:'16⅔%', v:1/6}, {disp:'83⅓%', v:5/6}];
function genPctDecConv(el){
  el.style.fontSize = '1.7rem';
  let promptTop, promptMain;
  if(level === 3 && Math.random() < 0.45){
    // recurring — percentage GIVEN, decimal answer (a 2-place decimal is fine)
    const r = PDC_REC[ri(PDC_REC.length)];
    qData.ans = r.v; qData.ansTol = 0.01;
    qData.ansDisplay = dp(r.v, 3) + '… (accept ' + dp(r.v, 2) + ')';
    qData.workSteps = r.disp + ' = ' + r.disp.replace('%','') + ' ÷ 100 = ' + dp(r.v, 3) + '… — one or two decimal places is fine.';
    promptTop  = 'Write the percentage as a decimal. A rounded decimal (2 places) is fine.';
    promptMain = 'Write ' + r.disp + ' as a decimal.';
  } else {
    let pct;
    if(level === 1) pct = PDC_L1[ri(PDC_L1.length)];
    else if(level === 2){ do { pct = rr(1, 99); } while(pct % 10 === 0); }   // "less nice"
    else pct = PDC_OVER[ri(PDC_OVER.length)];
    const dec = dp(pct / 100, 4);
    if(Math.random() < 0.5){                 // percentage → decimal
      qData.ans = dec; qData.ansDisplay = String(dec);
      qData.workSteps = pct + '% ÷ 100 = ' + dec + ' (move the point two places left).';
      promptTop  = 'Write the percentage as a decimal.';
      promptMain = 'Write ' + pct + '% as a decimal.';
    } else {                                 // decimal → percentage
      qData.ans = pct; qData.ansDisplay = pct + '%';
      qData.workSteps = dec + ' × 100 = ' + pct + '% (move the point two places right).';
      promptTop  = 'Write the decimal as a percentage. Type the number only (no % sign).';
      promptMain = 'Write ' + dec + ' as a percentage.';
    }
  }
  el.innerHTML = '<div style="' + A_LBL + '">' + promptTop + '</div>'
    + '<div style="text-align:center;margin:12px 0;font-weight:900;">' + promptMain + '</div>';
}

/* ── Convert Fractions & Percentages (v75, Laura) — ONE skill, both directions ──
   The answer panel is fixed per LEVEL (a skill can't safely swap keypad per question),
   so the two directions live on separate levels via levelModes {3:'fraction',4:'fraction'}:
     L1 fraction → % (number box, friendly)      L2 fraction → % (number box, thirds & >100%)
     L3 % → fraction (fraction box, friendly)    L4 % → fraction (fraction box, thirds & >100%)
   Recurring % answers accept ±0.2 (qData.ansTol); recurring fraction answers are exact. */
const F2P_EASY  = [[1,2],[1,4],[3,4],[1,5],[2,5],[3,5],[4,5],[1,10],[3,10],[7,10],[9,10],[1,20],[3,20],[7,20],
                   [4,25],[6,25],[9,25],[11,25],[13,25],[16,25],[21,25],[9,20],[11,20],[13,50],[21,50],[7,50],[29,50]];
const F2P_REC   = [[1,3,'33⅓%'],[2,3,'66⅔%'],[1,6,'16⅔%'],[5,6,'83⅓%']];
const F2P_TERM  = [[3,8],[5,8],[7,8],[1,8],[6,5],[5,4],[3,2],[9,4],[7,4],[12,5],[9,5]];
const P2F_EASY  = [[10,'10%'],[20,'20%'],[25,'25%'],[40,'40%'],[50,'50%'],[60,'60%'],[75,'75%'],[80,'80%'],[5,'5%'],[15,'15%'],[30,'30%'],[70,'70%'],[90,'90%'],
                   [8,'8%'],[12,'12%'],[16,'16%'],[24,'24%'],[35,'35%'],[36,'36%'],[44,'44%'],[52,'52%'],[64,'64%'],[72,'72%'],[88,'88%'],[4,'4%'],[6,'6%']];
const P2F_REC   = [['33⅓%',1,3],['66⅔%',2,3],['16⅔%',1,6],['83⅓%',5,6]];
const P2F_TERM  = [['12.5%',1,8],['37.5%',3,8],['62.5%',5,8],['87.5%',7,8],['120%',6,5],['125%',5,4],['150%',3,2],['175%',7,4],['225%',9,4],['240%',12,5]];
function genFracPctConv(el){
  el.style.fontSize = '2.0rem';
  if(level <= 2){
    // Fractions → Percentages (number box)
    let n, d, isRec = false, recDisp = '';
    if(level === 1){ const p = F2P_EASY[ri(F2P_EASY.length)]; n = p[0]; d = p[1]; }
    else {
      if(Math.random() < 0.45){ const p = F2P_REC[ri(F2P_REC.length)]; n = p[0]; d = p[1]; isRec = true; recDisp = p[2]; }
      else { const p = F2P_TERM[ri(F2P_TERM.length)]; n = p[0]; d = p[1]; }
    }
    const pctExact = 100 * n / d;
    if(isRec){
      qData.ans = pctExact; qData.ansTol = 0.2;
      qData.ansDisplay = recDisp + ' (accept ' + dp(pctExact, 1) + ')';
      qData.workSteps = n + '/' + d + ' × 100 = ' + recDisp + ' — a rounded ' + dp(pctExact, 1) + '% is fine.';
    } else {
      qData.ans = dp(pctExact, 2); qData.ansDisplay = fmtNum(qData.ans) + '%';
      qData.workSteps = n + ' ÷ ' + d + ' × 100 = ' + fmtNum(qData.ans) + '%.';
    }
    el.innerHTML = '<div style="' + A_LBL + '">Write this fraction as a percentage. Type the number only (no % sign).</div>'
      + '<div style="text-align:center;margin:14px 0;">' + fracHTML(n, d) + '</div>';
  } else {
    // Percentages → Fractions (fraction box; default marking requires lowest terms)
    let disp, sn, sd, note;
    if(level === 3){
      const pick = P2F_EASY[ri(P2F_EASY.length)];
      const g = gcd(pick[0], 100); sn = pick[0] / g; sd = 100 / g; disp = pick[1];
      note = disp + ' = ' + pick[0] + '/100 = ' + sn + '/' + sd + ' (simplest form).';
    } else {
      const rec = Math.random() < 0.45;
      const pick = rec ? P2F_REC[ri(P2F_REC.length)] : P2F_TERM[ri(P2F_TERM.length)];
      disp = pick[0]; sn = pick[1]; sd = pick[2];
      note = disp + ' = ' + sn + '/' + sd + (rec ? ' (a recurring percentage — its exact fraction).' : ' (over 100, then simplified).');
    }
    qData.ansNum = sn; qData.ansDen = sd;
    qData.workSteps = note;
    el.innerHTML = '<div style="' + A_LBL + '">Write this percentage as a fraction in simplest form.</div>'
      + '<div style="text-align:center;margin:14px 0;font-weight:900;font-size:2.4rem;">' + disp + '</div>';
  }
}

/* ── Convert Fractions / Decimals / Percentages — fill-the-blanks table ──
   Builds qData.pctRows; the table itself lives in the answer panel (pctTable mode).
   Each row: one form given, the other two blank. 1 point per correctly-filled box. */
const PFDP_L1 = [[1,2],[1,4],[3,4],[1,5],[2,5],[3,5],[4,5],[1,10],[3,10],[7,10],[9,10],[1,20]];
const PFDP_L2 = [[4,25],[6,25],[9,25],[11,25],[13,25],[16,25],[3,20],[7,20],[9,20],[11,20],[13,50],[21,50],[7,50],[29,50]];
const PFDP_L3_REC  = [[1,3],[2,3],[1,6],[5,6]];
const PFDP_L3_OVER = [[6,5],[3,2],[7,5],[11,10],[9,4],[5,2],[9,5]];
function pctMakeRow(base){
  const n = base[0], d = base[1];
  const recurring = !pctTerminates(d);
  const pctExact = 100 * n / d, decExact = n / d;
  // Recurring rows always GIVE the fraction (so we never print an ugly 33.333% given cell).
  const given = recurring ? 'frac' : ['pct','dec','frac'][ri(3)];
  return { n:n, d:d, pctExact:pctExact, decExact:decExact, recurring:recurring, given:given };
}
function genPctFDP(el){
  el.style.fontSize = '1.05rem';
  let pool;
  if(level === 1) pool = PFDP_L1.slice();
  else if(level === 2) pool = PFDP_L2.slice();
  else pool = null;
  const rows = [];
  const usedVals = [];
  let safety = 0;
  while(rows.length < 3 && safety < 200){
    safety++;
    let base;
    if(level === 3){
      // Mix: guarantee at least one recurring; allow over-100.
      const r = Math.random();
      if(rows.length === 0 || r < 0.4) base = PFDP_L3_REC[ri(PFDP_L3_REC.length)];
      else base = PFDP_L3_OVER[ri(PFDP_L3_OVER.length)];
    } else {
      base = pool[ri(pool.length)];
    }
    const v = base[0] / base[1];
    if(usedVals.some(function(x){ return Math.abs(x - v) < 1e-9; })) continue;
    usedVals.push(v);
    rows.push(pctMakeRow(base));
  }
  qData.pctRows = rows;
  qData.workSteps = pctFDPReviewHTML(rows);
  el.innerHTML = '<div style="' + A_LBL + '">Fill in the missing boxes. You score 1 point for each correct box.</div>';
}
/* Review HTML for the FDP table: the completed table (boxes the student had to fill
   are highlighted) plus a per-row "how to fill it in" step. Shown under "Show me how". */
function pctFDPReviewHTML(rows){
  // Friendly display: exact for terminating values, rounded + "…" for recurring ones.
  function pctDisp(r){ return (r.recurring ? String(dp(r.pctExact, 1)) + '…' : fmtNum(r.pctExact)) + '%'; }
  function decDisp(r){ return r.recurring ? String(dp(r.decExact, 3)) + '…' : fmtNum(r.decExact); }
  var t = '<div style="font-weight:800;margin-bottom:6px;">Completed table (filled boxes highlighted):</div>';
  t += '<table class="fdp-table fdp-review"><thead><tr><th>Percentage</th><th>Decimal</th><th>Fraction</th></tr></thead><tbody>';
  rows.forEach(function(r){
    function cell(val, given){ return '<td class="' + (given ? 'fdp-given-cell' : 'fdp-fill') + '">' + val + '</td>'; }
    t += '<tr>' + cell(pctDisp(r), r.given === 'pct')
       + cell(decDisp(r), r.given === 'dec')
       + cell(fracHTML(r.n, r.d), r.given === 'frac') + '</tr>';
  });
  t += '</tbody></table>';
  t += '<div style="font-weight:800;margin:10px 0 4px;">How to fill each row:</div><ul style="margin:0;padding-left:18px;text-align:left;">';
  rows.forEach(function(r){
    t += '<li style="margin-bottom:4px;"><b>' + r.n + '/' + r.d + '</b> → decimal: ' + r.n + ' ÷ ' + r.d + ' = ' + decDisp(r)
       + ' → percentage: × 100 = ' + pctDisp(r) + '.'
       + (r.recurring ? ' <i>(Recurring — 1 or 2 decimal places is fine.)</i>' : '')
       + '</li>';
  });
  t += '</ul>';
  return t;
}

function genPctExpress(el){
  el.style.fontSize = '1.7rem';
  if(level === 1){
    const B = [4, 5, 10, 20, 25, 50][ri(6)];
    const A = rr(1, B - 1);
    qData.ans = dp(100 * A / B, 2);           // B divides 100 → whole percent
    qData.workSteps = A + ' ÷ ' + B + ' × 100 = ' + String(qData.ans) + '%.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the first amount as a percentage of the second.</div>'
      + '<div style="text-align:center;margin:12px 0;font-weight:900;">What is ' + A + ' as a percentage of ' + B + '?</div>';
  } else if(level === 2){
    const B = [30, 40, 60, 70, 80, 90, 120][ri(7)];
    let A, exact;
    do { A = rr(1, B - 1); exact = 100 * A / B; } while(Math.abs(exact - Math.round(exact)) < 1e-9); // force non-exact
    qData.ans = Math.round(exact);
    qData.workSteps = A + ' ÷ ' + B + ' × 100 = ' + dp(exact, 2) + '% ≈ ' + qData.ans + '% (nearest whole percent).';
    el.innerHTML = '<div style="' + A_LBL + '">Round your answer to the nearest whole percent.</div>'
      + '<div style="text-align:center;margin:12px 0;font-weight:900;">Find ' + A + ' out of ' + B + ' as a percentage.</div>';
  } else {
    // Unit conversion — build from a tidy target percentage so answers stay clean.
    const kind = ri(3);
    const pcts = [2.5, 5, 10, 15, 20, 25, 40, 50];
    const pct = pcts[ri(pcts.length)];
    let small, large, q;
    if(kind === 0){          // cents as a % of dollars
      const D = [1, 2, 4, 5][ri(4)]; large = 100 * D; small = dp(pct / 100 * large, 2);
      q = 'What is ' + small + ' cents as a percentage of $' + D + '?';
    } else if(kind === 1){   // grams as a % of kilograms
      const K = [1, 2, 4, 5][ri(4)]; large = 1000 * K; small = dp(pct / 100 * large, 2);
      q = 'What is ' + small + ' g as a percentage of ' + K + ' kg?';
    } else {                 // millimetres as a % of centimetres
      const C = [20, 40, 50, 60, 100, 200][ri(6)]; large = 10 * C; small = dp(pct / 100 * large, 2);
      q = 'What is ' + small + ' mm as a percentage of ' + C + ' cm?';
    }
    qData.ans = dp(pct, 2);
    qData.workSteps = 'Convert to the same unit: ' + small + ' ÷ ' + large + ' × 100 = ' + String(qData.ans) + '%.';
    el.innerHTML = '<div style="' + A_LBL + '">Convert to the same unit first, then write it as a percentage.</div>'
      + '<div style="text-align:center;margin:12px 0;font-weight:900;">' + q + '</div>';
  }
}

// Shared helper: pick a (percentage, amount) pair whose product is a clean ≤2dp value.
function pctPickOfAmount(lvl){
  if(lvl === 1){
    // v74.1 (Laura): keep amounts as clean hundreds (e.g. 80% of 200, not 80% of 220)
    // so students practise the concept via 10% / 50% / 25%, not awkward arithmetic.
    const pct = [5, 10, 15, 20, 25, 30, 40, 50, 60, 75, 80, 90][ri(12)];
    const amt = 100 * rr(1, 9);
    return { pct:pct, amt:amt };
  } else if(lvl === 2){
    // v74.1 (Laura): amounts are clean hundreds so 1% (and 10%) are whole numbers —
    // students build e.g. 18% from 10% + 8×1%, rather than a hard multiplication.
    const pct = [11, 12, 13, 14, 16, 17, 18, 19, 22, 24, 35, 45, 55, 65, 85][ri(15)];
    const amt = 100 * rr(1, 9);
    return { pct:pct, amt:amt };
  } else {
    if(Math.random() < 0.5){
      const pct = [2.5, 7.5, 12.5, 37.5, 62.5, 87.5][ri(6)];
      const amt = 40 * rr(1, 12);
      return { pct:pct, amt:amt };
    } else {
      const pct = [110, 120, 125, 150, 175, 200, 250][ri(7)];
      const amt = 20 * rr(1, 20);
      return { pct:pct, amt:amt };
    }
  }
}
function genPctOfAmount(el){
  el.style.fontSize = '2rem';
  const p = pctPickOfAmount(level);
  qData.ans = dp(p.pct / 100 * p.amt, 2);
  qData.workSteps = p.pct + '% of ' + p.amt + ' = ' + p.pct + ' ÷ 100 × ' + p.amt + ' = ' + String(qData.ans) + '.';
  el.innerHTML = '<div style="' + A_LBL + '">Find the percentage of the amount.</div>'
    + '<div style="text-align:center;margin:10px 0;font-weight:900;">What is ' + p.pct + '% of ' + p.amt + '?</div>';
}

const PCT_UP_WORDS   = ['marked up', 'inflated', 'appreciated', 'risen'];
const PCT_DOWN_WORDS = ['discounted', 'reduced', 'depreciated', 'declined'];
function genPctChange(el){
  el.style.fontSize = '1.6rem';
  if(level === 1 || level === 2){
    const p = pctPickOfAmount(level === 1 ? 1 : 2);
    const up = Math.random() < 0.5;
    const changeVal = dp(p.pct / 100 * p.amt, 2);
    qData.ans = dp(up ? p.amt + changeVal : p.amt - changeVal, 2);
    qData.workSteps = (up ? 'Increase' : 'Decrease') + ' ' + p.amt + ' by ' + p.pct + '%: ' + p.amt + (up ? ' + ' : ' − ') + changeVal + ' = ' + String(qData.ans) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the new amount.</div>'
      + '<div style="text-align:center;margin:10px 0;font-weight:900;">' + (up ? 'Increase' : 'Decrease') + ' ' + p.amt + ' by ' + p.pct + '%</div>';
  } else {
    // L3 — worded increase / decrease using real-world synonyms.
    const up = Math.random() < 0.5;
    const pct = [10, 12, 15, 20, 25, 30, 40, 50][ri(8)];
    const amt = 20 * rr(2, 30);                         // whole-dollar base
    const word = up ? PCT_UP_WORDS[ri(PCT_UP_WORDS.length)] : PCT_DOWN_WORDS[ri(PCT_DOWN_WORDS.length)];
    const changeVal = dp(pct / 100 * amt, 2);
    qData.ans = dp(up ? amt + changeVal : amt - changeVal, 2);
    qData.workSteps = word + ' means ' + (up ? 'increase' : 'decrease') + ': $' + amt + (up ? ' + ' : ' − ') + '$' + changeVal + ' = $' + String(qData.ans) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Read the change word carefully, then find the new value ($).</div>'
      + '<div style="text-align:center;margin:10px 0;font-weight:900;">A $' + amt + ' item is ' + word + ' by ' + pct + '%. Find the new value.</div>';
  }
}

function genPctProfitLoss(el){
  el.style.fontSize = '1.5rem';
  if(level === 1){
    let cost, sell;
    do { cost = rr(10, 90); sell = rr(10, 120); } while(cost === sell);
    const dir = sell > cost ? 'profit' : 'loss';
    qData.ans = Math.abs(sell - cost);
    qData.plDir = dir; qData.plMode = 'amount';
    qData.workSteps = '$' + sell + ' − $' + cost + ' = $' + (sell - cost) + ' → $' + qData.ans + ' ' + dir + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Work out the profit or loss in dollars, then tap Profit or Loss.</div>'
      + '<div style="text-align:center;margin:10px 0;font-weight:900;">An item was bought for $' + cost + ' and sold for $' + sell + '.</div>';
  } else {
    const cost = [25, 40, 50, 80, 100, 200][ri(6)];
    const pct = [10, 20, 25, 40, 50, 60, 80][ri(7)];
    const up = Math.random() < 0.5;
    const sell = dp(up ? cost * (1 + pct / 100) : cost * (1 - pct / 100), 2);
    qData.ans = pct; qData.plDir = up ? 'profit' : 'loss'; qData.plMode = 'pct';
    qData.workSteps = '|' + sell + ' − ' + cost + '| ÷ ' + cost + ' × 100 = ' + pct + '% ' + qData.plDir + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Work out the percentage profit or loss (on the cost price), then tap Profit or Loss.</div>'
      + '<div style="text-align:center;margin:10px 0;font-weight:900;">Bought for $' + cost + ', sold for $' + sell + '.</div>';
  }
}

/* ═══════════════════════════════════════════════
   NEW BASE-FACT & METHOD GENERATORS (v74.2, Laura)
═══════════════════════════════════════════════ */
function isPrime(n){ if(n < 2) return false; for(let i = 2; i*i <= n; i++){ if(n % i === 0) return false; } return true; }
function round1sig(n){ if(n === 0) return 0; const d = Math.pow(10, Math.floor(Math.log10(Math.abs(n)))); return Math.round(n / d) * d; }
function numPowHTML(base, exp){ const e = exp < 0 ? '−' + Math.abs(exp) : '' + exp; return base + '<sup style="font-size:0.6em;">' + e + '</sup>'; }
function surdTerm(c, r){ if(r === 1) return '' + c; return (c === 1 ? '' : '' + c) + '√' + r; }
function surdSetAns(c, r, lbl, expr, work){
  const cr = surdSimplify(c, r);
  qData.ansSurd = { c: cr.c, r: cr.r }; qData.ans = cr.c * Math.sqrt(cr.r);
  qData.ansDisplay = surdFmt(cr); qData.workSteps = work;
  id('qText').innerHTML = '<div style="' + A_LBL + '">' + lbl + '</div>'
    + '<div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + expr + '</div>';
}

/* ── Number: Number Bonds (make 10 / 20 / 100, doubles) ── */
function genNumberBonds(el){
  el.style.fontSize = '2rem';
  if(level === 1){
    const a = rr(1, 9); qData.ans = 10 - a; qData.workSteps = a + ' + ' + (10 - a) + ' = 10.';
    el.innerHTML = '<div style="' + A_LBL + '">Fill the gap to make 10.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + a + ' + ▢ = 10</div>';
  } else if(level === 2){
    if(Math.random() < 0.7){ const a = rr(1, 19); qData.ans = 20 - a; qData.workSteps = a + ' + ' + (20 - a) + ' = 20.'; el.innerHTML = '<div style="' + A_LBL + '">Fill the gap to make 20.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + a + ' + ▢ = 20</div>'; }
    else { const a = rr(1, 9) * 10; qData.ans = 100 - a; qData.workSteps = a + ' + ' + (100 - a) + ' = 100.'; el.innerHTML = '<div style="' + A_LBL + '">Fill the gap to make 100.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + a + ' + ▢ = 100</div>'; }
  } else {
    const k = rr(2, 12); qData.ans = 2 * k; qData.workSteps = 'Double ' + k + ' = ' + (2 * k) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Type the double.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.4rem;">' + k + ' + ' + k + '</div>';
  }
}

/* ── Number: Factors, Multiples & Primes ── */
function genFactorsMultiples(el){
  el.style.fontSize = '1.5rem';
  if(level === 1){
    let n;
    if(Math.random() < 0.5){ const P = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59]; n = P[ri(P.length)]; }
    else { do { n = rr(4, 60); } while(isPrime(n)); }
    qData.workSteps = n + ' is ' + (isPrime(n) ? 'prime — its only factors are 1 and ' + n + '.' : 'not prime — it has factors other than 1 and itself.');
    decSetChoice(el, '<div style="' + A_LBL + '">Is this number prime?</div><div style="text-align:center;margin:12px 0;font-weight:900;font-size:2.6rem;">' + n + '</div>', ['Prime','Not prime'], isPrime(n) ? 'Prime' : 'Not prime', true);
  } else if(level === 2){
    const y = rr(12, 60); let x;
    if(Math.random() < 0.5){ const f = []; for(let i = 2; i < y; i++){ if(y % i === 0) f.push(i); } x = f.length ? f[ri(f.length)] : 1; }
    else { do { x = rr(2, 12); } while(y % x === 0); }
    const isF = (y % x === 0);
    qData.workSteps = x + (isF ? ' is' : ' is not') + ' a factor of ' + y + ' (' + y + ' ÷ ' + x + (isF ? ' = ' + (y / x) + ').' : ' is not a whole number).');
    decSetChoice(el, '<div style="' + A_LBL + '">Is the first number a factor of the second?</div><div style="text-align:center;margin:12px 0;font-weight:900;font-size:2rem;">Is ' + x + ' a factor of ' + y + '?</div>', ['Yes','No'], isF ? 'Yes' : 'No', true);
  } else {
    const x = rr(3, 12), k = rr(2, 12);
    qData.ans = x * k;
    const ord = ['','1st','2nd','3rd','4th','5th','6th','7th','8th','9th','10th','11th','12th'][k];
    qData.workSteps = ord + ' multiple of ' + x + ' = ' + x + ' × ' + k + ' = ' + qData.ans + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Type the multiple.</div><div style="text-align:center;margin:10px 0;font-weight:900;">What is the ' + ord + ' multiple of ' + x + '?</div>';
  }
}

/* ── Number: HCF & LCM ── */
function genHcfLcm(el){
  el.style.fontSize = '1.5rem';
  function hcfPair(gLo, gHi){ const g = rr(gLo, gHi); let m, n; do { m = rr(2, 6); n = rr(2, 6); } while(gcd(m, n) !== 1 || m === n); return [g*m, g*n]; }
  let a, b, wantHCF;
  if(level === 1){ wantHCF = true; [a, b] = hcfPair(2, 9); }
  else if(level === 2){ wantHCF = false; a = rr(2, 9); b = rr(2, 9); if(a === b) b = a + 1; }
  else { wantHCF = Math.random() < 0.5; if(wantHCF){ [a, b] = hcfPair(3, 12); } else { a = rr(4, 12); b = rr(4, 12); if(a === b) b = a + 2; } }
  qData.ans = wantHCF ? gcd(a, b) : lcm(a, b);
  qData.workSteps = (wantHCF ? 'HCF' : 'LCM') + ' of ' + a + ' and ' + b + ' = ' + qData.ans + '.';
  el.innerHTML = '<div style="' + A_LBL + '">' + (wantHCF ? 'Highest Common Factor' : 'Lowest Common Multiple') + '</div>'
    + '<div style="text-align:center;margin:10px 0;font-weight:900;">' + (wantHCF ? 'HCF' : 'LCM') + ' of ' + a + ' and ' + b + '?</div>';
}

/* ── Number: Rounding & Estimation ── */
function genRoundEst(el){
  el.style.fontSize = '1.6rem';
  if(level === 1){
    const place = Math.random() < 0.5 ? 10 : 100;
    const n = place === 10 ? rr(11, 199) : rr(120, 1900);
    qData.ans = Math.round(n / place) * place;
    qData.workSteps = n + ' to the nearest ' + place + ' = ' + qData.ans + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Round to the nearest ' + place + '.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + n + '</div>';
  } else if(level === 2){
    const place = Math.random() < 0.5 ? 100 : 1000;
    const n = rr(1200, 9900);
    qData.ans = Math.round(n / place) * place;
    qData.workSteps = n + ' to the nearest ' + place + ' = ' + qData.ans + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Round to the nearest ' + place + '.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + n + '</div>';
  } else if(level === 3){
    // Round to the leading digit (1 significant figure)
    const digits = [2, 3, 4][ri(3)];
    let n; do { n = rr(Math.pow(10, digits - 1) + 1, Math.pow(10, digits) - 1); } while(n % Math.pow(10, digits - 1) === 0);
    qData.ans = round1sig(n);
    qData.workSteps = n + ' rounded to the leading digit (1 significant figure) = ' + qData.ans + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Round to the leading digit (1 significant figure).</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + n + '</div>';
  } else {
    const ops = ['×','+','−','÷']; let a, b, op, ans, t = 0;
    do {
      op = ops[ri(4)];
      if(op === '×'){ a = rr(11, 89); b = rr(11, 49); ans = round1sig(a) * round1sig(b); }
      else if(op === '+'){ a = rr(120, 890); b = rr(120, 890); ans = round1sig(a) + round1sig(b); }
      else if(op === '−'){ a = rr(410, 900); b = rr(60, 290); ans = round1sig(a) - round1sig(b); }
      else { const db = [20,30,40,50][ri(4)], q = rr(2, 9); a = db * q + rr(-4, 4); b = db + rr(-4, 4); ans = round1sig(a) / round1sig(b); }
      t++;
    } while((!isFinite(ans) || ans <= 0 || Math.round(ans) !== ans) && t < 60);
    qData.ans = ans;
    qData.workSteps = 'Round each to the leading digit: ' + round1sig(a) + ' ' + op + ' ' + round1sig(b) + ' ≈ ' + ans + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Estimate — round each number to its leading digit first.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2rem;">' + a + ' ' + op + ' ' + b + '</div>';
  }
}

/* ── Fractions: Fraction of an Amount ── */
function genFracOfAmount(el){
  el.style.fontSize = '1.7rem';
  let d, n, amt;
  if(level === 1){ d = [2,3,4,5,6,10][ri(6)]; n = 1; amt = d * rr(2, 12); }
  else if(level === 2){ d = [3,4,5,6,8][ri(5)]; n = rr(2, d - 1); amt = d * rr(2, 12); }
  else { d = [6,7,8,9,12][ri(5)]; n = rr(2, d - 1); amt = d * rr(4, 12); }
  qData.ans = n * amt / d;
  qData.workSteps = n + '/' + d + ' of ' + amt + ' = ' + amt + ' ÷ ' + d + ' × ' + n + ' = ' + qData.ans + '.';
  el.innerHTML = '<div style="' + A_LBL + '">Find the fraction of the amount.</div>'
    + '<div style="text-align:center;margin:10px 0;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;">' + fracHTML(n, d) + '<span>of ' + amt + '</span></div>';
}

/* ── Fractions: Compare & Order (reuses the Compare Decimals tile engine) ── */
function genFracCompare(el){
  el.style.fontSize = '1.05rem';
  if(level === 1){ const t = cmpDrawTiles([cmpFracTile], 2); cmpSetInequality(el, t[0], t[1]); }
  else if(level === 2){ cmpSetOrder(el, cmpDrawTiles([cmpFracTile], 4), 'asc'); }
  else { cmpSetOrder(el, cmpDrawTiles([cmpFracTile], 4), 'desc'); }
}

/* ── Exponents: Negative & Zero Indices (answers as fractions / whole numbers) ── */
function genNegIndices(el){
  el.style.fontSize = '2rem';
  if(level === 1){
    const t = r(3), a = rr(2, 9);
    if(t === 1){ qData.ansNum = 1; qData.ansDen = 1; qData.workSteps = 'Any non-zero number to the power 0 is 1.'; el.innerHTML = '<div style="' + A_LBL + '">Evaluate</div><div style="text-align:center;margin:8px 0;font-weight:900;font-size:2.4rem;">' + numPowHTML(a, 0) + '</div>'; }
    else if(t === 2){ qData.ansNum = a; qData.ansDen = 1; qData.workSteps = a + ' to the power 1 is ' + a + '.'; el.innerHTML = '<div style="' + A_LBL + '">Evaluate</div><div style="text-align:center;margin:8px 0;font-weight:900;font-size:2.4rem;">' + numPowHTML(a, 1) + '</div>'; }
    else { qData.ansNum = 1; qData.ansDen = a; qData.workSteps = a + ' to the power −1 = 1/' + a + '.'; el.innerHTML = '<div style="' + A_LBL + '">Evaluate (give a fraction)</div><div style="text-align:center;margin:8px 0;font-weight:900;font-size:2.4rem;">' + numPowHTML(a, -1) + '</div>'; }
  } else if(level === 2){
    const a = rr(2, 6), k = rr(2, 3), den = Math.pow(a, k);
    qData.ansNum = 1; qData.ansDen = den;
    qData.workSteps = a + ' to the power −' + k + ' = 1 / ' + a + '^' + k + ' = 1/' + den + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Evaluate (give a fraction)</div><div style="text-align:center;margin:8px 0;font-weight:900;font-size:2.4rem;">' + numPowHTML(a, -k) + '</div>';
  } else {
    const P = [[2,3],[3,4],[2,5],[3,5],[4,5],[1,2],[1,3]]; const pr = P[ri(P.length)], n = pr[0], dd = pr[1];
    const k = rr(1, 2);
    let nn = Math.pow(dd, k), ddn = Math.pow(n, k); const g = gcd(nn, ddn); nn /= g; ddn /= g;
    qData.ansNum = nn; qData.ansDen = ddn;
    qData.workSteps = '(' + n + '/' + dd + ') to the power −' + k + ' = (' + dd + '/' + n + ')' + (k > 1 ? ('^' + k) : '') + ' = ' + nn + '/' + ddn + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Evaluate (give a fraction)</div><div style="text-align:center;margin:8px 0;font-weight:900;display:flex;align-items:center;justify-content:center;">(' + fracHTML(n, dd) + ')' + '<sup style="font-size:0.6em;">−' + k + '</sup></div>';
  }
}

/* ── Exponents: Surds ── */
const SURD_SIMP_SMALL = [8,12,18,20,24,27,32,44,45,48,50];
const SURD_SIMP_BIG   = [52,54,63,72,75,80,90,98,108,112,125,128,147,150,175,180,200];
const SURD_SQFREE = [2,3,5,6,7,10];
function genSurdSimplify(el){
  el.style.fontSize = '1.05rem';
  if(level === 1){ const N = SURD_SIMP_SMALL[ri(SURD_SIMP_SMALL.length)]; surdSetAns(1, N, 'Simplify the surd', '√' + N, '√' + N + ' = ' + surdFmt(surdSimplify(1, N)) + '.'); }
  else if(level === 2){ const N = SURD_SIMP_BIG[ri(SURD_SIMP_BIG.length)]; surdSetAns(1, N, 'Simplify the surd', '√' + N, '√' + N + ' = ' + surdFmt(surdSimplify(1, N)) + '.'); }
  else { const c = rr(2, 4), N = SURD_SIMP_SMALL[ri(SURD_SIMP_SMALL.length)]; surdSetAns(c, N, 'Simplify the surd', c + '√' + N, c + '√' + N + ' = ' + surdFmt(surdSimplify(c, N)) + '.'); }
}
function genSurdAddSub(el){
  el.style.fontSize = '1.4rem';
  if(level === 1){
    const k = SURD_SQFREE[ri(SURD_SQFREE.length)]; let a = rr(2, 8), b = rr(1, 7), op, res;
    if(Math.random() < 0.5){ op = '+'; res = a + b; } else { if(a <= b){ a = b + rr(1, 4); } op = '−'; res = a - b; }
    surdSetAns(res, k, 'Simplify', surdTerm(a, k) + ' ' + op + ' ' + surdTerm(b, k), surdTerm(a, k) + ' ' + op + ' ' + surdTerm(b, k) + ' = ' + surdFmt(surdSimplify(res, k)) + '.');
  } else if(level === 2){
    const k = SURD_SQFREE[ri(SURD_SQFREE.length)], p = rr(2, 6), q = rr(2, 3), N = q*q*k, res = p + q;
    surdSetAns(res, k, 'Simplify (simplify each surd first)', surdTerm(p, k) + ' + √' + N, surdTerm(p, k) + ' + √' + N + ' = ' + surdTerm(p, k) + ' + ' + q + '√' + k + ' = ' + surdFmt(surdSimplify(res, k)) + '.');
  } else {
    const k = SURD_SQFREE[ri(SURD_SQFREE.length)]; let p = rr(2, 5), q = rr(1, 4), op, res;
    if(Math.random() < 0.5){ op = '+'; res = p + q; } else { if(p <= q){ p = q + rr(1, 3); } op = '−'; res = p - q; }
    const N1 = p*p*k, N2 = q*q*k;
    surdSetAns(res, k, 'Simplify (simplify each surd first)', '√' + N1 + ' ' + op + ' √' + N2, '√' + N1 + ' ' + op + ' √' + N2 + ' = ' + p + '√' + k + ' ' + op + ' ' + q + '√' + k + ' = ' + surdFmt(surdSimplify(res, k)) + '.');
  }
}
function genSurdMultiply(el){
  el.style.fontSize = '1.4rem';
  /* v86 (Laura) — NEW LEVEL 1: the rule only, never the simplifying.
     Every radicand here is a product of two DISTINCT PRIMES, which is
     square-free by construction, so √a × √b = √(ab) can never simplify further
     and the student is only tested on the rule. The one exception is the
     same-root case (3√2 × 2√2), where √2 × √2 = 2 collapses to a whole number —
     that is the other half of the rule, not a simplification step, so it
     belongs here too. Levels 2-4 are the old L1-L3, unchanged. */
  if(level === 1){
    /* Primes only (and only small ones): a product of two DISTINCT primes is
       square-free, and keeping them under 10 means the radicand stays friendly
       (√6, √10, √14, √15, √21, √35) instead of √143. */
    const P = [2, 3, 5, 7];
    const kind = ri(3);
    if (kind === 2){                       // same root → whole number
      const k = P[ri(P.length)], c = rr(2, 4), d = rr(2, 4);
      surdSetAns(c * d * k, 1, 'Multiply', surdTerm(c, k) + ' × ' + surdTerm(d, k),
        surdTerm(c, k) + ' × ' + surdTerm(d, k) + ' = ' + (c * d) + ' × √' + k + ' × √' + k
        + ' = ' + (c * d) + ' × ' + k + ' = <b>' + (c * d * k) + '</b>.');
    } else {
      let a = P[ri(P.length)], b = P[ri(P.length)], t = 0;
      while (b === a && t++ < 25) b = P[ri(P.length)];
      if (b === a) b = (a === 2) ? 3 : 2;
      const c = (kind === 1) ? rr(2, 4) : 1, d = (kind === 1) ? rr(2, 4) : 1;
      surdSetAns(c * d, a * b, 'Multiply',
        (c === 1 ? '√' + a : surdTerm(c, a)) + ' × ' + (d === 1 ? '√' + b : surdTerm(d, b)),
        (c > 1 || d > 1)
          ? 'Multiply the numbers in front, and multiply under the roots: ' + c + ' × ' + d + ' = '
            + (c * d) + ' and √' + a + ' × √' + b + ' = √' + (a * b) + ', giving <b>'
            + surdFmt({ c: c * d, r: a * b }) + '</b>. It does not simplify — ' + (a * b)
            + ' has no square factor.'
          : '√' + a + ' × √' + b + ' = √(' + a + ' × ' + b + ') = <b>√' + (a * b)
            + '</b>. It does not simplify — ' + (a * b) + ' has no square factor.');
    }
  }
  else if(level === 2){ const a = SURD_SQFREE[ri(6)], b = SURD_SQFREE[ri(6)]; surdSetAns(1, a*b, 'Multiply', '√' + a + ' × √' + b, '√' + a + ' × √' + b + ' = √' + (a*b) + ' = ' + surdFmt(surdSimplify(1, a*b)) + '.'); }
  else if(level === 3){ const c = rr(2, 4), d = rr(2, 4), a = SURD_SQFREE[ri(6)], b = SURD_SQFREE[ri(6)]; surdSetAns(c*d, a*b, 'Multiply', surdTerm(c, a) + ' × ' + surdTerm(d, b), surdTerm(c, a) + ' × ' + surdTerm(d, b) + ' = ' + (c*d) + '√' + (a*b) + ' = ' + surdFmt(surdSimplify(c*d, a*b)) + '.'); }
  else { const S = [2,3,5,6,7,10,14,15]; const a = S[ri(S.length)], b = S[ri(S.length)], c = rr(1, 3), d = rr(1, 3); surdSetAns(c*d, a*b, 'Multiply', surdTerm(c, a) + ' × ' + surdTerm(d, b), surdTerm(c, a) + ' × ' + surdTerm(d, b) + ' = ' + surdFmt(surdSimplify(c*d, a*b)) + '.'); }
}
function genSurdDivide(el){
  el.style.fontSize = '1.4rem';
  if(level === 1){
    let B, sq, A, t = 0; do { B = [2,3,5,6][ri(4)]; sq = [4,9,16,25][ri(4)]; A = B * sq; t++; } while(isPerfSq(A) && t < 40);
    surdSetAns(Math.round(Math.sqrt(sq)), 1, 'Divide', '√' + A + ' ÷ √' + B, '√' + A + ' ÷ √' + B + ' = √' + sq + ' = ' + Math.round(Math.sqrt(sq)) + '.');
  } else if(level === 2){
    let B, m, A, t = 0; do { B = [2,3,5][ri(3)]; m = [8,12,18,20,24,27,45,50][ri(8)]; A = B * m; t++; } while(isPerfSq(A) && t < 40);
    surdSetAns(1, m, 'Divide', '√' + A + ' ÷ √' + B, '√' + A + ' ÷ √' + B + ' = √' + m + ' = ' + surdFmt(surdSimplify(1, m)) + '.');
  } else {
    let d, g, c, B, m, A, t = 0; do { d = rr(2, 3); g = rr(2, 3); c = d*g; B = [2,3][ri(2)]; m = (Math.random() < 0.5) ? [4,9][ri(2)] : [8,12,18][ri(3)]; A = B * m; t++; } while(isPerfSq(A) && t < 40);
    surdSetAns(g, m, 'Divide', surdTerm(c, A) + ' ÷ ' + surdTerm(d, B), surdTerm(c, A) + ' ÷ ' + surdTerm(d, B) + ' = ' + g + '√' + m + ' = ' + surdFmt(surdSimplify(g, m)) + '.');
  }
}

/* ── Percentages: Reverse Percentages ── */
function genPctReverse(el){
  el.style.fontSize = '1.5rem';
  let p, orig, nw, inc, factor;
  if(level === 1){ p = [10,20,25,50,5][ri(5)]; orig = 20 * rr(3, 15); inc = true; factor = 1 + p/100; nw = dp(orig * factor, 2); }
  else if(level === 2){ p = [10,20,25,50][ri(4)]; orig = 20 * rr(3, 15); inc = false; factor = 1 - p/100; nw = dp(orig * factor, 2); }
  else { p = [12,15,40,60][ri(4)]; orig = 100 * rr(1, 6); inc = Math.random() < 0.5; factor = inc ? 1 + p/100 : 1 - p/100; nw = dp(orig * factor, 2); }
  qData.ans = orig;
  qData.workSteps = 'The new price is ' + (inc ? (100 + p) : (100 - p)) + '% of the original, so original = ' + nw + ' ÷ ' + factor + ' = ' + orig + '.';
  el.innerHTML = '<div style="' + A_LBL + '">Find the original amount ($).</div>'
    + '<div style="text-align:center;margin:10px 0;font-weight:900;">After a ' + p + '% ' + (inc ? 'increase' : 'decrease') + ' the price is $' + nw + '. What was the original?</div>';
}

/* ── Ratios & Rates: Best Buys & Unit Price ── */
function genBestBuy(el){
  el.style.fontSize = '1.4rem';
  if(level === 1){
    const U = [['kg','kg'],['L','L'],['item','item']][ri(3)][0];
    const per = rr(2, 9), qty = rr(2, 6), price = per * qty;
    qData.ans = per;
    const qtyStr = U === 'item' ? qty + ' items' : qty + ' ' + U;
    qData.workSteps = '$' + price + ' ÷ ' + qty + ' = $' + per + ' per ' + U + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the price per ' + U + ' ($).</div><div style="text-align:center;margin:10px 0;font-weight:900;">$' + price + ' for ' + qtyStr + '</div>';
  } else if(level === 2){
    const U = ['kg','L'][ri(2)]; let ua, ub; do { ua = rr(2, 9); ub = rr(2, 9); } while(ua === ub);
    const qa = rr(2, 6), qb = rr(2, 6), pa = ua*qa, pb = ub*qb;
    const optA = '$' + pa + ' for ' + qa + ' ' + U, optB = '$' + pb + ' for ' + qb + ' ' + U;
    qData.workSteps = 'A is $' + ua + '/' + U + ', B is $' + ub + '/' + U + ' → the cheaper per ' + U + ' is the better buy.';
    decSetChoice(el, '<div style="' + A_LBL + '">Which is better value?</div>', [optA, optB], ua < ub ? optA : optB);
  } else {
    const U = ['kg','L'][ri(2)]; let ua, ub; do { ua = rr(2, 9); ub = rr(2, 9); } while(ua === ub);
    const qa = rr(2, 6), qb = rr(2, 6), pa = ua*qa, pb = ub*qb;
    qData.ans = Math.abs(ua - ub);
    qData.workSteps = 'A is $' + ua + '/' + U + ', B is $' + ub + '/' + U + ' → saving $' + Math.abs(ua - ub) + ' per ' + U + '.';
    el.innerHTML = '<div style="' + A_LBL + '">How much cheaper per ' + U + ' is the better buy? ($)</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:1.2rem;">$' + pa + ' for ' + qa + ' ' + U + '  vs  $' + pb + ' for ' + qb + ' ' + U + '</div>';
  }
}

/* ═══════════════════════════════════════════════
   FINAL THREE SKILLS (v74.3, Laura)
═══════════════════════════════════════════════ */
/* ── Number: Prime Factorisation ── */
function primeFactorise(n){ const f = {}; let m = n; for(let p = 2; p*p <= m; p++){ while(m % p === 0){ f[p] = (f[p]||0) + 1; m /= p; } } if(m > 1) f[m] = (f[m]||0) + 1; return f; }
function pfIndexHTML(f){ return Object.keys(f).map(Number).sort(function(a,b){return a-b;}).map(function(p){ const e = f[p]; return e === 1 ? '' + p : p + '<sup style="font-size:0.6em;">' + e + '</sup>'; }).join(' × '); }
function pfCount(f){ return Object.keys(f).reduce(function(a,k){ return a + f[k]; }, 0); }
function genPrimeFactor(el){
  el.style.fontSize = '1.4rem';
  if(level === 1){
    let N, f; do { N = rr(12, 144); f = primeFactorise(N); } while(Object.keys(f).length < 2 || Object.keys(f).length > 3);
    const correct = pfIndexHTML(f);
    const opts = [correct];
    // drop an exponent
    { const g = Object.assign({}, f); const ks = Object.keys(g).map(Number); const k = ks[ri(ks.length)]; if(g[k] > 1){ g[k] -= 1; const s = pfIndexHTML(g); if(opts.indexOf(s) < 0) opts.push(s); } }
    // composite grouping (a not prime)
    { for(let a = 4; a <= Math.floor(Math.sqrt(N)) + 4; a++){ if(N % a === 0 && !isPrime(a)){ const s = a + ' × ' + (N / a); if(opts.indexOf(s) < 0){ opts.push(s); } break; } } }
    // wrong prime swap
    { const ks = Object.keys(f).map(Number); const k = ks[ks.length - 1]; const np = [2,3,5,7,11].find(function(p){ return !(p in f); }); if(np != null){ const g = {}; ks.forEach(function(x){ g[x === k ? np : x] = f[x]; }); const s = pfIndexHTML(g); if(opts.indexOf(s) < 0) opts.push(s); } }
    // add-an-exponent (pad to 4 if needed)
    if(opts.length < 4){ const g = Object.assign({}, f); const ks = Object.keys(g).map(Number); const k = ks[0]; g[k] += 1; const s = pfIndexHTML(g); if(opts.indexOf(s) < 0) opts.push(s); }
    qData.workSteps = N + ' = ' + correct + '.';
    decSetChoice(el, '<div style="' + A_LBL + '">Which is the number written as a product of primes?</div><div style="text-align:center;margin:12px 0;font-weight:900;font-size:2.4rem;">' + N + '</div>', opts.slice(0, 4), correct);
  } else if(level === 2){
    let N, f; do { N = rr(24, 300); f = primeFactorise(N); } while(Object.keys(f).length < 2);
    const ks = Object.keys(f).map(Number).sort(function(a,b){return a-b;});
    const hideK = ks[ri(ks.length)]; qData.ans = f[hideK];
    const parts = ks.map(function(p){ const e = f[p]; if(p === hideK) return p + '<sup style="font-size:0.6em;">▢</sup>'; return e === 1 ? '' + p : p + '<sup style="font-size:0.6em;">' + e + '</sup>'; });
    qData.workSteps = N + ' = ' + pfIndexHTML(f) + ', so the missing power is ' + f[hideK] + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the missing power.</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:1.9rem;">' + N + ' = ' + parts.join(' × ') + '</div>';
  } else {
    let N, f; do { N = rr(24, 320); f = primeFactorise(N); } while(pfCount(f) < 3);
    qData.ans = pfCount(f);
    qData.workSteps = N + ' = ' + pfIndexHTML(f) + ' → ' + qData.ans + ' prime factors (counting repeats).';
    el.innerHTML = '<div style="' + A_LBL + '">How many prime factors does this number have, counting repeats?</div><div style="text-align:center;margin:10px 0;font-weight:900;font-size:2.2rem;">' + N + '</div>';
  }
}

/* ── Equations: Rearranging Formulas (recognise the correct rearrangement) ──
   Fractions are drawn as stacked fractions (sfrac) — never with a slash. Each option
   carries a plain-text `t` (for the feedback line) and a stacked-HTML `h` (for the button). */
function sfrac(nH, dH){ return '<span style="display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;line-height:1.05;margin:0 1px;"><span style="border-bottom:2px solid currentColor;padding:0 6px;">' + nH + '</span><span style="padding:0 6px;">' + dH + '</span></span>'; }
function radHTML(inner){ return '<span style="white-space:nowrap;">√<span style="border-top:2px solid currentColor;padding:2px 4px 0;">' + inner + '</span></span>'; }
function O(t, h, c){ return { t:t, h:h, c:!!c }; }
const REAR_L1 = [
  {ft:'P = 4s', fh:'P = 4s', v:'s', o:[ O('s = P/4','s = '+sfrac('P','4'),1), O('s = 4P','s = 4P'), O('s = P − 4','s = P − 4'), O('s = 4/P','s = '+sfrac('4','P')) ]},
  {ft:'A = lw', fh:'A = lw', v:'w', o:[ O('w = A/l','w = '+sfrac('A','l'),1), O('w = Al','w = Al'), O('w = l/A','w = '+sfrac('l','A')), O('w = A − l','w = A − l') ]},
  {ft:'C = πd', fh:'C = πd', v:'d', o:[ O('d = C/π','d = '+sfrac('C','π'),1), O('d = Cπ','d = Cπ'), O('d = π/C','d = '+sfrac('π','C')), O('d = C − π','d = C − π') ]},
  {ft:'v = at', fh:'v = at', v:'t', o:[ O('t = v/a','t = '+sfrac('v','a'),1), O('t = va','t = va'), O('t = a/v','t = '+sfrac('a','v')), O('t = v − a','t = v − a') ]},
  {ft:'d = st', fh:'d = st', v:'s', o:[ O('s = d/t','s = '+sfrac('d','t'),1), O('s = dt','s = dt'), O('s = t/d','s = '+sfrac('t','d')), O('s = d − t','s = d − t') ]},
];
const REAR_L2 = [
  {ft:'v = u + at', fh:'v = u + at', v:'a', o:[ O('a = (v − u)/t','a = '+sfrac('v − u','t'),1), O('a = (v + u)/t','a = '+sfrac('v + u','t')), O('a = v − u − t','a = v − u − t'), O('a = t(v − u)','a = t(v − u)') ]},
  {ft:'y = mx + c', fh:'y = mx + c', v:'x', o:[ O('x = (y − c)/m','x = '+sfrac('y − c','m'),1), O('x = (y + c)/m','x = '+sfrac('y + c','m')), O('x = y − c − m','x = y − c − m'), O('x = m(y − c)','x = m(y − c)') ]},
  {ft:'P = 2(l + w)', fh:'P = 2(l + w)', v:'w', o:[ O('w = P/2 − l','w = '+sfrac('P','2')+' − l',1), O('w = 2P − l','w = 2P − l'), O('w = P − 2l','w = P − 2l'), O('w = (P − l)/2','w = '+sfrac('P − l','2')) ]},
  {ft:'A = ½bh', fh:'A = '+sfrac('1','2')+'bh', v:'h', o:[ O('h = 2A/b','h = '+sfrac('2A','b'),1), O('h = A/(2b)','h = '+sfrac('A','2b')), O('h = 2Ab','h = 2Ab'), O('h = (A − b)/2','h = '+sfrac('A − b','2')) ]},
];
const REAR_L3 = [
  {ft:'A = πr²', fh:'A = πr²', v:'r', o:[ O('r = √(A/π)','r = '+radHTML(sfrac('A','π')),1), O('r = A/π','r = '+sfrac('A','π')), O('r = √A / π','r = '+sfrac(radHTML('A'),'π')), O('r = A/π²','r = '+sfrac('A','π²')) ]},
  {ft:'a² + b² = c²', fh:'a² + b² = c²', v:'b', o:[ O('b = √(c² − a²)','b = '+radHTML('c² − a²'),1), O('b = c − a','b = c − a'), O('b = √(c² + a²)','b = '+radHTML('c² + a²')), O('b = c² − a²','b = c² − a²') ]},
  {ft:'E = mc²', fh:'E = mc²', v:'c', o:[ O('c = √(E/m)','c = '+radHTML(sfrac('E','m')),1), O('c = E/m','c = '+sfrac('E','m')), O('c = √E / m','c = '+sfrac(radHTML('E'),'m')), O('c = E/m²','c = '+sfrac('E','m²')) ]},
  {ft:'s = ½at²', fh:'s = '+sfrac('1','2')+'at²', v:'t', o:[ O('t = √(2s/a)','t = '+radHTML(sfrac('2s','a')),1), O('t = 2s/a','t = '+sfrac('2s','a')), O('t = √(s/a)','t = '+radHTML(sfrac('s','a'))), O('t = 2s/a²','t = '+sfrac('2s','a²')) ]},
];
function genRearrange(el){
  el.style.fontSize = '1.3rem';
  const pool = level === 1 ? REAR_L1 : level === 2 ? REAR_L2 : REAR_L3;
  const it = pool[ri(pool.length)];
  const opts = shuffleArr(it.o.slice());
  const wrap = function(inner){ return '<span style="display:inline-flex;align-items:center;justify-content:center;gap:3px;font-weight:900;">' + inner + '</span>'; };
  qData.chosen = null;
  qData.choices = opts.map(function(o, i){ return { code:'o'+i, html:wrap(o.h) }; });
  qData.choiceText = {}; opts.forEach(function(o, i){ qData.choiceText['o'+i] = o.t; });
  qData.choiceAns = 'o' + opts.findIndex(function(o){ return o.c; });
  qData.workSteps = 'Rearrange ' + it.ft + ' to make ' + it.v + ' the subject → ' + (it.o.find(function(o){return o.c;}).t) + '.';
  el.innerHTML = '<div style="' + A_LBL + '">Make <b>' + it.v + '</b> the subject:</div>'
    + '<div style="text-align:center;margin:10px 0;font-size:1.9rem;">' + wrap(it.fh) + '</div>';
}

/* ── Geometry: Angles in Polygons ── */
const POLY_NAMES = {3:'triangle',4:'quadrilateral',5:'pentagon',6:'hexagon',7:'heptagon',8:'octagon',9:'nonagon',10:'decagon',12:'dodecagon'};
/* ── Polygon geometry toolkit (all point generators return MATH coords, y up) ── */
function polyRegPts(n){ const p = []; for(let i = 0; i < n; i++){ const a = (-90 + i * 360 / n) * Math.PI / 180; p.push([Math.cos(a), Math.sin(a)]); } return p; }
// Convex but irregular: distinct points on a circle with unequal angular gaps.
function polyJitterPts(n){ const gaps = [], p = []; let tot = 0; for(let i = 0; i < n; i++){ const g = 0.55 + Math.random(); gaps.push(g); tot += g; } let acc = 0; for(let i = 0; i < n; i++){ const a = -Math.PI/2 + 2*Math.PI*acc/tot; acc += gaps[i]; p.push([Math.cos(a), Math.sin(a)]); } return p; }
// Concave: push one vertex deep past the centroid so it "caves in" as an obvious
// reflex notch (v74.5, Laura — the old shallow pull often still read as convex).
// Verify: the notch angle is clearly reflex (≥ 205°) AND the polygon stays simple
// (no crossing edges); retry, then fall back to a guaranteed concave "dart".
function polyIsConcave(pts){ const n = pts.length; let pos = 0, neg = 0; for(let i = 0; i < n; i++){ const a = pts[i], b = pts[(i+1)%n], c = pts[(i+2)%n]; const cr = (b[0]-a[0])*(c[1]-b[1]) - (b[1]-a[1])*(c[0]-b[0]); if(cr > 1e-6) pos++; else if(cr < -1e-6) neg++; } return pos > 0 && neg > 0; }
// Largest interior angle (degrees). > 180 ⇒ concave; the bigger it is, the deeper the notch.
function polyMaxInterior(pts){
  const n = pts.length; let area = 0;
  for(let i = 0; i < n; i++){ const p = pts[i], q = pts[(i+1)%n]; area += p[0]*q[1] - q[0]*p[1]; }
  const s = area > 0 ? 1 : -1; let mx = 0;
  for(let i = 0; i < n; i++){
    const a = pts[(i-1+n)%n], b = pts[i], c = pts[(i+1)%n];
    const ein = [b[0]-a[0], b[1]-a[1]], eout = [c[0]-b[0], c[1]-b[1]];
    const cross = ein[0]*eout[1] - ein[1]*eout[0], dot = ein[0]*eout[0] + ein[1]*eout[1];
    const interior = 180 - Math.atan2(s*cross, dot)*180/Math.PI;   // convex <180, reflex >180
    if(interior > mx) mx = interior;
  }
  return mx;
}
function polySegCross(a,b,c,d){
  const o = function(p,q,r){ return (q[0]-p[0])*(r[1]-p[1]) - (q[1]-p[1])*(r[0]-p[0]); };
  const d1 = o(a,b,c), d2 = o(a,b,d), d3 = o(c,d,a), d4 = o(c,d,b);
  return ((d1>0&&d2<0)||(d1<0&&d2>0)) && ((d3>0&&d4<0)||(d3<0&&d4>0));
}
function polyIsSimple(pts){
  const n = pts.length;
  for(let i = 0; i < n; i++) for(let j = i+1; j < n; j++){
    if(i === j || (i+1)%n === j || (j+1)%n === i) continue;   // skip shared-vertex edges
    if(polySegCross(pts[i], pts[(i+1)%n], pts[j], pts[(j+1)%n])) return false;
  }
  return true;
}
function polyConcavePts(n){
  for(let t = 0; t < 80; t++){
    const p = polyJitterPts(n), cx = p.reduce(function(a,q){return a+q[0];},0)/n, cy = p.reduce(function(a,q){return a+q[1];},0)/n, i = ri(n);
    const a = p[(i-1+n)%n], b = p[(i+1)%n];
    const mx = (a[0]+b[0])/2, my = (a[1]+b[1])/2;             // midpoint of the two neighbours
    // Drive the vertex from that midpoint through the centroid and out the far side:
    // factor > 1 lands it past the middle → a deep, unmistakable reflex notch.
    const f = 1.25 + Math.random()*0.25;
    p[i] = [mx + (cx-mx)*f, my + (cy-my)*f];
    if(polyMaxInterior(p) >= 205 && polyIsSimple(p)) return p;
  }
  return [[0,1],[0.62,-0.9],[0,-0.32],[-0.62,-0.9]];   // guaranteed deep concave dart
}
// Build a to-scale convex polygon whose interior angle at vertex k is A[k] (degrees).
function polyFromInteriorAngles(A){
  const n = A.length, ext = A.map(function(a){ return Math.PI - a*Math.PI/180; });
  const dirs = []; let h = 0; for(let k = 0; k < n; k++){ dirs.push([Math.cos(h), Math.sin(h)]); h += ext[(k+1)%n]; }
  // Solve Σ L_k·dir_k = 0 by adjusting two edge lengths (rest = 1). Pick the pair that
  // maximises the smaller of the two solved lengths → a well-proportioned, closed polygon.
  let best = null;
  for(let a = 0; a < n; a++) for(let b = a+1; b < n; b++){
    let Rx = 0, Ry = 0; for(let k = 0; k < n; k++){ if(k===a||k===b) continue; Rx += dirs[k][0]; Ry += dirs[k][1]; }
    const det = dirs[a][0]*dirs[b][1] - dirs[b][0]*dirs[a][1]; if(Math.abs(det) < 1e-6) continue;
    const La = (-Rx*dirs[b][1] + Ry*dirs[b][0])/det, Lb = (dirs[a][0]*(-Ry) - dirs[a][1]*(-Rx))/det;
    const m = Math.min(La, Lb);
    if(La > 0.05 && Lb > 0.05 && (best === null || m > best.m)){ best = { a:a, b:b, La:La, Lb:Lb, m:m }; }
  }
  const L = new Array(n).fill(1); if(best){ L[best.a] = best.La; L[best.b] = best.Lb; }
  const pts = [[0,0]]; for(let k = 0; k < n-1; k++){ const p = pts[k]; pts.push([p[0] + L[k]*dirs[k][0], p[1] + L[k]*dirs[k][1]]); }
  return pts;
}
// Draw a polygon (fit to canvas, flip to screen). labels[k] shown just inside vertex k.
function polyShapeSVG(pts, labels){
  let P = pts.map(function(p){ return [p[0], -p[1]]; });
  P = pgFit(P, 46, 22, 254, 196);
  let s = pgPoly(P);
  if(labels){ const cx = P.reduce(function(a,p){return a+p[0];},0)/P.length, cy = P.reduce(function(a,p){return a+p[1];},0)/P.length;
    for(let i = 0; i < P.length; i++){ if(labels[i] == null) continue; const p = P[i], ux = cx-p[0], uy = cy-p[1], l = Math.hypot(ux, uy) || 1; s += pgLbl(p[0] + ux/l*26, p[1] + uy/l*26, labels[i], /[xa]/.test(String(labels[i]))); } }
  return decSvg(s, 212);
}
function polyAnglesSVG(A, labels){ return polyShapeSVG(polyFromInteriorAngles(A), labels); }

// Angles-in-polygon algebra sets (v74.5, Laura): each vertex is EITHER an algebra term
// (coef·a, e.g. a or 2a) OR a plain-number angle (konst°, e.g. 90°), never both — so a
// question reads like "a, 2a, 90°, 90°". Interior angles = coef·a + konst, and the whole
// set sums to (n−2)·180, giving a whole-number a with every angle in (30°, 175°).
// Solve: a = ((n−2)·180 − Σkonst) / Σcoef.
const APOLY_ALG = [
  {n:4, coef:[1,2,0,0], konst:[0,0,90,90]},    // a=60 → 60,120,90,90
  {n:4, coef:[1,1,0,0], konst:[0,0,80,100]},   // a=90 → 90,90,80,100
  {n:4, coef:[2,1,0,0], konst:[0,0,60,120]},   // a=60 → 120,60,60,120
  {n:4, coef:[1,3,0,0], konst:[0,0,100,60]},   // a=50 → 50,150,100,60
  {n:4, coef:[1,2,0,0], konst:[0,0,70,80]},    // a=70 → 70,140,70,80
  {n:5, coef:[1,2,0,0,0], konst:[0,0,100,110,120]}, // a=70 → 70,140,100,110,120
  {n:5, coef:[1,1,1,0,0], konst:[0,0,0,120,120]},   // a=100 → 100,100,100,120,120
  {n:5, coef:[2,1,0,0,0], konst:[0,0,90,100,110]},  // a=80 → 160,80,90,100,110
  {n:5, coef:[1,1,0,0,0], konst:[0,0,100,120,140]}, // a=90 → 90,90,100,120,140
];
function genAnglePoly(el){
  el.style.fontSize = '1.05rem';
  if(level === 1){
    const n = [4,5,6,7,8][ri(5)], sum = (n - 2) * 180; qData.ans = sum;
    qData.workSteps = 'Interior angle sum = (n − 2) × 180 = (' + n + ' − 2) × 180 = ' + sum + '°.';
    el.innerHTML = '<div style="' + A_LBL + '">Sum of the interior angles of this ' + POLY_NAMES[n] + '? (degrees)</div>' + polyShapeSVG(polyRegPts(n), null);
  } else if(level === 2){
    const n = [4,5][ri(2)], sum = (n - 2) * 180;
    let given, x, t = 0;
    do { given = []; let tot = 0; for(let i = 0; i < n - 1; i++){ const g = rr(60, 150); given.push(g); tot += g; } x = sum - tot; t++; } while((x < 35 || x > 165) && t < 120);
    qData.ans = x;
    const angs = given.concat([x]);                       // vertex k gets angs[k]
    const labels = given.map(function(g){ return g + '°'; }); labels.push('x');
    qData.workSteps = 'Angles add to ' + sum + '°.  x = ' + sum + ' − (' + given.join(' + ') + ') = ' + x + '°.';
    el.innerHTML = '<div style="' + A_LBL + '">Find x (degrees).</div>' + polyAnglesSVG(angs, labels);
  } else if(level === 3){
    const n = [5,6,8,9,10,12][ri(6)], interior = Math.random() < 0.5;
    qData.ans = interior ? (n - 2) * 180 / n : 360 / n;
    qData.workSteps = interior
      ? 'Each interior angle = (n − 2) × 180 ÷ n = ' + ((n-2)*180) + ' ÷ ' + n + ' = ' + qData.ans + '°.'
      : 'Each exterior angle = 360 ÷ n = 360 ÷ ' + n + ' = ' + qData.ans + '°.';
    el.innerHTML = '<div style="' + A_LBL + '">Each ' + (interior ? 'interior' : 'exterior') + ' angle of a regular ' + POLY_NAMES[n] + '? (degrees)</div>' + polyShapeSVG(polyRegPts(n), null);
  } else {
    // L4: some angles are algebra terms (a, 2a, …), some are plain numbers (e.g. 40°). Solve for a.
    // Rotate the vertex arrays so the algebra/number angles don't always sit in the same spot. (v74.5, Laura)
    const it = APOLY_ALG[ri(APOLY_ALG.length)], n = it.n, r = ri(n);
    const coefs = it.coef.slice(r).concat(it.coef.slice(0, r));
    const konst = it.konst.slice(r).concat(it.konst.slice(0, r));
    const sum = (n - 2) * 180;
    const S = coefs.reduce(function(x,y){return x+y;}, 0);
    const K = konst.reduce(function(x,y){return x+y;}, 0);
    const a = (sum - K) / S;
    qData.ans = a;
    const angs = coefs.map(function(c, k){ return c * a + konst[k]; });
    const labels = coefs.map(function(c, k){ return c === 0 ? (konst[k] + '°') : ((c === 1 ? '' : c) + 'a'); });
    const terms = coefs.map(function(c, k){ return c === 0 ? String(konst[k]) : ((c === 1 ? '' : c) + 'a'); });
    qData.workSteps = 'Angles add to ' + sum + '°: ' + terms.join(' + ') + ' = ' + S + 'a + ' + K
      + ' = ' + sum + ', so ' + S + 'a = ' + (sum - K) + ', a = <b>' + a + '°</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Some angles are shown in terms of a, some are numbers. Find the value of a (degrees).</div>' + polyAnglesSVG(angs, labels);
  }
}

/* ═══════════════════════════════════════════════
   RATIOS & RATES (v22)
═══════════════════════════════════════════════ */

/* Helper: pick a "pretty" two-part starter ratio in lowest terms (gcd=1).
   Used to build BOTH equivalent and simplifying ratio questions. */
function pickPrettyRatio2() {
  const POOL = [[1,2],[1,3],[1,4],[1,5],[2,3],[2,5],[3,4],[3,5],[3,7],[4,5],[4,7],[5,7],[5,8],[5,9],[7,8],[7,9],[5,2],[7,3],[8,3],[9,4],[7,4],[5,3],[8,5]];
  return POOL[ri(POOL.length)];
}
function pickPrettyRatio3() {
  const POOL = [[1,2,3],[1,2,4],[1,3,5],[2,3,5],[2,3,4],[2,5,7],[3,4,5],[3,5,7],[1,2,5],[2,4,5],[3,4,6],[1,3,4],[2,5,8],[3,5,8],[4,5,6],[2,4,7]];
  return POOL[ri(POOL.length)];
}

/* ── 1. SIMPLIFYING RATIOS ── */
function genRatioSimplify() {
  const el = id('qText');
  el.style.fontSize = '2.4rem';

  if (level === 1) {
    // Whole-number ratio, scaled by a common factor
    const [a, b] = pickPrettyRatio2();
    const k = rr(2, 9);
    const num1 = a * k, num2 = b * k;
    qData.ansA = a; qData.ansB = b;
    const g = gcd(num1, num2);
    qData.workSteps = `The HCF of ${num1} and ${num2} is ${g}. Divide both parts by ${g}: ${num1} : ${num2} = <b>${a} : ${b}</b>.`;
    el.textContent = `${num1} : ${num2}`;
  }
  else if (level === 2) {
    // Decimals — pick a clean simplified ratio, multiply by 0.1 or 0.01 + a factor
    const [a, b] = pickPrettyRatio2();
    const k = rr(2, 6);                    // small whole-number factor
    const placesChoice = Math.random() < 0.5 ? 10 : 100;
    const num1 = (a * k) / placesChoice;
    const num2 = (b * k) / placesChoice;
    qData.ansA = a; qData.ansB = b;
    // Format with appropriate decimal places
    const dp1 = placesChoice === 10 ? 1 : 2;
    qData.workSteps = `Multiply both parts by ${placesChoice} to clear the decimals: ${num1.toFixed(dp1)} : ${num2.toFixed(dp1)} = ${a*k} : ${b*k}. Then divide by the HCF ${k}: <b>${a} : ${b}</b>.`;
    el.textContent = `${num1.toFixed(dp1)} : ${num2.toFixed(dp1)}`;
  }
  else {
    // Level 3 — fractions. Build pairs of proper fractions in lowest terms,
    // then compute what the simplified ratio is. We accept any "pretty"
    // result (both parts ≤ 12); reject and retry if the answer is ugly.
    const denomPool = [2, 3, 4, 5, 6];

    let pickedNumL, pickedDenL, pickedNumR, pickedDenR, ansA, ansB;
    let found = false;
    for (let tries = 0; tries < 60 && !found; tries++) {
      const denL = denomPool[ri(denomPool.length)];
      const denR = denomPool[ri(denomPool.length)];
      // Numerator: 1..(denL*2) so we sometimes get fractions > 1 (improper)
      const numL = rr(1, denL * 2 - 1);
      const numR = rr(1, denR * 2 - 1);
      // Need fractions in lowest terms
      if (gcd(numL, denL) !== 1) continue;
      if (gcd(numR, denR) !== 1) continue;
      // Reject whole-number fractions
      if (denL === 1 || denR === 1) continue;
      // Reject identical fractions (gives boring 1:1)
      if (numL === numR && denL === denR) continue;
      // Compute simplified ratio: (numL/denL):(numR/denR) = (numL*denR):(numR*denL)
      const lhs = numL * denR, rhs = numR * denL;
      const g = gcd(lhs, rhs);
      const sa = lhs / g, sb = rhs / g;
      // Accept only if both parts ≤ 12 (keep it mental)
      if (sa > 12 || sb > 12) continue;
      pickedNumL = numL; pickedDenL = denL;
      pickedNumR = numR; pickedDenR = denR;
      ansA = sa; ansB = sb;
      found = true;
    }
    if (!found) {
      // Safe fallback
      pickedNumL = 1; pickedDenL = 2; pickedNumR = 3; pickedDenR = 4;
      ansA = 2; ansB = 3;
    }
    qData.ansA = ansA;
    qData.ansB = ansB;
    qData.workSteps = `Multiply both parts by the common denominator to clear the fractions, then divide by their HCF: ${pickedNumL}/${pickedDenL} : ${pickedNumR}/${pickedDenR} = <b>${ansA} : ${ansB}</b>.`;
    el.textContent = `${pickedNumL}/${pickedDenL} : ${pickedNumR}/${pickedDenR}`;
  }
}

/* ── 2. EQUIVALENT RATIOS (fill in the unknown — single number answer) ── */
function genRatioEquiv() {
  const el = id('qText');
  el.style.fontSize = '2rem';

  if (level === 1) {
    // 2-part ratio. Pick simplified ratio a:b, multiplier k.
    const [a, b] = pickPrettyRatio2();
    const k = rr(2, 9);
    // Decide which side has the unknown (left or right of the second ratio)
    const unknownSide = ri(2); // 0 = left, 1 = right
    if (unknownSide === 0) {
      qData.ans = a * k;
      qData.workSteps = `${b} was multiplied by ${k} to get ${b*k}, so multiply the other part by ${k} too: ${a} × ${k} = <b>${a*k}</b>.`;
      el.textContent = `${a} : ${b}  =  ?  : ${b * k}`;
    } else {
      qData.ans = b * k;
      qData.workSteps = `${a} was multiplied by ${k} to get ${a*k}, so multiply the other part by ${k} too: ${b} × ${k} = <b>${b*k}</b>.`;
      el.textContent = `${a} : ${b}  =  ${a * k} : ?`;
    }
  }
  else if (level === 2) {
    // 3-part ratio, whole-number multiplier
    const [a, b, c] = pickPrettyRatio3();
    const k = rr(2, 6);
    const which = ri(3); // 0,1,2 — which is unknown
    const scaled = [a * k, b * k, c * k];
    const ans = scaled[which];
    qData.ans = ans;
    const base3 = [a, b, c];
    qData.workSteps = `Each part is multiplied by ${k}. So the missing part = ${base3[which]} × ${k} = <b>${ans}</b>.`;
    const parts = scaled.map((v, i) => i === which ? '?' : v);
    el.textContent = `${a} : ${b} : ${c}  =  ${parts[0]} : ${parts[1]} : ${parts[2]}`;
  }
  else {
    // Level 3 — 3-part ratio, decimal multiplier (0.5, 1.5, 2.5)
    // Pick base ratio whose values are even multiples so ×0.5 still gives wholes
    // Restrict to ratios where a, b, c are all even when k = 0.5 used.
    const evenPool = [[2,4,6],[4,6,8],[2,4,8],[4,6,10],[2,6,10],[6,8,10],[4,8,12],[2,4,10]];
    const oddPool  = [[2,3,5],[3,5,7],[1,3,5],[3,4,5],[2,5,7]];
    const useHalf = Math.random() < 0.5;
    let base, k;
    if (useHalf) {
      base = evenPool[ri(evenPool.length)];
      k = 0.5;
    } else {
      // 1.5 or 2.5 — base must be a multiple of 2 for these to work cleanly
      base = evenPool[ri(evenPool.length)];
      k = Math.random() < 0.5 ? 1.5 : 2.5;
      // Avoid the oddPool reference being unused — keep variety
      if (Math.random() < 0.2) base = oddPool[ri(oddPool.length)].map(v => v * 2);
    }
    const scaled = base.map(v => v * k);
    // Sanity: all scaled values must be whole numbers
    if (!scaled.every(v => Number.isInteger(v))) {
      // Fallback safe choice
      base = [2, 4, 6]; k = 1.5;
    }
    const finalScaled = base.map(v => v * k);
    const which = ri(3);
    qData.ans = finalScaled[which];
    qData.workSteps = `Each part is multiplied by ${k}. So the missing part = ${base[which]} × ${k} = <b>${finalScaled[which]}</b>.`;
    const parts = finalScaled.map((v, i) => i === which ? '?' : v);
    el.textContent = `${base[0]} : ${base[1]} : ${base[2]}  =  ${parts[0]} : ${parts[1]} : ${parts[2]}`;
  }
}

/* ── 3. SHARING RATIOS (forward share — single number answer) ── */
function genRatioShare() {
  const el = id('qText');
  el.style.fontSize = '1.5rem';

  if (level === 1) {
    // Two-part share — keep ALL arithmetic inside the 12× tables so the focus
    // is on the *method* of sharing, not big-number multiplication.
    // Constraint: every part value ≤ 9 and the multiplier ≤ 12, so the worst
    // case computation a student does is 9 × 12 = 108 (well within fluency).
    const L1_RATIOS = [[1,2],[1,3],[1,4],[2,3],[2,5],[3,4],[3,5],[3,7],[4,5],[5,2],[5,3],[5,4],[7,2],[7,3],[7,4],[7,5],[8,3],[2,7],[3,8],[4,7]];
    const [a, b] = L1_RATIOS[ri(L1_RATIOS.length)];
    // Multiplier 2..12 — keeps all per-part products inside the 12× tables
    const mult = rr(2, 12);
    const sum = a + b;
    const total = sum * mult;
    const isMoney = Math.random() < 0.7;
    const totalStr = isMoney ? `$${total}` : `${total}`;
    // Ask for either the larger or smaller share (randomly)
    const askForA = Math.random() < 0.5;
    qData.ans = askForA ? a * mult : b * mult;
    const which = askForA
      ? (a > b ? 'larger' : 'smaller')
      : (b > a ? 'larger' : 'smaller');
    qData.workSteps = `Total parts = ${a} + ${b} = ${sum}. One part = ${total} ÷ ${sum} = ${mult}. The ${which} share = ${askForA?a:b} × ${mult} = <b>${qData.ans}</b>.`;
    el.innerHTML = `Share ${totalStr} in <strong>${a} : ${b}</strong><br><span style="color:var(--accent)">${which} share = ?</span>`;
  }
  else if (level === 2) {
    // Three-part share, smaller numbers
    const [a, b, c] = pickPrettyRatio3();
    const sum = a + b + c;
    const mult = rr(3, 15);
    const total = sum * mult;
    const isMoney = Math.random() < 0.6;
    const totalStr = isMoney ? `$${total}` : `${total}`;
    // Sort to identify smallest/middle/largest
    const sorted = [a, b, c].slice().sort((x, y) => x - y);
    const labels = ['smallest', 'middle', 'largest'];
    const idx = ri(3);
    const targetVal = sorted[idx];
    qData.ans = targetVal * mult;
    qData.workSteps = `Total parts = ${a} + ${b} + ${c} = ${sum}. One part = ${total} ÷ ${sum} = ${mult}. The ${labels[idx]} share = ${targetVal} × ${mult} = <b>${qData.ans}</b>.`;
    el.innerHTML = `Share ${totalStr} in <strong>${a} : ${b} : ${c}</strong><br><span style="color:var(--accent)">${labels[idx]} share = ?</span>`;
  }
  else if (level === 3) {
    // Level 3 — three-part with larger totals
    const [a, b, c] = pickPrettyRatio3();
    const sum = a + b + c;
    const mult = rr(15, 60);
    const total = sum * mult;
    const isMoney = Math.random() < 0.6;
    const totalStr = isMoney ? `$${total}` : `${total}`;
    const sorted = [a, b, c].slice().sort((x, y) => x - y);
    const labels = ['smallest', 'middle', 'largest'];
    const idx = ri(3);
    const targetVal = sorted[idx];
    qData.ans = targetVal * mult;
    qData.workSteps = `Total parts = ${a} + ${b} + ${c} = ${sum}. One part = ${total} ÷ ${sum} = ${mult}. The ${labels[idx]} share = ${targetVal} × ${mult} = <b>${qData.ans}</b>.`;
    el.innerHTML = `Share ${totalStr} in <strong>${a} : ${b} : ${c}</strong><br><span style="color:var(--accent)">${labels[idx]} share = ?</span>`;
  }
  else {
    // Level 4 — given ONE part or the DIFFERENCE, work back to what's asked.
    const [a, b] = pickPrettyRatio2();
    const mult = rr(3, 15);
    const smaller = Math.min(a, b), larger = Math.max(a, b);
    const money = Math.random() < 0.6, $ = money ? '$' : '';
    const mode = ri(3);
    if (mode === 0) {          // given smaller share → find larger
      qData.ans = larger * mult;
      qData.workSteps = 'One part = ' + (smaller*mult) + ' ÷ ' + smaller + ' = ' + mult + ' per part → larger = ' + larger + ' × ' + mult + ' = <b>' + qData.ans + '</b>.';
      el.innerHTML = `In <strong>${a} : ${b}</strong>, the smaller share is ${$}${smaller*mult}.<br><span style="color:var(--accent)">larger share = ?</span>`;
    } else if (mode === 1) {   // given difference → find total
      const diff = (larger - smaller) * mult;
      qData.ans = (a + b) * mult;
      qData.workSteps = 'Difference ' + diff + ' = ' + (larger-smaller) + ' parts → 1 part = ' + mult + ' → total = ' + (a+b) + ' × ' + mult + ' = <b>' + qData.ans + '</b>.';
      el.innerHTML = `In <strong>${a} : ${b}</strong>, the difference between the shares is ${$}${diff}.<br><span style="color:var(--accent)">total = ?</span>`;
    } else {                   // given larger share → find smaller
      qData.ans = smaller * mult;
      qData.workSteps = 'One part = ' + (larger*mult) + ' ÷ ' + larger + ' = ' + mult + ' per part → smaller = ' + smaller + ' × ' + mult + ' = <b>' + qData.ans + '</b>.';
      el.innerHTML = `In <strong>${a} : ${b}</strong>, the larger share is ${$}${larger*mult}.<br><span style="color:var(--accent)">smaller share = ?</span>`;
    }
  }
}

/* ── 4. SIMPLIFYING RATES (express as a unit rate) ── */
function genRateSimplify() {
  const el = id('qText');
  el.style.fontSize = '1.5rem';

  // Pick a context: $/kg, km/h, $/L
  const contexts = [
    { qty: '$',  per: 'kg', label: '$ per kg',     verb: 'cost' },
    { qty: '',   per: 'h',  label: 'km per hour',  verb: 'travel', unit: 'km' },
    { qty: '$',  per: 'L',  label: '$ per litre',  verb: 'cost' }
  ];
  const ctx = contexts[ri(contexts.length)];

  let unitRate, total, divisor;
  if (level === 1) {
    // Whole-number unit rate
    unitRate = rr(2, 12);
    divisor = rr(2, 9);
    total = unitRate * divisor;
  }
  else {
    // Level 2 — decimal unit rate (1 d.p.)
    // Pick a divisor and a unit rate that come out to 1 d.p. cleanly
    divisor = rr(2, 9);
    const unitRateTimes10 = rr(15, 99); // gives e.g. 3.7 etc.
    unitRate = unitRateTimes10 / 10;
    total = dp(unitRate * divisor, 2);
  }
  qData.ans = unitRate;

  // Format the question prompt
  let qStr;
  if (ctx.qty === '$') {
    qStr = `$${total} for ${divisor} ${ctx.per}`;
    qData.workSteps = `Find the cost of ONE ${ctx.per}: ${total} ÷ ${divisor} = <b>$${unitRate}</b> per ${ctx.per}.`;
    el.innerHTML = `${qStr}<br><span style="color:var(--accent)">$ per ${ctx.per} = ?</span>`;
  } else {
    qStr = `${total} ${ctx.unit} in ${divisor} ${ctx.per}`;
    qData.workSteps = `Find the amount in ONE ${ctx.per}: ${total} ÷ ${divisor} = <b>${unitRate} ${ctx.unit}/${ctx.per}</b>.`;
    el.innerHTML = `${qStr}<br><span style="color:var(--accent)">${ctx.unit}/${ctx.per} = ?</span>`;
  }
}

/* ── 5. CONVERTING RATES ── */
function genRateConvert() {
  const el = id('qText');
  el.style.fontSize = '1.5rem';

  // Pick a conversion type
  // L1: km/h ↔ m/s with whole-number answers
  //     $/kg → c/g (whole or one-decimal)
  // L2: anything; allow decimal answers
  if (level === 1) {
    const choice = ri(3);
    if (choice === 0) {
      // km/h → m/s. Pick m/s value (whole), convert to km/h
      const ms = rr(5, 30);
      const kmh = ms * 3.6;
      // Only use if kmh is whole (i.e. ms divisible by 5)
      if (Number.isInteger(kmh)) {
        qData.ans = ms;
        qData.workSteps = `km/h → m/s means divide by 3.6: ${kmh} ÷ 3.6 = <b>${ms}</b> m/s.`;
        el.innerHTML = `${kmh} km/h<br><span style="color:var(--accent)">m/s = ?</span>`;
        return;
      }
      // Fallback: pick a known clean pair
      const cleanMs = [5, 10, 15, 20, 25, 30][ri(6)];
      qData.ans = cleanMs;
      qData.workSteps = `km/h → m/s means divide by 3.6: ${cleanMs * 3.6} ÷ 3.6 = <b>${cleanMs}</b> m/s.`;
      el.innerHTML = `${cleanMs * 3.6} km/h<br><span style="color:var(--accent)">m/s = ?</span>`;
    }
    else if (choice === 1) {
      // m/s → km/h
      const ms = [5, 10, 15, 20, 25, 30][ri(6)];
      const kmh = ms * 3.6;
      qData.ans = kmh;
      qData.workSteps = `m/s → km/h means multiply by 3.6: ${ms} × 3.6 = <b>${kmh}</b> km/h.`;
      el.innerHTML = `${ms} m/s<br><span style="color:var(--accent)">km/h = ?</span>`;
    }
    else {
      // $/kg → cents/g. $X/kg = X/10 cents/g
      const dollarsPerKg = rr(1, 9); // whole dollars
      qData.ans = dp(dollarsPerKg / 10, 1);
      qData.workSteps = `$${dollarsPerKg}/kg = ${dollarsPerKg*100} cents for 1000 g, so per gram = ${dollarsPerKg*100} ÷ 1000 = <b>${qData.ans}</b> cents/g.`;
      el.innerHTML = `$${dollarsPerKg}/kg<br><span style="color:var(--accent)">cents per gram = ?</span>`;
    }
  }
  else {
    // Level 2 — decimal answers OK
    const choice = ri(3);
    if (choice === 0) {
      // $/L → cents/mL. $X/L = X/10 c/mL.
      const dollarsPerL = dp(rr(80, 350) / 100, 2); // e.g. 1.20
      qData.ans = dp(dollarsPerL / 10, 3);
      qData.workSteps = `$${dollarsPerL.toFixed(2)}/L = ${dp(dollarsPerL*100,2)} cents for 1000 mL, so per mL = ${dp(dollarsPerL*100,2)} ÷ 1000 = <b>${qData.ans}</b> cents/mL.`;
      el.innerHTML = `$${dollarsPerL.toFixed(2)}/L<br><span style="color:var(--accent)">cents per mL = ?</span>`;
    }
    else if (choice === 1) {
      // km/h → m/s. Pick kmh that gives a clean answer (kmh divisible by 3.6 ideally)
      const kmh = [18, 36, 54, 72, 90, 108, 27, 45, 63, 81][ri(10)];
      qData.ans = dp(kmh / 3.6, 2);
      qData.workSteps = `km/h → m/s means divide by 3.6: ${kmh} ÷ 3.6 = <b>${qData.ans}</b> m/s.`;
      el.innerHTML = `${kmh} km/h<br><span style="color:var(--accent)">m/s = ?</span>`;
    }
    else {
      // $/kg → cents/g, decimal version
      const dollarsPerKg = dp(rr(50, 950) / 100, 2); // e.g. $2.50
      qData.ans = dp(dollarsPerKg / 10, 3);
      qData.workSteps = `$${dollarsPerKg.toFixed(2)}/kg = ${dp(dollarsPerKg*100,2)} cents for 1000 g, so per gram = ${dp(dollarsPerKg*100,2)} ÷ 1000 = <b>${qData.ans}</b> cents/g.`;
      el.innerHTML = `$${dollarsPerKg.toFixed(2)}/kg<br><span style="color:var(--accent)">cents per gram = ?</span>`;
    }
  }
}

/* ═══════════════════════════════════════════════
   HELPERS
═══════════════════════════════════════════════ */
function id(x)       { return document.getElementById(x); }
function setText(x,v){ const el=document.getElementById(x); if(el) el.textContent=v; }
function r(n)        { return Math.floor(Math.random()*n)+1; }
function rr(a,b)     { return Math.floor(Math.random()*(b-a+1))+a; }
function ri(n)       { return Math.floor(Math.random()*n); }
function nz(x)       { return x===0?1:x; }
function f(x)        { return x<0?`(${x})`:String(x); }


/* ════════════════════════════════════════════════════════════
   MOBILE KEYPAD SYSTEM
   - Shows on screens < 768px only
   - Suppresses native keyboard (readonly trick + custom input)
   - Tracks which input is "focused" (kbTarget)
   - Adapts key layout per skill mode (kbMode)
════════════════════════════════════════════════════════════ */

/* ── v78.4 (Laura: "it's not letting typing happen in any box") ──────────────
   On a narrow screen every answer box is made readonly on purpose, so the phone's
   native keyboard stays down and the app's own keypad drives the boxes. The test
   for "narrow" was window width ALONE — which is wrong, because a laptop with a
   narrow window, a split screen, or the app running inside a preview pane is not
   a phone. Those users got readonly boxes AND no reason to look for the on-screen
   keypad: typing simply did nothing.

   Two changes:
     1. A phone must have a COARSE primary pointer (i.e. a finger) as well as a
        narrow window. If matchMedia is missing or lies, we fall through to
        "not mobile", which is the safe direction — the worst case is a student
        gets their native keyboard instead of ours, not a dead input.
     2. An escape hatch. The first real key press from a physical keyboard turns
        the readonly trick OFF for the rest of the session and hides the keypad,
        so a tablet with a keyboard case, or anything the pointer test gets wrong,
        recovers by itself the moment the student tries to type.               */
let kbPhysical = false;
function kbHasCoarsePointer() {
  try {
    if (window.matchMedia) return window.matchMedia('(pointer: coarse)').matches;
  } catch (e) {}
  return ('ontouchstart' in window) || (navigator.maxTouchPoints || 0) > 0;
}
/* v91 (Laura): the threshold is 900, NOT 768, and it is 900 because that is where
   the desktop layout starts. Between 768 and 899 the app used to fall in a gap:
   too wide for the phone rules (which ended at 767) and too narrow for the
   desktop ones (which begin at 900), so a TOUCH device in that band got no
   keypad, no readonly inputs and no two-column layout — which is exactly what a
   tablet, a split-screen phone, and the app's own in-app preview pane land in.
   Reported as "the new Data Analysis has no keypad", but it was never about
   Data Analysis: every number skill in the program behaved the same way at that
   width. One number in two places (here and the CSS breakpoints) is what keeps
   the two layers from disagreeing again. */
const IS_MOBILE = () => !kbPhysical && window.innerWidth < 900 && kbHasCoarsePointer();

let kbTarget = null;   // the currently "focused" input element
let kbMode   = 'num';  // 'num' | 'numNeg' | 'numNegDot' | 'frac' | 'idx' | 'sci'

/* All game input IDs — we attach keypad logic to these */
/* ══════════════════════════════════════════════════════════════════════════
   v77 — Finance & Patterns, Quadratics, Coordinate Geometry, Number
   Classification.

   Conventions used here (Laura, VCE General Mathematics):
   • Simple interest and flat-rate depreciation are taught with the rule
       Vn = V0 + nD   (depreciation: Vn = V0 − nD),  where D = r/100 × V0
     and the recurrence  V0 = …,  V(n+1) = Vn ± D.
   • Sequences use the VCE forms  tn = a + (n − 1)d  (arithmetic) and
       tn = a × r^(n−1)  (geometric).
   • Australian GST is 10%: add → ×1.1, remove → ÷1.1.
   • Natural numbers start at 1; whole numbers include 0.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── shared helpers ── */
function ffPick(arr){ return arr[ri(arr.length)]; }
function money(x){ const r = Math.round(x * 100) / 100; return '$' + (Math.abs(r - Math.round(r)) < 1e-9 ? String(Math.round(r)) : r.toFixed(2)); }
function sgnNum(n){ return n < 0 ? '−' + Math.abs(n) : String(n); }

/* ═════════ GST (Australian GST is 10%) ═════════ */
const GST_ITEMS = ['a bike','a phone case','a pair of runners','a school bag','a set of headphones',
                   'a skateboard','a desk lamp','a basketball','a hoodie','a keyboard','a coffee machine','a tent'];
function genGst(el){
  el.style.fontSize = '1.15rem';
  const item = ffPick(GST_ITEMS);
  const base = rr(2, 90) * 10;              // pre-GST price, a multiple of $10
  const gstAmt = base / 10;                 // 10% — always exact
  const incl = base + gstAmt;
  if (level === 1) {
    qData.ans = gstAmt;
    qData.ansDisplay = money(gstAmt);
    qData.workSteps = 'GST is <b>10%</b> of the price before GST.<br>10% of ' + money(base) + ' = ' + base + ' ÷ 10 = <b>' + money(gstAmt) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Australian GST is 10%.</div>'
      + '<div>The price of ' + item + ' before GST is <b>' + money(base) + '</b>.<br>How much GST is added?</div>';
    return;
  }
  if (level === 2) {
    qData.ans = incl;
    qData.ansDisplay = money(incl);
    qData.workSteps = 'Adding 10% means the new price is <b>110%</b> of the old one.<br>'
      + money(base) + ' × 1.1 = <b>' + money(incl) + '</b><br>'
      + '(or GST = ' + money(gstAmt) + ', then ' + money(base) + ' + ' + money(gstAmt) + ' = ' + money(incl) + ').';
    el.innerHTML = '<div style="' + A_LBL + '">Australian GST is 10%.</div>'
      + '<div>The price of ' + item + ' before GST is <b>' + money(base) + '</b>.<br>What is the price <b>including</b> GST?</div>';
    return;
  }
  // Level 3 — remove the GST
  qData.ans = base;
  qData.ansDisplay = money(base);
  qData.workSteps = 'The price including GST is <b>110%</b> of the original, so <b>divide by 1.1</b>.<br>'
    + money(incl) + ' ÷ 1.1 = <b>' + money(base) + '</b><br>'
    + 'Check: the GST included is ' + money(incl) + ' ÷ 11 = ' + money(gstAmt) + '.';
  el.innerHTML = '<div style="' + A_LBL + '">Australian GST is 10%.</div>'
    + '<div>The price of ' + item + ' <b>including</b> GST is <b>' + money(incl) + '</b>.<br>What was the price <b>before</b> GST?</div>';
}

/* ═════════ Read V₀, D or r straight off the rule (v77.1, Laura) ═════════
   Shown either as the rule Vn = V0 ± Dn or as the recurrence relation. V₀ and D are
   read off directly; r has to be worked back out with r = D/V0 × 100 — that last one
   is the point of the level.                                                        */
function finIdentifyFromRule(el, V0, D, r, sign, verb){
  const op = sign > 0 ? '+' : '−';
  const fromRule = Math.random() < 0.5;
  const shown = fromRule
    ? '<div style="font-size:1.6rem;font-weight:900;margin:12px 0;">V<sub>n</sub> = ' + V0 + ' ' + op + ' ' + D + 'n</div>'
    : '<div style="font-size:1.45rem;font-weight:900;margin:12px 0;">V<sub>0</sub> = ' + V0
      + ',&nbsp;&nbsp;V<sub>n+1</sub> = V<sub>n</sub> ' + op + ' ' + D + '</div>';
  const ask = ri(3);   // 0 = V0, 1 = D, 2 = r
  let question;
  if (ask === 0) {
    qData.ans = V0; qData.ansDisplay = money(V0);
    question = 'What is the <b>starting value</b> V<sub>0</sub>?';
    qData.workSteps = 'V<sub>0</sub> is the number on its own — the value before anything is ' + verb
      + ': <b>' + money(V0) + '</b>.';
  } else if (ask === 1) {
    qData.ans = D; qData.ansDisplay = money(D);
    question = 'What is <b>D</b> — the amount ' + verb + ' each year?';
    qData.workSteps = 'D is the number multiplied by n (or ' + (sign > 0 ? 'added' : 'subtracted')
      + ' in the recurrence): <b>' + money(D) + '</b>.';
  } else {
    qData.ans = r; qData.ansDisplay = r + '%';
    question = 'What is the <b>rate r</b>? (just the number of per cent)';
    qData.workSteps = 'D = <sup>r</sup>&frasl;<sub>100</sub> × V<sub>0</sub>, so rearrange for r:<br>'
      + 'r = <sup>D</sup>&frasl;<sub>V<sub>0</sub></sub> × 100 = <sup>' + D + '</sup>&frasl;<sub>' + V0
      + '</sub> × 100 = <b>' + r + '%</b>.';
  }
  el.innerHTML = '<div style="' + A_LBL + '">Read the values off the rule.</div>' + shown
    + '<div>' + question + '</div>';
}

/* ═════════ Simple Interest — Vn = V0 + nD, D = r/100 × V0 ═════════ */
const SI_NAMES = ['Ava','Noah','Mia','Liam','Zara','Jack','Ruby','Ethan','Chloe','Kai','Isla','Omar'];
function siScenario(){
  const V0 = rr(2, 40) * 500;               // $1000 … $20000
  const r  = ffPick([2,3,4,5,6,8,10,12]);
  return { V0: V0, r: r, D: V0 * r / 100, who: ffPick(SI_NAMES) };
}
function siStem(s){
  return s.who + ' invests <b>' + money(s.V0) + '</b> at <b>' + s.r + '% p.a. simple interest</b>.';
}
function genSimpleInterest(el){
  el.style.fontSize = '1.15rem';
  const s = siScenario();
  const ruleTxt = 'V<sub>n</sub> = ' + s.V0 + ' + ' + s.D + 'n';
  if (level === 1) {
    const askV0 = Math.random() < 0.5;
    qData.ans = askV0 ? s.V0 : s.r;
    qData.ansDisplay = askV0 ? money(s.V0) : (s.r + '%');
    qData.workSteps = askV0
      ? 'The <b>starting value</b> V<sub>0</sub> is the amount invested at the beginning: <b>' + money(s.V0) + '</b>.'
      : 'The <b>interest rate</b> r is the percentage per year: <b>' + s.r + '%</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Simple interest.</div>'
      + '<div>' + siStem(s) + '<br>' + (askV0
        ? 'What is the starting value V<sub>0</sub>? (just the number of dollars)'
        : 'What is the interest rate r? (just the number of per cent)') + '</div>';
    return;
  }
  if (level === 2) {
    qData.ans = s.D;
    qData.ansDisplay = money(s.D);
    qData.workSteps = 'D = <sup>r</sup>&frasl;<sub>100</sub> × V<sub>0</sub> = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × '
      + s.V0 + ' = <b>' + money(s.D) + '</b> of interest each year.';
    el.innerHTML = '<div style="' + A_LBL + '">D = r/100 × V<sub>0</sub></div>'
      + '<div>' + siStem(s) + '<br>How much interest (D) is added <b>each year</b>?</div>';
    return;
  }
  if (level === 3) {
    // v77.1 (Laura) — identify V0, r or D from the rule itself
    finIdentifyFromRule(el, s.V0, s.D, s.r, +1, 'added');
    return;
  }
  if (level === 4) {
    qData.gapTemplate = ['V<sub>n</sub> = ', 0, ' + ', 1, 'n'];
    qData.gapAns = [s.V0, s.D];
    qData.gapHint = 'Fill in V₀ and D.';
    qData.gapAnsText = 'Vₙ = ' + s.V0 + ' + ' + s.D + 'n';
    qData.workSteps = 'V<sub>0</sub> = ' + money(s.V0) + '. D = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × ' + s.V0
      + ' = ' + money(s.D) + '.<br>So the rule is <b>' + ruleTxt + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the rule V<sub>n</sub> = V<sub>0</sub> + nD</div>'
      + '<div>' + siStem(s) + '</div>';
    return;
  }
  if (level === 5) {
    const n = rr(3, 12);
    qData.ans = s.V0 + n * s.D;
    qData.ansDisplay = money(qData.ans);
    qData.workSteps = 'D = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × ' + s.V0 + ' = ' + money(s.D) + '.<br>'
      + 'V<sub>' + n + '</sub> = ' + s.V0 + ' + ' + n + ' × ' + s.D + ' = <b>' + money(qData.ans) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">V<sub>n</sub> = V<sub>0</sub> + nD</div>'
      + '<div>' + siStem(s) + '<br>What is the investment worth after <b>' + n + ' years</b>?</div>';
    return;
  }
  // Level 6 — recurrence relation
  qData.gapTemplate = ['V<sub>0</sub> = ', 0, ',&nbsp;&nbsp;&nbsp;V<sub>n+1</sub> = V<sub>n</sub> + ', 1];
  qData.gapAns = [s.V0, s.D];
  qData.gapHint = 'Fill in the starting value and the amount added each year.';
  qData.gapAnsText = 'V₀ = ' + s.V0 + ',  Vₙ₊₁ = Vₙ + ' + s.D;
  qData.workSteps = 'Simple interest adds the <b>same amount every year</b>, so the recurrence adds D.<br>'
    + 'D = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × ' + s.V0 + ' = ' + money(s.D) + '.<br>'
    + '<b>V<sub>0</sub> = ' + s.V0 + ',  V<sub>n+1</sub> = V<sub>n</sub> + ' + s.D + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write the recurrence relation.</div>'
    + '<div>' + siStem(s) + '</div>';
}

/* ═════════ Flat Rate (straight line) Depreciation — Vn = V0 − nD ═════════ */
const FD_ITEMS = ['A delivery van','A ride-on mower','A commercial oven','A laptop fleet','A tractor',
                  'A coffee machine','A photocopier','A food truck','A 3D printer','A minibus'];
function fdScenario(){
  const V0 = rr(2, 40) * 500;
  const r  = ffPick([4,5,8,10,12,15,20]);
  return { V0: V0, r: r, D: V0 * r / 100, item: ffPick(FD_ITEMS) };
}
function fdStem(s){
  return s.item + ' is bought for <b>' + money(s.V0) + '</b> and depreciates at a <b>flat rate of ' + s.r + '% p.a.</b>';
}
function genFlatDep(el){
  el.style.fontSize = '1.15rem';
  const s = fdScenario();
  if (level === 1) {
    // Read V0 or D straight off a rule OR a recurrence relation.
    const fromRule = Math.random() < 0.5;
    const askV0 = Math.random() < 0.5;
    const shown = fromRule
      ? '<div style="font-size:1.5rem;font-weight:900;margin:10px 0;">V<sub>n</sub> = ' + s.V0 + ' − ' + s.D + 'n</div>'
      : '<div style="font-size:1.4rem;font-weight:900;margin:10px 0;">V<sub>0</sub> = ' + s.V0 + ',&nbsp;&nbsp;V<sub>n+1</sub> = V<sub>n</sub> − ' + s.D + '</div>';
    qData.ans = askV0 ? s.V0 : s.D;
    qData.ansDisplay = money(qData.ans);
    qData.workSteps = askV0
      ? 'V<sub>0</sub> is the value the item started at — the number on its own: <b>' + money(s.V0) + '</b>.'
      : 'D is the amount taken off each year — the number multiplied by n (or subtracted in the recurrence): <b>' + money(s.D) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Flat rate depreciation.</div>' + shown
      + '<div>' + (askV0 ? 'What is the <b>initial value</b> V<sub>0</sub>?' : 'How much does it <b>depreciate each year</b> (D)?') + '</div>';
    return;
  }
  if (level === 2) {
    qData.ans = s.D;
    qData.ansDisplay = money(s.D);
    qData.workSteps = 'D = <sup>r</sup>&frasl;<sub>100</sub> × V<sub>0</sub> = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × '
      + s.V0 + ' = <b>' + money(s.D) + '</b> lost each year.';
    el.innerHTML = '<div style="' + A_LBL + '">D = r/100 × V<sub>0</sub></div>'
      + '<div>' + fdStem(s) + '<br>How much does it depreciate <b>each year</b>?</div>';
    return;
  }
  if (level === 3) {
    // v77.1 (Laura) — identify V0, r or D from the rule itself
    finIdentifyFromRule(el, s.V0, s.D, s.r, -1, 'lost');
    return;
  }
  if (level === 4) {
    qData.gapTemplate = ['V<sub>n</sub> = ', 0, ' − ', 1, 'n'];
    qData.gapAns = [s.V0, s.D];
    qData.gapHint = 'Fill in V₀ and D.';
    qData.gapAnsText = 'Vₙ = ' + s.V0 + ' − ' + s.D + 'n';
    qData.workSteps = 'V<sub>0</sub> = ' + money(s.V0) + '. D = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × ' + s.V0
      + ' = ' + money(s.D) + '.<br>So <b>V<sub>n</sub> = ' + s.V0 + ' − ' + s.D + 'n</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the rule V<sub>n</sub> = V<sub>0</sub> − nD</div>'
      + '<div>' + fdStem(s) + '</div>';
    return;
  }
  if (level === 5) {
    const maxN = Math.max(2, Math.floor((s.V0 * 0.9) / s.D));
    const n = rr(2, Math.min(10, maxN));
    qData.ans = s.V0 - n * s.D;
    qData.ansDisplay = money(qData.ans);
    qData.workSteps = 'D = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × ' + s.V0 + ' = ' + money(s.D) + '.<br>'
      + 'V<sub>' + n + '</sub> = ' + s.V0 + ' − ' + n + ' × ' + s.D + ' = <b>' + money(qData.ans) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">V<sub>n</sub> = V<sub>0</sub> − nD</div>'
      + '<div>' + fdStem(s) + '<br>What is it worth after <b>' + n + ' years</b>?</div>';
    return;
  }
  // Level 6 — recurrence relation
  qData.gapTemplate = ['V<sub>0</sub> = ', 0, ',&nbsp;&nbsp;&nbsp;V<sub>n+1</sub> = V<sub>n</sub> − ', 1];
  qData.gapAns = [s.V0, s.D];
  qData.gapHint = 'Fill in the starting value and the amount lost each year.';
  qData.gapAnsText = 'V₀ = ' + s.V0 + ',  Vₙ₊₁ = Vₙ − ' + s.D;
  qData.workSteps = 'Flat rate depreciation takes off the <b>same amount every year</b>.<br>'
    + 'D = <sup>' + s.r + '</sup>&frasl;<sub>100</sub> × ' + s.V0 + ' = ' + money(s.D) + '.<br>'
    + '<b>V<sub>0</sub> = ' + s.V0 + ',  V<sub>n+1</sub> = V<sub>n</sub> − ' + s.D + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write the recurrence relation.</div>'
    + '<div>' + fdStem(s) + '</div>';
}

/* ═════════ Sequences ═════════ */
function seqArith(){
  let d; do { d = rr(-9, 9); } while (d === 0);
  const a = rr(-8, 20);
  const t = []; for (let i = 0; i < 5; i++) t.push(a + i * d);
  return { kind: 'arith', a: a, d: d, terms: t };
}
function seqGeo(){
  const r = ffPick([2, 3, 4, -2, -3]);
  let a; do { a = rr(-4, 6); } while (a === 0);
  const t = []; for (let i = 0; i < 5; i++) t.push(a * Math.pow(r, i));
  return { kind: 'geo', a: a, r: r, terms: t };
}
function seqNeither(){
  // Square / triangular / "add one more each time" patterns — differences change
  // and ratios change, so these are neither arithmetic nor geometric.
  const which = ri(3);
  const t = [];
  if (which === 0) { const s = rr(1, 4); for (let i = 0; i < 5; i++) t.push(Math.pow(s + i, 2)); }
  else if (which === 1) { const s = rr(1, 4); let v = rr(1, 6); let step = s; for (let i = 0; i < 5; i++) { t.push(v); v += step; step++; } }
  else { let p = rr(1, 4), q = p + rr(1, 4); t.push(p, q); for (let i = 0; i < 3; i++) { const nx = t[t.length - 1] + t[t.length - 2]; t.push(nx); } }
  return { kind: 'neither', terms: t };
}
function seqIsArith(t){ const d = t[1] - t[0]; return t.every(function(v, i){ return i === 0 || v - t[i - 1] === d; }); }
function seqIsGeo(t){ if (t.some(function(v){ return v === 0; })) return false; const r = t[1] / t[0]; return t.every(function(v, i){ return i === 0 || Math.abs(v / t[i - 1] - r) < 1e-9; }); }
function seqShow(t){ return '<div style="font-size:1.7rem;font-weight:900;margin:14px 0;">' + t.map(sgnNum).join(',&nbsp; ') + ',&nbsp; …</div>'; }

function genSequences(el){
  el.style.fontSize = '1.1rem';
  if (level === 1) {
    let s, guard = 0;
    do {
      const pick = ri(3);
      s = pick === 0 ? seqArith() : pick === 1 ? seqGeo() : seqNeither();
      guard++;
      // a sequence must be exactly ONE of the three
    } while (guard < 40 && ((s.kind === 'arith' && seqIsGeo(s.terms)) || (s.kind === 'geo' && seqIsArith(s.terms))
             || (s.kind === 'neither' && (seqIsArith(s.terms) || seqIsGeo(s.terms)))));
    const correct = s.kind === 'arith' ? 'Arithmetic' : s.kind === 'geo' ? 'Geometric' : 'Neither';
    qData.workSteps = s.kind === 'arith'
      ? 'The <b>difference</b> between terms is the same every time (' + sgnNum(s.d) + '), so it is <b>arithmetic</b>.'
      : s.kind === 'geo'
      ? 'Each term is the previous one <b>multiplied</b> by the same number (' + sgnNum(s.r) + '), so it is <b>geometric</b>.'
      : 'The differences are not the same and the ratios are not the same, so it is <b>neither</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">Is this sequence arithmetic, geometric or neither?</div>' + seqShow(s.terms),
                 ['Arithmetic', 'Geometric', 'Neither'], correct, true);
    return;
  }
  if (level === 2) {
    const s = Math.random() < 0.55 ? seqArith() : seqGeo();
    const shown = s.terms.slice(0, 4);
    qData.ans = s.terms[4];
    qData.ansDisplay = sgnNum(s.terms[4]);
    qData.workSteps = s.kind === 'arith'
      ? 'Each term goes up by ' + sgnNum(s.d) + '. ' + sgnNum(shown[3]) + ' + (' + sgnNum(s.d) + ') = <b>' + sgnNum(s.terms[4]) + '</b>.'
      : 'Each term is multiplied by ' + sgnNum(s.r) + '. ' + sgnNum(shown[3]) + ' × (' + sgnNum(s.r) + ') = <b>' + sgnNum(s.terms[4]) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the next term.</div>'
      + '<div style="font-size:1.7rem;font-weight:900;margin:14px 0;">' + shown.map(sgnNum).join(',&nbsp; ') + ',&nbsp; ▢</div>';
    return;
  }
  if (level === 3) {
    const s = seqArith();
    qData.gapTemplate = ['t<sub>n</sub> = ', 0, ' + (n − 1) × ', 1];
    qData.gapAns = [s.a, s.d];
    qData.gapHint = 'Fill in the first term a and the common difference d.';
    qData.gapAnsText = 'tₙ = ' + sgnNum(s.a) + ' + (n − 1) × ' + sgnNum(s.d);
    qData.workSteps = 'First term a = <b>' + sgnNum(s.a) + '</b>. Common difference d = ' + sgnNum(s.terms[1]) + ' − ' + sgnNum(s.terms[0])
      + ' = <b>' + sgnNum(s.d) + '</b>.<br>So t<sub>n</sub> = ' + sgnNum(s.a) + ' + (n − 1) × ' + sgnNum(s.d) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the rule for this arithmetic sequence.</div>' + seqShow(s.terms);
    return;
  }
  // Level 4 — geometric rule
  const s = seqGeo();
  qData.gapTemplate = ['t<sub>n</sub> = ', 0, ' × ', 1, '<sup>n − 1</sup>'];
  qData.gapAns = [s.a, s.r];
  qData.gapHint = 'Fill in the first term a and the common ratio r.';
  qData.gapAnsText = 'tₙ = ' + sgnNum(s.a) + ' × ' + sgnNum(s.r) + '^(n − 1)';
  qData.workSteps = 'First term a = <b>' + sgnNum(s.a) + '</b>. Common ratio r = ' + sgnNum(s.terms[1]) + ' ÷ ' + sgnNum(s.terms[0])
    + ' = <b>' + sgnNum(s.r) + '</b>.<br>So t<sub>n</sub> = ' + sgnNum(s.a) + ' × ' + sgnNum(s.r) + '<sup>n−1</sup>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write the rule for this geometric sequence.</div>' + seqShow(s.terms);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v78 — Yr 7–9 SEQUENCES (Laura)
   Three new skills sitting UNDER the existing "Arithmetic & Geometric
   Sequences" skill (which stays as the higher-order classify-it-yourself one):

     seqWords  Sequence Rules in Words        Yr 7
     arithSeq  Arithmetic Sequences           Yr 7–8
     geoSeq    Geometric Sequences            Yr 8–9

   Notation: these use the Yr 7–9 textbook form  aₙ = a₁ + (n − 1)d  and
   aₙ = a₁ × rⁿ⁻¹, and aₙ for "the nth term". The VCE-facing skills above
   (Sequences / Recurrence / Simple Interest / Depreciation) keep their
   tₙ = a + (n − 1)d and Vₙ = V₀ + nD forms — deliberately unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Show a run of terms, with optional trailing boxes for the ones to find. */
function swShow(terms, blanks){
  var parts = terms.map(sgnNum);
  for (var i = 0; i < (blanks || 0); i++) parts.push('▢');
  return '<div style="font-size:1.6rem;font-weight:900;margin:14px 0;">'
       + parts.join(',&nbsp; ') + (blanks ? '' : ',&nbsp; …') + '</div>';
}

/* ── A worded-rule pattern. Add/Subtract keep a POSITIVE step so the rule in
   words is unambiguous ("add −4" and "subtract 4" would both be right);
   the TERMS still go negative freely, and Multiply carries the negatives.

   v78.1 (Laura): every family is now built to a CEILING so the arithmetic stays
   mental. "×3 is fine, but not when they have to do 54 × 3" — so the first term
   is chosen from the ceiling BACKWARDS (a1 ≤ cap ÷ r^(n−1)) rather than picked
   freely and allowed to run away. opts.shortGeo also drops multiply/divide runs
   by one term, because a geometric run of six is what forces the big numbers:
   1, 3, 9, 27, 81 keeps ×3 available, 1, 3, 9, 27, 81, 243 does not. ── */
function swPattern(n, opts){
  opts = opts || {};
  var cap = opts.cap || 200;
  var kinds = ['add','sub','mul','div'];
  if (opts.allowSquare) kinds.push('square');
  if (opts.only) kinds = opts.only.slice();
  var kind = ffPick(kinds), a, k, t = [], i;
  // a geometric run of n terms spans r^(n-1); one term shorter keeps ×3 usable
  var len = (opts.shortGeo && (kind === 'mul' || kind === 'div')) ? n - 1 : n;

  if (kind === 'add')  { k = rr(2, 12);  a = rr(-20, 30);  for (i = 0; i < len; i++) t.push(a + i * k); }
  else if (kind === 'sub') { k = rr(2, 12); a = rr(20, 70); for (i = 0; i < len; i++) t.push(a - i * k); }
  else if (kind === 'mul') {
    k = ffPick(opts.ratios || [2, 3, -2, -3]);
    var reach = Math.pow(Math.abs(k), len - 1);
    if (reach > cap) { k = k < 0 ? -2 : 2; reach = Math.pow(2, len - 1); }
    var maxA = Math.max(1, Math.min(6, Math.floor(cap / reach)));
    a = rr(1, maxA) * (Math.random() < 0.25 ? -1 : 1);
    for (i = 0; i < len; i++) t.push(a * Math.pow(k, i));
  }
  else if (kind === 'div') {
    k = ffPick(opts.ratios ? opts.ratios.filter(function(x){ return x > 1; }) : [2, 3, 4, 5]);
    if (!k) k = 2;
    var span = Math.pow(k, len - 1);
    if (span > cap) { k = 2; span = Math.pow(2, len - 1); }
    var m = rr(1, Math.max(1, Math.min(6, Math.floor(cap / span))));
    a = m * span;
    for (i = 0; i < len; i++) t.push(a / Math.pow(k, i));
  }
  else {
    var top = Math.max(1, Math.floor(Math.sqrt(cap)) - (len - 1));
    var st = rr(1, Math.min(5, top));
    for (i = 0; i < len; i++) t.push(Math.pow(st + i, 2));
    k = null; a = t[0];
  }
  return { kind: kind, a: a, k: k, terms: t, words: swWords(kind, k) };
}
function swWords(kind, k){
  if (kind === 'add')    return 'Add ' + k;
  if (kind === 'sub')    return 'Subtract ' + k;
  if (kind === 'mul')    return 'Multiply by ' + sgnNum(k);
  if (kind === 'div')    return 'Divide by ' + k;
  return 'Square numbers';
}
/* Three wrong worded rules that are plausible but definitely not this one. */
function swDistractors(s){
  var pool = [], k = s.k;
  if (s.kind === 'square') {
    pool = ['Add 2', 'Multiply by 2', 'Add 3', 'Multiply by 3', 'Subtract 1', 'Add the same number each time'];
  } else {
    var alt = Math.abs(k) + ffPick([1, 2, -1]); if (alt < 2) alt = Math.abs(k) + 2;
    pool = ['Add ' + Math.abs(k), 'Subtract ' + Math.abs(k), 'Multiply by ' + Math.abs(k), 'Divide by ' + Math.abs(k),
            'Add ' + alt, 'Subtract ' + alt, 'Multiply by ' + alt, 'Square numbers'];
    if (k < 0) pool.push('Multiply by ' + Math.abs(k));
  }
  var out = [], guard = 0;
  while (out.length < 3 && guard++ < 200) {
    var c = ffPick(pool);
    if (c !== s.words && out.indexOf(c) < 0) out.push(c);
  }
  return out;
}
function swSubN(n){ return 'a<sub>' + n + '</sub>'; }
/* The rule as a full instruction, for the "start here and follow this rule" level.
   'Subtract 8' has to become 'subtract 8 FROM each term', not 'to each term'. */
function swPhrase(kind, k){
  if (kind === 'add') return 'add ' + k + ' to each term';
  if (kind === 'sub') return 'subtract ' + k + ' from each term';
  if (kind === 'mul') return 'multiply each term by ' + sgnNum(k);
  if (kind === 'div') return 'divide each term by ' + k;
  return 'square numbers';
}

function genSeqWords(el){
  el.style.fontSize = '1.1rem';

  if (level === 1) {                       // first term of the sequence
    var s1 = swPattern(5, { allowSquare: true, shortGeo: true, cap: 120 });
    qData.ans = s1.terms[0];
    qData.ansDisplay = sgnNum(s1.terms[0]);
    qData.workSteps = 'The <b>first term</b> is simply the number the sequence starts at: <b>'
      + sgnNum(s1.terms[0]) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write down the first term of the sequence.</div>' + swShow(s1.terms);
    return;
  }

  if (level === 2) {                       // the term-to-term rule, in words
    var s2 = swPattern(5, { allowSquare: true, shortGeo: true, cap: 120 });
    var opts = swDistractors(s2).concat([s2.words]);
    qData.workSteps = s2.kind === 'square'
      ? 'The terms are 1², 2², 3², … — they are the <b>square numbers</b>.'
      : 'Each term becomes the next one when you <b>' + s2.words.toLowerCase() + '</b>: '
        + sgnNum(s2.terms[0]) + ' → ' + sgnNum(s2.terms[1]) + ' → ' + sgnNum(s2.terms[2]) + '.';
    decSetChoice(el, '<div style="' + A_LBL + '">What is the term-to-term rule, in words?</div>' + swShow(s2.terms),
                 opts, s2.words);
    return;
  }

  /* Level 3 — read a term off the sequence using aₙ notation.
     v78.1 (Laura): this was L5. Identifying a term you can see is easier than
     working out the next ones, so it now comes before them. */
  if (level === 3) {
    var s3 = swPattern(6, { allowSquare: true, shortGeo: true, cap: 120 });
    var nn = rr(2, s3.terms.length);
    qData.ans = s3.terms[nn - 1];
    qData.ansDisplay = sgnNum(s3.terms[nn - 1]);
    qData.workSteps = swSubN(nn) + ' means the <b>' + nn + 'th term</b> — count along the sequence: <b>'
      + sgnNum(s3.terms[nn - 1]) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">a<sub>n</sub> means the nth term of the sequence.</div>'
      + swShow(s3.terms)
      + '<div style="font-size:1.5rem;font-weight:900;color:var(--accent);">' + swSubN(nn) + ' = ?</div>';
    return;
  }

  /* Level 4 — the next TWO terms (was L3).
     Capped at 100 so the step itself is the work, not the multiplication. */
  if (level === 4) {
    var s4 = swPattern(6, { allowSquare: true, shortGeo: true, cap: 100 });
    var t4 = s4.terms, last = t4.length;
    var shown = t4.slice(0, last - 2), ans4 = [t4[last - 2], t4[last - 1]];
    qData.gapTemplate = [0, '&nbsp;&nbsp;&nbsp;', 1];
    qData.gapAns = ans4;
    qData.gapHint = 'Work out the rule, then fill in the next two terms.';
    qData.gapAnsText = ans4.map(sgnNum).join(', ');
    qData.workSteps = 'The rule is <b>' + s4.words + '</b>, so the next two terms are <b>'
      + sgnNum(ans4[0]) + '</b> and <b>' + sgnNum(ans4[1]) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the rule, then write the next two terms.</div>' + swShow(shown, 2);
    return;
  }

  /* Level 5 — the first five terms from a start value + a worded rule (was L4). */
  var s5 = swPattern(5, { only: ['add', 'sub', 'mul', 'div'], cap: 150 });
  var ph5 = swPhrase(s5.kind, s5.k);
  qData.gapTemplate = [0, ',&nbsp;', 1, ',&nbsp;', 2, ',&nbsp;', 3, ',&nbsp;', 4];
  qData.gapAns = s5.terms.slice(0, 5);
  qData.gapHint = 'Write the five terms in order, starting with the starting value.';
  qData.gapAnsText = s5.terms.slice(0, 5).map(sgnNum).join(', ');
  qData.workSteps = 'Start at <b>' + sgnNum(s5.terms[0]) + '</b>, then ' + ph5
    + ': ' + s5.terms.slice(0, 5).map(sgnNum).join(', ') + '.';
  el.innerHTML = '<div style="' + A_LBL + '">Write down the first five terms of the sequence.</div>'
    + '<div style="font-size:1.25rem;font-weight:900;margin:12px 0;line-height:1.5;">Starting value: '
    + sgnNum(s5.terms[0]) + '<br>Rule: &lsquo;' + ph5 + '&rsquo;</div>';
}

/* ═════════ Arithmetic Sequences (Yr 7–8) ═════════ */
function asMake(n){
  var d; do { d = rr(-9, 9); } while (d === 0);
  var a1 = rr(-12, 20);
  var t = []; for (var i = 0; i < n; i++) t.push(a1 + i * d);
  return { a1: a1, d: d, terms: t };
}
function genArithSeq(el){
  el.style.fontSize = '1.1rem';

  if (level === 1) {                       // common difference
    var s1 = asMake(5);
    qData.ans = s1.d;
    qData.ansDisplay = sgnNum(s1.d);
    qData.workSteps = 'd = (any term) − (the one before it) = ' + sgnNum(s1.terms[1]) + ' − '
      + sgnNum(s1.terms[0]) + ' = <b>' + sgnNum(s1.d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the common difference, d.</div>' + swShow(s1.terms);
    return;
  }

  if (level === 2) {                       // next three terms
    var s2 = asMake(7);
    qData.gapTemplate = [0, ',&nbsp;&nbsp;', 1, ',&nbsp;&nbsp;', 2];
    qData.gapAns = [s2.terms[4], s2.terms[5], s2.terms[6]];
    qData.gapHint = 'Keep adding the common difference. Fill in the next three terms.';
    qData.gapAnsText = [s2.terms[4], s2.terms[5], s2.terms[6]].map(sgnNum).join(', ');
    qData.workSteps = 'd = <b>' + sgnNum(s2.d) + '</b>, so the next three terms are '
      + sgnNum(s2.terms[4]) + ', ' + sgnNum(s2.terms[5]) + ', ' + sgnNum(s2.terms[6]) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the next three terms.</div>' + swShow(s2.terms.slice(0, 4), 3);
    return;
  }

  if (level === 3) {                       // write the nth term rule
    var s3 = asMake(5);
    qData.gapTemplate = ['a<sub>n</sub> = ', 0, ' + (n − 1) × ', 1];
    qData.gapAns = [s3.a1, s3.d];
    qData.gapHint = 'Fill in a₁ (the first term) and d (the common difference).';
    qData.gapAnsText = 'aₙ = ' + sgnNum(s3.a1) + ' + (n − 1) × ' + sgnNum(s3.d);
    qData.workSteps = 'a<sub>1</sub> = <b>' + sgnNum(s3.a1) + '</b> and d = ' + sgnNum(s3.terms[1]) + ' − '
      + sgnNum(s3.terms[0]) + ' = <b>' + sgnNum(s3.d) + '</b>.<br>So a<sub>n</sub> = '
      + sgnNum(s3.a1) + ' + (n − 1) × ' + sgnNum(s3.d) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the nth term rule for this arithmetic sequence.</div>' + swShow(s3.terms);
    return;
  }

  /* Level 4 — use the rule to find a required term */
  var s4 = asMake(4), n4 = rr(8, 25);
  var want = s4.a1 + (n4 - 1) * s4.d;
  qData.ans = want;
  qData.ansDisplay = sgnNum(want);
  qData.workSteps = 'a<sub>1</sub> = ' + sgnNum(s4.a1) + ', d = ' + sgnNum(s4.d) + '.<br>a<sub>n</sub> = a<sub>1</sub> + (n − 1)d = '
    + sgnNum(s4.a1) + ' + (' + n4 + ' − 1) × ' + sgnNum(s4.d) + ' = ' + sgnNum(s4.a1) + ' + '
    + (n4 - 1) + ' × ' + sgnNum(s4.d) + ' = <b>' + sgnNum(want) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Use a<sub>n</sub> = a<sub>1</sub> + (n − 1)d to find the term asked for.</div>'
    + swShow(s4.terms)
    + '<div style="font-size:1.5rem;font-weight:900;color:var(--accent);">' + swSubN(n4) + ' = ?</div>';
}

/* ═════════ Geometric Sequences (Yr 8–9) ═════════ */
/* v78.1 (Laura): same principle as the worded-rule skill — pick the first term
   from the CEILING backwards, so a geometric run never ends in a multiplication
   the student can't do in their head. cap is the biggest term allowed. */
function gsMake(n, ratios, firsts, cap){
  var r = ffPick(ratios || [2, 3, 4, 5, 10, -2, -3]);
  var pool = firsts || [1, 2, 3, 4, 5, 6, -1, -2, -3];
  if (cap) {
    var reach = Math.pow(Math.abs(r), n - 1);
    var fits = pool.filter(function(v){ return Math.abs(v) * reach <= cap; });
    if (!fits.length) { r = r < 0 ? -2 : 2; reach = Math.pow(2, n - 1);
      fits = pool.filter(function(v){ return Math.abs(v) * reach <= cap; }); }
    pool = fits.length ? fits : [1];
  }
  var a1 = ffPick(pool);
  var t = []; for (var i = 0; i < n; i++) t.push(a1 * Math.pow(r, i));
  return { a1: a1, r: r, terms: t };
}
function genGeoSeq(el){
  el.style.fontSize = '1.1rem';

  if (level === 1) {                       // common ratio
    var s1 = gsMake(4);
    qData.ans = s1.r;
    qData.ansDisplay = sgnNum(s1.r);
    qData.workSteps = 'r = (any term) ÷ (the one before it) = ' + sgnNum(s1.terms[1]) + ' ÷ '
      + sgnNum(s1.terms[0]) + ' = <b>' + sgnNum(s1.r) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the common ratio, r.</div>' + swShow(s1.terms);
    return;
  }

  if (level === 2) {                       // next three terms (keep the numbers readable)
    var s2 = gsMake(6, [2, 3, -2, -3], [1, 2, 3, 4, -1, -2], 250);
    qData.gapTemplate = [0, ',&nbsp;&nbsp;', 1, ',&nbsp;&nbsp;', 2];
    qData.gapAns = [s2.terms[3], s2.terms[4], s2.terms[5]];
    qData.gapHint = 'Keep multiplying by the common ratio. Fill in the next three terms.';
    qData.gapAnsText = [s2.terms[3], s2.terms[4], s2.terms[5]].map(sgnNum).join(', ');
    qData.workSteps = 'r = <b>' + sgnNum(s2.r) + '</b>, so the next three terms are '
      + sgnNum(s2.terms[3]) + ', ' + sgnNum(s2.terms[4]) + ', ' + sgnNum(s2.terms[5]) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the next three terms.</div>' + swShow(s2.terms.slice(0, 3), 3);
    return;
  }

  if (level === 3) {                       // write the nth term rule
    var s3 = gsMake(4, [2, 3, 4, 5, -2, -3]);
    qData.gapTemplate = ['a<sub>n</sub> = ', 0, ' × ', 1, '<sup>n − 1</sup>'];
    qData.gapAns = [s3.a1, s3.r];
    qData.gapHint = 'Fill in a₁ (the first term) and r (the common ratio).';
    qData.gapAnsText = 'aₙ = ' + sgnNum(s3.a1) + ' × ' + sgnNum(s3.r) + '^(n − 1)';
    qData.workSteps = 'a<sub>1</sub> = <b>' + sgnNum(s3.a1) + '</b> and r = ' + sgnNum(s3.terms[1]) + ' ÷ '
      + sgnNum(s3.terms[0]) + ' = <b>' + sgnNum(s3.r) + '</b>.<br>So a<sub>n</sub> = '
      + sgnNum(s3.a1) + ' × ' + sgnNum(s3.r) + '<sup>n−1</sup>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the nth term rule for this geometric sequence.</div>' + swShow(s3.terms);
    return;
  }

  /* Level 4 — use the rule to find a required term. n is capped so the answer
     stays a number a student can reasonably write down. */
  var s4 = gsMake(4, [2, 3, -2], [1, 2, 3, -1, -2]), n4 = rr(5, 9);
  var want = s4.a1 * Math.pow(s4.r, n4 - 1);
  while (Math.abs(want) > 20000 && n4 > 5) { n4--; want = s4.a1 * Math.pow(s4.r, n4 - 1); }
  qData.ans = want;
  qData.ansDisplay = sgnNum(want);
  qData.workSteps = 'a<sub>1</sub> = ' + sgnNum(s4.a1) + ', r = ' + sgnNum(s4.r) + '.<br>a<sub>n</sub> = a<sub>1</sub> × r<sup>n−1</sup> = '
    + sgnNum(s4.a1) + ' × ' + sgnNum(s4.r) + '<sup>' + (n4 - 1) + '</sup> = <b>' + sgnNum(want) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Use a<sub>n</sub> = a<sub>1</sub> × r<sup>n−1</sup> to find the term asked for.</div>'
    + swShow(s4.terms)
    + '<div style="font-size:1.5rem;font-weight:900;color:var(--accent);">' + swSubN(n4) + ' = ?</div>';
}

/* ═════════ Recurrence Relations ═════════ */
function genRecurrence(el){
  el.style.fontSize = '1.1rem';
  if (level === 1) {
    const arith = Math.random() < 0.6;
    const s = arith ? seqArith() : seqGeo();
    if (arith) {
      qData.gapTemplate = ['t<sub>1</sub> = ', 0, ',&nbsp;&nbsp;&nbsp;t<sub>n+1</sub> = t<sub>n</sub> + ', 1];
      qData.gapAns = [s.a, s.d];
      qData.gapAnsText = 't₁ = ' + sgnNum(s.a) + ',  tₙ₊₁ = tₙ + ' + sgnNum(s.d);
      qData.gapHint = 'Fill in the first term, then what is added each time.';
      qData.workSteps = 'The sequence goes up by the same amount each time: d = <b>' + sgnNum(s.d) + '</b>, starting at <b>' + sgnNum(s.a) + '</b>.';
    } else {
      qData.gapTemplate = ['t<sub>1</sub> = ', 0, ',&nbsp;&nbsp;&nbsp;t<sub>n+1</sub> = t<sub>n</sub> × ', 1];
      qData.gapAns = [s.a, s.r];
      qData.gapAnsText = 't₁ = ' + sgnNum(s.a) + ',  tₙ₊₁ = tₙ × ' + sgnNum(s.r);
      qData.gapHint = 'Fill in the first term, then what it is multiplied by each time.';
      qData.workSteps = 'Each term is the one before it multiplied by <b>' + sgnNum(s.r) + '</b>, starting at <b>' + sgnNum(s.a) + '</b>.';
    }
    el.innerHTML = '<div style="' + A_LBL + '">Write a recurrence relation for this sequence.</div>' + seqShow(s.terms);
    return;
  }
  // Level 2 — use the recurrence relation to find a term
  const arith = Math.random() < 0.6;
  const a = arith ? rr(-6, 20) : ffPick([1, 2, 3, 4, 5, -2, -3]);
  let step;
  if (arith) { do { step = rr(-9, 9); } while (step === 0); } else { step = ffPick([2, 3, -2]); }
  const k = rr(4, 6);
  let v = a; const seq = [a];
  for (let i = 1; i < k; i++) { v = arith ? v + step : v * step; seq.push(v); }
  qData.ans = v;
  qData.ansDisplay = sgnNum(v);
  const rel = arith
    ? 't<sub>1</sub> = ' + sgnNum(a) + ',&nbsp;&nbsp;t<sub>n+1</sub> = t<sub>n</sub> + ' + sgnNum(step)
    : 't<sub>1</sub> = ' + sgnNum(a) + ',&nbsp;&nbsp;t<sub>n+1</sub> = t<sub>n</sub> × ' + sgnNum(step);
  qData.workSteps = 'Start at t<sub>1</sub> = ' + sgnNum(a) + ' and apply the rule ' + (k - 1) + ' times:<br>'
    + seq.map(sgnNum).join(' → ') + '<br>So t<sub>' + k + '</sub> = <b>' + sgnNum(v) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Use the recurrence relation.</div>'
    + '<div style="font-size:1.35rem;font-weight:900;margin:12px 0;">' + rel + '</div>'
    + '<div>Find <b>t<sub>' + k + '</sub></b>.</div>';
}

/* ═════════ Number Classification ═════════ */
/* Natural = 1, 2, 3, …   Whole = 0, 1, 2, 3, …   Integer = …, −1, 0, 1, …      */
const NC_SETS = [
  { code: 'nat',  label: 'Natural' },
  { code: 'whl',  label: 'Whole' },
  { code: 'int',  label: 'Integer' },
  { code: 'rat',  label: 'Rational' },
  { code: 'irr',  label: 'Irrational' },
  { code: 'real', label: 'Real' },
];
const NC_IRR_ROOTS = [2, 3, 5, 6, 7, 8, 10, 11, 12, 13, 15];
function ncMakeNumber(){
  // returns {html, sets:[codes], why}
  const kind = ri(8);
  if (kind === 0) { const n = rr(1, 40); return { html: String(n), sets: ['nat','whl','int','rat','real'], why: n + ' is a counting number, so it is natural, whole, an integer and rational (' + n + '/1).' }; }
  if (kind === 1) { return { html: '0', sets: ['whl','int','rat','real'], why: '0 is not a natural (counting) number, but it is whole, an integer and rational (0/1).' }; }
  if (kind === 2) { const n = rr(1, 30); return { html: '−' + n, sets: ['int','rat','real'], why: '−' + n + ' is negative, so it is an integer and rational, but not natural or whole.' }; }
  if (kind === 3) { let d = rr(2, 9), n = rr(1, 20); while (n % d === 0) n = rr(1, 20); return { html: fracHTML(n, d), sets: ['rat','real'], why: 'A fraction of two integers is rational. It is not an integer because ' + n + ' does not divide exactly by ' + d + '.' }; }
  if (kind === 4) { const n = rr(1, 99) / (ffPick([10, 100])); return { html: String(n), sets: ['rat','real'], why: 'A decimal that stops can be written as a fraction, so it is rational.' }; }
  if (kind === 5) { const r = ffPick(NC_IRR_ROOTS); return { html: '√' + r, sets: ['irr','real'], why: r + ' is not a perfect square, so √' + r + ' never stops or repeats — it is irrational.' }; }
  if (kind === 6) { return { html: 'π', sets: ['irr','real'], why: 'π never stops or repeats, so it is irrational.' }; }
  const k = rr(2, 12); return { html: '√' + (k * k), sets: ['nat','whl','int','rat','real'], why: '√' + (k * k) + ' = ' + k + ' exactly, so it is natural, whole, an integer and rational.' };
}
function genNumClass(el){
  el.style.fontSize = '1.1rem';
  const n = ncMakeNumber();
  const big = '<div style="font-size:2.4rem;font-weight:900;margin:14px 0;">' + n.html + '</div>';
  if (level === 1) {
    const correct = n.sets.indexOf('irr') >= 0 ? 'Irrational' : 'Rational';
    qData.workSteps = n.why + '<br>A number is <b>rational</b> if it can be written as a fraction of two whole numbers; otherwise it is <b>irrational</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">Is this number rational or irrational?</div>' + big,
                 ['Rational', 'Irrational'], correct, true);
    return;
  }
  qData.msOptions = NC_SETS.slice();
  qData.msAns = n.sets.slice();
  qData.msInstr = 'Tick every set this number belongs to.';
  qData.workSteps = n.why + '<br>Natural = 1, 2, 3, …&nbsp; Whole = 0, 1, 2, 3, …&nbsp; Integer = …, −1, 0, 1, …&nbsp; '
    + 'Every rational and every irrational number is also <b>real</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Tick every set this number belongs to.</div>' + big;
}

/* ═════════ Quadratics — verify a solution ═════════ */
function genQuadVerify(el){
  el.style.fontSize = '1.15rem';
  let eqHtml, cand, isSol, work;
  if (level === 1) {
    const k = rr(2, 12), kk = k * k;
    const asEq = Math.random() < 0.5;
    eqHtml = asEq ? ('x² = ' + kk) : ('x² − ' + kk + ' = 0');
    if (Math.random() < 0.5) cand = ffPick([k, -k]);
    else { do { cand = rr(-15, 15); } while (cand === k || cand === -k); }
    isSol = (cand * cand === kk);
    work = 'Substitute x = ' + sgnNum(cand) + ': (' + sgnNum(cand) + ')² = ' + (cand * cand) + '.<br>'
      + (isSol ? 'That equals ' + kk + ', so it <b>is</b> a solution.' : 'That is not ' + kk + ', so it is <b>not</b> a solution.')
      + ' (The solutions are x = ' + k + ' and x = −' + k + '.)';
  } else if (level === 2) {
    let p, q; do { p = rr(-8, 8); q = rr(-8, 8); } while (p === q || p === 0 || q === 0);
    // (x − p)(x − q) = 0  → solutions p and q
    const br = function(v){ return v < 0 ? '(x + ' + Math.abs(v) + ')' : '(x − ' + v + ')'; };
    eqHtml = br(p) + br(q) + ' = 0';
    if (Math.random() < 0.5) cand = ffPick([p, q]);
    else { do { cand = rr(-9, 9); } while (cand === p || cand === q); }
    isSol = (cand === p || cand === q);
    work = 'Null Factor Law: a product is 0 when one factor is 0.<br>'
      + 'The solutions are x = ' + sgnNum(p) + ' and x = ' + sgnNum(q) + '.<br>'
      + 'x = ' + sgnNum(cand) + (isSol ? ' <b>is</b> one of them.' : ' is <b>not</b> one of them.');
  } else {
    let p, q; do { p = rr(-6, 6); q = rr(-6, 6); } while (p === 0 || q === 0 || p === q);
    const b = -(p + q), c = p * q;   // x² + bx + c with roots p, q
    eqHtml = 'x²' + (b === 0 ? '' : (b > 0 ? ' + ' + b : ' − ' + Math.abs(b)) + 'x') + (c > 0 ? ' + ' + c : ' − ' + Math.abs(c)) + ' = 0';
    if (Math.random() < 0.5) cand = ffPick([p, q]);
    else { do { cand = rr(-9, 9); } while (cand === p || cand === q); }
    const lhs = cand * cand + b * cand + c;
    isSol = (lhs === 0);
    work = 'Substitute x = ' + sgnNum(cand) + ': (' + sgnNum(cand) + ')² ' + (b >= 0 ? '+ ' + b : '− ' + Math.abs(b)) + ' × ('
      + sgnNum(cand) + ') ' + (c >= 0 ? '+ ' + c : '− ' + Math.abs(c)) + ' = ' + sgnNum(lhs) + '.<br>'
      + (isSol ? 'That is 0, so it <b>is</b> a solution.' : 'That is not 0, so it is <b>not</b> a solution.')
      + ' (The solutions are x = ' + sgnNum(p) + ' and x = ' + sgnNum(q) + '.)';
  }
  qData.workSteps = work;
  decSetChoice(el,
    '<div style="' + A_LBL + '">Is this value a solution of the equation?</div>'
    + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + eqHtml + '</div>'
    + '<div style="font-size:1.4rem;font-weight:900;">x = ' + sgnNum(cand) + '</div>',
    ['Yes', 'No'], isSol ? 'Yes' : 'No', true);
}

/* ═════════ Quadratics — solve ═════════ */
function qsSurdHTML(c, r){ return (c === 1 ? '' : c) + '√' + r; }
function genQuadSolve(el){
  el.style.fontSize = '1.3rem';
  if (level === 1) {
    const k = rr(2, 15), kk = k * k;
    const asEq = Math.random() < 0.5;
    const eqHtml = asEq ? ('x² = ' + kk) : ('x² − ' + kk + ' = 0');
    qData.gapTemplate = ['x = ', 0, '&nbsp;&nbsp;or&nbsp;&nbsp;x = ', 1];
    qData.gapAns = [k, -k];
    qData.gapUnordered = true;
    qData.gapHint = 'Two solutions — either order is fine.';
    qData.gapAnsText = 'x = ' + k + ' or x = −' + k;
    qData.workSteps = (asEq ? '' : 'Add ' + kk + ' to both sides: x² = ' + kk + '.<br>')
      + 'Take the square root of both sides — remember <b>both</b> signs:<br>x = ±√' + kk + ' = <b>' + k + ' or −' + k + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Solve for x.</div>'
      + '<div style="font-size:2.1rem;font-weight:900;margin:12px 0;">' + eqHtml + '</div>';
    return;
  }
  if (level === 2) {
    // Exact-value / fraction answers — choose the correct solution set.
    let prompt, correct, opts;
    if (Math.random() < 0.5) {
      // x² = a²/b²  →  x = ±a/b
      let a, b; do { a = rr(1, 9); b = rr(2, 9); } while (gcd(a, b) !== 1);
      prompt = 'x² = ' + fracHTML(a * a, b * b);
      const S = function(n, d){ return '±' + n + '/' + d; };
      correct = S(a, b);
      opts = [correct, S(a * a, b * b), S(a, b * b), S(b, a)];
      qData.workSteps = 'Square-root both sides: x = ±√(' + (a * a) + '/' + (b * b) + ') = ±' + a + '/' + b + '.';
    } else {
      // x² = c²r  →  x = ±c√r
      const NONSQ = [2, 3, 5, 6, 7, 10, 11, 13];
      const c = rr(2, 5), r = ffPick(NONSQ);
      const r2 = ffPick(NONSQ.filter(function(v){ return v !== r; }));
      const val = c * c * r;
      prompt = 'x² = ' + val;
      const S = function(cc, rr2){ return '±' + qsSurdHTML(cc, rr2); };
      correct = S(c, r);
      opts = [correct, S(c + 1, r), S(c, r2), '±' + (c * r)];
      qData.workSteps = 'x = ±√' + val + '. Since ' + val + ' = ' + (c * c) + ' × ' + r
        + ', √' + val + ' = ' + c + '√' + r + '.<br>So x = ±' + c + '√' + r + '.';
    }
    // de-duplicate the distractors
    const seen = {}; const uniq = [];
    opts.forEach(function(o){ if (!seen[o]) { seen[o] = 1; uniq.push(o); } });
    while (uniq.length < 4) { const extra = '±' + rr(2, 30); if (!seen[extra]) { seen[extra] = 1; uniq.push(extra); } }
    decSetChoice(el, '<div style="' + A_LBL + '">Solve for x — give the exact value.</div>'
      + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + prompt + '</div>', uniq, correct);
    return;
  }
  if (level === 3) {
    // Null Factor Law
    const form = ri(3);
    let eqHtml, roots, work;
    if (form === 0) {
      let p, q; do { p = rr(-9, 9); q = rr(-9, 9); } while (p === q || p === 0 || q === 0);
      const br = function(v){ return v < 0 ? '(x + ' + Math.abs(v) + ')' : '(x − ' + v + ')'; };
      eqHtml = br(p) + br(q) + ' = 0';
      roots = [p, q];
      work = 'Null Factor Law: set each bracket to 0.<br>x ' + (p < 0 ? '+ ' + Math.abs(p) : '− ' + p) + ' = 0 → x = ' + sgnNum(p)
        + '<br>x ' + (q < 0 ? '+ ' + Math.abs(q) : '− ' + q) + ' = 0 → x = ' + sgnNum(q);
    } else if (form === 1) {
      const m = 2; let a; do { a = rr(-9, 9); } while (a === 0 || a % 2 === 0);   // a odd → root a/2 is a half
      let q; do { q = rr(-8, 8); } while (q === 0);
      const first = a < 0 ? '(' + m + 'x + ' + Math.abs(a) + ')' : '(' + m + 'x − ' + a + ')';
      const second = q < 0 ? '(x + ' + Math.abs(q) + ')' : '(x − ' + q + ')';
      eqHtml = first + second + ' = 0';
      roots = [a / m, q];
      work = 'Null Factor Law: set each bracket to 0.<br>' + m + 'x = ' + sgnNum(a) + ' → x = ' + sgnNum(a) + '/' + m + ' = ' + (a / m)
        + '<br>x = ' + sgnNum(q);
    } else {
      const k = ffPick([2, 3, 4, 5]); let c; do { c = rr(1, 9); } while (c === 0);
      eqHtml = 'x(<sup>x</sup>&frasl;<sub>' + k + '</sub> − ' + c + ') = 0';
      roots = [0, k * c];
      work = 'Null Factor Law: one factor must be 0.<br>x = 0<br>or x/' + k + ' − ' + c + ' = 0 → x/' + k + ' = ' + c
        + ' → x = ' + (k * c) + '.';
    }
    qData.gapTemplate = ['x = ', 0, '&nbsp;&nbsp;or&nbsp;&nbsp;x = ', 1];
    qData.gapAns = roots;
    qData.gapUnordered = true;
    qData.gapHint = roots.every(Number.isInteger)
      ? 'Two solutions — either order is fine.'
      : 'Two solutions, either order. Write a half as a decimal, e.g. 1.5';
    qData.gapAnsText = 'x = ' + sgnNum(roots[0]) + ' or x = ' + sgnNum(roots[1]);
    qData.workSteps = work;
    el.innerHTML = '<div style="' + A_LBL + '">Use the Null Factor Law to solve for x.</div>'
      + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + eqHtml + '</div>';
    return;
  }
  // Level 4 — monic trinomials by factorising
  let p, q; do { p = rr(-9, 9); q = rr(-9, 9); } while (p === 0 || q === 0 || p === q || p === -q);
  const b = -(p + q), c = p * q;
  const eqHtml = 'x²' + (b > 0 ? ' + ' + b : ' − ' + Math.abs(b)) + 'x' + (c > 0 ? ' + ' + c : ' − ' + Math.abs(c)) + ' = 0';
  const br = function(v){ return v < 0 ? '(x + ' + Math.abs(v) + ')' : '(x − ' + v + ')'; };
  qData.gapTemplate = ['x = ', 0, '&nbsp;&nbsp;or&nbsp;&nbsp;x = ', 1];
  qData.gapAns = [p, q];
  qData.gapUnordered = true;
  qData.gapHint = 'Two solutions — either order is fine.';
  qData.gapAnsText = 'x = ' + sgnNum(p) + ' or x = ' + sgnNum(q);
  qData.workSteps = 'Find two numbers that multiply to ' + sgnNum(c) + ' and add to ' + sgnNum(b) + ': '
    + sgnNum(-p) + ' and ' + sgnNum(-q) + '.<br>So ' + br(p) + br(q) + ' = 0, giving x = <b>' + sgnNum(p) + '</b> or x = <b>' + sgnNum(q) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Solve by factorising.</div>'
    + '<div style="font-size:2rem;font-weight:900;margin:12px 0;">' + eqHtml + '</div>';
}

/* ═════════ Coordinate Geometry — the drawing toolkit ═════════
   Fixed −5…5 grid on the 300-wide canvas used by every other diagram skill.  */
const CG_R = 5, CG_S = 22, CG_CX = 150, CG_CY = 125, CG_H = 250;
function cgX(x){ return CG_CX + x * CG_S; }
function cgY(y){ return CG_CY - y * CG_S; }
function cgGrid(){
  let s = '';
  for (let i = -CG_R; i <= CG_R; i++) {
    s += '<line x1="' + cgX(i) + '" y1="' + cgY(-CG_R) + '" x2="' + cgX(i) + '" y2="' + cgY(CG_R) + '" stroke="var(--border)" stroke-width="1"/>';
    s += '<line x1="' + cgX(-CG_R) + '" y1="' + cgY(i) + '" x2="' + cgX(CG_R) + '" y2="' + cgY(i) + '" stroke="var(--border)" stroke-width="1"/>';
  }
  s += '<line x1="' + cgX(-CG_R) + '" y1="' + cgY(0) + '" x2="' + cgX(CG_R) + '" y2="' + cgY(0) + '" stroke="var(--text)" stroke-width="2"/>';
  s += '<line x1="' + cgX(0) + '" y1="' + cgY(-CG_R) + '" x2="' + cgX(0) + '" y2="' + cgY(CG_R) + '" stroke="var(--text)" stroke-width="2"/>';
  for (let i = -CG_R; i <= CG_R; i++) {
    if (i === 0) continue;
    s += '<text x="' + cgX(i) + '" y="' + (cgY(0) + 12) + '" font-family="Nunito,sans-serif" font-weight="700" font-size="9" fill="var(--muted)" text-anchor="middle">' + i + '</text>';
    s += '<text x="' + (cgX(0) - 7) + '" y="' + cgY(i) + '" font-family="Nunito,sans-serif" font-weight="700" font-size="9" fill="var(--muted)" text-anchor="end" dominant-baseline="central">' + i + '</text>';
  }
  s += '<text x="' + (cgX(CG_R) + 8) + '" y="' + cgY(0) + '" font-family="Nunito,sans-serif" font-weight="900" font-size="12" fill="var(--text)" text-anchor="middle" dominant-baseline="central">x</text>';
  s += '<text x="' + cgX(0) + '" y="' + (cgY(CG_R) - 8) + '" font-family="Nunito,sans-serif" font-weight="900" font-size="12" fill="var(--text)" text-anchor="middle">y</text>';
  return s;
}
function cgPoint(x, y, label){
  let s = '<circle cx="' + cgX(x) + '" cy="' + cgY(y) + '" r="5" fill="var(--accent)"/>';
  if (label) s += '<text x="' + (cgX(x) + 10) + '" y="' + (cgY(y) - 10) + '" font-family="Nunito,sans-serif" font-weight="900" font-size="14" fill="var(--accent)" text-anchor="middle">' + label + '</text>';
  return s;
}
function cgLine(x1, y1, x2, y2){
  return '<line x1="' + cgX(x1) + '" y1="' + cgY(y1) + '" x2="' + cgX(x2) + '" y2="' + cgY(y2)
    + '" stroke="var(--accent)" stroke-width="3.5" stroke-linecap="round"/>';
}
function cgCurve(fn){
  // sample the function across the window, dropping points that leave the box
  const segs = []; let cur = [];
  for (let t = -CG_R; t <= CG_R + 0.001; t += 0.1) {
    const y = fn(t);
    if (isFinite(y) && Math.abs(y) <= CG_R + 0.001) cur.push(cgX(t).toFixed(1) + ',' + cgY(y).toFixed(1));
    else if (cur.length) { segs.push(cur); cur = []; }
  }
  if (cur.length) segs.push(cur);
  return segs.filter(function(sg){ return sg.length > 1; })
    .map(function(sg){ return '<polyline points="' + sg.join(' ') + '" fill="none" stroke="var(--accent)" stroke-width="3" stroke-linecap="round"/>'; }).join('');
}
function cgSvg(inner){ return decSvg(cgGrid() + inner, CG_H); }

/* ── Plot-the-points scaffold (v78.2) ──────────────────────────────────────
   The answer surface IS the drawn Cartesian plane in #qBox: every lattice
   point carries an invisible tap target, and a tap places or removes a marker.
     qData.plotAns    — [[x,y], …] the points that must end up plotted
     qData.plotChosen — [[x,y], …] what the student has plotted so far
     qData.plotAbove  — HTML rendered above the grid (the table of values)
     qData.plotMarked — set once checked, so the re-draw shows the marking
   All-or-nothing: every required point plotted and none extra.              */
/* v78.3: the plot surface is no longer hard-wired to the −5…5 Cartesian plane.
   A question supplies a GEOMETRY — where the tappable lattice points are, how to
   map them to pixels, and how to draw the axes — so the same tap-and-check
   machinery drives both "plot this table" and "build this distance–time graph".  */
function cgGeom(){
  const xs = [], ys = [];
  for (let i = -CG_R; i <= CG_R; i++) { xs.push(i); ys.push(i); }
  return { px: cgX, py: cgY, xs: xs, ys: ys, grid: cgGrid, h: CG_H, r: 10 };
}
function plotGeom(){ return qData.plotGeom || cgGeom(); }
function cgHitLayer(){
  const G = plotGeom();
  let s = '';
  G.xs.forEach(function(x){
    G.ys.forEach(function(y){
      s += '<circle class="cg-hit" cx="' + G.px(x) + '" cy="' + G.py(y) + '" r="' + (G.r || 10) + '" '
        + 'data-px="' + x + '" data-py="' + y + '" onclick="plotTap(' + x + ',' + y + ')"/>';
    });
  });
  return s;
}
function plotHas(x, y){
  return (qData.plotChosen || []).some(function(p){ return p[0] === x && p[1] === y; });
}

/* ══════════════════════════════════════════════════════════════════
   v97 (Laura): SKETCHING IS MARKED AGAINST THE LINE, NOT A POINT LIST
   ------------------------------------------------------------------
   A sketch has infinitely many right answers. Marking it against one
   fixed pair of points meant a student who stepped the gradient
   BACKWARDS — for y = −x + 4, tapping (0, 4) then (−1, 5) — was told
   they were wrong when they had drawn the correct line. The old fix
   for that was to name the two points in the prompt, which handed over
   the answer and turned the level into a copying exercise.

   So a question can now describe the LINE instead of the points:
     qData.plotLine = { m: gradient, c: y-intercept }   or   { vx: k }
     qData.plotMust = [[0, c]]   points the METHOD requires (optional)
     qData.plotNeed = how many points to plot (default 2)
   Anything on the line counts. The named method's anchor points are
   still required — plotting the y-intercept IS half of "the
   gradient–intercept method" — but the free point is genuinely free.
══════════════════════════════════════════════════════════════════ */
function plotOnLine(p){
  const L = qData.plotLine;
  if (!L) return false;
  if (L.vx !== undefined) return p[0] === L.vx;
  return p[1] === L.m * p[0] + L.c;
}
function plotLineMissing(){
  return (qData.plotMust || []).filter(function(m){ return !plotHas(m[0], m[1]); });
}
/* Marked right when: the required number of DISTINCT points is plotted,
   every one of them lies on the line, and every point the method demands
   is among them. */
function plotLineCorrect(){
  const chosen = qData.plotChosen || [], need = qData.plotNeed || 2;
  if (chosen.length !== need) return false;
  const seen = { };
  for (let i = 0; i < chosen.length; i++){
    const k = chosen[i][0] + ',' + chosen[i][1];
    if (seen[k]) return false;
    seen[k] = 1;
    if (!plotOnLine(chosen[i])) return false;
  }
  return plotLineMissing().length === 0;
}
/* The whole line, drawn across the window, for the marked-up re-draw. */
function plotLineSvg(G){
  const L = qData.plotLine;
  if (!L) return '';
  const xs = G.xs, ys = G.ys;
  const x0 = xs[0], x1 = xs[xs.length - 1];
  if (L.vx !== undefined)
    return '<line x1="' + G.px(L.vx) + '" y1="' + G.py(ys[0]) + '" x2="' + G.px(L.vx)
      + '" y2="' + G.py(ys[ys.length - 1]) + '" stroke="var(--green)" stroke-width="2.5" stroke-dasharray="6 4"/>';
  const clip = function(x){ return Math.max(ys[0], Math.min(ys[ys.length - 1], L.m * x + L.c)); };
  const pts = [];
  for (let x = x0; x <= x1; x += 0.25){
    const y = L.m * x + L.c;
    if (y >= ys[0] - 0.001 && y <= ys[ys.length - 1] + 0.001) pts.push(G.px(x).toFixed(1) + ',' + G.py(y).toFixed(1));
  }
  return pts.length > 1 ? '<polyline points="' + pts.join(' ') + '" fill="none" stroke="var(--green)" '
    + 'stroke-width="2.5" stroke-dasharray="6 4" stroke-linecap="round"/>' : '';
}
function plotTap(x, y){
  if (gameOver || qData.plotMarked) return;
  const chosen = qData.plotChosen || (qData.plotChosen = []);
  const i = chosen.findIndex(function(p){ return p[0] === x && p[1] === y; });
  if (i >= 0) chosen.splice(i, 1); else chosen.push([x, y]);
  plotRender();
}
function plotRender(){
  const el = id('qBox'); if (!el) return;
  const G = plotGeom();
  const want = qData.plotAns || [], chosen = qData.plotChosen || [];
  const same = function(p, q){ return p[0] === q[0] && p[1] === q[1]; };
  const cgX = G.px, cgY = G.py;      // shadow the Cartesian mappers for this render
  let marks = '';
  /* An ORDERED question is a path, not a set: join the taps up as they are made so
     the student sees the journey take shape. Drawn under the markers. */
  if (qData.plotOrdered) {
    /* qData.plotPre is the part of the path that is ALREADY drawn for the student
       (the "finish the graph" variant). It is drawn in muted grey so it reads as
       given rather than as something they did, and their taps continue from its
       last point. */
    const pre = qData.plotPre || (qData.plotStart ? [qData.plotStart] : []);
    if (pre.length > 1) marks += '<polyline points="'
      + pre.map(function(p){ return cgX(p[0]) + ',' + cgY(p[1]); }).join(' ')
      + '" fill="none" stroke="var(--muted)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>';
    pre.forEach(function(p){ marks += '<circle cx="' + cgX(p[0]) + '" cy="' + cgY(p[1]) + '" r="5" fill="var(--muted)"/>'; });
    const path = (pre.length ? [pre[pre.length - 1]] : []).concat(chosen);
    if (path.length > 1) marks += '<polyline points="'
      + path.map(function(p){ return cgX(p[0]) + ',' + cgY(p[1]); }).join(' ')
      + '" fill="none" stroke="var(--accent)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>';
  }
  if (qData.plotMarked && qData.plotLine) {
    /* v97: sketching questions show the LINE they should have drawn, dashed,
       with each tap green if it sits on that line and red if it does not. A
       correct point in an unexpected place now reads as correct, which is what
       it is. */
    marks += plotLineSvg(G);
    chosen.forEach(function(p){
      marks += '<circle cx="' + cgX(p[0]) + '" cy="' + cgY(p[1]) + '" r="6" fill="'
        + (plotOnLine(p) ? 'var(--green)' : 'var(--red)') + '"/>';
    });
    plotLineMissing().forEach(function(p){
      marks += '<circle cx="' + cgX(p[0]) + '" cy="' + cgY(p[1]) + '" r="7" fill="none" stroke="var(--amber)" stroke-width="3" stroke-dasharray="3 2"/>';
    });
  } else if (qData.plotMarked) {
    // green where they were right, red where they plotted something that isn't a
    // point of the table, and a hollow green ring on anything they missed
    chosen.forEach(function(p){
      const ok = want.some(function(q){ return same(p, q); });
      marks += '<circle cx="' + cgX(p[0]) + '" cy="' + cgY(p[1]) + '" r="6" fill="'
        + (ok ? 'var(--green)' : 'var(--red)') + '"/>';
    });
    want.forEach(function(p){
      if (!chosen.some(function(q){ return same(p, q); }))
        marks += '<circle cx="' + cgX(p[0]) + '" cy="' + cgY(p[1]) + '" r="6" fill="none" stroke="var(--green)" stroke-width="3" stroke-dasharray="3 2"/>';
    });
  } else {
    chosen.forEach(function(p){
      marks += '<circle cx="' + cgX(p[0]) + '" cy="' + cgY(p[1]) + '" r="6" fill="var(--accent)"/>';
    });
    setText('plotCount', chosen.length + ' of ' + (qData.plotLine ? (qData.plotNeed || 2) : want.length) + ' '
      + (qData.plotNoun || (qData.plotOrdered ? 'corners placed' : 'plotted')));
  }
  /* #qBox is display:flex — it must be given exactly ONE child, or the prompt, the
     story and the grid line up as columns and the graph is squeezed to nothing.
     Every other generator wraps its output in a .q-text div; so does this one now. */
  el.innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;width:100%;white-space:normal;">'
    + (qData.plotAbove || '')
    + plotSvg(G.grid() + marks + (qData.plotMarked ? '' : cgHitLayer()), G)
    + '</div>';
}
/* The plot surface scales to the width it is given (up to a sensible cap) rather
   than sitting at a fixed 300px, so the grid — and every tap target on it — is as
   big as the screen allows. */
function plotSvg(inner, G){
  return '<svg width="300" height="' + G.h + '" viewBox="0 0 300 ' + G.h + '" role="img" '
    + 'style="display:block;margin:10px auto 0;width:100%;max-width:' + (G.maxW || 430) + 'px;height:auto;">'
    + inner + '</svg>';
}
function buildPlotPts(){
  qData.plotChosen = [];
  qData.plotMarked = false;
  id('plotInstr').textContent = qData.plotInstr || 'Tap the grid to plot each point. Tap a point again to remove it.';
  const cb = id('plotCheckBtn'); if (cb) cb.disabled = false;
  plotRender();
  kbHide();
}

/* ── Table of values — the shared table renderer ── */
function tovTable(xs, ys, blankY){
  let top = '<tr><th>x</th>', bot = '<tr><th>y</th>';
  xs.forEach(function(x){ top += '<td>' + sgnNum(x) + '</td>'; });
  ys.forEach(function(y, i){ bot += '<td>' + (blankY ? '▢' : sgnNum(y)) + '</td>'; });
  return '<table class="tov-table">' + top + '</tr>' + bot + '</tr></table>';
}
/* A rule the student can evaluate in their head, plus the y it produces.
   kind 'lin'  → y = mx + c            kind 'quad' → y = ax² + c
   kind 'cube' → y = x³                kind 'exp'  → y = k × 2ˣ                */
function tovRule(kind){
  if (kind === 'lin') {
    var m = ffPick([1, 2, 3, -1, -2, -3]), c = rr(-4, 4);
    return { kind: kind, f: function(x){ return m * x + c; },
             html: 'y = ' + (m === 1 ? '' : m === -1 ? '−' : sgnNum(m)) + 'x' + (c === 0 ? '' : (c > 0 ? ' + ' + c : ' − ' + (-c))),
             why: 'Substitute each x into the rule.' };
  }
  if (kind === 'quad') {
    var a2 = ffPick([1, 1, 1, 2, -1]), c2 = rr(-3, 3);
    return { kind: kind, f: function(x){ return a2 * x * x + c2; },
             html: 'y = ' + (a2 === 1 ? '' : a2 === -1 ? '−' : a2) + 'x²' + (c2 === 0 ? '' : (c2 > 0 ? ' + ' + c2 : ' − ' + (-c2))),
             why: 'Square the x FIRST, then do the rest.' };
  }
  if (kind === 'cube') {
    return { kind: kind, f: function(x){ return x * x * x; }, html: 'y = x³',
             why: 'Cube the x: x × x × x. A negative cubed stays negative.' };
  }
  var k = ffPick([1, 2, 3]);
  return { kind: kind, f: function(x){ return k * Math.pow(2, x); },
           html: 'y = ' + (k === 1 ? '' : k + ' × ') + '2ˣ',
           why: 'The x is the POWER: 2ˣ doubles every time x goes up by 1.' };
}

/* ═════════ The Cartesian Plane ═════════
   v77.1 (Laura): levels re-ordered so difficulty ramps properly.
     L1 quadrant FROM A PICTURE (new)  ·  L2 read a plotted coordinate
     L3 quadrant from a written coordinate (was L1)                              */
const CG_QUAD_OPTS = ['1st quadrant', '2nd quadrant', '3rd quadrant', '4th quadrant'];
function cgQuadOf(x, y){ return (x > 0 && y > 0) ? 1 : (x < 0 && y > 0) ? 2 : (x < 0 && y < 0) ? 3 : 4; }
function cgQuadWhy(x, y, q){
  return 'x is ' + (x > 0 ? 'positive' : 'negative') + ' and y is ' + (y > 0 ? 'positive' : 'negative')
    + '.<br>(+, +) = 1st, (−, +) = 2nd, (−, −) = 3rd, (+, −) = 4th → <b>' + CG_QUAD_OPTS[q - 1] + '</b>.';
}
function genCartesian(el){
  if (level === 2) {
    // Read the coordinates of a plotted point
    const x = rr(-CG_R, CG_R), y = rr(-CG_R, CG_R);
    const letter = ffPick(['A', 'B', 'P', 'Q', 'M', 'T']);
    qData.gapTemplate = [letter + ' = ( ', 0, ' , ', 1, ' )'];
    qData.gapAns = [x, y];
    qData.gapHint = 'Across first (x), then up or down (y).';
    qData.gapAnsText = '(' + sgnNum(x) + ', ' + sgnNum(y) + ')';
    qData.workSteps = 'Read across the x-axis first: <b>' + sgnNum(x) + '</b>. Then up or down the y-axis: <b>' + sgnNum(y) + '</b>.<br>'
      + 'So ' + letter + ' = (' + sgnNum(x) + ', ' + sgnNum(y) + ').';
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL + '">Write the coordinates of point ' + letter + '.</div>'
      + cgSvg(cgPoint(x, y, letter)) + '</div>';
    return;
  }
  if (level === 1) {
    // Which quadrant — read off a DRAWN point (easier than reading a written coordinate)
    let x, y; do { x = rr(-CG_R, CG_R); y = rr(-CG_R, CG_R); } while (x === 0 || y === 0);
    const q = cgQuadOf(x, y);
    const letter = ffPick(['A', 'B', 'P', 'Q', 'M', 'T']);
    qData.workSteps = 'The point is ' + (x > 0 ? 'right' : 'left') + ' of the y-axis and '
      + (y > 0 ? 'above' : 'below') + ' the x-axis.<br>' + cgQuadWhy(x, y, q);
    decSetChoice(el, '', CG_QUAD_OPTS.slice(), CG_QUAD_OPTS[q - 1], true);
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL
      + '">Which quadrant is point ' + letter + ' in?</div>' + cgSvg(cgPoint(x, y, letter)) + '</div>';
    return;
  }
  if (level === 3) {
    // Quadrant from a written coordinate (no picture to lean on)
    el.style.fontSize = '1.1rem';
    let x, y; do { x = rr(-9, 9); y = rr(-9, 9); } while (x === 0 || y === 0);
    const q = cgQuadOf(x, y);
    qData.workSteps = cgQuadWhy(x, y, q);
    decSetChoice(el, '<div style="' + A_LBL + '">Which quadrant is this point in?</div>'
      + '<div style="font-size:2.2rem;font-weight:900;margin:12px 0;">(' + sgnNum(x) + ', ' + sgnNum(y) + ')</div>',
      CG_QUAD_OPTS.slice(), CG_QUAD_OPTS[q - 1], true);
    return;
  }
  genCartesianVertex(el);
}

/* ── Cartesian Plane L4 (v78.2, Laura) — three vertices are plotted and the
   student names the fourth.

   Three points is the fewest that pins the answer DOWN. Two points and "make a
   square" has four different answers; three points and a NAMED shape has exactly
   one, which is what makes it markable:
     • rectangle / square — axis-aligned, so the missing corner is the one that
       shares an x with one neighbour and a y with the other;
     • parallelogram — the vertices are LABELLED A, B, C in order, so the fourth
       is D = A + C − B. Without that labelling a parallelogram from three points
       has three different fourth vertices, and the question would be unfair.
   The suite checks uniqueness geometrically on every question.               */
function genCartesianVertex(el){
  const R = CG_R;
  let A, B, C, D, shape, why, guard = 0;
  do {
    guard++;
    const kind = ri(3);   // 0 rectangle · 1 square · 2 parallelogram
    if (kind === 2) {
      // A, B, C in order around the shape; D closes it. Keep it non-rectangular
      // so it genuinely reads as a parallelogram.
      const bx = rr(-3, 1), by = rr(-3, 1);
      let ux, uy, vx, vy, g2 = 0;
      do {                                   // u and v must not be parallel, or
        g2++;                                // A, B and C collapse onto one line
        ux = rr(2, 4); uy = ri(2) ? rr(1, 2) : -rr(1, 2);
        vx = ri(2) ? rr(1, 2) : -rr(1, 2); vy = rr(2, 4);
      } while (g2 < 40 && ux * vy - uy * vx === 0);
      B = [bx, by]; A = [bx + ux, by + uy]; C = [bx + vx, by + vy];
      D = [A[0] + C[0] - B[0], A[1] + C[1] - B[1]];
      shape = 'parallelogram';
      why = 'In parallelogram ABCD the side AD is the same move as BC.<br>'
        + 'B → C is (' + sgnNum(C[0] - B[0]) + ', ' + sgnNum(C[1] - B[1]) + '), so do that same move from A: '
        + '(' + sgnNum(A[0]) + ', ' + sgnNum(A[1]) + ') → <b>(' + sgnNum(D[0]) + ', ' + sgnNum(D[1]) + ')</b>.';
    } else {
      const w = kind === 1 ? rr(2, 5) : rr(2, 6);
      const h = kind === 1 ? w : (function(){ let v; do { v = rr(2, 6); } while (v === w); return v; })();
      const x0 = rr(-R, R - w), y0 = rr(-R, R - h);
      // corners anticlockwise from the bottom-left, then hide one at random
      const cs = [[x0, y0], [x0 + w, y0], [x0 + w, y0 + h], [x0, y0 + h]];
      const hide = ri(4);
      D = cs[hide];
      const rest = cs.filter(function(_, i){ return i !== hide; });
      A = rest[0]; B = rest[1]; C = rest[2];
      shape = kind === 1 ? 'square' : 'rectangle';
      why = 'The ' + shape + ' spans x from ' + sgnNum(x0) + ' to ' + sgnNum(x0 + w)
        + ' and y from ' + sgnNum(y0) + ' to ' + sgnNum(y0 + h) + '.<br>'
        + 'The missing corner takes the x it shares with one neighbour and the y it shares with the other: '
        + '<b>(' + sgnNum(D[0]) + ', ' + sgnNum(D[1]) + ')</b>.';
    }
  } while (guard < 60 && (Math.abs(D[0]) > R || Math.abs(D[1]) > R
           || [A, B, C].some(function(p){ return Math.abs(p[0]) > R || Math.abs(p[1]) > R; })
           || [A, B, C].some(function(p){ return p[0] === D[0] && p[1] === D[1]; })));

  const named = shape === 'parallelogram';
  // For the labelled parallelogram the two KNOWN sides are drawn, so ABCD reads as a
  // path rather than three loose dots. The rectangle and square stay as bare points —
  // working out which corners are adjacent IS the question there.
  const pts = named
    ? cgLine(A[0], A[1], B[0], B[1]) + cgLine(B[0], B[1], C[0], C[1])
      + cgPoint(A[0], A[1], 'A') + cgPoint(B[0], B[1], 'B') + cgPoint(C[0], C[1], 'C')
    : cgPoint(A[0], A[1]) + cgPoint(B[0], B[1]) + cgPoint(C[0], C[1]);
  qData.gapTemplate = ['( ', 0, ' , ', 1, ' )'];
  qData.gapAns = [D[0], D[1]];
  qData.gapHint = 'Across first (x), then up or down (y).';
  qData.gapAnsText = '(' + sgnNum(D[0]) + ', ' + sgnNum(D[1]) + ')';
  qData.workSteps = why;
  id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL + '">'
    + (named
        ? 'A, B and C are three corners of parallelogram ABCD. Where is D?'
        : 'These three points are three corners of a ' + shape + '. Where is the fourth corner?')
    + '</div>' + cgSvg(pts) + '</div>';
}

/* ═════════ Table of Values (v78.2, Laura) ═════════
   L1 construct a linear table · L2 PLOT a given linear table
   L3 construct a non-linear table · L4 PLOT a given non-linear table

   The plotting levels use the tap-the-grid mode, so every point of the table
   has to land inside the drawn −5…5 window. Both the x values AND the rule are
   therefore chosen so the whole table fits, rather than generated and clipped —
   a table with a point off the grid would be unanswerable.                    */
function tovFits(xs, f){
  return xs.every(function(x){ const y = f(x); return Number.isInteger(y) && Math.abs(y) <= CG_R; });
}
function tovPlottable(kind){
  let r, xs, guard = 0;
  do {
    guard++;
    r = tovRule(kind);
    xs = kind === 'lin' ? [-2, -1, 0, 1, 2] : (kind === 'exp' ? [0, 1, 2] : [-2, -1, 0, 1, 2]);
    if (kind === 'cube') xs = [-1, 0, 1];
  } while (guard < 80 && !tovFits(xs, r.f));
  if (!tovFits(xs, r.f)) { r = tovRule('lin'); xs = [-1, 0, 1]; }   // guaranteed fallback
  return { rule: r, xs: xs, ys: xs.map(r.f) };
}
function genTableValues(el){
  el.style.fontSize = '1.05rem';

  /* ── Construct: fill in the y row ── */
  if (level === 1 || level === 3) {
    const kind = level === 1 ? 'lin' : ffPick(['quad', 'quad', 'cube', 'exp']);
    const r = tovRule(kind);
    const xs = kind === 'exp' ? [0, 1, 2, 3, 4] : [-2, -1, 0, 1, 2];
    const ys = xs.map(r.f);
    qData.gapTemplate = [0, '&nbsp;', 1, '&nbsp;', 2, '&nbsp;', 3, '&nbsp;', 4];
    qData.gapAns = ys;
    qData.gapHint = 'Fill in the y row, left to right.';
    qData.gapAnsText = ys.map(sgnNum).join(', ');
    qData.workSteps = r.why + '<br>'
      + xs.map(function(x, i){ return 'x = ' + sgnNum(x) + ' → y = ' + sgnNum(ys[i]); }).join('<br>');
    el.innerHTML = '<div style="' + A_LBL + '">Complete the table of values for ' + r.html + '.</div>'
      + tovTable(xs, ys, true);
    return;
  }

  /* ── Plot: tap each point of the given table ── */
  // Quadratics only for the non-linear PLOT level: y = x³ is the one rule whose
  // grid-fitting slice ((−1,−1), (0,0), (1,1)) is a straight line, which would
  // teach exactly the wrong thing on a "plot the curve" question.
  const p = tovPlottable(level === 2 ? 'lin' : 'quad');
  qData.plotAns = p.xs.map(function(x, i){ return [x, p.ys[i]]; });
  qData.plotInstr = 'Tap the grid to plot each point in the table. Tap a point again to remove it.';
  qData.plotAbove = '<div style="' + A_LBL + '">Plot every point from this table of values.</div>'
    + tovTable(p.xs, p.ys, false);
  qData.workSteps = 'Each column of the table is one point (x, y).<br>'
    + qData.plotAns.map(function(q){ return '(' + sgnNum(q[0]) + ', ' + sgnNum(q[1]) + ')'; }).join('&nbsp; ')
    + '<br>Across first, then up or down.';
  el.innerHTML = '';   // buildPlotPts() renders the grid once the panel is up
}


/* ═════════════════════════════════════════════════════════════════════════
   TRANSFORMATIONS (v79, Laura) — 🔄 Time & Transformations
   -------------------------------------------------------------------------
   Six skills share one engine. EVERY transformation in the program (translate,
   reflect in an axis or y = x, rotate a multiple of 90° about the origin,
   dilate from the origin) is an AFFINE map whose matrix has exactly one
   non-zero entry per row — a "monomial" matrix. That single fact is what makes
   the whole thing tractable:

     • applying one is a two-line calculation;
     • COMPOSING two of them stays monomial, so the Combination skill can print
       a single mapping (x, y) → (…, …) for a chain of transformations rather
       than having to special-case every pairing;
     • the mapping notation can be rendered straight off the matrix, so the
       words and the notation can never drift apart — they are two views of the
       same object.

   T = { m: [[a,b],[c,d]], t: [e,f], words: '…', verb: '…' }
       x' = a·x + b·y + e        y' = c·x + d·y + f                       */

function tfApply(T, p){
  return [ T.m[0][0]*p[0] + T.m[0][1]*p[1] + T.t[0],
           T.m[1][0]*p[0] + T.m[1][1]*p[1] + T.t[1] ];
}
function tfCompose(T1, T2){          // apply T1 FIRST, then T2
  const A = T2.m, B = T1.m;
  return { m: [[A[0][0]*B[0][0] + A[0][1]*B[1][0], A[0][0]*B[0][1] + A[0][1]*B[1][1]],
               [A[1][0]*B[0][0] + A[1][1]*B[1][0], A[1][0]*B[0][1] + A[1][1]*B[1][1]]],
           t: [A[0][0]*T1.t[0] + A[0][1]*T1.t[1] + T2.t[0],
               A[1][0]*T1.t[0] + A[1][1]*T1.t[1] + T2.t[1]] };
}
/* A transformation's IDENTITY as a string — two transformations that move every
   point the same way have the same signature. Used to guarantee a multiple
   choice never carries two right answers. */
function tfSig(T){ return T.m[0][0]+'|'+T.m[0][1]+'|'+T.t[0]+'|'+T.m[1][0]+'|'+T.m[1][1]+'|'+T.t[1]; }
function tfSame(T1, T2){ return tfSig(T1) === tfSig(T2); }

/* Coefficient in front of a variable inside the mapping. Fractions are printed
   as the vulgar character the level cards use, so ½x reads as a half of x
   rather than as "1/2 x" running into the next term. */
function tfCoef(k){
  if (k === 1) return '';
  if (k === -1) return '−';
  if (k === 0.5) return '½';
  if (k === -0.5) return '−½';
  if (Math.abs(k - 1/3) < 1e-9) return '⅓';
  if (Math.abs(k + 1/3) < 1e-9) return '−⅓';
  return sgnNum(k);
}
function tfOff(n){ return n === 0 ? '' : (n > 0 ? ' + ' + n : ' − ' + (-n)); }
function tfRowHtml(a, b, e){
  return (a !== 0 ? tfCoef(a) + 'x' : tfCoef(b) + 'y') + tfOff(e);
}
function tfMapHtml(T){
  return '(x, y) → (' + tfRowHtml(T.m[0][0], T.m[0][1], T.t[0]) + ', '
                      + tfRowHtml(T.m[1][0], T.m[1][1], T.t[1]) + ')';
}

/* ── The transformation constructors ── */
function tfTransWords(a, b){
  const bits = [];
  if (a !== 0) bits.push(Math.abs(a) + ' unit' + (Math.abs(a) === 1 ? '' : 's') + ' ' + (a > 0 ? 'right' : 'left'));
  if (b !== 0) bits.push(Math.abs(b) + ' unit' + (Math.abs(b) === 1 ? '' : 's') + ' ' + (b > 0 ? 'up' : 'down'));
  return bits.join(' and ');
}
function TF_translate(a, b){
  const w = tfTransWords(a, b);
  return { m:[[1,0],[0,1]], t:[a,b], kind:'translate',
           words:'Translate ' + w, verb:'translate ' + w,
           why:'Translating ' + w + ' means adding ' + sgnNum(a) + ' to x and ' + sgnNum(b) + ' to y.' };
}
function TF_reflect(which){
  if (which === 'x') return { m:[[1,0],[0,-1]], t:[0,0], kind:'reflect',
    words:'Reflect in the x-axis', verb:'reflect in the x-axis',
    why:'Reflecting in the x-axis flips the point over the horizontal axis: x stays, y changes sign.' };
  if (which === 'y') return { m:[[-1,0],[0,1]], t:[0,0], kind:'reflect',
    words:'Reflect in the y-axis', verb:'reflect in the y-axis',
    why:'Reflecting in the y-axis flips the point over the vertical axis: y stays, x changes sign.' };
  return { m:[[0,1],[1,0]], t:[0,0], kind:'reflect',
    words:'Reflect in the line y = x', verb:'reflect in the line y = x',
    why:'Reflecting in y = x swaps the two coordinates over: (x, y) becomes (y, x).' };
}
const TF_DIL_TXT = { 2:'2', 3:'3', 4:'4', 0.5:'½' };
function tfKTxt(k){ return Math.abs(k - 1/3) < 1e-9 ? '⅓' : (TF_DIL_TXT[k] || String(k)); }
function TF_dilate(k){
  const kt = tfKTxt(k);
  return { m:[[k,0],[0,k]], t:[0,0], kind:'dilate', k:k,
    words:'Dilate by a factor of ' + kt + ' from the origin',
    verb:'dilate by a factor of ' + kt + ' from the origin',
    why:'A dilation from the origin multiplies BOTH coordinates by the factor — here by ' + kt + '.' };
}
/* Rotations. 90° clockwise and 270° anticlockwise are the SAME map, so the two
   names can never both appear as options on a describe-it level (see tfRotOpts). */
function TF_rotate(deg, dir){
  const d = ((dir === 'cw') ? -1 : 1) * deg;
  const q = ((d % 360) + 360) % 360;                    // 0, 90, 180, 270 anticlockwise
  const M = q === 90  ? [[0,-1],[1,0]]
          : q === 180 ? [[-1,0],[0,-1]]
          : q === 270 ? [[0,1],[-1,0]]
          :             [[1,0],[0,1]];
  const name = deg === 180 ? 'Rotate 180° about the origin'
             : 'Rotate ' + deg + '° ' + (dir === 'cw' ? 'clockwise' : 'anticlockwise') + ' about the origin';
  const why = q === 180 ? 'A half turn about the origin sends (x, y) to (−x, −y) — both signs flip.'
            : q === 90  ? 'A quarter turn anticlockwise sends (x, y) to (−y, x): swap the coordinates, then change the sign of the new x.'
            :             'A quarter turn clockwise sends (x, y) to (y, −x): swap the coordinates, then change the sign of the new y.';
  return { m:M, t:[0,0], kind:'rotate', deg:deg, dir:dir, words:name, verb:name.charAt(0).toLowerCase() + name.slice(1), why:why };
}

/* ── A parameterised Cartesian plane ──
   cgGrid() is hard-wired to −5…5 at 22px. Transformations need both a WIDER
   window (a dilation by 4 leaves the −5…5 box immediately) and, for the shape
   skill, a COARSER one so a vertex is an easy tap on a phone. Same drawing,
   radius and spacing passed in.                                            */
function tfGeom(R, extra){
  const S = Math.max(9, Math.floor(110 / R)), CX = 150, CY = 125, H = 250;
  const px = function(x){ return CX + x * S; }, py = function(y){ return CY - y * S; };
  const step = R <= 5 ? 1 : (R <= 10 ? 2 : 5);
  const rng = []; for (let i = -R; i <= R; i++) rng.push(i);
  const grid = function(){
    let s = '';
    for (let i = -R; i <= R; i++) {
      s += '<line x1="'+px(i)+'" y1="'+py(-R)+'" x2="'+px(i)+'" y2="'+py(R)+'" stroke="var(--border)" stroke-width="1"/>';
      s += '<line x1="'+px(-R)+'" y1="'+py(i)+'" x2="'+px(R)+'" y2="'+py(i)+'" stroke="var(--border)" stroke-width="1"/>';
    }
    s += '<line x1="'+px(-R)+'" y1="'+py(0)+'" x2="'+px(R)+'" y2="'+py(0)+'" stroke="var(--text)" stroke-width="2"/>';
    s += '<line x1="'+px(0)+'" y1="'+py(-R)+'" x2="'+px(0)+'" y2="'+py(R)+'" stroke="var(--text)" stroke-width="2"/>';
    for (let i = -R; i <= R; i++) {
      if (i === 0 || i % step !== 0) continue;
      s += '<text x="'+px(i)+'" y="'+(py(0)+12)+'" font-family="Nunito,sans-serif" font-weight="700" font-size="9" fill="var(--muted)" text-anchor="middle">'+i+'</text>';
      s += '<text x="'+(px(0)-7)+'" y="'+py(i)+'" font-family="Nunito,sans-serif" font-weight="700" font-size="9" fill="var(--muted)" text-anchor="end" dominant-baseline="central">'+i+'</text>';
    }
    s += '<text x="'+(px(R)+8)+'" y="'+py(0)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="12" fill="var(--text)" text-anchor="middle" dominant-baseline="central">x</text>';
    s += '<text x="'+px(0)+'" y="'+(py(R)-8)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="12" fill="var(--text)" text-anchor="middle">y</text>';
    return s + (extra ? extra() : '');
  };
  /* The tap radius must stay UNDER half the cell, or two targets overlap and a
     tap is ambiguous about which lattice point it meant. */
  return { px:px, py:py, xs:rng, ys:rng, grid:grid, h:H, r: Math.max(7, Math.floor(S/2) - 1), maxW:430, R:R, S:S };
}
function tfDot(G, x, y, label, muted){
  const col = muted ? 'var(--muted)' : 'var(--accent)';
  let s = '<circle cx="'+G.px(x)+'" cy="'+G.py(y)+'" r="5" fill="'+col+'"/>';
  if (label) s += '<text x="'+(G.px(x)+10)+'" y="'+(G.py(y)-9)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="13" fill="'+col+'" text-anchor="middle">'+label+'</text>';
  return s;
}
function tfPoly(G, pts, label, muted, dashed){
  const col = muted ? 'var(--muted)' : 'var(--accent)';
  let s = '<polygon points="' + pts.map(function(p){ return G.px(p[0])+','+G.py(p[1]); }).join(' ')
    + '" fill="'+col+'" fill-opacity="0.16" stroke="'+col+'" stroke-width="2.5" stroke-linejoin="round"'
    + (dashed ? ' stroke-dasharray="5 3"' : '') + '/>';
  pts.forEach(function(p){ s += '<circle cx="'+G.px(p[0])+'" cy="'+G.py(p[1])+'" r="3.5" fill="'+col+'"/>'; });
  if (label) {
    const cx = pts.reduce(function(t,p){ return t+p[0]; },0)/pts.length;
    const cy = pts.reduce(function(t,p){ return t+p[1]; },0)/pts.length;
    s += '<text x="'+G.px(cx)+'" y="'+G.py(cy)+'" font-family="Nunito,sans-serif" font-weight="900" font-size="14" fill="'+col+'" text-anchor="middle" dominant-baseline="central">'+label+'</text>';
  }
  return s;
}
function tfPtTxt(p){ return '(' + sgnNum(p[0]) + ', ' + sgnNum(p[1]) + ')'; }

/* ── The four shared level shapes ───────────────────────────────────────────
   Every transformation skill is built from these, which is what makes the six
   of them feel like one family to a student:
     APPLY (words)    — a point and a worded transformation → type the image
     DESCRIBE         — a point and its image drawn → tap the transformation
     FROM MAPPING     — a mapping (x, y) → (…, …) → tap the words that match
     APPLY (mapping)  — a mapping and a point → type the image
     PRE-IMAGE        — the image and the transformation → type where it started
   `fam` supplies the pool of transformations for a level and the pool of
   plausible wrong descriptions.                                            */

/* Build a 4-way option list: the correct words plus three near-misses that are
   guaranteed to be DIFFERENT MAPS, so exactly one option is ever right. */
function tfOptions(T, pool, p, q){
  const opts = [T.words];
  /* Two DIFFERENT transformations can still agree on ONE point — (2, −2) goes to
     (−2, 2) under both a half turn and a reflection in y = x. So when the question
     shows a particular point, a distractor is only safe if it fails on THAT point;
     comparing the maps is not enough. This is the single most likely way for a
     transformations question to end up with two right answers. */
  const rest = pool.filter(function(o){
    if (tfSame(o, T)) return false;
    if (!p) return true;
    const r = tfApply(o, p);
    return !(r[0] === q[0] && r[1] === q[1]);
  });
  // shuffle the near-misses, then take three
  for (let i = rest.length - 1; i > 0; i--) { const j = ri(i + 1); const t = rest[i]; rest[i] = rest[j]; rest[j] = t; }
  rest.slice(0, 3).forEach(function(o){ if (opts.indexOf(o.words) < 0) opts.push(o.words); });
  return opts;
}

/* A point whose image under T lands inside ±R (and, where asked, whose image is
   not the point itself — a question whose answer is "it didn't move" teaches
   nothing and reads as a mistake). */
function tfPickPoint(T, R, allowFixed){
  const ok = function(p){
    const q = tfApply(T, p);
    return Number.isInteger(q[0]) && Number.isInteger(q[1])
        && Math.abs(q[0]) <= R && Math.abs(q[1]) <= R
        && !(p[0] === 0 && p[1] === 0)
        && (allowFixed || !(q[0] === p[0] && q[1] === p[1]));
  };
  for (let g = 0; g < 200; g++) {
    const p = [rr(-R, R), rr(-R, R)];
    if (ok(p)) return { p:p, q:tfApply(T, p) };
  }
  /* Deterministic fallback: sweep the whole lattice rather than ever returning a
     point whose image would sit off the grid. A random loop that runs out of
     tries must not be allowed to ship a broken question. */
  const all = [];
  for (let x = -R; x <= R; x++) for (let y = -R; y <= R; y++) if (ok([x, y])) all.push([x, y]);
  const p = all.length ? all[ri(all.length)] : [1, 0];
  return { p:p, q:tfApply(T, p) };
}

const TF_LETTERS = ['A', 'B', 'P', 'Q', 'M', 'T'];

/* APPLY from words — the plane is drawn with the starting point on it. */
function tfLevelApply(el, T, R){
  const G = tfGeom(R);
  const pick = tfPickPoint(T, R, false);
  const L = ffPick(TF_LETTERS);
  qData.gapTemplate = [L + '&#8242; = ( ', 0, ' , ', 1, ' )'];
  qData.gapAns = pick.q;
  qData.gapHint = 'Across first (x), then up or down (y).';
  qData.gapAnsText = tfPtTxt(pick.q);
  qData.workSteps = T.why + '<br>' + L + ' = ' + tfPtTxt(pick.p) + ' → ' + L + '&#8242; = <b>' + tfPtTxt(pick.q) + '</b>.';
  qData._tf = { T:tfSig(T), p:pick.p, q:pick.q };
  id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;width:100%;white-space:normal;">'
    + '<div style="' + A_LBL + '">' + T.words + '. Where does ' + L + ' end up?</div>'
    + plotSvg(G.grid() + tfDot(G, pick.p[0], pick.p[1], L), G) + '</div>';
}
/* DESCRIBE — both points drawn, tap the transformation that maps one to the other. */
function tfLevelDescribe(el, T, R, pool){
  const G = tfGeom(R);
  const pick = tfPickPoint(T, R, false);
  const L = ffPick(TF_LETTERS);
  const opts = tfOptions(T, pool, pick.p, pick.q);
  qData.workSteps = L + ' = ' + tfPtTxt(pick.p) + ' and ' + L + '&#8242; = ' + tfPtTxt(pick.q) + '.<br>' + T.why
    + '<br>So the transformation is <b>' + T.words + '</b>.';
  qData._tf = { T:tfSig(T), p:pick.p, q:pick.q, opts:opts };
  decSetChoice(el, '', opts, T.words);
  id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;width:100%;white-space:normal;">'
    + '<div style="' + A_LBL + '">Which transformation maps ' + L + ' onto ' + L + '&#8242;?</div>'
    + plotSvg(G.grid() + tfDot(G, pick.p[0], pick.p[1], L, true)
              + tfDot(G, pick.q[0], pick.q[1], L + '&#8242;'), G) + '</div>';
}
/* FROM MAPPING — the notation is given, tap the words that describe it. */
function tfLevelFromMap(el, T, pool){
  const opts = tfOptions(T, pool);
  qData.workSteps = T.why + '<br>' + tfMapHtml(T) + ' is <b>' + T.words + '</b>.';
  qData._tf = { T:tfSig(T), opts:opts };
  el.style.fontSize = '1.05rem';
  decSetChoice(el, '<div style="' + A_LBL + '">What does this mapping describe?</div>'
    + '<div style="font-size:1.7rem;font-weight:900;margin:12px 0;">' + tfMapHtml(T) + '</div>',
    opts, T.words);
}
/* APPLY from mapping — no picture: by this level the student works from the rule. */
function tfLevelApplyMap(el, T, R){
  const pick = tfPickPoint(T, R, false);
  const L = ffPick(TF_LETTERS);
  qData.gapTemplate = [L + '&#8242; = ( ', 0, ' , ', 1, ' )'];
  qData.gapAns = pick.q;
  qData.gapHint = 'Put the x and the y into the rule.';
  qData.gapAnsText = tfPtTxt(pick.q);
  qData.workSteps = 'x = ' + sgnNum(pick.p[0]) + ' and y = ' + sgnNum(pick.p[1]) + ' into ' + tfMapHtml(T) + '.<br>'
    + L + '&#8242; = <b>' + tfPtTxt(pick.q) + '</b>.';
  qData._tf = { T:tfSig(T), p:pick.p, q:pick.q };
  id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;width:100%;white-space:normal;">'
    + '<div style="' + A_LBL + '">Apply this mapping to ' + L + ' = ' + tfPtTxt(pick.p) + '.</div>'
    + '<div style="font-size:1.6rem;font-weight:900;margin:10px 0;">' + tfMapHtml(T) + '</div></div>';
}
/* PRE-IMAGE — the image and the transformation are given; where did it start?
   Generated FORWARDS (pick the pre-image, apply T, then hide it) so the answer
   is exact by construction and no inverse ever has to be taken. Half the
   questions give the transformation in words and half as a mapping — the mix
   Laura asked for. */
function tfLevelPreImage(el, T, R){
  const G = tfGeom(R);
  const pick = tfPickPoint(T, R, false);
  const L = ffPick(TF_LETTERS);
  const asMap = ri(2) === 0;
  const desc = asMap ? tfMapHtml(T) : T.words;
  qData.gapTemplate = [L + ' = ( ', 0, ' , ', 1, ' )'];
  qData.gapAns = pick.p;
  qData.gapHint = 'Work backwards — undo the transformation.';
  qData.gapAnsText = tfPtTxt(pick.p);
  qData.workSteps = 'Undo the transformation. ' + T.why + '<br>'
    + 'Check: ' + tfPtTxt(pick.p) + ' → ' + tfPtTxt(pick.q) + ', so ' + L + ' = <b>' + tfPtTxt(pick.p) + '</b>.';
  qData._tf = { T:tfSig(T), p:pick.p, q:pick.q, asMap:asMap };
  id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;width:100%;white-space:normal;">'
    + '<div style="' + A_LBL + '">' + L + '&#8242; = ' + tfPtTxt(pick.q) + ' is the image of ' + L + ' under '
    + (asMap ? 'the mapping below' : '&ldquo;' + desc + '&rdquo;') + '. Where was ' + L + '?</div>'
    + (asMap ? '<div style="font-size:1.5rem;font-weight:900;margin:8px 0;">' + desc + '</div>' : '')
    + plotSvg(G.grid() + tfDot(G, pick.q[0], pick.q[1], L + '&#8242;'), G) + '</div>';
}

/* ═════════ Skill 1 — Translations ═════════ */
function tfTransPick(twoStep){
  let a, b;
  do {
    a = rr(-5, 5); b = rr(-5, 5);
    if (!twoStep) { if (ri(2)) b = 0; else a = 0; }          // ONE step: along one axis only
  } while ((a === 0 && b === 0) || (twoStep && (a === 0 || b === 0)));
  return TF_translate(a, b);
}
function tfTransPool(T){
  /* Near-misses built from the SAME numbers — right distance wrong direction,
     right direction wrong distance — so the choice tests the concept and not
     arithmetic the student can eyeball. */
  const a = T.t[0], b = T.t[1], pool = [];
  [[-a, b], [a, -b], [-a, -b], [b, a], [a + (a >= 0 ? 1 : -1), b], [a, b + (b >= 0 ? 1 : -1)]]
    .forEach(function(v){ if (!(v[0] === 0 && v[1] === 0)) pool.push(TF_translate(v[0], v[1])); });
  return pool;
}
function genTranslate(el){
  const R = 5;
  if (level === 1) return tfLevelApply(el, tfTransPick(false), R);
  if (level === 2) return tfLevelApply(el, tfTransPick(true), R);
  if (level === 3) { const T = tfTransPick(ri(2) === 1); return tfLevelDescribe(el, T, R, tfTransPool(T)); }
  if (level === 4) { const T = tfTransPick(ri(2) === 1); return tfLevelFromMap(el, T, tfTransPool(T)); }
  if (level === 5) return tfLevelApplyMap(el, tfTransPick(ri(2) === 1), R);
  return tfLevelPreImage(el, tfTransPick(ri(2) === 1), R);
}

/* ═════════ Skill 2 — Reflections ═════════ */
const TF_REFL_ALL = ['x', 'y', 'yx'];
function tfReflPick(withDiag){ return TF_reflect(withDiag ? ffPick(TF_REFL_ALL) : ffPick(['x', 'y'])); }
function tfReflPool(){ return TF_REFL_ALL.map(TF_reflect).concat([TF_rotate(180, 'acw'), TF_translate(2, 0)]); }
function genReflect(el){
  const R = 5;
  if (level === 1) return tfLevelApply(el, tfReflPick(false), R);
  if (level === 2) return tfLevelApply(el, tfReflPick(true), R);
  if (level === 3) return tfLevelDescribe(el, tfReflPick(true), R, tfReflPool());
  if (level === 4) return tfLevelFromMap(el, tfReflPick(true), tfReflPool());
  if (level === 5) return tfLevelApplyMap(el, tfReflPick(true), R);
  return tfLevelPreImage(el, tfReflPick(true), R);
}

/* ═════════ Skill 3 — Dilations from the Origin ═════════
   ONE apply level, per Laura: every dilation here is a single step from the
   origin, so there is no "two-step" version to build. The remaining levels
   match the other skills exactly. The window widens to ±10 because a dilation
   by 4 leaves the −5…5 box on almost any starting point. */
const TF_DIL_KS = [2, 3, 4, 0.5, 1/3];
function tfDilPick(){ return TF_dilate(ffPick(TF_DIL_KS)); }
function tfDilPool(T){
  return TF_DIL_KS.filter(function(k){ return k !== T.k; }).map(TF_dilate).concat([T]);
}
function genDilate(el){
  const R = 10;
  if (level === 1) return tfLevelApply(el, tfDilPick(), R);
  if (level === 2) { const T = tfDilPick(); return tfLevelDescribe(el, T, R, tfDilPool(T)); }
  if (level === 3) { const T = tfDilPick(); return tfLevelFromMap(el, T, tfDilPool(T)); }
  if (level === 4) return tfLevelApplyMap(el, tfDilPick(), R);
  return tfLevelPreImage(el, tfDilPick(), R);
}

/* ═════════ Skill 4 — Rotations about the Origin ═════════
   L1 is 180° ONLY — a half turn has no direction to get wrong, so it is the
   fair place to start. L2 brings in the quarter turns, where clockwise and
   anticlockwise genuinely differ.

   NOTE the one real trap in this topic: 90° clockwise and 270° anticlockwise
   are the SAME map. On the two describe-it levels the option pool is therefore
   restricted to the three canonical names (90° clockwise, 90° anticlockwise,
   180°), so a question can never carry two correct answers. The 270° forms
   still appear on the levels where the student APPLIES a rotation, where the
   answer is a single point and nothing is ambiguous. */
function tfRotPick(level1){
  if (level1) return TF_rotate(180, 'acw');
  const deg = ffPick([90, 90, 270]);
  return TF_rotate(deg, ri(2) ? 'cw' : 'acw');
}
function tfRotAny(){ return ri(3) === 0 ? TF_rotate(180, 'acw') : TF_rotate(ffPick([90, 270]), ri(2) ? 'cw' : 'acw'); }
function tfRotCanonical(){ return ffPick([TF_rotate(90, 'cw'), TF_rotate(90, 'acw'), TF_rotate(180, 'acw')]); }
function tfRotPool(){ return [TF_rotate(90, 'cw'), TF_rotate(90, 'acw'), TF_rotate(180, 'acw')]; }
function genRotate(el){
  const R = 5;
  if (level === 1) return tfLevelApply(el, tfRotPick(true), R);
  if (level === 2) return tfLevelApply(el, tfRotPick(false), R);
  if (level === 3) return tfLevelDescribe(el, tfRotCanonical(), R, tfRotPool());
  if (level === 4) return tfLevelFromMap(el, tfRotCanonical(), tfRotPool());
  if (level === 5) return tfLevelApplyMap(el, tfRotAny(), R);
  return tfLevelPreImage(el, tfRotAny(), R);
}

/* ═════════ Skill 5 — Combinations of Transformations ═════════
   NO describe-in-words level, per Laura: two points can be joined by any number
   of different chains, so "which combination was this?" has no single answer.
   The mapping levels survive because a mapping IS the composite — one object,
   one right answer.

   The chain's words and its mapping are both generated from the same composed
   matrix, so they can never disagree.                                       */
function tfComboParts(n){
  /* At most ONE dilation in a chain. Two of them multiply — a half of a half is a
     quarter, and (x, y) → (¼x, ¼y) is neither a factor students meet at this level
     nor something the mapping renderer should have to print. */
  const parts = [];
  let dil = false;
  for (let i = 0; i < n; i++) {
    let pick = ri(4);
    if (pick === 3 && dil) pick = ri(3);
    if (pick === 3) dil = true;
    parts.push(pick === 0 ? tfTransPick(ri(2) === 1)
             : pick === 1 ? TF_reflect(ffPick(TF_REFL_ALL))
             : pick === 2 ? TF_rotate(ffPick([90, 180]), ri(2) ? 'cw' : 'acw')
             :              TF_dilate(ffPick([2, 0.5])));
  }
  return parts;
}
/* Every coefficient the mapping renderer can print as a clean symbol. */
const TF_OK_COEF = [0, 1, -1, 2, -2, 3, -3, 4, -4, 0.5, -0.5];
function tfPrintable(T){
  return [T.m[0][0], T.m[0][1], T.m[1][0], T.m[1][1]].every(function(k){
    return TF_OK_COEF.some(function(c){ return Math.abs(c - k) < 1e-9; });
  }) && [T.t[0], T.t[1]].every(Number.isInteger);
}
function tfCombo(n, R){
  let parts, T, guard = 0;
  do {
    guard++;
    parts = tfComboParts(n);
    T = parts.reduce(function(acc, p){ return acc ? tfCompose(acc, p) : p; }, null);
    T = { m:T.m, t:T.t, kind:'combo' };
    T.words = parts.map(function(p, i){ return i === 0 ? p.words : p.verb; }).join(', then ');
    T.verb  = T.words.charAt(0).toLowerCase() + T.words.slice(1);
    T.why   = 'Do them in order:<br>' + parts.map(function(p, i){ return (i + 1) + '. ' + p.words + ' — ' + p.why; }).join('<br>')
            + '<br>Altogether that is ' + tfMapHtml(T) + '.';
  } while (guard < 80 && (tfSame(T, { m:[[1,0],[0,1]], t:[0,0] })            // never the identity
           || !tfPrintable(T)
           || Math.abs(T.t[0]) > R || Math.abs(T.t[1]) > R));
  return { T:T, parts:parts };
}
/* Wrong options for the mapping level: the same chain with one step altered, so
   every distractor is a genuine composite rather than an obvious throwaway. */
function tfComboPool(parts, R){
  const pool = [];
  for (let i = 0; i < 5; i++) {
    const c = tfCombo(parts.length, R);
    pool.push(c.T);
  }
  return pool;
}
function genCombine(el){
  const R = 5;
  if (level === 1 || level === 2) {
    const c = tfCombo(level === 1 ? 2 : 3, R);
    return tfLevelApply(el, c.T, R);
  }
  if (level === 3) {
    const c = tfCombo(2, R);
    return tfLevelFromMap(el, c.T, tfComboPool(c.parts, R));
  }
  if (level === 4) return tfLevelApplyMap(el, tfCombo(ri(2) ? 2 : 3, R).T, R);
  return tfLevelPreImage(el, tfCombo(2, R).T, R);
}

/* ═════════ Skill 6 — Transformations of 2D Shapes ═════════
   Yr 7–8. Same six ideas, but the object is a whole shape and the answer is
   given by TAPPING its image vertices on the plane.

   The window is −4…4, not −5…5. That is deliberate: a coarser lattice means a
   bigger tap target (about 12 px of SVG against the Cartesian plane's 10), and
   v78.2 flagged tap accuracy as the thing most likely to bite in class. Nine
   columns is still plenty of room for a triangle and its image.             */
const TF_SHAPES = [
  [[0,0],[2,0],[0,1]], [[0,0],[2,0],[1,2]], [[0,0],[1,0],[1,2]],
  [[0,0],[2,0],[2,1],[0,1]], [[0,0],[1,0],[1,1],[0,1]], [[0,0],[2,0],[2,2],[0,2]]
];
/* Shapes on EVEN coordinates only — needed whenever the transformation halves the
   coordinates, so the image lands on lattice points rather than half-squares. */
const TF_SHAPES_EVEN = [
  [[0,0],[2,0],[0,2]], [[0,0],[4,0],[0,2]], [[0,0],[2,0],[2,2],[0,2]],
  [[0,0],[4,0],[4,2],[0,2]], [[0,0],[2,0],[0,4]]
];
function tfShapePlace(R, maxAbs, even){
  const base = ffPick(even ? TF_SHAPES_EVEN : TF_SHAPES).map(function(p){ return p.slice(); });
  if (ri(2)) base.forEach(function(p){ p[0] = -p[0]; });
  if (ri(2)) base.forEach(function(p){ p[1] = -p[1]; });
  const st = even ? 2 : 1;
  const dx = st * rr(-Math.floor(maxAbs/st), Math.floor(maxAbs/st));
  const dy = st * rr(-Math.floor(maxAbs/st), Math.floor(maxAbs/st));
  return base.map(function(p){ return [p[0] + dx, p[1] + dy]; });
}
function tfKeySet(pts){ return pts.map(function(p){ return p[0]+','+p[1]; }).slice().sort().join(' '); }
/* Pick a shape and a transformation whose image fits the window, is genuinely
   somewhere else, and does not sit on top of the original.

   The shape is generated and then TESTED rather than reverse-engineered from the
   transformation: it is the only way to be sure that both the pre-image and the
   image are wholly on the grid, which is what makes the level answerable at all.
   The fallback shrinks the shape rather than shipping one that runs off the edge. */
function tfShapeQ(R, pickT, capIn){
  let pre, T, img, guard = 0, bad = true;
  for (guard = 0; guard < 400 && bad; guard++) {
    T = pickT();
    const even = (T.kind === 'dilate' && T.k < 1) || (T.kind === 'combo' && T.m[0][0] % 1 !== 0);
    pre = tfShapePlace(R, capIn, even);
    img = pre.map(function(p){ return tfApply(T, p); });
    bad = img.some(function(p){ return !Number.isInteger(p[0]) || !Number.isInteger(p[1]) || Math.abs(p[0]) > R || Math.abs(p[1]) > R; })
       || pre.some(function(p){ return Math.abs(p[0]) > R || Math.abs(p[1]) > R; })
       || tfKeySet(img) === tfKeySet(pre)                       // the image must actually move
       || img.some(function(q){ return pre.some(function(p){ return p[0] === q[0] && p[1] === q[1]; }); });
  }
  if (bad) {                                     // guaranteed-safe last resort
    T = TF_reflect('y');
    pre = [[1,1],[3,1],[1,2]];
    img = pre.map(function(p){ return tfApply(T, p); });
  }
  return { pre:pre, T:T, img:img };
}
function tfShapeTapLevel(el, q, R, promptHtml, backwards){
  const shown = backwards ? q.img : q.pre;
  const want  = backwards ? q.pre : q.img;
  const G0 = tfGeom(R);
  const G = tfGeom(R, function(){ return tfPoly(G0, shown, backwards ? 'A&#8242;' : 'A', true); });
  qData.plotGeom = G;
  qData.plotAns = want;
  qData.plotInstr = 'Tap each corner of the image. Tap a corner again to remove it.';
  qData.plotNoun = 'corners tapped';
  qData.plotAbove = '<div style="' + A_LBL + '">' + promptHtml + '</div>';
  qData.workSteps = q.T.why + '<br>'
    + shown.map(function(p, i){ return tfPtTxt(p) + ' → ' + tfPtTxt(want[i]); }).join('<br>');
  qData._tf = { T:tfSig(q.T), pre:q.pre, img:q.img, backwards:!!backwards };
  el.innerHTML = '';
}
/* Translations for the SHAPE skill are shorter than for the point skill — a whole
   shape plus a 5-unit shift does not fit a 9-square window. */
function tfShapeTrans(){
  let a, b;
  do { a = rr(-3, 3); b = rr(-3, 3); } while (a === 0 && b === 0);
  return TF_translate(a, b);
}
function genShapeTrans(el){
  const R = 4;
  if (level === 1) {
    const q = tfShapeQ(R, tfShapeTrans, 2);
    return tfShapeTapLevel(el, q, R, 'Translate shape A ' + q.T.words.replace(/^Translate /, '') + '. Tap the corners of the image.');
  }
  if (level === 2) {
    const q = tfShapeQ(R, function(){ return TF_reflect(ffPick(TF_REFL_ALL)); }, 3);
    return tfShapeTapLevel(el, q, R, q.T.words + '. Tap the corners of the image.');
  }
  if (level === 3) {
    /* Which transformation maps A onto B? Every wrong option is CHECKED against the
       drawn shape, so a distractor that happens to produce the same image is thrown
       away rather than shipped as a second right answer. */
    const q = tfShapeQ(R, function(){
      const k = ri(3);
      return k === 0 ? tfShapeTrans() : k === 1 ? TF_reflect(ffPick(TF_REFL_ALL)) : tfRotCanonical();
    }, 2);
    const cand = TF_REFL_ALL.map(TF_reflect).concat(tfRotPool()).concat(tfTransPool(q.T))
      .concat([TF_translate(1,0), TF_translate(0,1), TF_translate(-2,0), TF_translate(0,-2), TF_translate(2,2)]);
    const wrong = cand.filter(function(o){ return tfKeySet(q.pre.map(function(p){ return tfApply(o, p); })) !== tfKeySet(q.img); });
    for (let i = wrong.length - 1; i > 0; i--) { const j = ri(i + 1); const t = wrong[i]; wrong[i] = wrong[j]; wrong[j] = t; }
    const opts = [q.T.words];
    wrong.forEach(function(o){ if (opts.length < 4 && opts.indexOf(o.words) < 0) opts.push(o.words); });
    const G = tfGeom(R);
    qData.workSteps = 'Follow one corner: ' + tfPtTxt(q.pre[0]) + ' → ' + tfPtTxt(q.img[0]) + '.<br>' + q.T.why
      + '<br>So it is <b>' + q.T.words + '</b>.';
    qData._tf = { T:tfSig(q.T), pre:q.pre, img:q.img, opts:opts };
    decSetChoice(el, '', opts, q.T.words);
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;width:100%;white-space:normal;">'
      + '<div style="' + A_LBL + '">Which transformation maps shape A onto shape B?</div>'
      + plotSvg(G.grid() + tfPoly(G, q.pre, 'A', true) + tfPoly(G, q.img, 'B'), G) + '</div>';
    return;
  }
  if (level === 4) {
    const q = tfShapeQ(R, function(){ return TF_dilate(ri(2) ? 2 : 0.5); }, 4);
    return tfShapeTapLevel(el, q, R, q.T.words + '. Tap the corners of the image.');
  }
  if (level === 5) {
    const q = tfShapeQ(R, tfRotAny, 3);
    return tfShapeTapLevel(el, q, R, q.T.words + '. Tap the corners of the image.');
  }
  const q = tfShapeQ(R, function(){
    const k = ri(3);
    return k === 0 ? tfShapeTrans() : k === 1 ? TF_reflect(ffPick(TF_REFL_ALL)) : tfRotAny();
  }, 2);
  return tfShapeTapLevel(el, q, R,
    'Shape A&#8242; is the image after &ldquo;' + q.T.words + '&rdquo;. Tap the corners of the ORIGINAL shape A.', true);
}

/* ═════════ Linear or Non-Linear ═════════ */
function genLinearNonlinear(el){
  el.style.fontSize = '1.1rem';
  if (level === 1) {
    const isLin = Math.random() < 0.5;
    let inner, why;
    if (isLin) {
      let m; do { m = ffPick([-2, -1, -0.5, 0.5, 1, 2]); } while (m === 0);
      const c = rr(-3, 3);
      inner = cgCurve(function(t){ return m * t + c; });
      why = 'The graph is a <b>straight line</b>, so the relationship is linear.';
    } else {
      const which = ri(3);
      if (which === 0) { const a = ffPick([0.3, 0.5, -0.4]), c = rr(-3, 2); inner = cgCurve(function(t){ return a * t * t + c; }); why = 'The graph is a <b>curve</b> (a parabola), so it is non-linear.'; }
      else if (which === 1) { const k = ffPick([2, 3, -3]); inner = cgCurve(function(t){ return Math.abs(t) < 0.35 ? NaN : k / t; }); why = 'The graph is a <b>curve</b> (a hyperbola), so it is non-linear.'; }
      else { const b = ffPick([1.6, 2]); inner = cgCurve(function(t){ return Math.pow(b, t) - 2; }); why = 'The graph <b>curves</b> upwards more and more steeply, so it is non-linear.'; }
    }
    qData.workSteps = why + ' A linear graph is a straight line; anything that bends is non-linear.';
    decSetChoice(el, '', ['Linear', 'Non-linear'], isLin ? 'Linear' : 'Non-linear', true);
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL + '">Is this graph linear or non-linear?</div>'
      + cgSvg(inner) + '</div>';
    return;
  }
  // Level 2 — from the equation
  const LIN = [
    { eq: 'y = 3x + 2' }, { eq: 'y = −5x − 1' }, { eq: 'y = <sup>x</sup>&frasl;<sub>2</sub> + 4' },
    { eq: 'x + y = 7' }, { eq: '2x − 3y = 6' }, { eq: 'y = 4' }, { eq: 'y = −x' }, { eq: 'y = 0.5x − 3' },
  ];
  const NON = [
    { eq: 'y = x² + 1' }, { eq: 'y = 2x² − 5x' }, { eq: 'y = <sup>6</sup>&frasl;<sub>x</sub>' },
    { eq: 'y = 2<sup>x</sup>' }, { eq: 'y = x³ − 4' }, { eq: 'xy = 12' }, { eq: 'y = √x' }, { eq: 'y = x² − 9' },
  ];
  const isLin = Math.random() < 0.5;
  const pickEq = isLin ? ffPick(LIN) : ffPick(NON);
  qData.workSteps = isLin
    ? 'Every term has x (or y) to the power <b>1</b> — no squares, cubes, roots, or x on the bottom — so it is <b>linear</b>.'
    : 'The equation has x to a power other than 1 (a square, cube, root, or x on the bottom), so it is <b>non-linear</b>.';
  decSetChoice(el, '<div style="' + A_LBL + '">Is this equation linear or non-linear?</div>'
    + '<div style="font-size:2rem;font-weight:900;margin:14px 0;">' + pickEq.eq + '</div>',
    ['Linear', 'Non-linear'], isLin ? 'Linear' : 'Non-linear', true);
}

/* ═════════ x- and y-Intercepts ═════════
   v77.1 (Laura): new L1 reads an intercept off a DRAWN line; the old L1-L3 shift down.
     L1 write the intercept coordinate from a graph (new)
     L2 y-intercept of y = mx + c   ·   L3 x-intercept   ·   L4 both, from ax + by = c  */
function genIntercepts(el){
  el.style.fontSize = '1.2rem';
  if (level === 1) {
    // A line with BOTH intercepts on the drawn grid, so either can be asked.
    let m, c, xi;
    do {
      m = ffPick([1, -1, 2, -2]);
      c = rr(-4, 4);
      xi = -c / m;
    } while (c === 0 || !Number.isInteger(xi) || Math.abs(xi) > CG_R || Math.abs(xi) < 1);
    const askX = Math.random() < 0.5;
    const px = askX ? xi : 0, py = askX ? 0 : c;
    qData.gapTemplate = ['( ', 0, ' , ', 1, ' )'];
    qData.gapAns = [px, py];
    qData.gapHint = 'Write it as a coordinate — x first, then y.';
    qData.gapAnsText = '(' + sgnNum(px) + ', ' + sgnNum(py) + ')';
    qData.workSteps = askX
      ? 'The <b>x-intercept</b> is where the line crosses the <b>x-axis</b> — so y = 0 there.<br>The line crosses at x = '
        + sgnNum(xi) + ', giving <b>(' + sgnNum(xi) + ', 0)</b>.'
      : 'The <b>y-intercept</b> is where the line crosses the <b>y-axis</b> — so x = 0 there.<br>The line crosses at y = '
        + sgnNum(c) + ', giving <b>(0, ' + sgnNum(c) + ')</b>.';
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL
      + '">Write the coordinates of the <b>' + (askX ? 'x' : 'y') + '-intercept</b>.</div>'
      + cgSvg(cgCurve(function(t){ return m * t + c; })) + '</div>';
    return;
  }
  if (level === 2) {
    /* v78.2 (Laura) — NEW: read the intercepts off a table of values, before the
       student ever meets y = mx + c. The table always contains BOTH the x = 0 row
       and the y = 0 row, so whichever intercept is asked for is genuinely readable
       rather than something they have to extrapolate to. */
    let m2, k2, xs2, guard2 = 0;
    do {
      guard2++;
      m2 = ffPick([1, -1, 2, -2, 3, -3]);
      k2 = rr(-3, 3);                       // the x-intercept
      const lo = Math.min(0, k2) - rr(1, 2);
      xs2 = [];
      for (let t = lo; xs2.length < 5; t++) xs2.push(t);
    } while (guard2 < 40 && (k2 === 0 || xs2.indexOf(0) < 0 || xs2.indexOf(k2) < 0));
    const c2 = -m2 * k2;
    const ys2 = xs2.map(function(x){ return m2 * x + c2; });
    const askX2 = Math.random() < 0.5;
    qData.ans = askX2 ? k2 : c2;
    qData.ansDisplay = sgnNum(qData.ans);
    qData.workSteps = askX2
      ? 'The <b>x-intercept</b> is where <b>y = 0</b>. Find the 0 in the y row and read the x above it: <b>'
        + sgnNum(k2) + '</b>.'
      : 'The <b>y-intercept</b> is where <b>x = 0</b>. Find the 0 in the x row and read the y below it: <b>'
        + sgnNum(c2) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Use the table to find the <b>'
      + (askX2 ? 'x' : 'y') + '-intercept</b> (a single number).</div>' + tovTable(xs2, ys2, false);
    return;
  }
  if (level === 3) {
    let m; do { m = rr(-6, 6); } while (m === 0);
    const c = rr(-9, 9);
    qData.ans = c;
    qData.ansDisplay = sgnNum(c);
    qData.workSteps = 'The y-intercept is where x = 0.<br>y = ' + sgnNum(m) + ' × 0 ' + (c < 0 ? '− ' + Math.abs(c) : '+ ' + c)
      + ' = <b>' + sgnNum(c) + '</b>.<br>In y = mx + c the y-intercept is always <b>c</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the y-intercept (the y-value).</div>'
      + '<div style="font-size:2rem;font-weight:900;margin:12px 0;">y = ' + (m === 1 ? '' : m === -1 ? '−' : sgnNum(m)) + 'x '
      + (c < 0 ? '− ' + Math.abs(c) : '+ ' + c) + '</div>';
    return;
  }
  if (level === 4) {
    let m, k; do { m = rr(-6, 6); } while (m === 0);
    k = rr(-6, 6);                 // x-intercept
    const c = -m * k;              // so that 0 = m·k + c
    qData.ans = k;
    qData.ansDisplay = sgnNum(k);
    qData.workSteps = 'The x-intercept is where y = 0.<br>0 = ' + sgnNum(m) + 'x ' + (c < 0 ? '− ' + Math.abs(c) : '+ ' + c)
      + '<br>' + sgnNum(m) + 'x = ' + sgnNum(-c) + ' → x = ' + sgnNum(-c) + ' ÷ ' + sgnNum(m) + ' = <b>' + sgnNum(k) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find the x-intercept (the x-value).</div>'
      + '<div style="font-size:2rem;font-weight:900;margin:12px 0;">y = ' + (m === 1 ? '' : m === -1 ? '−' : sgnNum(m)) + 'x '
      + (c < 0 ? '− ' + Math.abs(c) : '+ ' + c) + '</div>';
    return;
  }
  // Level 5 — both intercepts from ax + by = c.
  // Building it from the intercepts keeps every coefficient a tidy integer:
  //   yi·x + xi·y = xi·yi   has x-intercept xi and y-intercept yi.
  let xi, yi;
  do { xi = rr(-8, 8); yi = rr(-8, 8); } while (xi === 0 || yi === 0);
  const g = gcd(Math.abs(xi), Math.abs(yi)) || 1;
  const a = yi / g, b = xi / g, c = xi * yi / g;
  // tidy coefficients: 1x → x, −1x → −x, "+ 1y" → "+ y"
  const lead = (a === 1 ? '' : a === -1 ? '−' : sgnNum(a)) + 'x';
  const second = (b < 0 ? '− ' : '+ ') + (Math.abs(b) === 1 ? '' : Math.abs(b)) + 'y';
  const eq = lead + ' ' + second + ' = ' + sgnNum(c);
  qData.gapTemplate = ['x-intercept: ', 0, '&nbsp;&nbsp;&nbsp;&nbsp;y-intercept: ', 1];
  qData.gapAns = [xi, yi];
  qData.gapHint = 'Put y = 0 for the x-intercept, x = 0 for the y-intercept.';
  qData.gapAnsText = 'x-intercept ' + sgnNum(xi) + ', y-intercept ' + sgnNum(yi);
  qData.workSteps = 'x-intercept — let y = 0: ' + sgnNum(a) + 'x = ' + sgnNum(c) + ' → x = <b>' + sgnNum(xi) + '</b>.<br>'
    + 'y-intercept — let x = 0: ' + sgnNum(b) + 'y = ' + sgnNum(c) + ' → y = <b>' + sgnNum(yi) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Find both intercepts.</div>'
    + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + eq + '</div>';
}

/* ═════════ Gradient of a Line Segment ═════════
   v77.1 (Laura): new L1 classifies the SIGN of a gradient from a picture; the old
   L1 and L3 shift down.
     L1 positive / negative / zero / undefined (new)  ·  L2 from a diagram
     L3 whole-number gradients from two points        ·  L4 fractions & negatives   */
function gradSet(n, d){
  // store a simplified fraction with a positive denominator
  let g = gcd(Math.abs(n), Math.abs(d)) || 1;
  n = n / g; d = d / g;
  if (d < 0) { n = -n; d = -d; }
  qData.ansNum = n; qData.ansDen = d;
  return d === 1 ? sgnNum(n) : (sgnNum(n) + '/' + d);
}
const CG_GRAD_OPTS = ['Positive', 'Negative', 'Zero', 'Undefined'];
function genGradientSeg(el){
  el.style.fontSize = '1.1rem';
  if (level === 1) {
    // Sign of the gradient, read off a drawn line. A vertical line can't be drawn by
    // cgCurve (it isn't a function of x), so it uses cgLine directly.
    const kind = ri(4);
    let inner, correct, why;
    if (kind === 0) {
      const m = ffPick([0.5, 1, 2, 3]), c = rr(-2, 2);
      inner = cgCurve(function(t){ return m * t + c; });
      correct = 'Positive';
      why = 'The line goes <b>up</b> as you read from left to right, so the gradient is <b>positive</b>.';
    } else if (kind === 1) {
      const m = ffPick([-0.5, -1, -2, -3]), c = rr(-2, 2);
      inner = cgCurve(function(t){ return m * t + c; });
      correct = 'Negative';
      why = 'The line goes <b>down</b> as you read from left to right, so the gradient is <b>negative</b>.';
    } else if (kind === 2) {
      const c = rr(-4, 4);
      inner = cgCurve(function(){ return c; });
      correct = 'Zero';
      why = 'The line is <b>horizontal</b> — no rise at all. Gradient = 0 ÷ run = <b>0</b>.';
    } else {
      let k; do { k = rr(-4, 4); } while (k === 0);
      inner = cgLine(k, -CG_R, k, CG_R);
      correct = 'Undefined';
      why = 'The line is <b>vertical</b> — the run is 0, and you cannot divide by 0, so the gradient is <b>undefined</b>.';
    }
    qData.workSteps = why;
    decSetChoice(el, '', CG_GRAD_OPTS.slice(), correct, true);
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL
      + '">Is the gradient of this line positive, negative, zero or undefined?</div>' + cgSvg(inner) + '</div>';
    return;
  }
  if (level === 2) {
    // read the two points off a diagram; keep the gradient a whole number
    let x1, y1, x2, y2, run, m;
    let guard = 0;
    do {
      x1 = rr(-4, 1); run = ffPick([1, 2, 3, 4]); x2 = x1 + run;
      m = ffPick([-3, -2, -1, 1, 2, 3]);
      y1 = rr(-4, 4); y2 = y1 + m * run;
      guard++;
    } while (guard < 60 && (Math.abs(x2) > CG_R || Math.abs(y2) > CG_R));
    if (Math.abs(x2) > CG_R || Math.abs(y2) > CG_R) { x1 = -2; x2 = 2; y1 = -2; y2 = 2; m = 1; run = 4; }
    const disp = gradSet(y2 - y1, x2 - x1);
    qData.ansDisplay = disp;
    qData.workSteps = 'm = <sup>rise</sup>&frasl;<sub>run</sub> = (' + sgnNum(y2) + ' − ' + sgnNum(y1) + ') ÷ ('
      + sgnNum(x2) + ' − ' + sgnNum(x1) + ') = ' + sgnNum(y2 - y1) + '/' + (x2 - x1) + ' = <b>' + disp + '</b>.';
    const seg = cgLine(x1, y1, x2, y2) + cgPoint(x1, y1, 'A') + cgPoint(x2, y2, 'B');
    id('qBox').innerHTML = '<div class="q-text" id="qText" style="font-size:1.05rem;"><div style="' + A_LBL
      + '">Find the gradient of the line segment AB.</div>' + cgSvg(seg) + '</div>';
    return;
  }
  let x1, y1, x2, y2;
  if (level === 3) {
    const run = ffPick([1, 2, 3, 4]);
    const m = ffPick([-4, -3, -2, -1, 1, 2, 3, 4]);
    x1 = rr(-6, 6); y1 = rr(-9, 9); x2 = x1 + run; y2 = y1 + m * run;
  } else {
    // Level 4 — fractional and negative gradients
    do { x1 = rr(-9, 9); y1 = rr(-9, 9); x2 = rr(-9, 9); y2 = rr(-9, 9); } while (x1 === x2 || y1 === y2);
  }
  const disp = gradSet(y2 - y1, x2 - x1);
  qData.ansDisplay = disp;
  qData.workSteps = 'm = <sup>rise</sup>&frasl;<sub>run</sub> = <sup>(y₂ − y₁)</sup>&frasl;<sub>(x₂ − x₁)</sub> = ('
    + sgnNum(y2) + ' − ' + sgnNum(y1) + ') ÷ (' + sgnNum(x2) + ' − ' + sgnNum(x1) + ') = '
    + sgnNum(y2 - y1) + '/' + sgnNum(x2 - x1) + ' = <b>' + disp + '</b> (simplified).';
  el.innerHTML = '<div style="' + A_LBL + '">Find the gradient of the line segment joining the two points.</div>'
    + '<div style="font-size:1.7rem;font-weight:900;margin:12px 0;">A(' + sgnNum(x1) + ', ' + sgnNum(y1) + ')&nbsp;&nbsp;&nbsp;B('
    + sgnNum(x2) + ', ' + sgnNum(y2) + ')</div>';
}

/* ══════════════════════════════════════════════════════════════════════════
   v78.3 — 🧩 OTHER (Laura): the practical, everyday-maths corner.
     timeConvert  Converting Units of Time      Yr 7
     timetables   Train & Bus Timetables        Yr 7
     distTime     Distance–Time Graphs          Yr 7–8
   ══════════════════════════════════════════════════════════════════════════ */

/* ═════════ Converting Units of Time ═════════
   Only the conversions that are actually EXACT are used. Months are related to
   years (12) and to nothing else — "how many days in 3 months" has no single
   right answer, so it never appears. A year is 365 days and 52 weeks, which is
   the school convention and is stated in the level card.                      */
const TIME_UNITS = {
  sec:  { one: 'second', many: 'seconds' },
  min:  { one: 'minute', many: 'minutes' },
  hour: { one: 'hour',   many: 'hours'   },
  day:  { one: 'day',    many: 'days'    },
  week: { one: 'week',   many: 'weeks'   },
  month:{ one: 'month',  many: 'months'  },
  year: { one: 'year',   many: 'years'   }
};
const TIME_PAIRS = {
  1: [['min','sec',60], ['hour','min',60]],
  2: [['day','hour',24], ['week','day',7], ['hour','min',60]],
  3: [['year','month',12], ['year','week',52], ['year','day',365], ['week','day',7]]
};
function timeWord(n, u){ return n + ' ' + (Math.abs(n) === 1 ? TIME_UNITS[u].one : TIME_UNITS[u].many); }
function genTimeConvert(el){
  el.style.fontSize = '1.15rem';

  if (level <= 3) {
    const pair = ffPick(TIME_PAIRS[level]);
    const big = pair[0], small = pair[1], k = pair[2];
    const down = Math.random() < 0.55;          // big → small, or small → big
    const n = down ? rr(2, 9) : rr(2, 9) * k;
    const from = down ? big : small, to = down ? small : big;
    qData.ans = down ? n * k : n / k;
    qData.ansDisplay = String(qData.ans);
    qData.workSteps = down
      ? 'There are <b>' + k + '</b> ' + TIME_UNITS[small].many + ' in 1 ' + TIME_UNITS[big].one
        + ', so <b>multiply</b>.<br>' + n + ' × ' + k + ' = <b>' + qData.ans + '</b>.'
      : 'There are <b>' + k + '</b> ' + TIME_UNITS[small].many + ' in 1 ' + TIME_UNITS[big].one
        + ', so <b>divide</b>.<br>' + n + ' ÷ ' + k + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Convert to ' + TIME_UNITS[to].many + '.</div>'
      + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + timeWord(n, from) + '</div>'
      + '<span style="color:var(--accent);font-weight:900;">' + TIME_UNITS[to].many + ' = ?</span>';
    return;
  }

  /* Level 4 — compound times, both directions */
  const toCompound = Math.random() < 0.5;
  const pair2 = ffPick([['hour','min',60], ['min','sec',60], ['day','hour',24], ['week','day',7]]);
  const bigU = pair2[0], smallU = pair2[1], k2 = pair2[2];
  const wholes = rr(1, 6), rem = rr(1, k2 - 1);
  const total = wholes * k2 + rem;
  if (toCompound) {
    qData.gapTemplate = [0, '&nbsp;' + TIME_UNITS[bigU].many + '&nbsp;&nbsp;', 1, '&nbsp;' + TIME_UNITS[smallU].many];
    qData.gapAns = [wholes, rem];
    qData.gapHint = 'Write it as whole ' + TIME_UNITS[bigU].many + ' and the ' + TIME_UNITS[smallU].many + ' left over.';
    qData.gapAnsText = timeWord(wholes, bigU) + ' ' + timeWord(rem, smallU);
    qData.workSteps = total + ' ÷ ' + k2 + ' = ' + wholes + ' remainder ' + rem + '.<br>So '
      + total + ' ' + TIME_UNITS[smallU].many + ' = <b>' + timeWord(wholes, bigU) + ' ' + timeWord(rem, smallU) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write this using both units.</div>'
      + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">' + timeWord(total, smallU) + '</div>';
  } else {
    /* The other direction. NOTE: an input mode is fixed per LEVEL, not per question,
       so this cannot fall back to the plain number box — it uses a one-box gap-fill
       with the unit printed after it, which reads better here anyway. */
    qData.gapTemplate = [0, '&nbsp;' + TIME_UNITS[smallU].many];
    qData.gapAns = [total];
    qData.gapHint = 'Convert the whole ' + TIME_UNITS[bigU].many + ' first, then add the '
      + TIME_UNITS[smallU].many + ' left over.';
    qData.gapAnsText = timeWord(total, smallU);
    qData.workSteps = wholes + ' ' + TIME_UNITS[bigU].many + ' = ' + wholes + ' × ' + k2 + ' = '
      + (wholes * k2) + ' ' + TIME_UNITS[smallU].many + '.<br>Then add the ' + rem + ': <b>' + total + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Convert to ' + TIME_UNITS[smallU].many + '.</div>'
      + '<div style="font-size:1.9rem;font-weight:900;margin:12px 0;">'
      + timeWord(wholes, bigU) + ' ' + timeWord(rem, smallU) + '</div>';
  }
}

/* ═════════ Train & Bus Timetables ═════════
   A timetable is generated as MINUTES SINCE MIDNIGHT and only formatted at the
   last moment, so every duration is plain subtraction and the 12-/24-hour choice
   is display-only — the same question works either way.                       */
function ttFmt(mins, h12){
  const h = Math.floor(mins / 60) % 24, m = mins % 60;
  if (!h12) return (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
  const ap = h < 12 ? 'am' : 'pm';
  let hh = h % 12; if (hh === 0) hh = 12;
  return hh + ':' + (m < 10 ? '0' : '') + m + ' ' + ap;
}
const TT_LINES = [
  { mode: 'Train', stops: ['Sandringham', 'Hampton', 'Brighton Beach', 'Elsternwick', 'Windsor', 'Flinders Street'] },
  { mode: 'Train', stops: ['Frankston', 'Mordialloc', 'Cheltenham', 'Bentleigh', 'Caulfield', 'Richmond'] },
  { mode: 'Bus',   stops: ['Southland', 'Cheltenham', 'Highett', 'Moorabbin', 'Bentleigh'] },
  { mode: 'Bus',   stops: ['Chadstone', 'Oakleigh', 'Clayton', 'Monash Uni'] }
];
function ttBuild(){
  const line = ffPick(TT_LINES);
  const nStops = Math.min(line.stops.length, rr(4, 5));
  const stops = line.stops.slice(0, nStops);
  const h12 = Math.random() < 0.5;
  // leg times between consecutive stops, in whole minutes
  const legs = []; for (let i = 1; i < stops.length; i++) legs.push(rr(3, 14));
  const gap = ffPick([15, 20, 30]);           // services every gap minutes
  const first = rr(6, 9) * 60 + ffPick([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]);
  const nServ = 4;
  const times = [];                            // times[service][stop]
  for (let s = 0; s < nServ; s++) {
    const row = [first + s * gap];
    legs.forEach(function(L){ row.push(row[row.length - 1] + L); });
    times.push(row);
  }
  return { line: line, stops: stops, times: times, h12: h12, gap: gap, nServ: nServ };
}
function ttTable(T, hiRow, hiCol){
  let h = '<table class="tt-table"><tr><th>' + T.line.mode + '</th>';
  for (let s = 0; s < T.nServ; s++) h += '<th>' + (s + 1) + '</th>';
  h += '</tr>';
  T.stops.forEach(function(st, i){
    h += '<tr><td class="tt-stop">' + st + '</td>';
    for (let s = 0; s < T.nServ; s++) {
      const on = (hiRow === i && hiCol === s);
      h += '<td' + (on ? ' class="tt-hi"' : '') + '>' + ttFmt(T.times[s][i], T.h12) + '</td>';
    }
    h += '</tr>';
  });
  return h + '</table>';
}
function genTimetables(el){
  el.style.fontSize = '1rem';
  const T = ttBuild();
  const lastStop = T.stops.length - 1;

  if (level === 1) {                 // read a time straight off the table
    const s = ri(T.nServ), i = rr(1, lastStop);
    const rightT = T.times[s][i];
    const wrong = [];
    const pool = [T.times[(s + 1) % T.nServ][i], T.times[s][i - 1],
                  T.times[(s + 2) % T.nServ][i], T.times[s][Math.min(i + 1, lastStop)]];
    pool.forEach(function(v){ if (v !== rightT && wrong.indexOf(v) < 0 && wrong.length < 3) wrong.push(v); });
    while (wrong.length < 3) { const v = rightT + rr(1, 9); if (wrong.indexOf(v) < 0) wrong.push(v); }
    qData.workSteps = 'Find the row for <b>' + T.stops[i] + '</b>, then read down to column <b>'
      + (s + 1) + '</b>: <b>' + ttFmt(rightT, T.h12) + '</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">What time does ' + T.line.mode.toLowerCase() + ' <b>'
      + (s + 1) + '</b> reach <b>' + T.stops[i] + '</b>?</div>' + ttTable(T),
      wrong.concat([rightT]).map(function(v){ return ttFmt(v, T.h12); }), ttFmt(rightT, T.h12));
    return;
  }

  if (level === 2) {                 // how long does the trip take
    const s = ri(T.nServ);
    let i = ri(lastStop), j;
    do { j = rr(i + 1, lastStop); } while (j <= i);
    const mins = T.times[s][j] - T.times[s][i];
    qData.ans = mins;
    qData.ansDisplay = String(mins);
    qData.workSteps = 'Leaves ' + T.stops[i] + ' at <b>' + ttFmt(T.times[s][i], T.h12) + '</b> and reaches '
      + T.stops[j] + ' at <b>' + ttFmt(T.times[s][j], T.h12) + '</b>.<br>That is <b>' + mins + ' minutes</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">How many MINUTES does ' + T.line.mode.toLowerCase() + ' '
      + (s + 1) + ' take from <b>' + T.stops[i] + '</b> to <b>' + T.stops[j] + '</b>?</div>' + ttTable(T);
    return;
  }

  if (level === 3) {                 // which service gets you there in time
    const i = 0, j = lastStop;
    const s = rr(0, T.nServ - 1);
    const deadline = T.times[s][j] + rr(1, Math.min(T.gap - 1, 9));   // just after this service arrives
    qData.workSteps = 'You must arrive by <b>' + ttFmt(deadline, T.h12) + '</b>. Service <b>' + (s + 1)
      + '</b> arrives at ' + ttFmt(T.times[s][j], T.h12) + ' — in time — and it is the LAST one that is.<br>'
      + 'It leaves ' + T.stops[i] + ' at <b>' + ttFmt(T.times[s][i], T.h12) + '</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">You must be at <b>' + T.stops[j] + '</b> by <b>'
      + ttFmt(deadline, T.h12) + '</b>.<br>What is the LATEST you can leave ' + T.stops[i] + '?</div>' + ttTable(T),
      T.times.map(function(row){ return ttFmt(row[i], T.h12); }), ttFmt(T.times[s][i], T.h12), true);
    return;
  }

  /* Level 4 — you turn up at the stop; how long until the next service? */
  const i4 = ri(T.stops.length);
  const s4 = rr(0, T.nServ - 2);
  const wait = rr(2, T.gap - 1);
  const arriveAt = T.times[s4][i4] - wait;      // you get there `wait` minutes early
  qData.ans = wait;
  qData.ansDisplay = String(wait);
  qData.workSteps = 'The next ' + T.line.mode.toLowerCase() + ' from <b>' + T.stops[i4] + '</b> is service <b>'
    + (s4 + 1) + '</b> at <b>' + ttFmt(T.times[s4][i4], T.h12) + '</b>.<br>'
    + ttFmt(T.times[s4][i4], T.h12) + ' − ' + ttFmt(arriveAt, T.h12) + ' = <b>' + wait + ' minutes</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">You get to <b>' + T.stops[i4] + '</b> at <b>'
    + ttFmt(arriveAt, T.h12) + '</b>.<br>How many MINUTES until the next ' + T.line.mode.toLowerCase() + '?</div>'
    + ttTable(T);
}

/* ═════════ Distance–Time Graphs (Yr 7–8, Laura) ═════════
   Its own first-quadrant geometry: hours across, kilometres up. The lattice is
   deliberately coarse (1 h × 10 km) so tapping a corner on a phone is easy —
   7 × 7 targets about 40px apart, rather than the 22px cells of the Cartesian
   plane. Journeys are built stage by stage so every corner lands ON the grid.  */
const DT_TMAX = 6, DT_DMAX = 60, DT_DSTEP = 10;
const DT_L = 42, DT_RGT = 288, DT_T = 18, DT_B = 202, DT_H = 240;
function dtX(t){ return DT_L + (t / DT_TMAX) * (DT_RGT - DT_L); }
function dtY(d){ return DT_B - (d / DT_DMAX) * (DT_B - DT_T); }
function dtGrid(){
  let s = '';
  for (let t = 0; t <= DT_TMAX; t++)
    s += '<line x1="' + dtX(t) + '" y1="' + DT_T + '" x2="' + dtX(t) + '" y2="' + DT_B + '" stroke="var(--border)" stroke-width="1"/>';
  for (let d = 0; d <= DT_DMAX; d += DT_DSTEP)
    s += '<line x1="' + DT_L + '" y1="' + dtY(d) + '" x2="' + DT_RGT + '" y2="' + dtY(d) + '" stroke="var(--border)" stroke-width="1"/>';
  s += '<line x1="' + DT_L + '" y1="' + DT_B + '" x2="' + DT_RGT + '" y2="' + DT_B + '" stroke="var(--text)" stroke-width="2"/>';
  s += '<line x1="' + DT_L + '" y1="' + DT_T + '" x2="' + DT_L + '" y2="' + DT_B + '" stroke="var(--text)" stroke-width="2"/>';
  for (let t = 0; t <= DT_TMAX; t++)
    s += '<text x="' + dtX(t) + '" y="' + (DT_B + 13) + '" font-family="Nunito,sans-serif" font-weight="700" font-size="9" fill="var(--muted)" text-anchor="middle">' + t + '</text>';
  for (let d = 0; d <= DT_DMAX; d += DT_DSTEP)
    s += '<text x="' + (DT_L - 5) + '" y="' + dtY(d) + '" font-family="Nunito,sans-serif" font-weight="700" font-size="9" fill="var(--muted)" text-anchor="end" dominant-baseline="central">' + d + '</text>';
  s += '<text x="' + ((DT_L + DT_RGT) / 2) + '" y="' + (DT_B + 26) + '" font-family="Nunito,sans-serif" font-weight="900" font-size="10" fill="var(--text)" text-anchor="middle">Time (hours)</text>';
  s += '<text x="10" y="' + ((DT_T + DT_B) / 2) + '" font-family="Nunito,sans-serif" font-weight="900" font-size="10" fill="var(--text)" text-anchor="middle" transform="rotate(-90 10 ' + ((DT_T + DT_B) / 2) + ')">Distance (km)</text>';
  return s;
}
function dtGeom(){
  const xs = [], ys = [];
  for (let t = 0; t <= DT_TMAX; t++) xs.push(t);
  for (let d = 0; d <= DT_DMAX; d += DT_DSTEP) ys.push(d);
  return { px: dtX, py: dtY, xs: xs, ys: ys, grid: dtGrid, h: DT_H, r: 13, maxW: 460 };
}
/* A journey: 3 or 4 stages, at least one of them stationary, every corner on the
   grid, and no two moving stages the same SPEED (so "which was fastest" has one
   answer — speed is compared as a magnitude, since a return leg is just as fast
   going the other way).

   v78.4 (Laura): a stage can now be a RETURN — travelling back towards home, so
   the graph comes down. Distance is measured FROM HOME, so a return leg is a
   negative change and the line can only fall as far as 0. Roughly a third of
   journeys include one, and half of those finish back at 0 km ("arrives home").
   Returns corners [[t,d], …] starting at (0, 0).                              */
function dtJourney(nStages){
  const n = nStages || rr(3, 4);
  let stages, corners, guard = 0, ok = false;
  do {
    guard++;
    stages = [];
    const wantReturn = Math.random() < 0.35;
    const wantHome = wantReturn && Math.random() < 0.5;   // finish back at 0 km
    let t = 0, d = 0, restUsed = false, backUsed = false;
    for (let i = 0; i < n; i++) {
      const last = (i === n - 1);
      const rest = i > 0 && !restUsed && (Math.random() < 0.4 || (last && !backUsed && !wantReturn));
      const dur = rr(1, 2);
      let km = 0, back = false;
      if (rest) { restUsed = true; }
      else if (wantReturn && !backUsed && i > 0 && (last || Math.random() < 0.6) && d > 0) {
        // come back towards home — never further than home itself
        back = true; backUsed = true;
        km = (wantHome && last) ? -d : -ffPick([10, 20, 30]);
        if (d + km < 0) km = -d;
      } else {
        km = ffPick([10, 20, 30, 40]);
      }
      stages.push({ dur: dur, km: km, rest: rest, back: back });
      t += dur; d += km;
    }
    corners = [[0, 0]];
    let tt = 0, dd = 0, lowest = 0, highest = 0;
    stages.forEach(function(sg){ tt += sg.dur; dd += sg.km; corners.push([tt, dd]);
      if (dd < lowest) lowest = dd; if (dd > highest) highest = dd; });
    const speeds = stages.filter(function(sg){ return !sg.rest; })
                         .map(function(sg){ return Math.abs(sg.km) / sg.dur; });
    ok = tt <= DT_TMAX && highest <= DT_DMAX && lowest >= 0 && highest > 0
      && stages.some(function(sg){ return sg.rest; })
      && stages.some(function(sg){ return !sg.rest; })
      && stages.every(function(sg){ return sg.rest || sg.km !== 0; })
      && new Set(speeds).size === speeds.length;      // one clear fastest stage
  } while (guard < 300 && !ok);
  if (!ok) {   // guaranteed simple fallback, so the generator can never spin
    stages = [{ dur:1, km:20, rest:false, back:false },
              { dur:1, km:0,  rest:true,  back:false },
              { dur:2, km:-20, rest:false, back:true }];
    corners = [[0,0],[1,20],[2,20],[4,0]];
  }
  return { stages: stages, corners: corners };
}
const DT_LABELS = ['A', 'B', 'C', 'D'];
function dtDraw(J, opts){
  opts = opts || {};
  const c = J.corners;
  let s = '<polyline points="' + c.map(function(p){ return dtX(p[0]) + ',' + dtY(p[1]); }).join(' ')
    + '" fill="none" stroke="var(--accent)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>';
  c.forEach(function(p){ s += '<circle cx="' + dtX(p[0]) + '" cy="' + dtY(p[1]) + '" r="4" fill="var(--accent)"/>'; });
  if (opts.labels) {
    for (let i = 1; i < c.length; i++) {
      const mx = (dtX(c[i - 1][0]) + dtX(c[i][0])) / 2, my = (dtY(c[i - 1][1]) + dtY(c[i][1])) / 2;
      s += '<text x="' + mx + '" y="' + (my - 8) + '" font-family="Nunito,sans-serif" font-weight="900" font-size="13" fill="var(--text)" text-anchor="middle">'
        + DT_LABELS[i - 1] + '</text>';
    }
  }
  return s;
}
function dtStory(J, who){
  const bits = [];
  let running = 0;
  J.stages.forEach(function(sg){
    running += sg.km;
    if (sg.rest) bits.push('rests for ' + timeWord(sg.dur, 'hour'));
    else if (sg.back) bits.push(running === 0
      ? 'travels the last ' + (-sg.km) + ' km home in ' + timeWord(sg.dur, 'hour')
      : 'travels ' + (-sg.km) + ' km back towards home in ' + timeWord(sg.dur, 'hour'));
    else bits.push('travels ' + sg.km + ' km in ' + timeWord(sg.dur, 'hour'));
  });
  return who + ' ' + bits.join(', then ') + '.';
}
const DT_WHO = ['Amara', 'Ben', 'Chloe', 'Dev', 'Eli', 'Farrah'];

function genDistTime(el){
  el.style.fontSize = '1.05rem';

  if (level === 1) {                 // read the distance off the graph
    const J = dtJourney();
    const c = J.corners;
    const k = rr(1, c.length - 1);
    qData.ans = c[k][1];
    qData.ansDisplay = String(c[k][1]);
    qData.workSteps = 'Go up from <b>' + timeWord(c[k][0], 'hour') + '</b> on the time axis to the line, '
      + 'then across to the distance axis: <b>' + c[k][1] + ' km</b>.<br>'
      + 'The axis is distance <b>from home</b> — a line coming down means heading back.';
    el.innerHTML = '<div style="' + A_LBL + '">How far from home were they after ' + timeWord(c[k][0], 'hour') + '?</div>'
      + decSvg(dtGrid() + dtDraw(J), DT_H, 460)
      + '<div style="font-size:0.9rem;font-weight:900;color:var(--accent);">distance from home in km = ?</div>';
    return;
  }

  if (level === 2) {                 // which stage is stationary / fastest
    const J = dtJourney();
    const n = J.stages.length;
    const askRest = Math.random() < 0.5;
    let idx;
    if (askRest) idx = J.stages.findIndex(function(sg){ return sg.rest; });
    else {
      let best = -1, bi = 0;
      J.stages.forEach(function(sg, i){ const v = Math.abs(sg.km) / sg.dur; if (v > best) { best = v; bi = i; } });
      idx = bi;
    }
    qData.workSteps = askRest
      ? 'A <b>flat</b> section means the distance is not changing — they are stationary. That is stage <b>'
        + DT_LABELS[idx] + '</b>.'
      : 'The <b>steepest</b> section is the fastest — uphill or downhill, steepness is speed. Stage <b>'
        + DT_LABELS[idx] + '</b> covers ' + Math.abs(J.stages[idx].km) + ' km in '
        + timeWord(J.stages[idx].dur, 'hour') + ' = <b>'
        + (Math.abs(J.stages[idx].km) / J.stages[idx].dur) + ' km/h</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">During which stage were they '
      + (askRest ? '<b>stationary</b>' : 'travelling <b>fastest</b>') + '?</div>'
      + decSvg(dtGrid() + dtDraw(J, { labels: true }), DT_H, 460),
      DT_LABELS.slice(0, n), DT_LABELS[idx], true);
    return;
  }

  if (level === 3) {                 // build the graph from the story
    const J = dtJourney();
    const who = ffPick(DT_WHO);
    const c = J.corners;
    // sometimes the first stage is already drawn — "finish the graph"
    const preDrawn = Math.random() < 0.45 ? 1 : 0;
    const start = c[preDrawn];
    qData.plotGeom = dtGeom();
    qData.plotOrdered = true;
    qData.plotPre = c.slice(0, preDrawn + 1);   // the stage(s) already drawn
    qData.plotStart = start;
    qData.plotAns = c.slice(preDrawn + 1);
    qData.plotInstr = preDrawn
      ? 'The first stage is drawn. Tap the corner at the end of each remaining stage, in order.'
      : 'Tap the corner at the end of each stage, in order. Tap a corner again to undo it.';
    qData.plotAbove = '<div style="' + A_LBL + '">'
      + (preDrawn ? 'Finish the distance–time graph.' : 'Build the distance–time graph.') + '</div>'
      + '<div style="font-size:1rem;font-weight:800;margin:8px 4px;line-height:1.45;">' + dtStory(J, who) + '</div>';
    qData.workSteps = 'Each stage ends at a corner:<br>'
      + c.map(function(p){ return '(' + p[0] + ' h, ' + p[1] + ' km)'; }).join(' → ')
      + '<br>A rest is a <b>flat</b> section — time moves on but distance does not.';
    el.innerHTML = '';
    return;
  }

  /* Level 4 — speed of one labelled stage */
  const J4 = dtJourney();
  const moving = [];
  J4.stages.forEach(function(sg, i){ if (!sg.rest) moving.push(i); });
  const pick = ffPick(moving);
  const sg4 = J4.stages[pick];
  qData.ans = Math.abs(sg4.km) / sg4.dur;
  qData.ansDisplay = String(qData.ans);
  qData.workSteps = 'speed = distance ÷ time.<br>Stage <b>' + DT_LABELS[pick] + '</b> covers <b>'
    + Math.abs(sg4.km) + ' km</b>' + (sg4.back ? ' (heading back home)' : '') + ' in <b>'
    + timeWord(sg4.dur, 'hour') + '</b>.<br>' + Math.abs(sg4.km) + ' ÷ ' + sg4.dur
    + ' = <b>' + qData.ans + ' km/h</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">What was the speed during stage <b>' + DT_LABELS[pick] + '</b>?</div>'
    + decSvg(dtGrid() + dtDraw(J4, { labels: true }), DT_H, 460)
    + '<div style="font-size:0.9rem;font-weight:900;color:var(--accent);">speed in km/h = ?</div>';
}

/* ═════════ Applications of Linear Graphs (Yr 8–9, Laura) ═════════
   The modelling half of linear relationships: read a rate and a starting amount
   out of a real-world rule, write the rule from a story, build its table, and
   write a two-item cost equation in ax + by = d form.

   Everything is written in the y = a + bx order Laura uses (P = −35 + 4c), i.e.
   the starting amount FIRST and the rate second — deliberately not the y = mx + c
   order the intercept skills use, because that is the form the application
   questions come in.                                                          */
const LAP_SCEN = [
  { story: 'A stall pays $A to hire a table and makes $B profit on every cake sold.',
    v: 'P', w: 'c', vName: 'the profit in dollars', wName: 'the number of cakes sold',
    aWord: 'the hire cost', bWord: 'the profit per cake', neg: true,
    make: function(a, b){ return 'A cake stall costs $' + (-a) + ' to set up and makes $' + b
      + ' profit on every cake sold.'; } },
  { story: 'A cyclist starts A km from home and rides away at B km/h.',
    v: 'd', w: 'h', vName: 'the distance from home in km', wName: 'the number of hours',
    aWord: 'the starting distance', bWord: 'the speed', neg: false,
    make: function(a, b){ return 'A cyclist begins cycling ' + a + ' km from home and rides away from home at '
      + b + ' km/h.'; } },
  { story: 'A tank holds A litres and is filled at B litres per minute.',
    v: 'V', w: 't', vName: 'the volume in litres', wName: 'the number of minutes',
    aWord: 'the starting volume', bWord: 'the filling rate', neg: false,
    make: function(a, b){ return 'A tank already holds ' + a + ' litres and is filled at ' + b
      + ' litres per minute.'; } },
  { story: 'A phone plan costs $A a month plus $B per gigabyte.',
    v: 'C', w: 'g', vName: 'the cost in dollars', wName: 'the number of gigabytes',
    aWord: 'the monthly fee', bWord: 'the cost per gigabyte', neg: false,
    make: function(a, b){ return 'A phone plan costs $' + a + ' a month plus $' + b + ' for each gigabyte used.'; } },
  { story: 'A plumber charges $A to come out plus $B an hour.',
    v: 'C', w: 'h', vName: 'the cost in dollars', wName: 'the number of hours',
    aWord: 'the call-out fee', bWord: 'the hourly rate', neg: false,
    make: function(a, b){ return 'A plumber charges $' + a + ' to come out, plus $' + b + ' for each hour worked.'; } }
];
const LAP_ITEMS = [
  ['pens', 'pencils'], ['muffins', 'cookies'], ['adult tickets', 'child tickets'],
  ['T-shirts', 'caps'], ['pizzas', 'drinks']
];
function lapRule(sc, a, b){
  return sc.v + ' = ' + sgnNum(a) + ' + ' + b + sc.w;
}
function genLinearApps(el){
  el.style.fontSize = '1.1rem';
  const sc = LAP_SCEN[ri(LAP_SCEN.length)];
  const a = sc.neg ? -rr(2, 12) * 5 : rr(3, 40);
  const b = rr(2, 12);

  if (level === 1) {                 // read the rate or the starting amount off the rule
    const askRate = Math.random() < 0.5;
    qData.ans = askRate ? b : a;
    qData.ansDisplay = sgnNum(qData.ans);
    qData.workSteps = 'In ' + sc.v + ' = a + b' + sc.w + ', <b>a</b> is the starting amount and <b>b</b> is the '
      + 'rate — the number multiplying ' + sc.w + '.<br>Here a = <b>' + sgnNum(a) + '</b> and b = <b>' + b + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + (askRate
        ? 'What is the <b>rate</b> (the amount per ' + sc.w + ')?'
        : 'What is the <b>starting amount</b>?') + '</div>'
      + '<div style="font-size:1.8rem;font-weight:900;margin:10px 0;">' + lapRule(sc, a, b) + '</div>'
      + '<div style="font-size:0.88rem;font-weight:800;color:var(--muted);line-height:1.5;">'
      + sc.v + ' is ' + sc.vName + '<br>' + sc.w + ' is ' + sc.wName + '</div>';
    return;
  }

  if (level === 2) {                 // write the rule from the story
    qData.gapTemplate = [sc.v + ' = ', 0, ' + ', 1, sc.w];
    qData.gapAns = [a, b];
    qData.gapHint = 'Starting amount first, then the rate.';
    qData.gapAnsText = lapRule(sc, a, b);
    qData.workSteps = 'The <b>starting amount</b> is there before anything happens: <b>' + sgnNum(a) + '</b>.<br>'
      + 'The <b>rate</b> is what changes per ' + sc.w + ': <b>' + b + '</b>.<br>So ' + lapRule(sc, a, b) + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Write the rule in the form ' + sc.v + ' = a + b' + sc.w + '.</div>'
      + '<div style="font-size:1.05rem;font-weight:800;margin:10px 4px;line-height:1.5;">' + sc.make(a, b) + '</div>'
      + '<div style="font-size:0.88rem;font-weight:800;color:var(--muted);line-height:1.5;">'
      + sc.v + ' is ' + sc.vName + '<br>' + sc.w + ' is ' + sc.wName + '</div>';
    return;
  }

  if (level === 3) {                 // build the table from the application
    const b3 = rr(2, 9), a3 = sc.neg ? -rr(2, 8) * 5 : rr(3, 30);
    const xs = [0, 1, 2, 3, 4];
    const ys = xs.map(function(x){ return a3 + b3 * x; });
    qData.gapTemplate = [0, '&nbsp;', 1, '&nbsp;', 2, '&nbsp;', 3, '&nbsp;', 4];
    qData.gapAns = ys;
    qData.gapHint = 'Fill in the ' + sc.v + ' row, left to right.';
    qData.gapAnsText = ys.map(sgnNum).join(', ');
    qData.workSteps = 'Substitute each ' + sc.w + ' into ' + lapRule(sc, a3, b3) + ':<br>'
      + xs.map(function(x, i){ return sc.w + ' = ' + x + ' → ' + sc.v + ' = ' + sgnNum(ys[i]); }).join('<br>');
    el.innerHTML = '<div style="' + A_LBL + '">Complete the table of values.</div>'
      + '<div style="font-size:1rem;font-weight:800;margin:8px 4px;line-height:1.45;">' + sc.make(a3, b3) + '</div>'
      + '<div style="font-size:1.35rem;font-weight:900;margin:6px 0;">' + lapRule(sc, a3, b3) + '</div>'
      + lapTable(sc, xs, ys);
    return;
  }

  /* Level 4 — two items, a total: write ax + by = d */
  const it = LAP_ITEMS[ri(LAP_ITEMS.length)];
  const ca = rr(2, 12), cb = rr(2, 12);
  const na = rr(2, 9), nb = rr(2, 9);
  const total = ca * na + cb * nb;
  qData.gapTemplate = [0, 'x&nbsp;+&nbsp;', 1, 'y&nbsp;=&nbsp;', 2];
  qData.gapAns = [ca, cb, total];
  qData.gapHint = 'Cost of one ' + it[0].replace(/s$/, '') + ', then one ' + it[1].replace(/s$/, '') + ', then the total.';
  qData.gapAnsText = ca + 'x + ' + cb + 'y = ' + total;
  qData.workSteps = 'x ' + it[0] + ' at $' + ca + ' each cost <b>' + ca + 'x</b>.<br>'
    + 'y ' + it[1] + ' at $' + cb + ' each cost <b>' + cb + 'y</b>.<br>'
    + 'Together they come to $' + total + ', so <b>' + ca + 'x + ' + cb + 'y = ' + total + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write an equation in the form ax + by = d.</div>'
    + '<div style="font-size:1.05rem;font-weight:800;margin:10px 4px;line-height:1.5;">'
    + it[0].charAt(0).toUpperCase() + it[0].slice(1) + ' cost <b>$' + ca + '</b> each and ' + it[1]
    + ' cost <b>$' + cb + '</b> each.<br>Altogether they cost <b>$' + total + '</b>.</div>'
    + '<div style="font-size:0.88rem;font-weight:800;color:var(--muted);line-height:1.5;">'
    + 'x is the number of ' + it[0] + '<br>y is the number of ' + it[1] + '</div>';
}
/* The table for L3 uses the application's own variable names, not x and y. */
function lapTable(sc, xs, ys){
  let top = '<tr><th>' + sc.w + '</th>', bot = '<tr><th>' + sc.v + '</th>';
  xs.forEach(function(x){ top += '<td>' + sgnNum(x) + '</td>'; });
  ys.forEach(function(){ bot += '<td>▢</td>'; });
  return '<table class="tov-table">' + top + '</tr>' + bot + '</tr></table>';
}

const KB_INPUTS = ['ansInput','fracNum','fracDen','mixedWhole','mixedNum','mixedDen',
                   'idxCoeff','idxExp','idxExpB','idxExpC','sciCoeff','sciExp',
                   'ratioA','ratioB',
                   'algC0','algC1','algC2','algP0','algP1','algP2','algTypeInput',
                   'factorBox0','factorBox1',
                   // v74 — Convert FDP table cells (3 rows × pct/dec/frac-num/frac-den)
                   'pctP0','pctD0','pctFn0','pctFd0',
                   'pctP1','pctD1','pctFn1','pctFd1',
                   'pctP2','pctD2','pctFn2','pctFd2',
                   // v77 — gap-fill rule / coordinate / solution boxes
                   'gap0','gap1','gap2','gap3','gap4',
                   // v101 — grid-fill table cells (two-way tables)
                   'grid0','grid1','grid2','grid3','grid4','grid5','grid6','grid7','grid8'];

/* ── Setup: called once on load ── */
/* The inputmode each box was authored with, captured BEFORE the keypad overwrites
   it, so unlocking can put back "decimal"/"text" rather than guessing. */
const KB_ORIG_IM = {};
function kbCaptureOriginals() {
  KB_INPUTS.forEach(inputId => {
    if (Object.prototype.hasOwnProperty.call(KB_ORIG_IM, inputId)) return;
    const el = document.getElementById(inputId);
    if (el) KB_ORIG_IM[inputId] = el.getAttribute('inputmode') || '';
  });
}
/* Hand every box back to the physical keyboard. */
function kbUnlockInputs() {
  KB_INPUTS.forEach(inputId => {
    const el = document.getElementById(inputId);
    if (!el) return;
    el.removeAttribute('readonly');
    const orig = KB_ORIG_IM[inputId];
    if (orig) el.setAttribute('inputmode', orig); else el.removeAttribute('inputmode');
  });
}
function kbSetup() {
  kbCaptureOriginals();
  /* Watch for a real keyboard however the pointer test came out. Capture phase and
     keyDOWN, so readonly is gone before the character would be inserted — the
     keystroke that triggers the switch is not swallowed. */
  document.addEventListener('keydown', function(e){
    if (kbPhysical) return;
    if (e.ctrlKey || e.metaKey || e.altKey) return;
    if (!(String(e.key).length === 1 || e.key === 'Backspace' || e.key === 'Enter')) return;
    kbPhysical = true;
    kbUnlockInputs();
    kbHide();
  }, true);

  if (!IS_MOBILE()) return;

  KB_INPUTS.forEach(inputId => {
    const el = document.getElementById(inputId);
    if (!el) return;

    /* Suppress native keyboard */
    el.setAttribute('inputmode', 'none');
    el.setAttribute('readonly', 'readonly');

    /* Focus tracking — highlight the active input visually */
    el.addEventListener('click', () => kbFocus(el));
    el.addEventListener('focus', () => kbFocus(el));
  });
}

/* Called whenever an input becomes active */
function kbFocus(el) {
  if (!IS_MOBILE()) return;
  // Remove highlight from previous target
  if (kbTarget && kbTarget !== el) kbTarget.classList.remove('kb-focused');
  kbTarget = el;
  el.classList.add('kb-focused');
  kbRefreshDisplay();
  /* v48: ease the active field into the visible band (below the pinned
     question, above the fixed keypad) — matters most for multi-box modes
     (fraction/index/ratio) when "Next →" moves focus down the page. */
  if (typeof el.scrollIntoView === 'function') {
    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
  }
}

/* Update the display strip to show current field value */
function kbRefreshDisplay() {
  const disp = document.getElementById('kbDisplayText');
  if (!kbTarget) { disp.textContent = '–'; disp.style.color = 'var(--muted)'; return; }
  const val = kbTarget.value;
  disp.textContent = val === '' ? '–' : val;
  disp.style.color = val === '' ? 'var(--muted)' : 'var(--text)';
  /* v49: a long algebra answer can wrap the display strip onto extra lines,
     making the fixed keypad taller — re-reserve so nothing is hidden behind it. */
  if (typeof syncKeypadClearance === 'function') syncKeypadClearance();
}

/* ── Key press handlers ── */
/* Only fires if the button is not in inactive state */
function kbPressIfActive(btnId, char) {
  const btn = document.getElementById(btnId);
  if (btn && btn.classList.contains('kb-sym-inactive')) return;
  kbPress(char);
}
function kbNextIfActive() {
  const btn = document.getElementById('kbNextBtn');
  if (btn && btn.classList.contains('kb-next-inactive')) return;
  kbNext();
}

/* Desktop power buttons (v33): append a superscript to the typed algebra answer
   so students see and use correct notation (e.g. 10xy²z). The product parser
   reads ² / ³ as the power of the letter just typed. */
function insertPower(ch) {
  const inp = document.getElementById('algTypeInput');
  if (!inp || inp.disabled) return;
  inp.value += ch;
  inp.classList.remove('ok', 'bad');
  inp.focus();
}

/* Desktop inequality-sign buttons (v52): insert the true glyph into the answer
   box. ≤ / ≥ have no keyboard key; < / > aren't obvious to every student. */
function insertIneq(ch) {
  const inp = document.getElementById('ansInput');
  if (!inp || inp.disabled) return;
  inp.value += ch;
  inp.classList.remove('ok', 'bad');
  inp.focus();
}

/* Desktop √ button (v74): the physical keyboard can't type √, so insert it here
   for surd-mode answers (Pythagoras and the Surds skills). */
function insertSurd() {
  const inp = document.getElementById('ansInput');
  if (!inp || inp.disabled) return;
  inp.value += '√';
  inp.classList.remove('ok', 'bad');
  inp.focus();
}

/* Desktop π / + buttons (v102) for exact circle answers. */
function insertPi(ch) {
  const inp = document.getElementById('ansInput');
  if (!inp || inp.disabled) return;
  inp.value += ch;
  inp.classList.remove('ok', 'bad');
  inp.focus();
}

function kbPress(char) {
  if (!kbTarget || kbTarget.disabled) return;

  const mode = getInputMode();
  const algText = ['algType', 'algPoly', 'algFactored'].includes(mode);
  const freeMinus = algText || mode === 'ineq';   // ineq allows "x > -3" — minus anywhere
  let cur = kbTarget.value;

  /* Dot: only allow one, only for sci coeff */
  if (char === '.' && cur.includes('.')) return; // only one dot allowed

  /* Fraction slash: only allow one (decFrac mode) */
  if (char === '/' && cur.includes('/')) return;

  /* Negative: in number modes only at start; in algText / ineq it's placed freely */
  if (char === '-' && !freeMinus) {
    if (cur.startsWith('-')) { kbTarget.value = cur.slice(1); kbRefreshDisplay(); return; }
    if (cur !== '') return; // only at start
  }

  kbTarget.value = cur + char;
  kbRefreshDisplay();
}

function kbDel() {
  if (!kbTarget || kbTarget.disabled) return;
  kbTarget.value = kbTarget.value.slice(0, -1);
  kbRefreshDisplay();
}

/* "Next →" moves focus to the next logical input */
function kbNext() {
  if (!kbTarget) return;
  const order = getKbInputOrder();
  const idx = order.indexOf(kbTarget.id);
  if (idx >= 0 && idx < order.length - 1) {
    const nextEl = document.getElementById(order[idx + 1]);
    if (nextEl && !nextEl.disabled) { nextEl.focus(); kbFocus(nextEl); }
  }
}

/* Submit — same as pressing Enter */
function kbSubmit() {
  checkAns();
}

/* Returns the ordered list of active input IDs for the current question */
function getKbInputOrder() {
  const mode = getInputMode();
  if (mode === 'fraction') {
    if (document.getElementById('stdAnsWrap').dataset.wholeFromFrac === 'true') return ['ansInput'];
    return ['fracNum','fracDen'];
  }
  if (mode === 'mixed') return ['mixedWhole','mixedNum','mixedDen'];
  if (mode === 'index') {
    const m = (typeof qData !== 'undefined' && qData.idxMode) || 'expOnly';
    if (m === 'expOnly') return ['idxExp'];
    const hasY = typeof qData !== 'undefined' && qData.ansExpY !== undefined && qData.ansExpY !== null;
    return hasY ? ['idxCoeff','idxExpB','idxExpC'] : ['idxCoeff','idxExpB'];
  }
  if (mode === 'sci') return ['sciCoeff','sciExp'];
  if (mode === 'ratio') return ['ratioA','ratioB'];
  if (mode === 'algebra') {
    const slots = (typeof qData !== 'undefined' && qData.alg && qData.alg.slots) || [];
    const order = [];
    for (let i = 0; i < slots.length; i++) {
      order.push('algC' + i);
      if (slots[i].askPower) order.push('algP' + i);
    }
    return order.length ? order : ['algC0'];
  }
  if (mode === 'algType' || mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored') return ['algTypeInput'];
  if (mode === 'choice') return [];
  if (mode === 'arrange') return [];
  if (mode === 'factor') return ['factorBox0','factorBox1'];
  if (mode === 'pctTable') {
    const rows = (typeof qData !== 'undefined' && qData.pctRows) || [];
    const order = [];
    rows.forEach(function(r, i){
      if (r.given !== 'pct')  order.push('pctP' + i);
      if (r.given !== 'dec')  order.push('pctD' + i);
      if (r.given !== 'frac') { order.push('pctFn' + i); order.push('pctFd' + i); }
    });
    return order.length ? order : ['pctP0'];
  }
  if (mode === 'gapFill') {
    const n = (typeof qData !== 'undefined' && qData.gapAns) ? qData.gapAns.length : 0;
    const order = [];
    for (let i = 0; i < n; i++) order.push('gap' + i);
    return order.length ? order : ['gap0'];
  }
  if (mode === 'gridFill') {
    const n = (typeof qData !== 'undefined' && qData.gridAns) ? qData.gridAns.length : 0;
    const order = [];
    for (let i = 0; i < n; i++) order.push('grid' + i);
    return order.length ? order : ['grid0'];
  }
  if (mode === 'multiSel') return [];
  if (mode === 'plotPts') return [];
  if (mode === 'plToggle') return ['ansInput'];
  return ['ansInput'];
}

/* ── Show/configure keypad based on current skill ── */
function kbShow() {
  // Multiple-choice and tap-to-arrange answers are tapped directly — no keypad.
  if (getInputMode() === 'choice' || getInputMode() === 'arrange' || getInputMode() === 'multiSel'
      || getInputMode() === 'plotPts') { kbHide(); return; }
  if (!IS_MOBILE()) return;
  const pad = document.getElementById('mobileKeypad');
  if (!pad) return;
  pad.style.display = 'block';
  document.body.classList.add('kb-open');   // v86: lets CSS cap tall question cards

  const mode = getInputMode();
  const skillId = (typeof skill !== 'undefined') ? skill : '';

  /* v49: in typed-algebra modes the answer can be long, so left-align + wrap
     the display strip — the whole answer stays visible even if the field
     itself scrolls. Numeric modes keep the right-aligned single-line readout. */
  const disp = document.getElementById('kbDisplay');
  if (disp) disp.classList.toggle('kb-disp-wrap',
    ['algType', 'algProd', 'algPoly', 'algFactored'].includes(mode));

  /* Decide which optional keys to show */
  const showNeg = mode === 'gapFill' || ['intAddSub','intMultDiv','intSquareCube','indexDiv','indexMult','indexPow','sciTo','sciFrom',
                   'eqOneStepAddSub','eqOneStepMulDiv','eqTwoStep',
                   'eqTwoStepFrac','eqVarDenom','eqBothSides'].includes(skillId)
                  || mode === 'index' || mode === 'sci' || mode === 'algebra' || mode === 'ineq'
                  || (skillId === 'decAddSub' && level === 4)   // word-problem balances can be negative
                  || skillId === 'decAddSubNeg' || skillId === 'decMulDivNeg'   // signed decimals
                  // v77 — negatives appear in coordinate geometry, sequences and recurrence answers
                  || ['gradientSeg','intercepts','sequences','recurrence'].includes(skillId)
                  // v78 — the Yr 7-9 sequence skills all have negative terms, differences and ratios
                  || ['seqWords','arithSeq','geoSeq'].includes(skillId)
                  // v78.2 — table-of-values y rows and intercepts off a table go negative
                  || ['tableValues','linearApps'].includes(skillId)    // v78.2 / v78.3
                  || skillId === 'eqMulti';   // v105: multi-step solutions can be negative
  const decSkillsWithDot = ['sciTo','sciFrom','decAddSub','decAdd','decSub','decMultiply','decDivide','decPow10','decSquareCube','decOrderOps','decRound','sigFigs',
                            'decAddSubNeg','decMulDivNeg','decLeadEst','decSqCubeRoot',
                            'rateSimplify','rateConvert','decIdentify','decExpand','fracToDec','decRecurring',
                            // v74 — percentages can have decimal answers
                            'pctIdentify','pctExpress','pctOfAmount','pctChange','pctProfitLoss',
                            // v77 — money answers and half-solutions
                            'gst','simpleInterest','flatDep','intercepts','quadSolve'];
  const showDot  = (mode === 'sci' || mode === 'pctTable' || mode === 'plToggle' || mode === 'decFrac' || mode === 'gapFill' || decSkillsWithDot.includes(skillId)
                   || isMeasSkill(skillId)    // v102: lengths and areas are decimals
                   || skillId === 'mapScale' || skillId === 'speedDistTime');   // v105: km, m and hours can be decimals
  const showNext = (mode === 'fraction' || mode === 'mixed' || mode === 'index' || mode === 'sci' || mode === 'ratio' || mode === 'algebra' || mode === 'factor' || mode === 'pctTable' || mode === 'gapFill' || mode === 'gridFill');

  const negBtn  = document.getElementById('kbNegBtn');
  const dotBtn  = document.getElementById('kbDotBtn');
  const nextBtn = document.getElementById('kbNextBtn');

  // Toggle active/inactive — buttons are always visible, just styled differently
  if (negBtn)  negBtn.classList.toggle('kb-sym-inactive',  !showNeg);
  if (dotBtn)  dotBtn.classList.toggle('kb-sym-inactive',  !showDot);
  if (nextBtn) nextBtn.classList.toggle('kb-next-inactive', !showNext);

  // v50: surd (exact-value) row — a single √ key, shown only for surd mode.
  const surdRow = document.getElementById('kbSurdRow');
  if (surdRow) surdRow.style.display = (mode === 'surd') ? 'flex' : 'none';

  // v102: π row (π and +), shown only for exact circle answers.
  const piRow = document.getElementById('kbPiRow');
  if (piRow) piRow.style.display = (mode === 'piExact') ? 'flex' : 'none';

  // Fraction-slash row — a single / key, shown only for the decFrac mode.
  const fracSlashRow = document.getElementById('kbFracSlashRow');
  if (fracSlashRow) fracSlashRow.style.display = (mode === 'decFrac') ? 'flex' : 'none';

  // v51: inequality row — x and the four comparison signs + a fraction slash.
  const ineqRow = document.getElementById('kbIneqRow');
  if (ineqRow) ineqRow.style.display = (mode === 'ineq') ? 'flex' : 'none';

  /* Algebra free-text row: show variable + operator keys for the current answer */
  const algRow = document.getElementById('kbAlgRow');
  if (algRow) {
    const isAlgText = ['algType', 'algProd', 'algPoly', 'algFactored'].includes(mode);
    if (isAlgText) {
      algRow.style.display = 'flex';
      let vars;
      if (mode === 'algProd') {
        const p = (typeof qData !== 'undefined' && qData.prodAns) || { vars: {} };
        vars = Object.keys(p.vars || {}).filter(k => p.vars[k] !== 0).sort();
      } else if (mode === 'algFactored') {
        vars = (typeof qData !== 'undefined' && qData.factorVars) || ['x'];
      } else {
        const slots = (typeof qData !== 'undefined' && qData.alg && qData.alg.slots) || [];
        vars = algVarsInSlots(slots);
      }
      // Up to three variable keys, labelled from the current answer's letters.
      [['kbVar1', 0], ['kbVar2', 1], ['kbVar3', 2]].forEach(([bid, vi]) => {
        const b = document.getElementById(bid);
        if (!b) return;
        if (vars[vi]) { const ch = vars[vi]; b.style.display = ''; b.textContent = ch; b.onclick = () => kbPress(ch); }
        else { b.style.display = 'none'; }
      });
      // '+' for multi-term answers (everything except a single monomial product).
      const plus = document.getElementById('kbPlusBtn');
      if (plus) plus.style.display = (mode === 'algProd') ? 'none' : '';
      // ² needed by product, polynomial, and factored answers; ³ only by products.
      const allowSq = (mode === 'algProd' || mode === 'algPoly' || mode === 'algFactored');
      const p2 = document.getElementById('kbPow2');
      const p3 = document.getElementById('kbPow3');
      if (p2) p2.style.display = allowSq ? '' : 'none';
      if (p3) p3.style.display = (mode === 'algProd') ? '' : 'none';
      // Bracket keys only for typed factorisation answers.
      const ob = document.getElementById('kbOpenBtn');
      const cb = document.getElementById('kbCloseBtn');
      if (ob) ob.style.display = (mode === 'algFactored') ? '' : 'none';
      if (cb) cb.style.display = (mode === 'algFactored') ? '' : 'none';
    } else {
      algRow.style.display = 'none';
    }
  }

  /* Auto-focus first input */
  const order = getKbInputOrder();
  if (order.length > 0) {
    const first = document.getElementById(order[0]);
    if (first && !first.disabled) { kbTarget = first; kbRefreshDisplay(); }
  }

  /* Scroll game screen to top so stats + question are visible */
  window.scrollTo({ top: 0, behavior: 'smooth' });

  /* v48: reserve exactly the keypad's real height. Done last, after the
     algebra symbol row's visibility is decided above, so the measurement
     includes (or excludes) the 5th row correctly. */
  syncKeypadClearance();
}

/* v48: keep the body's bottom padding equal to the fixed keypad's ACTUAL
   height so the answer field and the Next/✓ row can always scroll clear of
   it. A number-mode keypad is ~4 rows and an algebra keypad ~5, so a single
   fixed reserve can't fit both — this measures the live height each time the
   keypad is shown. Inline style wins over the CSS fallback (280px); clearing
   it lets other (non-game) screens fall back to that value. */
function syncKeypadClearance() {
  const pad = document.getElementById('mobileKeypad');
  if (!IS_MOBILE() || !pad || pad.style.display === 'none') {
    document.body.style.paddingBottom = '';
    syncQuestionCap(null);
    return;
  }
  const h = pad.offsetHeight || 0;
  if (h > 0) document.body.style.paddingBottom = (h + 24) + 'px';
  syncQuestionCap(pad);
}

/* v86 (Laura): cap the question card against the keypad that is ACTUALLY on
   screen, not a guessed fraction of the viewport. The algebra keypad is two
   rows taller than the numeric one, and phones differ by 200px of height, so a
   fixed vh value is wrong somewhere — a coordinate-plane question ended up with
   its answer boxes underneath the keypad.
     reserve 220px = game header (~110) + the answer row (~60) + margins.
   The cap is published as CSS variables so the layout stays in the stylesheet;
   JS only supplies the number it cannot know at author time. */
function syncQuestionCap(pad) {
  const root = document.documentElement;
  if (!pad) { root.style.removeProperty('--qcap'); root.style.removeProperty('--qsvgcap'); return; }
  const cap = Math.max(140, window.innerHeight - (pad.offsetHeight || 0) - 220);
  root.style.setProperty('--qcap', cap + 'px');
  root.style.setProperty('--qsvgcap', Math.max(90, cap - 74) + 'px');
}

function kbHide() {
  const pad = document.getElementById('mobileKeypad');
  if (pad) pad.style.display = 'none';
  document.body.classList.remove('kb-open');   // v86
  kbTarget = null;
  /* v48: drop the measured reserve so non-game screens don't keep a tall pad. */
  document.body.style.paddingBottom = '';
}

/* ── Re-apply readonly on enabled inputs so native keyboard stays away ── */
function kbActivateInputs() {
  if (!IS_MOBILE()) return;
  KB_INPUTS.forEach(inputId => {
    const el = document.getElementById(inputId);
    if (el && !el.disabled) {
      el.setAttribute('inputmode', 'none');
      el.setAttribute('readonly', 'readonly');
    }
  });
}

/* Window resize — show/hide keypad if crossing the 768px threshold */
window.addEventListener('resize', () => {
  const pad = document.getElementById('mobileKeypad');
  if (!pad) return;
  if (!IS_MOBILE() && pad.style.display !== 'none') kbHide();
  /* v48: keypad height changes with width/orientation — re-reserve. */
  syncKeypadClearance();
});


/* ═══════════════════════════════════════════════
   ONBOARDING
═══════════════════════════════════════════════ */
const OB_SLIDES = [
  {
    icon: '⚡',
    title: 'Welcome to Sandy FastFacts',
    body: 'Practise and master the maths skills you meet in class — from times tables to algebra.',
    card: `
      <div class="ob-row">
        <div class="ob-badge pb">🎯</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Get faster where speed counts</div>
          <div class="ob-row-desc">Number facts like times tables, squares and roots — build quick, automatic recall.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge practice">🧠</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Understand the methods</div>
          <div class="ob-row-desc">Skills like expanding brackets, fractions and ratios — take your time and get the steps right.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge spark">📚</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Nine topics, multiple levels each</div>
          <div class="ob-row-desc">Number, Integers, Exponents, Fractions, Decimals, Ratios &amp; Rates, Algebra, Equations, and Trig &amp; Pythagoras.</div>
        </div>
      </div>`
  },
  {
    icon: '⏱',
    title: 'Three ways to train',
    body: 'Pick a mode before you choose a skill.',
    card: `
      <div class="ob-row">
        <div class="ob-badge fluency">⏱</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Fluency — 60 seconds</div>
          <div class="ob-row-desc">A quick sprint for facts you want to make automatic. Scored and shared with your teacher.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge challenge">⚡</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Challenge — 3 minutes</div>
          <div class="ob-row-desc">More time for trickier, multi-step skills. Also scored and shared.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge practice">∞</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Practice — no timer</div>
          <div class="ob-row-desc">Learn a new method at your own pace. No speed pressure — your work still shows up for your teacher, marked as Practice.</div>
        </div>
      </div>`
  },
  {
    icon: '🎯',
    title: 'Speed vs understanding',
    body: 'The app coaches each skill the right way.',
    card: `
      <div class="ob-row">
        <div class="ob-badge pb">🏆</div>
        <div class="ob-row-text">
          <div class="ob-row-title">The fluency pyramid</div>
          <div class="ob-row-desc">Timed sessions earn an animal. It's a pyramid — 🦘 Kangaroo at the bottom (just getting started) climbing up to 🐆 Cheetah at the top (fully fluent):
            <div style="display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:0.8rem;font-weight:800">
              <div style="background:#E03020;color:#fff;border-radius:8px;padding:7px 12px">🐆 Cheetah — Fluent &amp; Automatic</div>
              <div style="background:#F06040;color:#fff;border-radius:8px;padding:7px 12px;margin:0 6px">🦌 Antelope — Fast &amp; Accurate</div>
              <div style="background:#F5A623;color:#3D2600;border-radius:8px;padding:7px 12px;margin:0 12px">🦁 Lion — Strong &amp; Steady</div>
              <div style="background:#50BFD8;color:#06303A;border-radius:8px;padding:7px 12px;margin:0 18px">🐕 Greyhound — Building Speed</div>
              <div style="background:#A8C8E8;color:#0B2A45;border-radius:8px;padding:7px 12px;margin:0 24px">🦘 Kangaroo — Getting Started</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge fluency">🎯</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Get Fluent on your facts</div>
          <div class="ob-row-desc">On recall skills (times tables, squares, integers…), reaching <strong>🦌 Antelope</strong> earns a 🎯 Fluent badge. Antelope and Cheetah are great — but aim to be at least Fluent on every fact.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge score">⭐</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Score = correct per min × accuracy²</div>
          <div class="ob-row-desc">Accuracy matters more than raw speed — 20 right at 100% beats 30 right at 50%.</div>
        </div>
      </div>`
  },
  {
    icon: '🔎',
    title: 'Learn from your mistakes',
    body: 'Every wrong answer is a chance to improve.',
    card: `
      <div class="ob-row">
        <div class="ob-badge score">🔁</div>
        <div class="ob-row-text">
          <div class="ob-row-title">End-of-session review</div>
          <div class="ob-row-desc">After each session, see every question you missed with your answer and the correct one.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge pb">💡</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Show me how</div>
          <div class="ob-row-desc">Tap to reveal a worked example or method tip for the ones you got wrong.</div>
        </div>
      </div>`
  },
  {
    icon: '🔥',
    title: 'Build the habit, track progress',
    body: 'A little practice each day adds up fast.',
    card: `
      <div class="ob-row">
        <div class="ob-badge challenge">🎲</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Daily Mix</div>
          <div class="ob-row-desc">One tap gives you four skills picked for you, weighted to what you've been working on.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge score">🔥</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Daily goal &amp; streak</div>
          <div class="ob-row-desc">Do 5 sessions or 5 minutes a day to hit your goal and keep your day-streak alive.</div>
        </div>
      </div>
      <div class="ob-row">
        <div class="ob-badge pb">🏆</div>
        <div class="ob-row-text">
          <div class="ob-row-title">Bests, history &amp; backup</div>
          <div class="ob-row-desc">Personal Bests are saved on this device. Use 💾 Backup to move them to another device, and 🌙 in the corner for dark mode.</div>
        </div>
      </div>`
  }
];

let obSlide = 0;

function obStart() {
  obSlide = 0;
  obRender();
  show('s-onboard');
}

function obRender() {
  const s = OB_SLIDES[obSlide];
  setText('obIcon', s.icon);
  setText('obTitle', s.title);
  setText('obBody', s.body);
  document.getElementById('obCard').innerHTML = s.card;
  document.getElementById('obNextBtn').textContent = obSlide === OB_SLIDES.length - 1 ? "Let's go! →" : 'Next →';
  // Build dots for the current slide count
  const dotsWrap = document.getElementById('obDots');
  if (dotsWrap) dotsWrap.innerHTML = OB_SLIDES.map((_, i) => `<div class="ob-dot${i === obSlide ? ' active' : ''}"></div>`).join('');
}

function obNext() {
  if (obSlide < OB_SLIDES.length - 1) {
    obSlide++;
    obRender();
  } else {
    obFinish();
  }
}

function obSkip() { obFinish(); }

function obFinish() {
  // Mark this profile as onboarded
  localStorage.setItem('ff_onboarded_' + pidx, '1');
  goHome();
}

function replayTutorial() {
  obSlide = 0;
  obRender();
  show('s-onboard');
}

function isOnboarded() {
  return localStorage.getItem('ff_onboarded_' + pidx) === '1';
}

/* ═══════════════════════════════════════════════
   SESSION QUEUE — today's challenge results
   Stored per-profile, keyed by date so yesterday's
   sessions don't accumulate.
═══════════════════════════════════════════════ */
function todayKey() {
  const d = new Date();
  return `ff_today_${pidx}_${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`;
}

function getTodaySessions() {
  try { return JSON.parse(localStorage.getItem(todayKey()) || '[]'); }
  catch { return []; }
}

function saveTodaySessions(sessions) {
  localStorage.setItem(todayKey(), JSON.stringify(sessions));
}

function recordSession(skillId, lv, fluencyScore, correct, accPct, cpmVal, isPB) {
  const sessions = getTodaySessions();
  sessions.push({
    id: Date.now(),
    skill: skillId,
    skillName: getSkillDisplayName(skillId),
    level: lv,
    mode: sessionMode,   // 'fluency' | 'challenge' | 'practice'
    modeLabel: sessionMode === 'fluency' ? '⏱ Fluency'
             : sessionMode === 'challenge' ? '⚡ Challenge'
             : '📝 Practice',
    score: fluencyScore,
    correct,
    accuracy: accPct,
    cpm: cpmVal,
    isPB,
    sent: false,
    time: new Date().toLocaleTimeString('en-AU', { hour:'2-digit', minute:'2-digit' }),
    date: new Date().toLocaleDateString('en-AU', { day:'numeric', month:'short', year:'numeric' }),
  });
  saveTodaySessions(sessions);
}

function getSkillDisplayName(sid) {
  for (const cat of Object.values(CATS)) {
    for (const s of cat.skills) {
      if (s.id === sid) return s.name.replace(/&amp;/g, '&');
    }
  }
  return sid;
}

/* ── TODAY SCREEN ── */
function goToday() {
  show('s-today');
  renderTodayScreen();
}

function renderTodayScreen() {
  const sessions = getTodaySessions();
  const unsent = sessions.filter(s => !s.sent);
  const list = document.getElementById('todayList');
  const empty = document.getElementById('todayEmpty');
  const shareWrap = document.getElementById('todayShareWrap');

  list.innerHTML = '';

  if (sessions.length === 0) {
    empty.style.display = 'block';
    shareWrap.style.display = 'none';
    return;
  }
  empty.style.display = 'none';
  shareWrap.style.display = 'block';

  // Render all sessions — sent ones shown faded
  sessions.forEach(s => {
    const row = document.createElement('div');
    row.className = 'session-row' + (s.isPB ? ' is-pb' : '');
    if (s.sent) row.style.opacity = '0.5';
    row.innerHTML = `
      <div>
        <div class="session-skill">${s.skillName} — Level ${s.level}</div>
        <div class="session-meta">${s.modeLabel || ''} · Acc: ${s.accuracy}% · CPM: ${s.cpm} · ${s.time}</div>
      </div>
      <div class="session-score-col">
        <div class="session-score">${s.score}</div>
        ${s.isPB ? '<span class="session-pb-tag">★ NEW PB</span>' : ''}
        ${s.sent ? '<span class="session-sent-tag">✓ Sent</span>' : '<span style="font-size:0.65rem;font-weight:800;color:var(--accent);display:block;margin-top:1px">● Unsent</span>'}
      </div>`;
    list.appendChild(row);
  });

  // Share card — show differently if nothing new to send
  const shareCard = document.getElementById('todayShareCard');
  const shareBtn  = document.getElementById('shareFormBtn');
  const copyBtn   = document.querySelector('.btn-copy');
  const desc      = document.getElementById('shareCardDesc');

  if (unsent.length === 0) {
    desc.textContent = '✓ All sessions have been sent. Do more sessions and come back to share them.';
    shareBtn.style.opacity = '0.4';
    shareBtn.style.pointerEvents = 'none';
    if (copyBtn) { copyBtn.style.opacity = '0.4'; copyBtn.style.pointerEvents = 'none'; }
    document.getElementById('sharePreview').textContent = '— nothing new to send —';
  } else {
    desc.textContent = `${unsent.length} unsent session${unsent.length !== 1 ? 's' : ''} ready to share. Only these will be sent.`;
    shareBtn.style.opacity = '';
    shareBtn.style.pointerEvents = '';
    if (copyBtn) { copyBtn.style.opacity = ''; copyBtn.style.pointerEvents = ''; }
    buildSharePreview(sessions);
  }
}

function buildSharePreview(sessions) {
  const p = ap();
  const studentName = p.name || 'Unknown';
  const classCode   = p.classCode || 'No class set';
  const today = new Date().toLocaleDateString('en-AU', { day:'numeric', month:'short', year:'numeric' });

  const unsent = sessions.filter(s => !s.sent);

  // Header
  let lines = [`${studentName} | ${classCode} | ${today}`, ''];

  // Only unsent sessions go in the submission
  unsent.forEach(s => {
    const pbTag = s.isPB ? ' ★ PB' : '';
    lines.push(`  ${s.skillName} | L${s.level} | ${s.modeLabel || s.mode} | Score: ${s.score} | Acc: ${s.accuracy}% | CPM: ${s.cpm}${pbTag}`);
  });

  lines.push('');
  lines.push(`${unsent.length} session${unsent.length !== 1 ? 's' : ''}`);

  const preview = lines.join('\n');
  document.getElementById('sharePreview').textContent = preview;
  return preview;
}

/* ── MICROSOFT FORM — pre-fill field IDs from the form's prefill URL ── */
const FORM_BASE_URL    = 'https://forms.cloud.microsoft/Pages/ResponsePage.aspx?id=N7Ns2Ycaz0S2mzzsM0pMH2FahnKfjQJIu_YVhXpJk7lUMzkxQktVOExKNlJNSFQ5QVpMVFo1OEc3Ty4u';
const FORM_FIELD_NAME    = 'r87e90b847e1d47a0bcca4268c36c1b0b';
const FORM_FIELD_CLASS   = 'r06adcb36c26c4e8d87c49926e4ef0f03';
const FORM_FIELD_RESULTS = 'rdc803dec9ae34877855096d3eb02dea1';
const FORM_FIELD_DATE    = 'r6ea45923690b4806ac2a2569edfc7b1d';

function buildFormURL(previewText) {
  const p = ap();
  const today = new Date().toLocaleDateString('en-AU', { day:'numeric', month:'short', year:'numeric' });
  const url = `${FORM_BASE_URL}`
    + `&${FORM_FIELD_NAME}=${encodeURIComponent(p.name || '')}`
    + `&${FORM_FIELD_CLASS}=${encodeURIComponent(p.classCode || '')}`
    + `&${FORM_FIELD_RESULTS}=${encodeURIComponent(previewText)}`
    + `&${FORM_FIELD_DATE}=${encodeURIComponent(today)}`;
  return url;
}

function openShareForm() {
  const sessions = getTodaySessions();
  const unsent = sessions.filter(s => !s.sent);
  if (unsent.length === 0) {
    alert('All sessions have already been marked as sent!');
    return;
  }
  const p = ap();
  if (!p.classCode) {
    alert('Please set your class code first — tap ✏️ Edit profile on the home screen and ask your teacher for your class code.');
    return;
  }
  const preview = buildSharePreview(sessions);
  const url = buildFormURL(preview);
  window.open(url, '_blank');
  markAllSent();
}

function copyShareText() {
  const sessions = getTodaySessions();
  const preview = buildSharePreview(sessions);
  copyToClipboard(preview);
  const btn = document.querySelector('.btn-copy');
  btn.textContent = '✓ Copied!';
  setTimeout(() => { btn.textContent = '📋 Copy results text instead'; }, 2000);
}

function copyToClipboard(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
  } else {
    fallbackCopy(text);
  }
}

function fallbackCopy(text) {
  const ta = document.createElement('textarea');
  ta.value = text;
  ta.style.position = 'fixed'; ta.style.opacity = '0';
  document.body.appendChild(ta);
  ta.select(); document.execCommand('copy');
  document.body.removeChild(ta);
}

function markAllSent() {
  const sessions = getTodaySessions();
  sessions.forEach(s => { s.sent = true; });
  saveTodaySessions(sessions);
  goHome();       // refreshes the unsent badge
  goToday();      // re-show today screen with updated sent state
}


/* ══════════════════════════════════════════════════════════════════════════
   📊 DATA ANALYSIS  (v84, Laura) — RELEASE 1
   ──────────────────────────────────────────────────────────────────────────
   Release 1 is the FOUNDATION: the four display engines every later statistics
   skill will draw with, plus the two skills that don't need a calculation —
   Classifying Data and Frequency Tables — and one skill that reads a value
   straight off each display.

   The engines (daDotPlot, daStemHtml, daHistogram, daBoxPlot) are deliberately
   built to be driven by DATA, never by a hard-coded picture: each one takes a
   list of values (or a five-number summary) and works out its own scale. That
   is what lets Release 2 (mean / mode / median / range) re-use them without a
   rewrite — the same dot plot that asks "how many scored 4?" here will ask
   "what is the median?" there, from the identical call.

   Two conventions worth keeping:
   • Colours are CSS variables, never literals, so every display follows dark
     mode with no second code path.
   • Table text sizes read --qtbl / --qtblpad (see v83), so displays scale up
     on a desktop and stay phone-sized on a phone.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- shared SVG frame ---------- */
function daSvg(inner, h){
  return '<svg viewBox="0 0 320 ' + h + '" role="img" '
    + 'style="display:block;margin:10px auto 0;width:100%;max-width:460px;height:auto;">'
    + inner + '</svg>';
}
/* Build a frequency map over a fixed value range. */
function daCounts(values, lo, hi){
  const c = [];
  for (let v = lo; v <= hi; v++) c.push(values.filter(function(x){ return x === v; }).length);
  return c;
}
function daSum(a){ return a.reduce(function(s,x){ return s + x; }, 0); }

/* ---------- 1. DOT PLOT ----------
   values: raw list of integers.  lo..hi: the axis range (inclusive). */
function daDotPlot(values, lo, hi, axisLabel){
  const counts = daCounts(values, lo, hi);
  const maxC   = Math.max.apply(null, counts.concat([1]));
  const x0 = 26, x1 = 300, n = Math.max(1, hi - lo), step = (x1 - x0) / n;
  /* Room for: dots, the axis, the tick numbers (axisY + 18) and the axis label
     below them. The label sat only 8px under the numbers before v84.1 and
     collided with them on the middle ticks. */
  const H  = 26 + maxC * 13 + 40;   // 22px of air above the tallest stack
  const axisY = H - 46;
  let s = '<line x1="' + x0 + '" y1="' + axisY + '" x2="' + x1 + '" y2="' + axisY
        + '" stroke="var(--text)" stroke-width="2"/>';
  for (let i = 0; i <= n; i++){
    const x = x0 + i * step;
    s += '<line x1="' + x + '" y1="' + axisY + '" x2="' + x + '" y2="' + (axisY + 5)
       + '" stroke="var(--text)" stroke-width="1.5"/>'
       + '<text x="' + x + '" y="' + (axisY + 18) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
       + ' font-weight="800" font-size="11" fill="var(--text)">' + (lo + i) + '</text>';
    for (let k = 0; k < counts[i]; k++){
      s += '<circle cx="' + x + '" cy="' + (axisY - 11 - k * 13) + '" r="4.6" fill="var(--accent)"/>';
    }
  }
  if (axisLabel){
    s += '<text x="163" y="' + (H - 6) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
       + ' font-weight="800" font-size="11" fill="var(--muted)">' + axisLabel + '</text>';
  }
  return daSvg(s, H);
}

/* ---------- 2. STEM-AND-LEAF (HTML table) ----------
   Text data in a text element: an SVG would fight the leaf spacing for no gain. */
function daStemHtml(values, opts){
  /* values are always held as INTEGERS; opts.dp = 1 renders them as tenths
     (47 → 4.7). The KEY is what tells the reader the place value, so it is
     built from the same setting — "4 | 7 means 4.7" for decimal data and
     "4 | 7 means 47" for whole numbers. A stem plot without a matching key is
     ambiguous, which is why the key is never optional here. */
  const dp = (opts && opts.dp) ? opts.dp : 0;
  const fmt = function(v){ return dp ? (v / 10).toFixed(1) : String(v); };
  const sorted = values.slice().sort(function(a,b){ return a - b; });
  const stems  = {};
  sorted.forEach(function(v){
    const st = Math.floor(v / 10), lf = v % 10;
    (stems[st] = stems[st] || []).push(lf);
  });
  const keys = Object.keys(stems).map(Number).sort(function(a,b){ return a - b; });
  /* No gaps: an empty stem inside the range must still show, or the shape lies. */
  let rows = '';
  for (let st = keys[0]; st <= keys[keys.length - 1]; st++){
    rows += '<tr><td class="da-stem-st">' + st + '</td><td class="da-leaf">'
          + ((stems[st] || []).join(' ') || '&nbsp;') + '</td></tr>';
  }
  const k0 = keys[0], l0 = stems[k0][0];
  return '<table class="da-table da-stem"><tr><th>Stem</th><th>Leaf</th></tr>' + rows + '</table>'
       + '<div class="da-key">Key: ' + k0 + ' | ' + l0 + ' means ' + fmt(k0 * 10 + l0)
       + ((opts && opts.label) ? ' ' + opts.label : '') + '</div>';
}

/* ---------- 3. HISTOGRAM ----------
   bins: [{label, f}].  Works for single-value bars ('0','1','2') and for
   grouped intervals ('0–4','5–9'); only the labels differ. */
function daHistogram(bins, axisLabel, sep, bounds){
  /* sep=true draws the bars with gaps. That is not decoration: grouped
     (continuous) data is a HISTOGRAM and its bars touch, while single-value
     (discrete) data is a COLUMN GRAPH and its bars must be separated. Drawing
     discrete data as a touching histogram teaches the wrong convention.
     bounds = the n+1 class boundaries. When supplied they are printed at the
     bar CORNERS, which is how a grouped histogram is set out — the boundary
     belongs to the edge between two bars, not to the middle of one. */
  const maxF = Math.max.apply(null, bins.map(function(b){ return b.f; }).concat([1]));
  const x0 = 34, x1 = 306, top = 16, base = 150;
  const bw = (x1 - x0) / bins.length;
  const inset = sep ? bw * 0.16 : 0;   // grouped classes must TOUCH — a gap says the data is discrete
  const scale = (base - top) / maxF;
  const stepF = maxF > 8 ? 2 : 1;
  let s = '';
  for (let v = 0; v <= maxF; v += stepF){
    const y = base - v * scale;
    s += '<line x1="' + x0 + '" y1="' + y + '" x2="' + x1 + '" y2="' + y
       + '" stroke="var(--border)" stroke-width="1"/>'
       + '<text x="' + (x0 - 6) + '" y="' + (y + 4) + '" text-anchor="end" font-family="Nunito,sans-serif"'
       + ' font-weight="800" font-size="10" fill="var(--text)">' + v + '</text>';
  }
  bins.forEach(function(b, i){
    const h = b.f * scale, x = x0 + i * bw;
    if (h > 0){
      s += '<rect x="' + (x + inset) + '" y="' + (base - h) + '" width="' + (bw - 2 * inset) + '" height="' + h
         + '" fill="var(--accent)" fill-opacity="0.75" stroke="var(--accent)" stroke-width="1.5"/>';
    }
    if (!bounds){
      s += '<text x="' + (x + bw / 2) + '" y="' + (base + 15) + '" text-anchor="middle"'
         + ' font-family="Nunito,sans-serif" font-weight="800" font-size="10.5" fill="var(--text)">'
         + b.label + '</text>';
    }
  });
  if (bounds){
    bounds.forEach(function(v, i){
      const x = x0 + i * bw;
      s += '<line x1="' + x + '" y1="' + base + '" x2="' + x + '" y2="' + (base + 4)
         + '" stroke="var(--text)" stroke-width="1.5"/>'
         + '<text x="' + x + '" y="' + (base + 16) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
         + ' font-weight="800" font-size="10.5" fill="var(--text)">' + v + '</text>';
    });
  }
  s += '<line x1="' + x0 + '" y1="' + base + '" x2="' + x1 + '" y2="' + base + '" stroke="var(--text)" stroke-width="2"/>'
     + '<line x1="' + x0 + '" y1="' + top + '" x2="' + x0 + '" y2="' + base + '" stroke="var(--text)" stroke-width="2"/>'
     + '<text x="' + (x0 - 24) + '" y="' + ((top + base) / 2) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
     + ' font-weight="800" font-size="11" fill="var(--muted)" transform="rotate(-90 ' + (x0 - 24) + ' ' + ((top + base) / 2) + ')">Frequency</text>';
  if (axisLabel){
    s += '<text x="170" y="' + (base + 32) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
       + ' font-weight="800" font-size="11" fill="var(--muted)">' + axisLabel + '</text>';
  }
  return daSvg(s, base + 42);
}

/* ---------- 4. BOX PLOT ----------
   fv: {min, q1, med, q3, max}. Axis is drawn from a round lo/hi with ticks, so
   every one of the five values can actually be READ off the scale — the whole
   point of the display. */
function daBoxPlot(fv, lo, hi, tick, axisLabel){
  const x0 = 24, x1 = 300;
  const px = function(v){ return x0 + (v - lo) / (hi - lo) * (x1 - x0); };
  const boxTop = 30, boxBot = 74, mid = (boxTop + boxBot) / 2, axisY = 116;
  let s = '<line x1="' + px(fv.min) + '" y1="' + mid + '" x2="' + px(fv.q1) + '" y2="' + mid + '" stroke="var(--text)" stroke-width="2"/>'
        + '<line x1="' + px(fv.q3) + '" y1="' + mid + '" x2="' + px(fv.max) + '" y2="' + mid + '" stroke="var(--text)" stroke-width="2"/>'
        + '<line x1="' + px(fv.min) + '" y1="' + (boxTop + 6) + '" x2="' + px(fv.min) + '" y2="' + (boxBot - 6) + '" stroke="var(--text)" stroke-width="2.5"/>'
        + '<line x1="' + px(fv.max) + '" y1="' + (boxTop + 6) + '" x2="' + px(fv.max) + '" y2="' + (boxBot - 6) + '" stroke="var(--text)" stroke-width="2.5"/>'
        + '<rect x="' + px(fv.q1) + '" y="' + boxTop + '" width="' + (px(fv.q3) - px(fv.q1)) + '" height="' + (boxBot - boxTop)
        + '" fill="var(--accent)" fill-opacity="0.18" stroke="var(--accent)" stroke-width="2.5"/>'
        + '<line x1="' + px(fv.med) + '" y1="' + boxTop + '" x2="' + px(fv.med) + '" y2="' + boxBot + '" stroke="var(--accent)" stroke-width="3.5"/>'
        + '<line x1="' + x0 + '" y1="' + axisY + '" x2="' + x1 + '" y2="' + axisY + '" stroke="var(--text)" stroke-width="2"/>';
  for (let v = lo; v <= hi; v += tick){
    s += '<line x1="' + px(v) + '" y1="' + axisY + '" x2="' + px(v) + '" y2="' + (axisY + 5) + '" stroke="var(--text)" stroke-width="1.5"/>'
       + '<text x="' + px(v) + '" y="' + (axisY + 18) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
       + ' font-weight="800" font-size="10.5" fill="var(--text)">' + v + '</text>';
  }
  if (axisLabel){
    s += '<text x="163" y="' + (axisY + 34) + '" text-anchor="middle" font-family="Nunito,sans-serif"'
       + ' font-weight="800" font-size="11" fill="var(--muted)">' + axisLabel + '</text>';
  }
  return daSvg(s, axisY + 42);
}

/* ---------- 5. FREQUENCY TABLE (HTML) ---------- */
function daFreqTable(headers, rows){
  let h = '<table class="da-table"><tr>';
  headers.forEach(function(t){ h += '<th>' + t + '</th>'; });
  h += '</tr>';
  rows.forEach(function(r){
    h += '<tr><td class="da-lbl">' + r[0] + '</td>';
    for (let i = 1; i < r.length; i++) h += '<td>' + r[i] + '</td>';
    h += '</tr>';
  });
  return h + '</table>';
}

/* ══════════ CONTEXT BANK ══════════
   Shared by every Data Analysis skill so the wording stays consistent. */
const DA_CTX = [
  { who:'students in 7B', what:'goals scored',          unit:'goals',    unit1:'goal',    axis:'Goals scored' },
  { who:'students in 8A', what:'pets at home',          unit:'pets',     unit1:'pet',     axis:'Number of pets' },
  { who:'students in 9C', what:'siblings',              unit:'siblings', unit1:'sibling', axis:'Number of siblings' },
  { who:'students',       what:'books read last month', unit:'books',    unit1:'book',    axis:'Books read' },
  { who:'players',        what:'points scored',         unit:'points',   unit1:'point',   axis:'Points scored' },
];
/* "1 points" reads as a typo to a student and undermines trust in the question. */
function daUnit(ctx, n){ return n === 1 ? ctx.unit1 : ctx.unit; }
/* Grouped data is set out the way Sandringham sets it out: 150 < h ≤ 160.
   The variable letter and the units come from the context, and the ≤ on the
   UPPER end is what decides where a boundary value goes — which is the whole
   point of the level. */
const DA_GROUPS = [
  { name:'Height',       sym:'h', unit:'cm',      start:150, width:10, ceil:200 },
  { name:'Mass',         sym:'m', unit:'kg',      start:40,  width:5,  ceil:90  },
  { name:'Time taken',   sym:'t', unit:'seconds', start:10,  width:5,  ceil:60  },
  { name:'Test score',   sym:'s', unit:'%',       start:50,  width:10, ceil:100 },
  { name:'Plant height', sym:'h', unit:'cm',      start:0,   width:10, ceil:100 },
];
/* v88: a shape histogram can need up to SEVEN classes, and starting every
   context at its usual value ran the top class past what the quantity can
   physically be — "90 < s ≤ 100 … 110 < s ≤ 120" for a test score out of 100.
   Slide the start down so the last boundary lands on the context's ceiling. */
function daGroupStart(g, nClasses){
  return Math.max(0, Math.min(g.start, g.ceil - nClasses * g.width));
}
function daIntervalHtml(g, a, b){ return a + ' &lt; ' + g.sym + ' ≤ ' + b; }
function daIntervalText(g, a, b){ return a + ' < ' + g.sym + ' ≤ ' + b; }
/* Build n equal classes from a context. */
function daBuildClasses(g, n){
  const out = [];
  for (let i = 0; i < n; i++){
    const a = g.start + i * g.width;
    out.push({ a: a, b: a + g.width, html: daIntervalHtml(g, a, a + g.width), text: daIntervalText(g, a, a + g.width) });
  }
  return out;
}
/* Grouped intervals need contexts whose values are plausibly in the tens —
   "20–29 pets" is nonsense, "20–29 points" is not. */
const DA_CTX_BIG = [
  { who:'a Year 9 class',    what:'points scored',       axis:'Points scored' },
  { who:'a Year 8 class',    what:'test scores (%)',     axis:'Test score (%)' },
  { who:'the people asked',  what:'minutes of exercise', axis:'Minutes of exercise' },
  { who:'the visitors',      what:'ages of visitors',    axis:'Age (years)' },
];

/* ══════════ SKILL 1 — CLASSIFYING DATA ══════════
   Categorical splits into nominal / ordinal; numerical into discrete /
   continuous. The bank stores the FULL classification of each variable, so one
   list drives all four levels. */
const DA_VARS = [
  // nominal — labels with no natural order
  { t:'nom', v:'the colour of a student’s eyes' },
  { t:'nom', v:'a student’s favourite sport' },
  { t:'nom', v:'the brand of a family’s car' },
  { t:'nom', v:'the suburb a student lives in' },
  { t:'nom', v:'the type of pet someone owns' },
  { t:'nom', v:'a person’s blood type' },
  { t:'nom', v:'the language spoken at home' },
  // ordinal — labels that DO have a natural order
  { t:'ord', v:'T-shirt size (S, M, L, XL)' },
  { t:'ord', v:'a movie rating (1 to 5 stars)' },
  { t:'ord', v:'finishing position in a race (1st, 2nd, 3rd)' },
  { t:'ord', v:'an exam grade (A, B, C, D, E)' },
  { t:'ord', v:'spiciness of a curry (mild, medium, hot)' },
  { t:'ord', v:'level of agreement (disagree, neutral, agree)' },
  // discrete — counted in whole numbers
  { t:'dis', v:'the number of siblings a student has' },
  { t:'dis', v:'the number of pets in a household' },
  { t:'dis', v:'the number of goals scored in a match' },
  { t:'dis', v:'the number of students in a class' },
  { t:'dis', v:'the number of cars in a driveway' },
  { t:'dis', v:'the number of text messages sent in a day' },
  // continuous — measured, any value in a range
  { t:'con', v:'the height of a student, in centimetres' },
  { t:'con', v:'the mass of a dog, in kilograms' },
  { t:'con', v:'the time taken to run 100 m, in seconds' },
  { t:'con', v:'the temperature at noon, in °C' },
  { t:'con', v:'the volume of water in a bottle, in millilitres' },
  { t:'con', v:'the length of a leaf, in millimetres' },
];
const DA_TYPE_NAME = { nom:'Nominal', ord:'Ordinal', dis:'Discrete', con:'Continuous' };
const DA_WHY = {
  nom:'These are <b>names or labels</b> with no natural order, so the data is <b>categorical — nominal</b>.',
  ord:'These are labels that <b>do have a natural order</b>, so the data is <b>categorical — ordinal</b>.',
  dis:'You <b>count</b> these in whole numbers — there is nothing in between — so the data is <b>numerical — discrete</b>.',
  con:'These are <b>measured</b> and can take any value in a range (including decimals), so the data is <b>numerical — continuous</b>.',
};
function genDataClassify(el){
  el.style.fontSize = '1.1rem';
  const pool = (level === 2) ? DA_VARS.filter(function(d){ return d.t === 'nom' || d.t === 'ord'; })
             : (level === 3) ? DA_VARS.filter(function(d){ return d.t === 'dis' || d.t === 'con'; })
             : DA_VARS;
  const d = ffPick(pool);
  const big = '<div style="font-size:1.5rem;font-weight:900;margin:14px 0;line-height:1.3;">' + d.v + '</div>';
  const isCat = (d.t === 'nom' || d.t === 'ord');
  qData.workSteps = DA_WHY[d.t];
  if (level === 1){
    decSetChoice(el, '<div style="' + A_LBL + '">Is this data categorical or numerical?</div>' + big,
                 ['Categorical', 'Numerical'], isCat ? 'Categorical' : 'Numerical', true);
  } else if (level === 2){
    decSetChoice(el, '<div style="' + A_LBL + '">This data is <b>categorical</b>. Is it nominal or ordinal?</div>' + big,
                 ['Nominal', 'Ordinal'], DA_TYPE_NAME[d.t], true);
  } else if (level === 3){
    decSetChoice(el, '<div style="' + A_LBL + '">This data is <b>numerical</b>. Is it discrete or continuous?</div>' + big,
                 ['Discrete', 'Continuous'], DA_TYPE_NAME[d.t], true);
  } else {
    decSetChoice(el, '<div style="' + A_LBL + '">Classify this data as fully as you can.</div>' + big,
                 ['Nominal', 'Ordinal', 'Discrete', 'Continuous'], DA_TYPE_NAME[d.t], true);
  }
}

/* ══════════ SKILL 2 — FREQUENCY TABLES ══════════ */
const DA_CATS_BANK = [
  { q:'favourite sport',  items:['Soccer','Netball','Cricket','AFL'] },
  { q:'favourite colour', items:['Blue','Green','Red','Yellow'] },
  { q:'how they travel to school', items:['Walk','Bus','Car','Bike'] },
  { q:'favourite fruit',  items:['Apple','Banana','Mango','Pear'] },
  { q:'type of pet',      items:['Dog','Cat','Fish','Bird'] },
];
function genFreqTables(el){
  el.style.fontSize = '1.05rem';

  if (level === 1){                       // categorical table — read and total
    const b = ffPick(DA_CATS_BANK);
    const f = b.items.map(function(){ return rr(2, 12); });
    const total = daSum(f);
    const rows = b.items.map(function(it, i){ return [it, f[i]]; });
    const tbl = daFreqTable(['Category', 'Frequency'], rows);
    const kind = ri(3);
    let prompt;
    if (kind === 0){
      const i = ri(b.items.length);
      qData.ans = f[i];
      prompt = 'How many chose <b>' + b.items[i] + '</b>?';
      qData.workSteps = 'Find the <b>' + b.items[i] + '</b> row and read its frequency: <b>' + f[i] + '</b>.';
    } else if (kind === 1){
      qData.ans = total;
      prompt = 'How many people were surveyed altogether?';
      qData.workSteps = 'The total is the sum of every frequency: ' + f.join(' + ') + ' = <b>' + total + '</b>.';
    } else {
      let i = ri(b.items.length), j = ri(b.items.length);
      if (f[i] < f[j]) { const t = i; i = j; j = t; }
      if (i === j) { j = (j + 1) % b.items.length; if (f[i] < f[j]) { const t = i; i = j; j = t; } }
      qData.ans = f[i] - f[j];
      prompt = 'How many more chose <b>' + b.items[i] + '</b> than <b>' + b.items[j] + '</b>?';
      qData.workSteps = f[i] + ' − ' + f[j] + ' = <b>' + (f[i] - f[j]) + '</b>.';
    }
    el.innerHTML = '<div style="' + A_LBL + '">' + b.items.length + ' options were offered for ' + b.q + '.<br>' + prompt + '</div>' + tbl;
    return;
  }

  if (level === 2){                       // build the frequency from a raw list
    const ctx = ffPick(DA_CTX);
    const lo = 0, hi = rr(4, 6);
    const vals = [];
    const n = rr(12, 18);
    for (let i = 0; i < n; i++) vals.push(rr(lo, hi));
    const target = rr(lo, hi);
    const count = vals.filter(function(v){ return v === target; }).length;
    const asTotal = Math.random() < 0.3;
    qData.ans = asTotal ? vals.length : count;
    qData.workSteps = asTotal
      ? 'Count every value in the list: <b>' + vals.length + '</b>.'
      : 'Count how many <b>' + target + '</b>s are in the list: <b>' + count + '</b>.';
    const listHtml = '<div style="font-size:1.25rem;font-weight:900;line-height:1.7;margin:12px 4px 0;">'
      + vals.join(' &nbsp; ') + '</div>';
    el.innerHTML = '<div style="' + A_LBL + '">' + ctx.what.charAt(0).toUpperCase() + ctx.what.slice(1)
      + ' for ' + ctx.who + ':<br>'
      + (asTotal ? 'How many values are in the data set?' : 'What is the <b>frequency of ' + target + '</b>?')
      + '</div>' + listHtml;
    return;
  }

  if (level === 3){                       // grouped intervals — which class?
    const g = ffPick(DA_GROUPS);
    const cls = daBuildClasses(g, 4);
    const bi = ri(cls.length);
    /* A third of the questions land exactly ON an upper boundary. That is the
       point of the notation: 160 belongs to 150 < h ≤ 160, NOT to the class
       above it. A level that never tests the boundary never teaches it. */
    const onBoundary = Math.random() < 0.34;
    const v = onBoundary ? cls[bi].b : rr(cls[bi].a + 1, cls[bi].b - 1);
    qData.workSteps = onBoundary
      ? '<b>' + v + '</b> sits on a boundary. The ≤ is on the upper end, so ' + v
        + ' belongs to <b>' + cls[bi].text + '</b> — not to the class above it.'
      : v + ' is between ' + cls[bi].a + ' and ' + cls[bi].b + ', so it belongs to <b>' + cls[bi].text + '</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">' + g.name + ' is grouped into these class intervals.<br>'
      + 'Which interval does <b>' + v + ' ' + g.unit + '</b> belong to?</div>'
      + daFreqTable([g.name + ', ' + g.sym + ' (' + g.unit + ')', 'Frequency'],
                    cls.map(function(c){ return [c.html, rr(2, 9)]; })),
      cls.map(function(c){ return c.html; }), cls[bi].html, true);
    return;
  }

  // Level 4 — percentage frequency.
  // Totals are restricted to 20, 25 and 50 because those are exactly the totals
  // for which EVERY whole-number count gives a whole-number percentage
  // (×5, ×4, ×2). 40 was rejected: it needs even counts to stay exact, and a
  // question whose answer is 12.5% is a different skill.
  const b = ffPick(DA_CATS_BANK);
  const total = ffPick([20, 25, 50]);
  const k = b.items.length;
  const f = [];
  let left = total;
  for (let j = 0; j < k - 1; j++){
    const remainingSlots = k - 1 - j;          // each still needs at least 1
    const hi = Math.max(1, Math.min(left - remainingSlots, Math.round(total * 0.45)));
    const pick = rr(1, hi);
    f.push(pick); left -= pick;
  }
  f.push(left);
  const i = ri(k);
  // Integer maths, then round: 18/50*100 is 36.000000000000004 in floating point,
  // and a stray decimal would make a correct answer mark wrong.
  const pct = Math.round(f[i] * 100 / total);
  qData.ans = pct;
  qData.workSteps = '<b>' + f[i] + '</b> out of <b>' + total + '</b> → ' + f[i] + ' ÷ ' + total
    + ' × 100 = <b>' + pct + '%</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + total + ' people were asked about their ' + b.q + '.<br>'
    + 'What <b>percentage</b> chose <b>' + b.items[i] + '</b>?</div>'
    + daFreqTable(['Category', 'Frequency'], b.items.map(function(it, n){ return [it, f[n]]; }));
}

/* ══════════ SKILL 3 — READING DATA DISPLAYS ══════════
   One level per display, so every engine above is exercised by students in
   Release 1 rather than sitting untested until Release 2. */
function genDataRead(el){
  el.style.fontSize = '1.05rem';

  if (level === 1){                       // dot plot
    const ctx = ffPick(DA_CTX);
    const lo = 0, hi = rr(4, 6), vals = [];
    const n = rr(10, 16);
    for (let i = 0; i < n; i++) vals.push(rr(lo, hi));
    const counts = daCounts(vals, lo, hi);
    const asTotal = Math.random() < 0.35;
    let prompt;
    if (asTotal){
      qData.ans = vals.length;
      prompt = 'How many ' + ctx.who + ' were surveyed altogether?';
      qData.workSteps = 'Count every dot: ' + counts.join(' + ') + ' = <b>' + vals.length + '</b>.';
    } else {
      let t = rr(lo, hi), guard = 0;
      while (counts[t - lo] === 0 && guard++ < 20) t = rr(lo, hi);
      qData.ans = counts[t - lo];
      prompt = 'How many ' + ctx.who + ' had <b>' + t + '</b> ' + daUnit(ctx, t) + '?';
      qData.workSteps = 'Count the dots above <b>' + t + '</b>: <b>' + counts[t - lo] + '</b>.';
    }
    el.innerHTML = '<div style="' + A_LBL + '">' + ctx.axis + ' for ' + ctx.who + '.<br>' + prompt + '</div>'
      + daDotPlot(vals, lo, hi, ctx.axis);
    return;
  }

  if (level === 2){                       // stem-and-leaf
    /* Half the questions use one-decimal-place data (4.7 kg), where the KEY is
       the only thing that tells you the place value — which is exactly what a
       key is for. Whole-number and decimal versions share one engine. */
    const dp = Math.random() < 0.5 ? 1 : 0;
    const unitLbl = dp ? ffPick(['kg', 'cm', 'seconds', 'litres']) : '';
    const base = dp ? ffPick([20, 30, 40, 50]) : ffPick([10, 20, 30, 40]);
    const vals = [];
    const n = rr(11, 16);
    for (let i = 0; i < n; i++) vals.push(base + rr(0, 29));
    const sorted = vals.slice().sort(function(a, b){ return a - b; });
    const show = function(v){ return dp ? (v / 10).toFixed(1) : String(v); };
    const val  = function(v){ return dp ? Math.round(v) / 10 : v; };
    const kind = ri(4);
    let prompt;
    if (kind === 0){
      qData.ans = vals.length;
      prompt = 'How many values are in the data set?';
      qData.workSteps = 'Count every leaf — one leaf is one value: <b>' + vals.length + '</b>.';
    } else if (kind === 1){
      qData.ans = val(sorted[sorted.length - 1]);
      prompt = 'What is the <b>largest</b> value?';
      qData.workSteps = 'The largest value is the last leaf on the bottom stem. Read it with the key: <b>'
        + show(sorted[sorted.length - 1]) + '</b>.';
    } else if (kind === 2){
      qData.ans = val(sorted[0]);
      prompt = 'What is the <b>smallest</b> value?';
      qData.workSteps = 'The smallest value is the first leaf on the top stem. Read it with the key: <b>'
        + show(sorted[0]) + '</b>.';
    } else {
      const stems = {};
      sorted.forEach(function(v){ const st = Math.floor(v / 10); stems[st] = (stems[st] || 0) + 1; });
      const keys = Object.keys(stems).map(Number);
      const st = keys[ri(keys.length)];
      qData.ans = stems[st];
      prompt = dp
        ? 'How many values are on the <b>' + st + '</b> stem (that is, ' + (st) + '.0 to ' + (st) + '.9)?'
        : 'How many values are in the <b>' + (st * 10) + 's</b>?';
      qData.workSteps = 'Count the leaves on the <b>' + st + '</b> stem: <b>' + stems[st] + '</b>.';
    }
    el.innerHTML = '<div style="' + A_LBL + '">' + (dp ? 'The data is measured in ' + unitLbl + '.<br>' : '')
      + prompt + '</div>' + daStemHtml(vals, { dp: dp, label: unitLbl });
    return;
  }

  if (level === 3){                       // histogram — single-value OR grouped
    const grouped = Math.random() < 0.5;
    const ctx = ffPick(DA_CTX);
    let bins, prompt;
    let g = null, bounds = null;
    if (grouped){
      g = ffPick(DA_GROUPS);
      const cls = daBuildClasses(g, 5);
      bins = cls.map(function(c){ return { label: c.html, text: c.text, f: rr(1, 9) }; });
      bounds = cls.map(function(c){ return c.a; }).concat([cls[cls.length - 1].b]);
    } else {
      bins = [];
      for (let v = 0; v <= 4; v++) bins.push({ label: String(v), f: rr(0, 8) });
    }
    const total = daSum(bins.map(function(b){ return b.f; }));
    const asTotal = Math.random() < 0.35;
    if (asTotal){
      qData.ans = total;
      prompt = 'How many values are in the data set altogether?';
      qData.workSteps = 'Add every bar’s frequency: ' + bins.map(function(b){ return b.f; }).join(' + ')
        + ' = <b>' + total + '</b>.';
    } else {
      let bi = ri(bins.length), guard = 0;
      while (bins[bi].f === 0 && guard++ < 12) bi = ri(bins.length);
      qData.ans = bins[bi].f;
      prompt = grouped
        ? 'What is the frequency of the <b>' + bins[bi].label + '</b> group?'
        : 'How many had <b>' + bins[bi].label + '</b> ' + daUnit(ctx, Number(bins[bi].label)) + '?';
      qData.workSteps = 'Read the height of the <b>' + bins[bi].label + '</b> bar against the frequency axis: <b>'
        + bins[bi].f + '</b>.';
    }
    el.innerHTML = '<div style="' + A_LBL + '">'
      + (grouped ? g.name + ' (' + g.unit + ') for a sample.' : ctx.axis + ' for ' + ctx.who + '.')
      + '<br>' + prompt + '</div>'
      + daHistogram(bins, grouped ? (g.name + ', ' + g.sym + ' (' + g.unit + ')') : ctx.axis, !grouped, bounds);
    return;
  }

  // Level 4 — box plot: read one of the five-number summary values.
  // Every value in the summary is placed ON a tick mark. A box plot whose median
  // sits at 33 on a scale ticked every 10 is unreadable — the student would be
  // guessing, and a fluency drill must not reward guessing. Choosing the tick
  // spacing first, then five distinct multiples of it, makes every question
  // answerable exactly from the picture.
  const tick = ffPick([2, 5, 10]);
  const steps = rr(6, 8);                    // ticks across the axis
  const lo = 0, hi = tick * steps;
  const cand = [];
  for (let v = lo + tick; v <= hi - tick; v += tick) cand.push(v);
  const picks = shuffleArr(cand.slice()).slice(0, 5).sort(function(a, b){ return a - b; });
  const fv = { min: picks[0], q1: picks[1], med: picks[2], q3: picks[3], max: picks[4] };
  const parts = [
    { k:'min', label:'minimum',              why:'the left-hand whisker end' },
    { k:'q1',  label:'lower quartile (Q1)',  why:'the left-hand edge of the box' },
    { k:'med', label:'median',               why:'the line inside the box' },
    { k:'q3',  label:'upper quartile (Q3)',  why:'the right-hand edge of the box' },
    { k:'max', label:'maximum',              why:'the right-hand whisker end' },
  ];
  const p = ffPick(parts);
  qData.ans = fv[p.k];
  qData.workSteps = 'The ' + p.label + ' is ' + p.why + '. Read straight down to the scale: <b>' + fv[p.k] + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">What is the <b>' + p.label + '</b> of this data?</div>'
    + daBoxPlot(fv, lo, hi, tick, 'Score');
}

/* ═══════════════════════════════════════════════
   BOOT
═══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   📊 DATA ANALYSIS — RELEASE 2 (v87, Laura)
   Mean · Mode · Median · Range, each one level per display.
   ──────────────────────────────────────────────────────────────────────────
   Every level here DRAWS with a Release 1 engine (daDotPlot, daStemHtml,
   daFreqTable, daHistogram, daBoxPlot) and adds only the question. That was
   the point of building the displays first — there is no second copy of the
   drawing code to keep in step.

   The recurring design problem in this release is that a random data set gives
   an ugly answer. A fluency drill must not hand a Year 8 student a mean of
   7.3333, so the sets are CONSTRUCTED to land on a clean answer:
     • mean levels retry until the total divides exactly by the count;
     • mode levels retry until the mode is UNIQUE (a bimodal set has no single
       right answer, so it must never be generated);
     • median levels choose the parity of n deliberately — odd for the middle
       value, even for the halfway point (which may legitimately end in .5);
     • the grouped-estimate level is the one place a decimal is expected, and
       it says "to 1 decimal place" and accepts the unrounded value too.
   ══════════════════════════════════════════════════════════════════════════ */

function daSorted(v){ return v.slice().sort(function(a,b){ return a - b; }); }
function daMeanOf(v){ return daSum(v) / v.length; }
function daMedianOf(v){
  const s = daSorted(v), n = s.length;
  return n % 2 ? s[(n - 1) / 2] : (s[n / 2 - 1] + s[n / 2]) / 2;
}
function daRangeOf(v){ const s = daSorted(v); return s[s.length - 1] - s[0]; }
/* Returns the mode only when it is UNIQUE; null for a tie (bimodal). */
function daModeOf(v){
  const c = {};
  v.forEach(function(x){ c[x] = (c[x] || 0) + 1; });
  let best = -1, who = null, ties = 0;
  Object.keys(c).forEach(function(k){
    if (c[k] > best){ best = c[k]; who = Number(k); ties = 1; }
    else if (c[k] === best) ties++;
  });
  return ties === 1 ? who : null;
}
/* A list of n values in [lo,hi] whose MEAN is a whole number. */
function daWholeMeanList(n, lo, hi){
  for (let t = 0; t < 300; t++){
    const v = [];
    for (let i = 0; i < n; i++) v.push(rr(lo, hi));
    const need = (n - (daSum(v) % n)) % n;
    if (need === 0) return v;
    for (let i = 0; i < n; i++){ if (v[i] + need <= hi){ v[i] += need; return v; } }
  }
  const v = []; for (let i = 0; i < n; i++) v.push(lo);
  return v;
}
/* A list with a single clear mode. */
function daUniqueModeList(n, lo, hi){
  for (let t = 0; t < 300; t++){
    const v = [];
    for (let i = 0; i < n; i++) v.push(rr(lo, hi));
    if (daModeOf(v) !== null) return v;
  }
  const v = []; for (let i = 0; i < n; i++) v.push(lo + (i % 2));
  v.push(lo); return v;
}
/* Frequency table rows [{x, f}] over consecutive values, with options:
   opts.wholeMean → total divides exactly · opts.uniqueMode → one tallest bar
   opts.endsUsed  → the first and last value both have f ≥ 1 (needed for range) */
function daFreqRows(lo, hi, opts){
  opts = opts || {};
  for (let t = 0; t < 400; t++){
    const rows = [];
    for (let x = lo; x <= hi; x++) rows.push({ x: x, f: rr(opts.minF != null ? opts.minF : 0, 8) });
    if (opts.endsUsed){ if (rows[0].f === 0) rows[0].f = rr(1, 6);
                        if (rows[rows.length - 1].f === 0) rows[rows.length - 1].f = rr(1, 6); }
    const N = daSum(rows.map(function(r){ return r.f; }));
    if (N < 8) continue;
    const vals = [];
    rows.forEach(function(r){ for (let i = 0; i < r.f; i++) vals.push(r.x); });
    if (opts.wholeMean && (daSum(vals) % vals.length !== 0)) continue;
    if (opts.uniqueMode && daModeOf(vals) === null) continue;
    if (opts.evenN && vals.length % 2 !== 0) continue;
    if (opts.oddN && vals.length % 2 === 0) continue;
    return { rows: rows, vals: vals };
  }
  const rows = []; for (let x = lo; x <= hi; x++) rows.push({ x: x, f: (x === lo ? 3 : 1) });
  const vals = []; rows.forEach(function(r){ for (let i = 0; i < r.f; i++) vals.push(r.x); });
  return { rows: rows, vals: vals };
}
function daFreqTableFor(ctx, rows){
  return daFreqTable([ctx.axis, 'Frequency'], rows.map(function(r){ return [r.x, r.f]; }));
}
function daHistoFor(ctx, rows){
  return daHistogram(rows.map(function(r){ return { label: String(r.x), f: r.f }; }), ctx.axis, true);
}
function daListHtml(vals){
  return '<div style="font-size:1.3rem;font-weight:900;line-height:1.7;margin:12px 4px 0;">'
    + vals.join(' &nbsp; ') + '</div>';
}
/* A stem-plot data set in one decade band, with the same constraints. */
function daStemSet(n, opts){
  opts = opts || {};
  const base = ffPick([10, 20, 30, 40, 50]);
  for (let t = 0; t < 400; t++){
    const v = [];
    for (let i = 0; i < n; i++) v.push(base + rr(0, 29));
    if (opts.wholeMean && (daSum(v) % n !== 0)) continue;
    if (opts.uniqueMode && daModeOf(v) === null) continue;
    return v;
  }
  const v = []; for (let i = 0; i < n; i++) v.push(base + (i % 3));
  return v;
}
/* Grouped classes with frequencies, for the estimate-the-mean / modal-class
   levels. Width 10 only, so every midpoint is a whole number and the estimate
   is arithmetic a student can actually do in their head. */
function daGroupedSet(opts){
  opts = opts || {};
  const g = ffPick(DA_GROUPS.filter(function(x){ return x.width === 10; }));
  for (let t = 0; t < 300; t++){
    const cls = daBuildClasses(g, 4).map(function(c){
      return { a: c.a, b: c.b, html: c.html, text: c.text, mid: (c.a + c.b) / 2, f: rr(1, 9) };
    });
    if (opts.uniqueMode){
      const mx = Math.max.apply(null, cls.map(function(c){ return c.f; }));
      if (cls.filter(function(c){ return c.f === mx; }).length !== 1) continue;
    }
    return { g: g, cls: cls };
  }
  const cls = daBuildClasses(g, 4).map(function(c, i){
    return { a: c.a, b: c.b, html: c.html, text: c.text, mid: (c.a + c.b) / 2, f: i === 0 ? 5 : 2 };
  });
  return { g: g, cls: cls };
}
function daGroupedTable(g, cls){
  return daFreqTable([g.name + ', ' + g.sym + ' (' + g.unit + ')', 'Frequency'],
                     cls.map(function(c){ return [c.html, c.f]; }));
}

/* ═════════ MEAN ═════════ */
function genDataMean(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);
  const say = function(prompt, body){
    el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>' + body;
  };
  const workList = function(vals){
    return 'mean = total ÷ how many = ' + daSum(vals) + ' ÷ ' + vals.length
      + ' = <b>' + (daSum(vals) / vals.length) + '</b>.';
  };

  if (level === 1){
    const vals = daWholeMeanList(rr(5, 8), 1, 20);
    qData.ans = daMeanOf(vals);
    qData.workSteps = 'Add every value, then divide by how many there are: ' + workList(vals);
    say('Find the <b>mean</b> of this data set.', daListHtml(vals));
    return;
  }
  if (level === 2){
    const hi = rr(4, 6);
    const vals = daWholeMeanList(rr(8, 14), 0, hi);
    qData.ans = daMeanOf(vals);
    qData.workSteps = 'Each dot is one value. ' + workList(vals);
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>mean</b>.', daDotPlot(vals, 0, hi, ctx.axis));
    return;
  }
  if (level === 3){
    const vals = daStemSet(rr(8, 12), { wholeMean: true });
    qData.ans = daMeanOf(vals);
    qData.workSteps = 'Read every value off the plot (stem × 10 + leaf), then ' + workList(vals);
    say('Find the <b>mean</b> of the data in this stem-and-leaf plot.', daStemHtml(vals));
    return;
  }
  if (level === 4 || level === 5){
    const set = daFreqRows(0, rr(4, 5), { wholeMean: true, minF: level === 4 ? 1 : 0, endsUsed: true });
    qData.ans = daMeanOf(set.vals);
    const parts = set.rows.filter(function(r){ return r.f > 0; })
      .map(function(r){ return r.x + '×' + r.f; }).join(' + ');
    qData.workSteps = 'Multiply each value by its frequency, add those up, then divide by the total '
      + 'frequency:<br>' + parts + ' = ' + daSum(set.vals) + ', and ' + daSum(set.vals) + ' ÷ '
      + set.vals.length + ' = <b>' + daMeanOf(set.vals) + '</b>.';
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>mean</b>.',
        level === 4 ? daFreqTableFor(ctx, set.rows) : daHistoFor(ctx, set.rows));
    return;
  }
  /* Level 6 — ESTIMATE the mean of grouped data using class midpoints. */
  const G = daGroupedSet({});
  const N = daSum(G.cls.map(function(c){ return c.f; }));
  const tot = daSum(G.cls.map(function(c){ return c.mid * c.f; }));
  const exact = tot / N;
  qData.ans = Math.round(exact * 10) / 10;
  /* The exact value is accepted as well as the correctly rounded one — a
     student who does not round is not wrong about the statistics. */
  qData.ansTol = 0.06;
  qData.workSteps = 'Grouped data has lost the individual values, so use the MIDPOINT of each class '
    + 'as its value.<br>Midpoints: ' + G.cls.map(function(c){ return c.mid; }).join(', ')
    + '.<br>Σ(f × midpoint) = ' + G.cls.map(function(c){ return c.f + '×' + c.mid; }).join(' + ')
    + ' = ' + tot + ', and Σf = ' + N + '.<br>Estimated mean = ' + tot + ' ÷ ' + N + ' = <b>'
    + (Math.round(exact * 100) / 100) + '</b> ≈ <b>' + qData.ans + '</b>.';
  say(G.g.name + ' (' + G.g.unit + ') for a sample.<br><b>Estimate</b> the mean using the class '
    + 'midpoints. Give your answer to 1 decimal place.', daGroupedTable(G.g, G.cls));
}

/* ═════════ MODE ═════════ */
function genDataMode(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);
  const say = function(prompt, body){
    el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>' + body;
  };
  if (level === 1){
    const vals = daUniqueModeList(rr(7, 10), 1, 9);
    qData.ans = daModeOf(vals);
    qData.workSteps = 'The mode is the value that appears most often: <b>' + qData.ans + '</b>.';
    say('Find the <b>mode</b> of this data set.', daListHtml(vals));
    return;
  }
  if (level === 2){
    const hi = rr(4, 6);
    const vals = daUniqueModeList(rr(9, 14), 0, hi);
    qData.ans = daModeOf(vals);
    qData.workSteps = 'The mode is the value with the TALLEST stack of dots: <b>' + qData.ans + '</b>.';
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>mode</b>.', daDotPlot(vals, 0, hi, ctx.axis));
    return;
  }
  if (level === 3){
    const vals = daStemSet(rr(10, 14), { uniqueMode: true });
    qData.ans = daModeOf(vals);
    qData.workSteps = 'The mode is the value that appears most often — look for a repeated leaf on the '
      + 'same stem: <b>' + qData.ans + '</b>.';
    say('Find the <b>mode</b> of the data in this stem-and-leaf plot.', daStemHtml(vals));
    return;
  }
  if (level === 4 || level === 5){
    const set = daFreqRows(0, rr(4, 5), { uniqueMode: true, minF: level === 4 ? 1 : 0, endsUsed: true });
    qData.ans = daModeOf(set.vals);
    qData.workSteps = level === 4
      ? 'The mode is the value with the HIGHEST frequency — not the frequency itself: <b>'
        + qData.ans + '</b>.'
      : 'The mode is the value under the TALLEST bar — not the height of the bar: <b>'
        + qData.ans + '</b>.';
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>mode</b>.',
        level === 4 ? daFreqTableFor(ctx, set.rows) : daHistoFor(ctx, set.rows));
    return;
  }
  /* Level 6 — MODAL CLASS. Grouped data has no single mode, only a modal class. */
  const G = daGroupedSet({ uniqueMode: true });
  const top = G.cls.reduce(function(a, b){ return b.f > a.f ? b : a; }, G.cls[0]);
  qData.workSteps = 'Grouped data has lost the individual values, so there is no single mode — the '
    + 'answer is the <b>modal class</b>, the interval with the highest frequency: <b>' + top.text
    + '</b> (frequency ' + top.f + ').';
  decSetChoice(el, '<div style="' + A_LBL + '">' + G.g.name + ' (' + G.g.unit + ') for a sample.<br>'
    + 'Which is the <b>modal class</b>?</div>' + daGroupedTable(G.g, G.cls),
    G.cls.map(function(c){ return c.html; }), top.html, true);
}

/* ═════════ MEDIAN ═════════ */
function genDataMedian(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);
  const say = function(prompt, body){
    el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>' + body;
  };
  const workOdd = function(vals){
    const s = daSorted(vals);
    return 'Put the values in order: ' + s.join(', ') + '.<br>There are ' + s.length
      + ' values, so the median is the middle one — the ' + ((s.length + 1) / 2)
      + 'th: <b>' + daMedianOf(vals) + '</b>.';
  };
  const workEven = function(vals){
    const s = daSorted(vals), n = s.length;
    return 'Put the values in order: ' + s.join(', ') + '.<br>There are ' + n
      + ' values — an even number — so the median is halfway between the ' + (n / 2) + 'th and '
      + (n / 2 + 1) + 'th: (' + s[n / 2 - 1] + ' + ' + s[n / 2] + ') ÷ 2 = <b>'
      + daMedianOf(vals) + '</b>.';
  };

  if (level === 1){
    const vals = []; const n = ffPick([5, 7, 9]);
    for (let i = 0; i < n; i++) vals.push(rr(1, 20));
    qData.ans = daMedianOf(vals);
    qData.workSteps = workOdd(vals);
    say('Find the <b>median</b> of this data set.', daListHtml(vals));
    return;
  }
  if (level === 2){
    const vals = []; const n = ffPick([6, 8, 10]);
    for (let i = 0; i < n; i++) vals.push(rr(1, 20));
    qData.ans = daMedianOf(vals);
    qData.workSteps = workEven(vals);
    say('Find the <b>median</b> of this data set.<br>There is an even number of values — the answer '
      + 'may end in .5.', daListHtml(vals));
    return;
  }
  if (level === 3){
    const hi = rr(4, 6); const n = rr(9, 15); const vals = [];
    for (let i = 0; i < n; i++) vals.push(rr(0, hi));
    qData.ans = daMedianOf(vals);
    qData.workSteps = 'A dot plot is already in order — count in from the ends to the middle dot. '
      + (n % 2 ? workOdd(vals) : workEven(vals));
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>median</b>.', daDotPlot(vals, 0, hi, ctx.axis));
    return;
  }
  if (level === 4){
    const n = rr(9, 13); const vals = daStemSet(n, {});
    qData.ans = daMedianOf(vals);
    qData.workSteps = 'A stem-and-leaf plot is already in order — count in to the middle. '
      + (n % 2 ? workOdd(vals) : workEven(vals));
    say('Find the <b>median</b> of the data in this stem-and-leaf plot.', daStemHtml(vals));
    return;
  }
  if (level === 5){
    const set = daFreqRows(0, rr(4, 5), { minF: 1 });
    qData.ans = daMedianOf(set.vals);
    qData.workSteps = 'The frequencies add to ' + set.vals.length + ', so the median is the '
      + (set.vals.length % 2 ? ((set.vals.length + 1) / 2) + 'th value'
                             : 'halfway point between the ' + (set.vals.length / 2) + 'th and '
                               + (set.vals.length / 2 + 1) + 'th values')
      + '. Count down the frequency column until you reach it: <b>' + qData.ans + '</b>.';
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>median</b>.', daFreqTableFor(ctx, set.rows));
    return;
  }
  const set = daFreqRows(0, rr(4, 5), { endsUsed: true });
  qData.ans = daMedianOf(set.vals);
  qData.workSteps = 'Read each bar’s height as its frequency (total ' + set.vals.length
    + '), then count in to the middle value: <b>' + qData.ans + '</b>.';
  say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>median</b>.', daHistoFor(ctx, set.rows));
}

/* ═════════ RANGE ═════════ */
function genDataRange(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);
  const say = function(prompt, body){
    el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>' + body;
  };
  const work = function(vals){
    const s = daSorted(vals);
    return 'range = largest − smallest = ' + s[s.length - 1] + ' − ' + s[0] + ' = <b>'
      + (s[s.length - 1] - s[0]) + '</b>.';
  };
  if (level === 1){
    const vals = []; const n = rr(6, 9);
    for (let i = 0; i < n; i++) vals.push(rr(1, 40));
    qData.ans = daRangeOf(vals);
    qData.workSteps = work(vals);
    say('Find the <b>range</b> of this data set.', daListHtml(vals));
    return;
  }
  if (level === 2){
    const hi = rr(5, 7); const n = rr(9, 14); const vals = [];
    for (let i = 0; i < n; i++) vals.push(rr(0, hi));
    if (vals.indexOf(Math.min.apply(null, vals)) < 0) vals.push(0);
    qData.ans = daRangeOf(vals);
    qData.workSteps = 'Use the FIRST and LAST values that have a dot above them — not the ends of the '
      + 'number line. ' + work(vals);
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>range</b>.', daDotPlot(vals, 0, hi, ctx.axis));
    return;
  }
  if (level === 3){
    const vals = daStemSet(rr(9, 13), {});
    qData.ans = daRangeOf(vals);
    qData.workSteps = 'The smallest value is the first leaf on the top stem and the largest is the last '
      + 'leaf on the bottom stem. ' + work(vals);
    say('Find the <b>range</b> of the data in this stem-and-leaf plot.', daStemHtml(vals));
    return;
  }
  if (level === 4 || level === 5){
    const set = daFreqRows(0, rr(5, 7), { endsUsed: false, minF: 0 });
    /* Range needs a value at each end that actually occurs, and it is a better
       question when the ends are NOT the ends of the table — that is the error
       this level exists to catch. */
    const used = set.rows.filter(function(r){ return r.f > 0; });
    if (used.length < 2){ set.rows[0].f = 2; set.rows[set.rows.length - 1].f = 3; }
    const vals2 = [];
    set.rows.forEach(function(r){ for (let i = 0; i < r.f; i++) vals2.push(r.x); });
    qData.ans = daRangeOf(vals2);
    qData.workSteps = (level === 4
        ? 'Use only the values whose frequency is NOT zero. '
        : 'Use only the values that actually have a bar. ') + work(vals2);
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>range</b>.',
        level === 4 ? daFreqTableFor(ctx, set.rows) : daHistoFor(ctx, set.rows));
    return;
  }
  /* Level 6 — range from a box plot: max − min, both read off the scale. */
  const tick = ffPick([2, 5, 10]);
  const steps = rr(6, 8);
  const lo = 0, hi = tick * steps;
  const cand = [];
  for (let v = lo + tick; v <= hi - tick; v += tick) cand.push(v);
  const picks = shuffleArr(cand.slice()).slice(0, 5).sort(function(a, b){ return a - b; });
  const fv = { min: picks[0], q1: picks[1], med: picks[2], q3: picks[3], max: picks[4] };
  qData.ans = fv.max - fv.min;
  qData.workSteps = 'The whiskers mark the smallest and largest values: range = ' + fv.max + ' − '
    + fv.min + ' = <b>' + (fv.max - fv.min) + '</b>. (The box shows the middle half, not the range.)';
  say('Find the <b>range</b> of the data in this box plot.', daBoxPlot(fv, lo, hi, tick, 'Score'));
}


/* ══════════════════════════════════════════════════════════════════════════
   📊 DATA ANALYSIS — RELEASE 3 (v88, Laura)
   Shape of Distribution · Outliers and Fences
   ──────────────────────────────────────────────────────────────────────────
   Shape is the first skill in the category whose answer is a JUDGEMENT rather
   than a calculation, so the whole design problem is making sure exactly one
   option is defensible. Random data will not do that — a random dot plot is
   usually "lumpy", not one of four named shapes. So every shape is generated
   from a HAND-CHECKED count pattern:

     symmetric  strictly single-peaked and exactly mirrored
     pos. skew  single peak at the LOW end with a monotone tail to the right
     neg. skew  the mirror image of a positive-skew pattern
     bimodal    two clear humps separated by an EMPTY class, and the two peaks
                are deliberately UNEQUAL so "symmetric" is not also true

   That last point is the subtle one. A textbook bimodal picture is often drawn
   symmetrically, which makes two options correct at once. Unequal peaks plus a
   zero trough leaves "bimodal" as the only defensible answer, and the worked
   step says which feature decides it.

   Per Laura: bimodal is offered ONLY for dot plots and histograms — the
   displays where a student can actually see two humps. Stem plots and box
   plots keep the three-way choice.
   ══════════════════════════════════════════════════════════════════════════ */

const DA_SHAPE_NAME = {
  sym: 'Symmetric', pos: 'Positively skewed', neg: 'Negatively skewed', bi: 'Bimodal',
};
/* Count patterns, low value → high value. Every one hand-checked. */
const DA_SHAPE_PATTERNS = {
  sym: [[1,3,5,3,1], [1,2,4,6,4,2,1], [2,3,6,3,2], [1,3,7,3,1], [2,5,8,5,2]],
  pos: [[8,5,3,2,1], [7,6,4,2,1,1], [9,6,3,2,1], [6,5,3,2,1,1], [8,7,4,2,1]],
  bi:  [[4,6,1,0,1,5,3], [3,5,1,0,2,6,4], [5,6,2,0,1,4,3], [6,4,1,0,3,5,2]],
};
function daShapeCounts(kind){
  if (kind === 'neg') return DA_SHAPE_PATTERNS.pos[ri(DA_SHAPE_PATTERNS.pos.length)].slice().reverse();
  return DA_SHAPE_PATTERNS[kind][ri(DA_SHAPE_PATTERNS[kind].length)].slice();
}
const DA_SHAPE_WHY = {
  sym: 'The picture has ONE peak in the middle and the two sides mirror each other, so the '
     + 'distribution is <b>symmetric</b>.',
  pos: 'There is one peak at the LOW end and a long tail stretching to the RIGHT (towards the higher '
     + 'values), so the distribution is <b>positively skewed</b>. The tail points the way the skew is named.',
  neg: 'There is one peak at the HIGH end and a long tail stretching to the LEFT (towards the lower '
     + 'values), so the distribution is <b>negatively skewed</b>. The tail points the way the skew is named.',
  bi:  'There are TWO separate humps with a gap between them, so the distribution is <b>bimodal</b>. '
     + 'Two peaks beat one shape — a bimodal picture is never described as symmetric or skewed.',
};

function genDataShape(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);
  const fourWay = (level === 1 || level === 3);          // dot plots and histograms only
  const kinds = fourWay ? ['sym','pos','neg','bi'] : ['sym','pos','neg'];
  const kind = ffPick(kinds);
  const opts = kinds.map(function(k){ return DA_SHAPE_NAME[k]; });
  qData.workSteps = DA_SHAPE_WHY[kind];

  if (level === 1){                                       // dot plot
    const counts = daShapeCounts(kind);
    const vals = [];
    counts.forEach(function(c, i){ for (let j = 0; j < c; j++) vals.push(i); });
    el.innerHTML = '';
    decSetChoice(el, '<div style="' + A_LBL + '">' + ctx.axis + ' for ' + ctx.who
      + '.<br>What is the <b>shape</b> of this distribution?</div>'
      + daDotPlot(vals, 0, counts.length - 1, ctx.axis), opts, DA_SHAPE_NAME[kind], true);
    return;
  }
  if (level === 2){                                       // stem-and-leaf
    const counts = daShapeCounts(kind);
    const base = ffPick([1, 2, 3]);                       // first stem
    const vals = [];
    counts.forEach(function(c, i){
      const stem = base + i;
      const leaves = shuffleArr([0,1,2,3,4,5,6,7,8,9]).slice(0, Math.max(c, 0));
      leaves.forEach(function(l){ vals.push(stem * 10 + l); });
    });
    decSetChoice(el, '<div style="' + A_LBL + '">What is the <b>shape</b> of this distribution?</div>'
      + daStemHtml(vals), opts, DA_SHAPE_NAME[kind], true);
    return;
  }
  if (level === 3){                                       // histogram (grouped)
    const counts = daShapeCounts(kind);
    const g = ffPick(DA_GROUPS.filter(function(x){ return x.width === 10; }));
    const st = daGroupStart(g, counts.length);
    const cls = [];
    for (let i = 0; i < counts.length; i++){
      const a = st + i * g.width;
      cls.push({ label: daIntervalHtml(g, a, a + g.width), f: counts[i], a: a });
    }
    const bounds = cls.map(function(c){ return c.a; }).concat([st + counts.length * g.width]);
    decSetChoice(el, '<div style="' + A_LBL + '">' + g.name + ' (' + g.unit + ') for a sample.<br>'
      + 'What is the <b>shape</b> of this distribution?</div>'
      + daHistogram(cls, g.name + ', ' + g.sym + ' (' + g.unit + ')', false, bounds),
      opts, DA_SHAPE_NAME[kind], true);
    return;
  }
  /* Level 4 — box plot. Both cues are made to AGREE: where the median sits in
     the box AND which whisker is longer. A box plot where they disagree has no
     single right answer, so it is never generated. */
  const tick = ffPick([5, 10]);
  const F = { sym: [1, 3, 5, 7, 9], pos: [1, 2, 3, 5, 9], neg: [1, 5, 7, 8, 9] };
  const steps = F[kind];
  const lo = 0, hi = tick * 10;
  const fv = { min: steps[0]*tick, q1: steps[1]*tick, med: steps[2]*tick,
               q3: steps[3]*tick, max: steps[4]*tick };
  qData.workSteps = (kind === 'sym'
      ? 'The median sits in the MIDDLE of the box and the two whiskers are the same length, so the '
        + 'distribution is <b>symmetric</b>.'
      : kind === 'pos'
      ? 'The median sits close to Q1 (the LEFT of the box) and the RIGHT whisker is much longer, so the '
        + 'distribution is <b>positively skewed</b>.'
      : 'The median sits close to Q3 (the RIGHT of the box) and the LEFT whisker is much longer, so the '
        + 'distribution is <b>negatively skewed</b>.');
  decSetChoice(el, '<div style="' + A_LBL + '">What is the <b>shape</b> of this distribution?</div>'
    + daBoxPlot(fv, lo, hi, tick, 'Score'), opts, DA_SHAPE_NAME[kind], true);
}

/* ══════════════ OUTLIERS AND FENCES ══════════════
   fences:  lower = Q1 − 1.5 × IQR      upper = Q3 + 1.5 × IQR
   Every quartile pair is chosen with an EVEN IQR, so 1.5 × IQR is a whole
   number and the fences are whole numbers too. A fluency drill on the rule
   should not also be a decimal-arithmetic drill. */
function daQuartilePair(){
  const q1 = rr(4, 30);
  const iqr = 2 * rr(2, 8);                 // even → 1.5 × IQR is a whole number
  return { q1: q1, q3: q1 + iqr, iqr: iqr, lo: q1 - 1.5 * iqr, hi: q1 + iqr + 1.5 * iqr };
}
function genDataOutliers(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);

  if (level === 1){                          // spot it on a dot plot
    const start = rr(1, 4);
    const vals = [];
    const n = rr(9, 13);
    for (let i = 0; i < n; i++) vals.push(start + rr(0, 3));
    const out = start + rr(9, 12);
    vals.push(out);
    qData.ans = out;
    qData.workSteps = 'Almost every value sits together between ' + start + ' and ' + (start + 3)
      + '. One value, <b>' + out + '</b>, is far away from the rest — that is the outlier.';
    el.innerHTML = '<div style="' + A_LBL + '">' + ctx.axis + ' for ' + ctx.who
      + '.<br>Which value is the <b>outlier</b>?</div>'
      + daDotPlot(vals, 0, out + 1, ctx.axis);
    return;
  }
  if (level === 2 || level === 3){           // one fence
    const Q = daQuartilePair();
    const wantLower = (level === 2);
    qData.ans = wantLower ? Q.lo : Q.hi;
    qData.workSteps = 'IQR = Q3 − Q1 = ' + Q.q3 + ' − ' + Q.q1 + ' = ' + Q.iqr
      + '.<br>1.5 × IQR = ' + (1.5 * Q.iqr) + '.<br>'
      + (wantLower
          ? 'Lower fence = Q1 − 1.5 × IQR = ' + Q.q1 + ' − ' + (1.5 * Q.iqr) + ' = <b>' + Q.lo + '</b>.'
          : 'Upper fence = Q3 + 1.5 × IQR = ' + Q.q3 + ' + ' + (1.5 * Q.iqr) + ' = <b>' + Q.hi + '</b>.');
    el.innerHTML = '<div style="' + A_LBL + '">Q1 = <b>' + Q.q1 + '</b> and Q3 = <b>' + Q.q3
      + '</b>.<br>Find the <b>' + (wantLower ? 'lower' : 'upper') + ' fence</b>.</div>'
      + '<div style="text-align:center;margin:12px 0;font-weight:900;font-size:1.35rem;">'
      + (wantLower ? 'Q1 − 1.5 × IQR' : 'Q3 + 1.5 × IQR') + '</div>';
    return;
  }
  if (level === 4){                          // both fences, in one go
    const Q = daQuartilePair();
    qData.gapTemplate = ['Lower fence = ', 0, ',&nbsp;&nbsp;&nbsp;Upper fence = ', 1];
    qData.gapAns = [Q.lo, Q.hi];
    qData.gapAnsText = 'Lower fence = ' + Q.lo + ',  Upper fence = ' + Q.hi;
    qData.gapHint = 'Work out the IQR first, then both fences.';
    qData.workSteps = 'IQR = ' + Q.q3 + ' − ' + Q.q1 + ' = ' + Q.iqr + ', so 1.5 × IQR = '
      + (1.5 * Q.iqr) + '.<br>Lower fence = ' + Q.q1 + ' − ' + (1.5 * Q.iqr) + ' = <b>' + Q.lo
      + '</b>.<br>Upper fence = ' + Q.q3 + ' + ' + (1.5 * Q.iqr) + ' = <b>' + Q.hi + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Q1 = <b>' + Q.q1 + '</b> and Q3 = <b>' + Q.q3
      + '</b>.<br>Find <b>both fences</b>.</div>';
    return;
  }
  if (level === 5){                          // is this value an outlier?
    const Q = daQuartilePair();
    const outside = Math.random() < 0.5;
    let v;
    if (outside){
      /* Comfortably beyond a fence — never ON it, because a value exactly on a
         fence is a convention argument, not a fluency question. */
      v = (Math.random() < 0.5) ? Q.lo - rr(1, 6) : Q.hi + rr(1, 6);
    } else {
      v = rr(Q.lo + 1, Q.hi - 1);
    }
    const isOut = (v < Q.lo || v > Q.hi);
    qData.workSteps = 'IQR = ' + Q.iqr + ', so the fences are ' + Q.lo + ' and ' + Q.hi + '.<br>'
      + v + ' is ' + (isOut ? 'OUTSIDE' : 'inside') + ' that range, so it <b>is '
      + (isOut ? '' : 'not ') + 'an outlier</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">Q1 = <b>' + Q.q1 + '</b> and Q3 = <b>' + Q.q3
      + '</b>.<br>Is <b>' + v + '</b> an outlier?</div>', ['Yes', 'No'], isOut ? 'Yes' : 'No', true);
    return;
  }
  /* Level 6 — use the fences to FIND the outlier in a list.
     The quartiles are COMPUTED FROM THE LIST rather than invented, because a
     data set where every ordinary value happens to sit between Q1 and Q3 is a
     lie: with real data about half the values fall outside the box. n = 11 and
     the Australian school convention (exclude the median, take the median of
     each half) puts Q1 and Q3 on the 3rd and 9th values, so both are whole
     numbers; the loop then requires an even IQR and exactly one value beyond a
     fence, so the question always has exactly one right answer. */
  let vals = null, Q = null;
  for (let t = 0; t < 400 && !vals; t++){
    const base = rr(10, 30), spread = rr(6, 14);
    const cand = [];
    for (let i = 0; i < 10; i++) cand.push(base + rr(0, spread));
    const s0 = cand.slice().sort(function(a, b){ return a - b; });
    const far = (Math.random() < 0.5)
      ? s0[0] - rr(Math.round(spread * 1.6), Math.round(spread * 2.4))
      : s0[s0.length - 1] + rr(Math.round(spread * 1.6), Math.round(spread * 2.4));
    if (far < 0) continue;
    const all = s0.concat([far]).sort(function(a, b){ return a - b; });   // n = 11
    const q1 = all[2], q3 = all[8], iqr = q3 - q1;
    if (iqr % 2 !== 0 || iqr < 4) continue;
    const lo = q1 - 1.5 * iqr, hi = q3 + 1.5 * iqr;
    const outside = all.filter(function(v){ return v < lo || v > hi; });
    if (outside.length !== 1 || outside[0] !== far) continue;
    vals = shuffleArr(all.slice());
    Q = { q1: q1, q3: q3, iqr: iqr, lo: lo, hi: hi, out: far };
  }
  if (!vals){                                   // deterministic fallback
    vals = [12, 14, 15, 16, 17, 18, 19, 20, 21, 22, 60];
    Q = { q1: 15, q3: 21, iqr: 6, lo: 6, hi: 30, out: 60 };
  }
  qData.ans = Q.out;
  qData.workSteps = 'IQR = Q3 − Q1 = ' + Q.q3 + ' − ' + Q.q1 + ' = ' + Q.iqr
    + ', so 1.5 × IQR = ' + (1.5 * Q.iqr) + '.<br>Fences: ' + Q.q1 + ' − ' + (1.5 * Q.iqr) + ' = '
    + Q.lo + ' and ' + Q.q3 + ' + ' + (1.5 * Q.iqr) + ' = ' + Q.hi
    + '.<br>Every value sits inside that range except <b>' + Q.out + '</b>, so that is the outlier.';
  el.innerHTML = '<div style="' + A_LBL + '">Q1 = <b>' + Q.q1 + '</b> and Q3 = <b>' + Q.q3
    + '</b>.<br>Use the fences to find the <b>outlier</b> in this data set.</div>'
    + daListHtml(vals);
}

/* v85: wire up the keyboard/keypad layer here rather than from a
   DOMContentLoaded listener. This script sits at the end of <body>, so the DOM
   exists and every module-level `let` above is initialised. Doing it this way
   means the app also works when the document has already finished parsing
   before the script runs (preview panes, injected iframes) — the case where
   Enter used to be dead while multiple choice still worked. */
ffInitInputs();
loadProfiles();
try { if (localStorage.getItem('ff_theme') === 'dark') document.body.classList.add('dark'); } catch (e) {}
syncThemeButton();
if (profiles.length === 0) { goWelcome(); }
else { pidx = 0; goHome(); }

/* ═══════════════════════════════════════════════════════════════════
   v93 (Laura) — NETS, PLANS & VIEWS OF 3D OBJECTS   (VC2M7SP01)
   -------------------------------------------------------------------
   "represent three-dimensional objects in 2 dimensions" was the one
   examinable Level 7 Space idea with nothing in the app: Naming 2D & 3D
   Shapes covers the solids and Euler's Rule counts their parts, but
   nothing asked a student to move between the solid and its flattened
   or projected 2D form.

   Every level is CHOICE with a drawing, and every option is TEXT — a
   grid of four small net drawings is unreadable at 74px, and asking a
   student to compare four pictures is a different (harder, visual)
   task from the one the curriculum names.

   The nets are drawn here rather than pulled from SHAPE_LIB because
   SHAPE_LIB holds finished solids; a net is a different picture of the
   same object, which is precisely the point of the skill.
═══════════════════════════════════════════════════════════════════ */
function npvRect(x, y, w, h) { return shPoly([[x,y],[x+w,y],[x+w,y+h],[x,y+h]]); }

const NPV_LIB = {
  cube: {
    name: 'Cube', desc: '6 identical squares',
    net: function () {
      const u = 38, ox = 93, oy = 34; let s = '';
      [[1,0],[1,1],[1,2],[1,3],[0,1],[2,1]].forEach(c => { s += npvRect(ox + c[0]*u, oy + c[1]*u, u, u); });
      return shWrap(s);
    },
    views: { front: 'Square', side: 'Square', top: 'Square' },
  },
  cuboid: {
    name: 'Rectangular prism', desc: '6 rectangles in 3 matching pairs',
    net: function () {
      const W = 54, H = 34, D = 24, ox = 99, oy = 52;
      let s = npvRect(ox + D, oy,          W, H)
            + npvRect(ox + D, oy + H,      W, D)
            + npvRect(ox + D, oy + H + D,  W, H)
            + npvRect(ox + D, oy + 2*H + D, W, D)
            + npvRect(ox,          oy, D, H)
            + npvRect(ox + D + W,  oy, D, H);
      return shWrap(s);
    },
    views: { front: 'Rectangle', side: 'Rectangle', top: 'Rectangle' },
  },
  triangularPrism: {
    name: 'Triangular prism', desc: '3 rectangles and 2 triangles',
    net: function () {
      let s = npvRect(60, 72, 52, 76) + npvRect(112, 72, 52, 76) + npvRect(164, 72, 52, 76);
      s += shPoly([[112,72],[164,72],[138,26]]);
      s += shPoly([[112,148],[164,148],[138,194]]);
      return shWrap(s);
    },
    views: { front: 'Triangle', side: 'Rectangle', top: 'Rectangle' },
  },
  squarePyramid: {
    name: 'Square pyramid', desc: '1 square and 4 triangles',
    net: function () {
      let s = npvRect(117, 77, 66, 66);
      s += shPoly([[117,77],[183,77],[150,25]]);
      s += shPoly([[117,143],[183,143],[150,195]]);
      s += shPoly([[117,77],[117,143],[65,110]]);
      s += shPoly([[183,77],[183,143],[235,110]]);
      return shWrap(s);
    },
    views: { front: 'Triangle', side: 'Triangle', top: 'Square' },
  },
  triangularPyramid: {
    name: 'Triangular pyramid', desc: '4 triangles',
    net: function () {
      let s = shPoly([[60,180],[240,180],[150,32]]);
      s += shLine([150,180],[195,106]) + shLine([195,106],[105,106]) + shLine([105,106],[150,180]);
      return shWrap(s);
    },
    views: { front: 'Triangle', side: 'Triangle', top: 'Triangle' },
  },
  cylinder: {
    name: 'Cylinder', desc: '2 circles and 1 rectangle',
    net: function () {
      let s = npvRect(75, 72, 150, 76);
      s += shCirc(150, 44, 26) + shCirc(150, 176, 26);
      return shWrap(s);
    },
    views: { front: 'Rectangle', side: 'Rectangle', top: 'Circle' },
  },
  cone:   { name: 'Cone',   desc: '1 circle and 1 curved sector', views: { front: 'Triangle', side: 'Triangle', top: 'Circle' } },
  sphere: { name: 'Sphere', desc: 'no net — a sphere cannot be flattened', views: { front: 'Circle', side: 'Circle', top: 'Circle' } },
};
const NPV_NET_KEYS = ['cube','cuboid','triangularPrism','squarePyramid','triangularPyramid','cylinder'];
const NPV_ALL_KEYS = NPV_NET_KEYS.concat(['cone','sphere']);
const NPV_VIEW_KEYS = ['cylinder','cone','sphere','cube','squarePyramid'];

/* A labelled rectangular prism in oblique projection, for the views level.
   The three lengths are drawn on, so front / side / top are genuinely
   different rectangles and the question has one answer. */
function npvPrismSvg(w, h, d) {
  const x0 = 70, y0 = 95, W = 130, H = 70, ox = 48, oy = -38;
  let s = npvRect(x0, y0, W, H);
  s += npvRect(x0 + ox, y0 + oy, W, H);
  s += shLine([x0, y0], [x0 + ox, y0 + oy]);
  s += shLine([x0 + W, y0], [x0 + W + ox, y0 + oy]);
  s += shLine([x0 + W, y0 + H], [x0 + W + ox, y0 + H + oy]);
  s += shLine([x0, y0 + H], [x0 + ox, y0 + H + oy]);
  s += pgLbl(x0 + W / 2, y0 + H + 18, w + ' cm');
  s += pgLbl(x0 - 22, y0 + H / 2, h + ' cm');
  s += pgLbl(x0 + W + ox + 24, y0 + oy / 2 - 12, d + ' cm');   // clear of the depth edge
  return shWrap(s);
}

function npvPick(answer, pool, n) {
  const bag = pool.filter(k => k !== answer);
  const picks = [];
  while (picks.length < n && bag.length) picks.push(bag.splice(ri(bag.length), 1)[0]);
  return shuffleArr([answer].concat(picks));
}

function genNetsViews(el) {
  qData.chosen = null;
  el.style.fontSize = '1.1rem';

  if (level === 1) {
    const key = NPV_NET_KEYS[ri(NPV_NET_KEYS.length)];
    const opts = npvPick(key, NPV_ALL_KEYS, 3);
    qData.choiceAns = key;
    qData.choices = opts.map(k => ({ code: k, html: NPV_LIB[k].name }));
    qData.choiceText = {}; opts.forEach(k => { qData.choiceText[k] = NPV_LIB[k].name; });
    qData.workSteps = 'This net folds up into a <b>' + NPV_LIB[key].name.toLowerCase() +
      '</b> — ' + NPV_LIB[key].desc + '.';
    el.innerHTML = '<div style="' + A_LBL + '">Which solid does this net fold into?</div>' + NPV_LIB[key].net();
  }
  else if (level === 2) {
    const key = NPV_ALL_KEYS[ri(NPV_ALL_KEYS.length)];
    const opts = npvPick(key, NPV_ALL_KEYS, 3);
    qData.choiceAns = key;
    qData.choices = opts.map(k => ({ code: k, html: NPV_LIB[k].desc }));
    qData.choiceText = {}; opts.forEach(k => { qData.choiceText[k] = NPV_LIB[k].desc; });
    qData.workSteps = 'A ' + NPV_LIB[key].name.toLowerCase() + ' has a net made of <b>' + NPV_LIB[key].desc + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">What is the net of this solid made from?</div>' +
      shWrap(SHAPE_LIB[key].variants[0]);
  }
  else if (level === 3) {
    /* w, h and d are kept distinct so the three views are three different
       rectangles — otherwise the question would have two right answers. */
    let w, h, d;
    do { w = rr(3, 9); h = rr(2, 8); d = rr(2, 8); } while (w === h || h === d || w === d);
    const views = { front: [w, h], side: [d, h], top: [w, d] };
    const key = ['front','side','top'][ri(3)];
    const dims = views[key];
    const names = { front: 'The front view', side: 'The side view', top: 'The top view' };
    const opts = shuffleArr(['front','side','top']);
    qData.choiceAns = key;
    qData.choices = opts.map(k => ({ code: k, html: names[k] }));
    qData.choiceText = {}; opts.forEach(k => { qData.choiceText[k] = names[k]; });
    qData.npvDims = dims.slice();
    qData.npvWHD = [w, h, d];        // runtime-only test hook
    qData.workSteps = 'Looking from the front you see width × height (' + w + ' by ' + h + '), ' +
      'from the side depth × height (' + d + ' by ' + h + '), and from above width × depth (' + w + ' by ' + d + '). ' +
      'So a ' + dims[0] + ' by ' + dims[1] + ' rectangle is <b>the ' + key + ' view</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Which view of this prism is a ' + dims[0] + ' cm by ' +
      dims[1] + ' cm rectangle?</div>' + npvPrismSvg(w, h, d);
  }
  else {
    const key = NPV_VIEW_KEYS[ri(NPV_VIEW_KEYS.length)];
    const view = ['front','side','top'][ri(3)];
    const ans = NPV_LIB[key].views[view];
    const pool = ['Circle','Square','Rectangle','Triangle'];
    const opts = shuffleArr(pool.slice());
    qData.choiceAns = ans;
    qData.choices = opts.map(k => ({ code: k, html: k }));
    qData.choiceText = {}; opts.forEach(k => { qData.choiceText[k] = k; });
    qData.workSteps = 'Looking at a ' + NPV_LIB[key].name.toLowerCase() + ' from the ' +
      (view === 'top' ? 'top' : view) + ', the outline you see is a <b>' + ans.toLowerCase() + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">This solid sits upright on its base. What shape is the ' +
      view + ' view?</div>' + shWrap(SHAPE_LIB[key].variants[0]);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v93 (Laura) — TERMINATING & RECURRING DECIMALS   (VC2M8N03)
   -------------------------------------------------------------------
   The test is done on the fraction in LOWEST TERMS: strip every factor
   of 2 and 5 from the denominator and a terminating decimal is exactly
   the case where 1 is left. Generating first and classifying second
   (rather than picking from a hand-written list) means 6/8 can never
   be mislabelled as recurring because its denominator looks like 8.
═══════════════════════════════════════════════════════════════════ */
function trdTerminates(n, d) {
  const g = gcd(Math.abs(n), Math.abs(d));
  let q = d / g;
  while (q % 2 === 0) q /= 2;
  while (q % 5 === 0) q /= 5;
  return q === 1;
}
const TRD_TERM_DENS = [2,4,5,8,10,16,20,25,40,50];
const TRD_REC_DENS  = [3,6,7,9,11,12,13,15,18,22,30,33];
function trdMakeFrac(wantRecurring) {
  for (let i = 0; i < 200; i++) {
    const d = wantRecurring ? TRD_REC_DENS[ri(TRD_REC_DENS.length)] : TRD_TERM_DENS[ri(TRD_TERM_DENS.length)];
    const n = rr(1, d - 1);
    if (trdTerminates(n, d) !== wantRecurring) return [n, d];
  }
  return wantRecurring ? [1, 3] : [1, 4];
}
/* A dot ABOVE the repeating digit is the notation the students see in class.
   Rendered as a positioned span rather than a combining character so it lands
   in the same place in every font. */
function trdDotted(intPart, digits) {
  return intPart + '.' + digits.split('').map(c =>
    '<span style="position:relative;display:inline-block">' + c +
    '<span style="position:absolute;left:50%;top:-0.62em;transform:translateX(-50%);font-size:0.62em;line-height:1">&#9679;</span></span>'
  ).join('');
}

function genDecRecurring(el) {
  if (level === 1) {
    qData.chosen = null;
    el.style.fontSize = '1.1rem';
    const wantRec = Math.random() < 0.5;      // the odd one out is recurring, or terminating
    const seen = {}, opts = [];
    const ansFrac = trdMakeFrac(wantRec);
    opts.push(ansFrac); seen[ansFrac.join('/')] = 1;
    let guard = 0;
    while (opts.length < 4 && guard++ < 400) {
      const f = trdMakeFrac(!wantRec);
      const k = f.join('/');
      if (!seen[k]) { seen[k] = 1; opts.push(f); }
    }
    shuffleArr(opts);
    const codes = opts.map((f, i) => 'o' + i);
    const ansCode = 'o' + opts.findIndex(f => f[0] === ansFrac[0] && f[1] === ansFrac[1]);
    qData.choiceAns = ansCode;
    qData.choices = opts.map((f, i) => ({ code: 'o' + i, html: tfrac(f[0], f[1]) }));
    qData.choiceText = {}; opts.forEach((f, i) => { qData.choiceText['o' + i] = f[0] + '/' + f[1]; });
    qData.trdWant = wantRec ? 'recurring' : 'terminating';
    qData.workSteps = 'Simplify, then strip every factor of 2 and 5 from the denominator. If 1 is left the decimal ' +
      'terminates; anything else recurs. Here <b>' + ansFrac[0] + '/' + ansFrac[1] + '</b> is the ' +
      (wantRec ? 'recurring' : 'terminating') + ' one.';
    el.innerHTML = '<div style="' + A_LBL + '">Which of these gives a <b>' +
      (wantRec ? 'RECURRING' : 'TERMINATING') + '</b> decimal?</div>';
  }
  else if (level === 2) {
    el.style.fontSize = '2.2rem';
    const [n, d] = trdMakeFrac(false);
    qData.ans = dp(n / d, 6);
    qData.workSteps = 'Divide ' + n + ' by ' + d + ': the denominator has only 2s and 5s, so it stops. ' +
      n + ' ÷ ' + d + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = 'Write ' + tfrac(n, d) + ' as a decimal';
  }
  else {
    el.style.fontSize = '2.2rem';
    const twoDigit = Math.random() < 0.45;
    let num, den;
    if (twoDigit) {
      // 0.ȧḃ = ab/99, with ab not a multiple of 11 so the two digits really differ
      do { num = rr(10, 98); } while (num % 11 === 0);
      den = 99;
    } else {
      num = rr(1, 8); den = 9;
    }
    const digits = twoDigit ? String(num) : String(num);
    const [sn, sd] = simplify(num, den);
    qData.ansNum = sn; qData.ansDen = sd;
    qData.workSteps = 'One repeating digit sits over 9, two repeating digits over 99. So ' +
      '0.' + digits + '… = ' + num + '/' + den + ' = <b>' + sn + '/' + sd + '</b> in simplest form.';
    el.innerHTML = 'Write ' + trdDotted('0', digits) + ' as a fraction<br>' +
      '<span style="font-size:0.44em;font-weight:800;color:var(--muted)">in simplest form — the dots mean those digits repeat forever</span>';
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v93 (Laura) — WORD PROBLEMS   (VC2M7N10, VC2M7A03, VC2M8A03)
   -------------------------------------------------------------------
   Not a topic gap — a FORMAT gap. Until now the only worded questions
   in the program were on three decimal skills, so students met worded
   number, ratio and algebra questions for the first time in an ALT.

   Each of these is an extra level on a skill that already exists, and
   they are routed from ONE place at the top of nextQCore rather than
   from inside ten different generators, so no existing generator was
   touched. WORD_LEVEL is the whole contract: skill id → the level
   number that is its word-problem level.
═══════════════════════════════════════════════════════════════════ */
const WORD_LEVEL = {
  hcfLcm: 4, intAddSub: 4, orderOps: 5,
  fracOfAmount: 4, pctOfAmount: 4, pctChange: 5,
  ratioShare: 5, rateConvert: 3,
  algSub: 5, eqTwoStep: 4,
};
const WP_NAMES = ['Ava','Noah','Mia','Liam','Zara','Kai','Ruby','Eli','Sana','Jack','Isla','Omar'];
function wpName() { return WP_NAMES[ri(WP_NAMES.length)]; }
function wpName2(a) { let b = wpName(); while (b === a) b = wpName(); return b; }
function wpSetup(el) {
  el.style.fontSize = '1.2rem';
  el.style.lineHeight = '1.5';
  el.style.textAlign = 'left';
}
function wpLcm(a, b) { return a * b / gcd(a, b); }

function genWordProblem(el) {
  wpSetup(el);
  let text = '', ans = 0, work = '';

  if (skill === 'hcfLcm') {
    if (Math.random() < 0.5) {
      const a = [4,6,8,9,10,12][ri(6)], b = [6,8,9,12,15,18][ri(6)];
      ans = wpLcm(a, b);
      text = `One bus leaves the stop every ${a} minutes and another every ${b} minutes. They both leave at 9:00 am. ` +
             `How many minutes until they next leave together?`;
      work = `"Next time together" means the lowest common multiple. LCM of ${a} and ${b} = <b>${ans}</b> minutes.`;
    } else {
      const g = [4,6,8,9,12][ri(5)], m = rr(2,6), n = (function(){ let k = rr(2,7); while (k === m) k = rr(2,7); return k; })();
      const A = g*m, B = g*n;
      ans = gcd(A, B);
      text = `${wpName()} has ${A} pencils and ${B} erasers. They are packed into identical bags with nothing left over. ` +
             `What is the greatest number of bags that can be made?`;
      work = `"Identical bags, nothing left over, greatest number" means the highest common factor. HCF of ${A} and ${B} = <b>${ans}</b>.`;
    }
  }

  else if (skill === 'intAddSub') {
    const t = ri(4);
    if (t === 0) {
      const start = -rr(1,12), rise = rr(3,20);
      ans = start + rise;
      text = `At 6 am the temperature is ${f(start)}°C. By midday it has risen ${rise} degrees. What is the temperature at midday?`;
      work = `Rising means add: ${f(start)} + ${rise} = <b>${ans}</b>°C.`;
    } else if (t === 1) {
      const start = rr(2,9), down = rr(4,14);
      ans = start - down;
      text = `A lift starts on floor ${start} and goes down ${down} floors into the car park. Which floor does it stop on? ` +
             `(Below ground counts as a negative floor.)`;
      work = `Going down means subtract: ${start} − ${down} = <b>${ans}</b>.`;
    } else if (t === 2) {
      const bal = -rr(15,80), dep = rr(20,150);
      ans = bal + dep;
      text = `${wpName()}'s account is overdrawn by $${Math.abs(bal)}. They deposit $${dep}. What is the new balance, in dollars?`;
      work = `Overdrawn by $${Math.abs(bal)} means a balance of ${f(bal)}. ${f(bal)} + ${dep} = <b>${ans}</b>.`;
    } else {
      const a = -rr(20,60), b = -rr(5,40);
      ans = a - b;
      text = `A diver is at ${f(a)} m (below sea level) and a second diver is at ${f(b)} m. ` +
             `How much lower is the first diver? Give the answer as a negative number if the first diver is higher.`;
      work = `Find the difference: ${f(a)} − (${f(b)}) = <b>${ans}</b> m.`;
    }
  }

  else if (skill === 'orderOps') {
    const t = ri(3);
    if (t === 0) {
      const p = rr(2,9), np = rr(2,6), b = rr(4,15), nb = rr(2,5);
      ans = p*np + b*nb;
      text = `Pens cost $${p} each and notebooks cost $${b} each. ${wpName()} buys ${np} pens and ${nb} notebooks. ` +
             `What is the total cost in dollars?`;
      work = `Write it as one calculation and do the multiplying first: ${np} × ${p} + ${nb} × ${b} = ${np*p} + ${nb*b} = <b>${ans}</b>.`;
    } else if (t === 1) {
      const note = [50,100][ri(2)], c = rr(3,12), n = rr(2,6);
      ans = note - c*n;
      text = `${wpName()} pays with a $${note} note for ${n} tickets costing $${c} each. How much change do they get?`;
      work = `${note} − ${n} × ${c} = ${note} − ${n*c} = <b>${ans}</b>.`;
    } else {
      const boxes = rr(3,8), per = rr(4,12), taken = rr(2,10);
      ans = boxes*per - taken;
      text = `There are ${boxes} boxes with ${per} muffins in each. ${taken} muffins are eaten. How many are left?`;
      work = `${boxes} × ${per} − ${taken} = ${boxes*per} − ${taken} = <b>${ans}</b>.`;
    }
  }

  else if (skill === 'fracOfAmount') {
    const den = [3,4,5,6,8,10][ri(6)];
    const num = rr(1, den - 1);
    const mult = rr(2, 12);
    const total = den * mult;
    ans = num * mult;
    const ctx = ri(3);
    if (ctx === 0) {
      text = `There are ${total} students in a year level and ${num}/${den} of them walk to school. How many walk to school?`;
    } else if (ctx === 1) {
      text = `${wpName()} has $${total} and spends ${num}/${den} of it. How many dollars do they spend?`;
    } else {
      text = `A netball team played ${total} games and won ${num}/${den} of them. How many games did they win?`;
    }
    work = `Divide by the denominator, then multiply by the numerator: ${total} ÷ ${den} = ${mult}, then ${mult} × ${num} = <b>${ans}</b>.`;
  }

  else if (skill === 'pctOfAmount') {
    const pct = [10,20,25,50,5,15,30,40,75][ri(9)];
    const base = 20 * rr(1, 25);
    ans = dp(base * pct / 100, 2);
    const ctx = ri(3);
    if (ctx === 0) {
      text = `A jacket costs $${base}. It is reduced by ${pct}%. How many dollars do you save?`;
      work = `${pct}% of $${base} = ${pct}/100 × ${base} = <b>$${ans}</b> saved.`;
    } else if (ctx === 1) {
      text = `${pct}% of the ${base} students in a year level play a sport. How many students play a sport?`;
      work = `${pct}% of ${base} = ${pct}/100 × ${base} = <b>${ans}</b> students.`;
    } else {
      text = `${wpName()} earns $${base} and saves ${pct}% of it. How many dollars do they save?`;
      work = `${pct}% of $${base} = <b>$${ans}</b>.`;
    }
  }

  else if (skill === 'pctChange') {
    const pct = [5,10,15,20,25,40,50][ri(7)];
    const base = 20 * rr(1, 25);
    const up = Math.random() < 0.5;
    ans = dp(up ? base * (100 + pct) / 100 : base * (100 - pct) / 100, 2);
    if (up) {
      text = `A phone plan costs $${base} a month. The price goes up by ${pct}%. What is the new monthly price in dollars?`;
      work = `New price = ${100 + pct}% of $${base} = ${(100+pct)/100} × ${base} = <b>$${ans}</b>.`;
    } else {
      text = `A bike costs $${base}. In a sale it is discounted by ${pct}%. What is the sale price in dollars?`;
      work = `Sale price = ${100 - pct}% of $${base} = ${(100-pct)/100} × ${base} = <b>$${ans}</b>.`;
    }
  }

  else if (skill === 'ratioShare') {
    const a = rr(1,5), b = (function(){ let k = rr(1,6); while (k === a) k = rr(1,6); return k; })();
    const unit = rr(3, 20);
    const total = (a + b) * unit;
    const bigger = Math.max(a, b) * unit;
    ans = bigger;
    const ctx = ri(2);
    const n1 = wpName(), n2 = wpName2(n1);
    if (ctx === 0) {
      text = `$${total} is shared between ${n1} and ${n2} in the ratio ${a} : ${b}. How many dollars does the person with the LARGER share get?`;
      work = `There are ${a} + ${b} = ${a+b} parts, so one part is $${total} ÷ ${a+b} = $${unit}. The larger share is ${Math.max(a,b)} × $${unit} = <b>$${ans}</b>.`;
    } else {
      text = `A recipe mixes flour and sugar in the ratio ${a} : ${b}. Altogether there are ${total} grams. ` +
             `How many grams of the LARGER ingredient are used?`;
      work = `${a} + ${b} = ${a+b} parts; one part = ${total} ÷ ${a+b} = ${unit} g. The larger amount is ${Math.max(a,b)} × ${unit} = <b>${ans}</b> g.`;
    }
  }

  else if (skill === 'rateConvert') {
    const t = ri(3);
    if (t === 0) {
      const hrs = rr(2,8), speed = 10 * rr(4, 11);
      ans = speed;
      text = `A car travels ${speed * hrs} km in ${hrs} hours at a steady speed. What is its speed in km/h?`;
      work = `Speed = distance ÷ time = ${speed*hrs} ÷ ${hrs} = <b>${ans}</b> km/h.`;
    } else if (t === 1) {
      const kg = rr(2,9), each = dp(rr(150, 900) / 100, 2);
      ans = dp(each, 2);
      text = `${kg} kg of apples costs $${dp(each*kg, 2)}. What is the price per kilogram, in dollars?`;
      work = `Price per kg = total ÷ mass = ${dp(each*kg,2)} ÷ ${kg} = <b>$${ans}</b>.`;
    } else {
      const perMin = rr(2, 12), mins = rr(3, 12);
      ans = perMin * mins;
      text = `A tap fills a tank at ${perMin} litres per minute. How many litres go in during ${mins} minutes?`;
      work = `Multiply the rate by the time: ${perMin} × ${mins} = <b>${ans}</b> litres.`;
    }
  }

  else if (skill === 'algSub') {
    const t = ri(3);
    if (t === 0) {
      const base = rr(5, 25), rate = rr(3, 15), h = rr(2, 9);
      ans = base + rate * h;
      text = `The cost of hiring a bike is C = ${base} + ${rate}h dollars, where h is the number of hours. ` +
             `What is the cost of hiring it for ${h} hours?`;
      work = `Substitute h = ${h}: C = ${base} + ${rate} × ${h} = ${base} + ${rate*h} = <b>${ans}</b>.`;
    } else if (t === 1) {
      const l = rr(3, 15), w = rr(2, 12);
      ans = 2 * (l + w);
      text = `The perimeter of a rectangle is P = 2(l + w), where l is the length and w is the width. ` +
             `What is the perimeter when l = ${l} cm and w = ${w} cm?`;
      work = `P = 2(${l} + ${w}) = 2 × ${l + w} = <b>${ans}</b>.`;
    } else {
      const v = rr(4, 20), t2 = rr(2, 9);
      ans = v * t2;
      text = `Distance is given by d = vt. A car travels at v = ${v} km/h for t = ${t2} hours. How far does it travel?`;
      work = `d = ${v} × ${t2} = <b>${ans}</b> km.`;
    }
  }

  else if (skill === 'eqTwoStep') {
    const t = ri(3);
    if (t === 0) {
      const x = rr(2, 12), m = rr(2, 9), c = rr(3, 20);
      ans = x;
      text = `${wpName()} thinks of a number, multiplies it by ${m} and then adds ${c}. The answer is ${m*x + c}. ` +
             `What was the number?`;
      work = `Let the number be x: ${m}x + ${c} = ${m*x + c}. Subtract ${c}: ${m}x = ${m*x}. Divide by ${m}: x = <b>${x}</b>.`;
    } else if (t === 1) {
      const km = rr(3, 15), flag = rr(3, 8), per = rr(2, 5);
      ans = km;
      text = `A taxi charges $${flag} to start plus $${per} for every kilometre. A trip costs $${flag + per*km}. ` +
             `How many kilometres was the trip?`;
      work = `${per}k + ${flag} = ${flag + per*km}. Subtract ${flag}: ${per}k = ${per*km}. Divide by ${per}: k = <b>${km}</b> km.`;
    } else {
      const n = rr(3, 14), each = rr(2, 9), extra = rr(2, 15);
      ans = n;
      text = `A box holds ${each} pencils. ${wpName()} has some full boxes plus ${extra} loose pencils, ` +
             `and ${each*n + extra} pencils altogether. How many full boxes are there?`;
      work = `${each}b + ${extra} = ${each*n + extra}. Subtract ${extra}: ${each}b = ${each*n}. Divide by ${each}: b = <b>${n}</b>.`;
    }
  }

  qData.ans = ans;
  qData.workSteps = work;
  el.textContent = text;
}

/* ── v93: Percentage Increase & Decrease, Level 4 — PERCENTAGE ERROR (VC2M8N05) ──
   Values are chosen so the error is a whole number of units and the percentage
   is exact — a percentage error that needs rounding teaches the rounding, not
   the idea. */
function genPctError(el) {
  el.style.fontSize = '1.2rem';
  el.style.lineHeight = '1.5';
  el.style.textAlign = 'left';
  const bases = [20,25,40,50,80,100,120,150,200,250,400,500];
  const pcts  = [2,4,5,8,10,12,15,20,25];
  let actual, pct, err, guard = 0;
  do {
    actual = bases[ri(bases.length)];
    pct = pcts[ri(pcts.length)];
    err = actual * pct / 100;
  } while ((err !== Math.round(err) || err === 0) && guard++ < 200);
  err = Math.round(err);
  const over = Math.random() < 0.5;
  const measured = over ? actual + err : actual - err;
  const ctx = ri(3);
  let text;
  if (ctx === 0) {
    text = `A length is actually ${actual} cm, but it is measured as ${measured} cm. What is the percentage error?`;
  } else if (ctx === 1) {
    text = `${wpName()} estimated a crowd at ${measured} people. The true number was ${actual}. What is the percentage error of the estimate?`;
  } else {
    text = `A bag should hold ${actual} g. It is filled with ${measured} g. What is the percentage error?`;
  }
  qData.ans = pct;
  qData.ansDisplay = pct + '%';
  qData.workSteps = 'Percentage error = (size of the error ÷ the true value) × 100. ' +
    'The error is |' + measured + ' − ' + actual + '| = ' + err + ', so ' +
    err + ' ÷ ' + actual + ' × 100 = <b>' + pct + '%</b>.';
  el.textContent = text + ' (Give the answer as a number of percent, without the % sign.)';
}


/* ═══════════════════════════════════════════════════════════════════
   v96 (Laura) — FROM THE 2026 EXAM AUDIT
   Every generator below answers a question that is actually on one of
   the two Year 7 papers. Where an engine already existed it is reused
   rather than rewritten — the shaded-grid renderers, the Cartesian
   plane, the tap-to-plot surface and the data displays are all shared.
═══════════════════════════════════════════════════════════════════ */

/* ── IDENTIFY FRACTIONS (Yr 7 MC Q1 and Section B Q8) ──────────────
   The app could already read a decimal off a shaded grid and a
   percentage off a shaded grid; the fraction — the thing the exam
   actually asks for twice — was the one missing corner.

   L1/L2 generate only fractions ALREADY in lowest terms, so "simplest
   form" is never ambiguous while the student is learning to read the
   diagram. L3 is where simplifying becomes the point. */
function fidPieSVG(n, sh){
  const cx = 150, cy = 92, r = 74;
  let out = '';
  for (let i = 0; i < n; i++){
    const a0 = (-90 + i * 360 / n) * Math.PI / 180, a1 = (-90 + (i + 1) * 360 / n) * Math.PI / 180;
    const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
    const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
    const big = (360 / n) > 180 ? 1 : 0;
    out += '<path d="M ' + cx + ' ' + cy + ' L ' + x0.toFixed(1) + ' ' + y0.toFixed(1)
        + ' A ' + r + ' ' + r + ' 0 ' + big + ' 1 ' + x1.toFixed(1) + ' ' + y1.toFixed(1) + ' Z" '
        + 'fill="var(--accent)" fill-opacity="' + (i < sh ? 0.6 : 0) + '" stroke="var(--text)" stroke-width="1.5"/>';
  }
  return decSvg(out, cy + r + 20);
}
function fidCoprimePair(lo, hi){
  for (let t = 0; t < 300; t++){
    const n = rr(lo, hi), sh = rr(1, n - 1);
    if (gcd(sh, n) === 1) return [sh, n];
  }
  return [1, 3];
}
function genFracIdentify(el){
  el.style.fontSize = '1.05rem';
  let sh, n, svg, what;
  if (level === 1){
    [sh, n] = fidCoprimePair(3, 10);
    if (Math.random() < 0.5){ svg = fidPieSVG(n, sh); what = n + ' equal slices'; }
    else { svg = decStripSVG(n, sh); what = n + ' equal parts'; }
  } else if (level === 2){
    const grid = ffPick([10, 100, 20, 25, 50]);
    for (let t = 0; t < 300; t++){ sh = rr(1, grid - 1); if (gcd(sh, grid) === 1) break; }
    n = grid; svg = pctGridSVG(n, sh); what = n + ' equal parts';
  } else {
    /* Deliberately NOT coprime — the shaded count and the answer differ. */
    const grid = ffPick([8, 10, 12, 16, 20, 24]);
    for (let t = 0; t < 300; t++){ sh = rr(2, grid - 2); if (gcd(sh, grid) > 1) break; }
    n = grid;
    svg = (Math.random() < 0.5) ? fidPieSVG(n, sh) : pctGridSVG(n, sh);
    what = n + ' equal parts';
  }
  const [an, ad] = simplify(sh, n);
  qData.ansNum = an; qData.ansDen = ad;
  qData.workSteps = sh + ' of the ' + n + ' equal parts are shaded, so the fraction is ' + sh + '/' + n
    + (an === sh ? ' — already in simplest form.' : ' = <b>' + an + '/' + ad + '</b> in simplest form.');
  el.innerHTML = '<div style="' + A_LBL + '">What fraction is shaded? Give it in simplest form. (' + what + ')</div>' + svg;
}

/* ── QUARTILES & IQR (SEAL Section B Q9) ───────────────────────────
   Q1 and Q3 use the method the students are taught: split at the
   median and EXCLUDE it when there is an odd number of values.

   Every data set is sized so each half has an ODD number of values
   (n = 6, 7, 10, 11, 14, 15), which makes Q1 and Q3 real data values
   rather than midpoints. A quartiles drill should not double as a
   "halfway between 63 and 77" arithmetic drill — and the SEAL paper's
   own question uses 11 values, which this hits exactly. */
function daQ1Of(v){
  const s = daSorted(v), h = Math.floor(s.length / 2);
  return daMedianOf(s.slice(0, h));
}
function daQ3Of(v){
  const s = daSorted(v), h = Math.floor(s.length / 2);
  return daMedianOf(s.slice(s.length - h));
}
function daIqrOf(v){ return daQ3Of(v) - daQ1Of(v); }
const DQT_N = [7, 11, 6, 10, 14, 15];          // each half is odd
function dqtWork(vals, want){
  const s = daSorted(vals), n = s.length, h = Math.floor(n / 2);
  const lower = s.slice(0, h), upper = s.slice(n - h);
  let w = 'In order: ' + s.join(', ') + '.<br>';
  w += (n % 2
    ? 'There are ' + n + ' values, so leave the middle one out and split into two halves of ' + h + '.'
    : 'There are ' + n + ' values, so split into two halves of ' + h + '.') + '<br>';
  w += 'Lower half: ' + lower.join(', ') + ' → Q1 = <b>' + daQ1Of(vals) + '</b>.<br>';
  w += 'Upper half: ' + upper.join(', ') + ' → Q3 = <b>' + daQ3Of(vals) + '</b>.';
  if (want === 'iqr') w += '<br>IQR = Q3 − Q1 = ' + daQ3Of(vals) + ' − ' + daQ1Of(vals)
    + ' = <b>' + daIqrOf(vals) + '</b>.';
  return w;
}
function genDataQuartiles(el){
  el.style.fontSize = '1.05rem';
  const ctx = ffPick(DA_CTX);
  const say = function(prompt, body){ el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>' + body; };

  if (level <= 3){
    const n = ffPick(DQT_N), vals = [];
    for (let i = 0; i < n; i++) vals.push(rr(1, 40));
    const want = level === 1 ? 'q1' : level === 2 ? 'q3' : 'iqr';
    qData.ans = want === 'q1' ? daQ1Of(vals) : want === 'q3' ? daQ3Of(vals) : daIqrOf(vals);
    qData.workSteps = dqtWork(vals, want);
    say('Find the <b>' + (want === 'q1' ? 'lower quartile (Q1)' : want === 'q3' ? 'upper quartile (Q3)'
        : 'interquartile range (IQR)') + '</b> of this data set.', daListHtml(vals));
    return;
  }
  if (level === 4){
    const hi = rr(5, 8), n = ffPick(DQT_N), vals = [];
    for (let i = 0; i < n; i++) vals.push(rr(0, hi));
    qData.ans = daIqrOf(vals);
    qData.workSteps = 'A dot plot is already in order — count in from each end. ' + dqtWork(vals, 'iqr');
    say(ctx.axis + ' for ' + ctx.who + '.<br>Find the <b>interquartile range</b>.', daDotPlot(vals, 0, hi, ctx.axis));
    return;
  }
  if (level === 5){
    const vals = daStemSet(ffPick(DQT_N), {});
    qData.ans = daIqrOf(vals);
    qData.workSteps = 'A stem-and-leaf plot is already in order — count in from each end. ' + dqtWork(vals, 'iqr');
    say('Find the <b>interquartile range</b> of the data in this stem-and-leaf plot.', daStemHtml(vals));
    return;
  }
  /* L6 — read Q1, Q3 or the IQR straight off a box plot: the box IS the IQR. */
  const tick = ffPick([2, 5, 10]), steps = rr(6, 8), lo = 0, hi = tick * steps;
  const cand = [];
  for (let v = lo + tick; v <= hi - tick; v += tick) cand.push(v);
  const picks = shuffleArr(cand.slice()).slice(0, 5).sort(function(a, b){ return a - b; });
  const fv = { min: picks[0], q1: picks[1], med: picks[2], q3: picks[3], max: picks[4] };
  const askIqr = Math.random() < 0.6;
  qData.ans = askIqr ? fv.q3 - fv.q1 : (Math.random() < 0.5 ? fv.q1 : fv.q3);
  if (askIqr){
    qData.workSteps = 'The BOX runs from Q1 to Q3, so its width is the IQR: ' + fv.q3 + ' − ' + fv.q1
      + ' = <b>' + (fv.q3 - fv.q1) + '</b>. The whiskers are the range, not the IQR.';
    say('Find the <b>interquartile range</b> from this box plot.', daBoxPlot(fv, lo, hi, tick, 'Score'));
  } else {
    const isQ1 = qData.ans === fv.q1;
    qData.workSteps = (isQ1 ? 'Q1 is the LEFT edge of the box' : 'Q3 is the RIGHT edge of the box')
      + ' — read it off the scale: <b>' + qData.ans + '</b>.';
    say('Read <b>' + (isQ1 ? 'Q1' : 'Q3') + '</b> off this box plot.', daBoxPlot(fv, lo, hi, tick, 'Score'));
  }
}

/* ── GRADIENT & Y-INTERCEPT FROM AN EQUATION (SEAL MC Q7) ──────────
   Gradient of a Line Segment only ever worked from two points or a
   drawn diagram. Nothing in the app rearranged ax + by = c into
   y = mx + c, or read m straight off an equation — which is the MC
   question on the SEAL paper and the idea behind two more.

   L1/L2 are MULTIPLE CHOICE because a gradient is often a fraction and
   a fraction will not go in a numeric gap-fill box. That also makes
   them the same shape as the exam item. L3 is the sketching level
   Laura asked for, built on the same tap-to-plot surface as the
   distance-time graphs. */
/* Everything on screen uses a real minus sign (−), not a hyphen. A student
   reading "y = -3x" beside a printed exam that says "y = −3x" is one more thing
   to second-guess. */
function greNum(n){ return n < 0 ? '−' + Math.abs(n) : String(n); }
function greFmtM(p, q){
  if (q === 1) return greNum(p);
  return (p < 0 ? '−' : '') + Math.abs(p) + '/' + q;
}
function greLineHtml(p, q, c){
  const m = greFmtM(p, q);
  const mPart = (p === q) ? 'x' : (p === -q) ? '−x' : (q === 1 ? greNum(p) + 'x' : m + 'x');
  return 'y = ' + mPart + (c === 0 ? '' : (c > 0 ? ' + ' + c : ' − ' + (-c)));
}
function greOptText(p, q, c){ return 'gradient ' + greFmtM(p, q) + ', y-intercept (0, ' + greNum(c) + ')'; }
function greDistinct(p, q, c){
  /* Distractors are the mistakes students actually make: the sign of the
     gradient, m and c swapped, and forgetting to divide through. */
  const bag = [[-p, q, c], [p, q, -c], [q, p === 0 ? 1 : Math.abs(p), c], [p, q, c + rr(1, 3)]];
  const out = [], seen = { }; seen[greOptText(p, q, c)] = 1;
  bag.forEach(function(b){
    if (b[1] === 0) return;
    const t = greOptText(b[0], b[1], b[2]);
    if (!seen[t]) { seen[t] = 1; out.push(t); }
  });
  while (out.length < 3){
    const t = greOptText(p + rr(1, 4), q, c - rr(1, 3));
    if (!seen[t]) { seen[t] = 1; out.push(t); }
  }
  return out.slice(0, 3);
}
function genGradEqn(el){
  el.style.fontSize = '1.05rem';

  if (level === 1){                       // read m and c straight off y = mx + c
    const p = ffPick([1, 2, 3, 4, 5, -1, -2, -3, -4]), c = rr(-6, 6);
    qData.workSteps = 'In y = mx + c the number in front of x is the gradient and c is the y-intercept.<br>'
      + 'Here m = <b>' + p + '</b> and c = <b>' + c + '</b>, so the line crosses the y-axis at (0, ' + c + ').';
    decSetChoice(el, '<div style="' + A_LBL + '">State the gradient and the y-intercept of</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.8rem;margin:10px 0;">' + greLineHtml(p, 1, c) + '</div>',
      shuffleArr([greOptText(p, 1, c)].concat(greDistinct(p, 1, c))), greOptText(p, 1, c), true);
    return;
  }

  if (level === 2){                       // rearrange ax + by = c first
    const b = ffPick([2, 3, 4, 5]);
    const p = ffPick([1, 2, 3, -1, -2, -3]);
    const c = rr(-4, 4);
    /* Build it backwards from y = (p/b)x + c so the rearranged form is exact:
       by = px + bc  →  −px + by = bc. */
    const a = -p, rhs = b * c;
    const eqn = (a === 0 ? '' : (a === 1 ? 'x' : a === -1 ? '−x' : a + 'x') + ' + ')
              + (b === 1 ? 'y' : b + 'y') + ' = ' + rhs;
    const g = simplify(Math.abs(p), b);
    const sp = (p < 0 ? -g[0] : g[0]), sq = g[1];
    qData.workSteps = 'Get y on its own. ' + eqn + ' → ' + (b === 1 ? 'y' : b + 'y') + ' = '
      + (p === 1 ? 'x' : p === -1 ? '−x' : p + 'x') + (rhs === 0 ? '' : (rhs > 0 ? ' + ' + rhs : ' − ' + (-rhs)))
      + ' → divide every term by ' + b + ': y = ' + greFmtM(sp, sq) + 'x'
      + (c === 0 ? '' : (c > 0 ? ' + ' + c : ' − ' + (-c))) + '.<br>'
      + 'So the gradient is <b>' + greFmtM(sp, sq) + '</b> and the y-intercept is <b>(0, ' + c + ')</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">Rearrange into y = mx + c, then state the gradient and y-intercept.</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.8rem;margin:10px 0;">' + eqn + '</div>',
      shuffleArr([greOptText(sp, sq, c)].concat(greDistinct(sp, sq, c))), greOptText(sp, sq, c), true);
    return;
  }

  /* L3 — sketch by the gradient-intercept method: plot (0, c), then step
     one "run" across and "rise" up to a second point. Two taps, ordered,
     exactly like building a distance-time graph. Both points are forced
     inside the −5…5 window so there is always a legal answer. */
  let m, c;
  for (let t = 0; t < 300; t++){
    m = ffPick([1, 2, 3, -1, -2, -3]);
    c = rr(-4, 4);
    if (Math.abs(c + m) <= CG_R) break;
  }
  qData.plotOrdered = true;
  qData.plotAns = [[0, c], [1, c + m]];        // one valid answer, for reference
  /* v97: marked against the LINE. The y-intercept is compulsory because plotting
     it IS half of the gradient–intercept method; the second point is any other
     point on the line, so stepping the gradient backwards is correct too. */
  qData.plotLine = { m: m, c: c };
  qData.plotMust = [[0, c]];
  qData.plotNeed = 2;
  qData.plotNoun = 'points placed';
  qData.plotInstr = 'Plot the y-intercept, then use the gradient to plot one more point on the line.';
  qData.workSteps = 'The y-intercept is c = ' + greNum(c) + ', so start at <b>(0, ' + greNum(c) + ')</b>.<br>'
    + 'The gradient is ' + greNum(m) + ', which means ' + Math.abs(m) + ' ' + (m > 0 ? 'up' : 'down')
    + ' for every 1 across — so (1, ' + greNum(c + m) + ') works. Stepping the other way to ('
    + greNum(-1) + ', ' + greNum(c - m) + ') is just as correct: <b>any point on the line counts</b>.';
  qData.plotAbove = '<div style="' + A_LBL + '">Sketch this line using the gradient and the y-intercept.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.6rem;margin:6px 0;">' + greLineHtml(m, 1, c) + '</div>';
}

/* ── MATCHING EQUATIONS & GRAPHS (SEAL MC Q10, Section B Q5c) ──────
   The graph is DRAWN and the four options are EQUATIONS, not four
   little pictures: four graphs in a 74px option button are unreadable,
   and comparing four pictures is a different task from reading one. */
function egmDistractors(m, c){
  const seen = { }, out = [];
  seen[greLineHtml(m, 1, c)] = 1;
  [[-m, c], [m, -c], [m + 1, c], [-m, -c], [m, c + 2], [m - 1, c], [m + 2, c - 1], [-m, c + 1]]
    .forEach(function(d){
      const t = greLineHtml(d[0], 1, d[1]);
      if (!seen[t] && d[0] !== 0 && out.length < 3) { seen[t] = 1; out.push(t); }
    });
  /* A distractor list can come up short when a mistake happens to land back on
     the right answer (m = −1 makes "wrong sign" the same line as "gradient + 1"),
     so top it up until there really are three. */
  for (let g = 2; out.length < 3 && g < 40; g++){
    const t = greLineHtml((g % 2 ? g : -g), 1, c + (g % 3) - 1);
    if (!seen[t]) { seen[t] = 1; out.push(t); }
  }
  return out.slice(0, 3);
}
function genEqnGraph(el){
  el.style.fontSize = '1.05rem';

  if (level === 1 || level === 2){
    let m, c;
    for (let t = 0; t < 300; t++){
      m = (level === 1) ? ffPick([1, 2, 3]) : ffPick([-1, -2, -3, 1, 2]);
      c = (level === 1) ? rr(-3, 3) : rr(-4, 4);
      if (Math.abs(c) + Math.abs(m) * CG_R <= CG_R * 3) break;   // stays sensible on the window
    }
    const line = cgCurve(function(x){ return m * x + c; });
    qData.workSteps = 'The line crosses the y-axis at (0, ' + c + '), so c = <b>' + c + '</b>.<br>'
      + 'From there it goes ' + Math.abs(m) + ' ' + (m > 0 ? 'up' : 'down') + ' for every 1 across, '
      + 'so the gradient is <b>' + m + '</b>. The equation is <b>' + greLineHtml(m, 1, c) + '</b>.';
    decSetChoice(el, '<div style="' + A_LBL + '">Which equation gives this graph?</div>'
      + cgSvg(line),
      shuffleArr([greLineHtml(m, 1, c)].concat(egmDistractors(m, c))), greLineHtml(m, 1, c), true);
    return;
  }

  /* L3 — which point lies on the line. Every distractor is checked against
     the rule, so a "wrong" point can never accidentally satisfy it. */
  const m = ffPick([1, 2, 3, -1, -2, -3]), c = rr(-5, 5);
  const x = rr(-6, 6), on = [x, m * x + c];
  const opts = [on.join('|')], seen = { }; seen[on.join('|')] = 1;
  for (let t = 0; t < 400 && opts.length < 4; t++){
    const px = rr(-6, 6), py = m * px + c + (Math.random() < 0.5 ? rr(1, 5) : -rr(1, 5));
    if (py === m * px + c) continue;
    const k = px + '|' + py;
    if (!seen[k]) { seen[k] = 1; opts.push(k); }
  }
  const asText = function(k){ const p = k.split('|'); return '(' + p[0] + ', ' + p[1] + ')'; };
  qData.workSteps = 'Substitute each point into ' + greLineHtml(m, 1, c) + ' and see which one works.<br>'
    + 'For (' + on[0] + ', ' + on[1] + '): ' + m + ' × ' + on[0] + (c === 0 ? '' : (c > 0 ? ' + ' + c : ' − ' + (-c)))
    + ' = ' + on[1] + ' ✓';
  decSetChoice(el, '<div style="' + A_LBL + '">Which of these points lies on the line?</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.8rem;margin:10px 0;">' + greLineHtml(m, 1, c) + '</div>',
    shuffleArr(opts.map(asText)), asText(on.join('|')), true);
}

/* ── SKETCHING LINEAR GRAPHS (Laura's spec) ────────────────────────
   Same tap-to-plot surface as the distance-time build level. Every
   level names EXACTLY which two points to plot, because the marking is
   all-or-nothing on a point set — "sketch the line" without saying
   which points would have infinitely many right answers. */
function sklHorizVert(){
  const vertical = Math.random() < 0.5;
  const k = rr(-4, 4);
  return vertical
    ? { eqn: 'x = ' + greNum(k), pts: [[k, -CG_R], [k, CG_R]],
        line: { vx: k }, must: [],
        instr: 'Plot any two points on this line.',
        why: 'x = ' + greNum(k) + ' is a VERTICAL line — every point on it has x = ' + greNum(k) + ', whatever y is. '
           + 'It passes through (' + k + ', −' + CG_R + ') and (' + k + ', ' + CG_R + ').' }
    : { eqn: 'y = ' + greNum(k), pts: [[-CG_R, k], [CG_R, k]],
        line: { m: 0, c: k }, must: [],
        instr: 'Plot any two points on this line.',
        why: 'y = ' + greNum(k) + ' is a HORIZONTAL line — every point on it has y = ' + greNum(k) + ', whatever x is. '
           + 'It passes through (−' + CG_R + ', ' + k + ') and (' + CG_R + ', ' + k + ').' };
}
function sklIntercepts(){
  /* y = mx + c with BOTH intercepts on the grid and whole numbers. */
  for (let t = 0; t < 400; t++){
    const m = ffPick([1, 2, -1, -2]), xi = rr(-4, 4);
    if (xi === 0) continue;
    const c = -m * xi;
    if (Math.abs(c) > CG_R) continue;
    return { eqn: greLineHtml(m, 1, c), pts: [[0, c], [xi, 0]],
             line: { m: m, c: c }, must: [[0, c], [xi, 0]],
             instr: 'Plot the x-intercept and the y-intercept.',
             why: 'y-intercept: put x = 0 → y = ' + c + ', so <b>(0, ' + c + ')</b>.<br>'
                + 'x-intercept: put y = 0 → 0 = ' + m + 'x ' + (c > 0 ? '+ ' + c : '− ' + (-c))
                + ' → x = ' + xi + ', so <b>(' + xi + ', 0)</b>.' };
  }
  return { eqn: 'y = x − 2', pts: [[0, -2], [2, 0]], line: { m: 1, c: -2 }, must: [[0, -2], [2, 0]],
           instr: 'Plot the x-intercept and the y-intercept.',
           why: 'y-intercept (0, −2); x-intercept (2, 0).' };
}
function sklOrigin(){
  const m = ffPick([1, 2, 3, -1, -2, -3]);
  return { eqn: 'y = ' + (m === 1 ? 'x' : m === -1 ? '−x' : greNum(m) + 'x'),
           pts: [[0, 0], [1, m]],
           line: { m: m, c: 0 }, must: [[0, 0]],
           instr: 'Plot the origin, then use the gradient to plot one more point on the line.',
           why: 'There is no + c, so the line goes through the <b>origin</b>. '
              + 'The gradient is ' + greNum(m) + ', so when x = 1, y = ' + greNum(m) + ' — the point <b>(1, '
              + greNum(m) + ')</b>. Any other point on the line, such as (' + greNum(-1) + ', '
              + greNum(-m) + '), is just as correct.' };
}
function genSketchLinear(el){
  const pick = level === 1 ? sklHorizVert()
             : level === 2 ? sklIntercepts()
             : level === 3 ? sklOrigin()
             : [sklHorizVert, sklIntercepts, sklOrigin][ri(3)]();
  qData.plotOrdered = true;
  qData.plotAns = pick.pts;                    // one valid answer, for reference
  qData.plotLine = pick.line;                  // v97: marked against the line
  qData.plotMust = pick.must;
  qData.plotNeed = 2;
  qData.plotNoun = 'points placed';
  qData.plotInstr = pick.instr;
  qData.workSteps = pick.why;
  /* The "which two points" instruction already sits in the plot strip beside the
     grid, so the prompt above it just names the job. */
  qData.plotAbove = '<div style="' + A_LBL + '">Sketch this line.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.7rem;margin:6px 0;">' + pick.eqn + '</div>';
}

/* ── INDEX NOTATION & EXPANDED FORM (Yr 7 Section B Q5) ────────────
   VC2M7N02. "Write 2⁴ × 3² in expanded form" had nothing behind it. */
function ixeExpanded(b, e){ const p = []; for (let i = 0; i < e; i++) p.push(b); return p.join(' × '); }
function genIndexExpand(el){
  el.style.fontSize = '1.05rem';
  if (level === 1){                      // expanded → index form
    const b = ffPick([2, 3, 4, 5, 6, 7, 10]), e = rr(2, 5);
    qData.gapTemplate = ['base ', 0, '&nbsp;&nbsp;&nbsp;power ', 1];
    qData.gapAns = [b, e];
    qData.gapAnsText = b + ' to the power of ' + e;
    qData.gapHint = 'The base is the number being multiplied; the power is how many times.';
    qData.workSteps = b + ' is multiplied by itself ' + e + ' times, so it is written <b>' + b + '<sup>' + e + '</sup></b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write this in index form.</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.7rem;margin:10px 0;">' + ixeExpanded(b, e) + '</div>';
    return;
  }
  if (level === 2){                      // index → expanded form
    const b1 = ffPick([2, 3, 5]), e1 = rr(2, 4);
    let b2 = ffPick([2, 3, 5, 7]); while (b2 === b1) b2 = ffPick([2, 3, 5, 7]);
    const e2 = rr(2, 3);
    const right = ixeExpanded(b1, e1) + ' × ' + ixeExpanded(b2, e2);
    const opts = [right,
      ixeExpanded(b1, e1 - 1) + ' × ' + ixeExpanded(b2, e2),
      ixeExpanded(b1, e1) + ' × ' + ixeExpanded(b2, e2 + 1),
      (b1 * e1) + ' × ' + (b2 * e2)];
    qData.workSteps = b1 + '<sup>' + e1 + '</sup> means ' + b1 + ' multiplied ' + e1 + ' times and '
      + b2 + '<sup>' + e2 + '</sup> means ' + b2 + ' multiplied ' + e2 + ' times — <b>not</b> base × power.';
    decSetChoice(el, '<div style="' + A_LBL + '">Write this in expanded form.</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.9rem;margin:10px 0;">'
      + b1 + '<sup>' + e1 + '</sup> × ' + b2 + '<sup>' + e2 + '</sup></div>', opts, right);
    return;
  }
  const b1 = ffPick([2, 3, 5]), e1 = rr(2, 4);
  let b2 = ffPick([2, 3, 5, 7]); while (b2 === b1) b2 = ffPick([2, 3, 5, 7]);
  const e2 = rr(1, 2);
  const v = Math.pow(b1, e1) * Math.pow(b2, e2);
  qData.ans = v;
  qData.workSteps = b1 + '<sup>' + e1 + '</sup> = ' + Math.pow(b1, e1) + ' and ' + b2 + '<sup>' + e2
    + '</sup> = ' + Math.pow(b2, e2) + ', so the product is ' + Math.pow(b1, e1) + ' × '
    + Math.pow(b2, e2) + ' = <b>' + v + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Evaluate.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.1rem;margin:10px 0;">'
    + b1 + '<sup>' + e1 + '</sup> × ' + b2 + '<sup>' + e2 + '</sup></div>';
}

/* ── PRIME FACTOR FORM — Prime Factorisation L4 (Yr 7 Section B Q7) ─ */
function pfacForm(n){
  const f = { }; let x = n;
  for (let p = 2; p * p <= x; p++) while (x % p === 0){ f[p] = (f[p] || 0) + 1; x /= p; }
  if (x > 1) f[x] = (f[x] || 0) + 1;
  return Object.keys(f).map(Number).sort(function(a, b){ return a - b; })
    .map(function(p){ return f[p] === 1 ? String(p) : p + '<sup>' + f[p] + '</sup>'; }).join(' × ');
}
function genPrimeFactorForm(el){
  el.style.fontSize = '1.05rem';
  const N = ffPick([12, 18, 20, 24, 28, 36, 40, 45, 48, 50, 54, 56, 60, 72, 75, 80, 84, 90, 96, 100, 120, 126]);
  const right = pfacForm(N);
  const seen = { }; seen[right] = 1;
  const opts = [right];
  const near = shuffleArr([N + 2, N - 2, N * 2, Math.max(4, N - 6), N + 6, N + 4]);
  for (let i = 0; i < near.length && opts.length < 4; i++){
    const t = pfacForm(near[i]);
    if (!seen[t]) { seen[t] = 1; opts.push(t); }
  }
  qData.workSteps = 'Divide by primes until only primes are left, then collect repeats as powers: '
    + N + ' = <b>' + right + '</b>.';
  decSetChoice(el, '<div style="' + A_LBL + '">Write this number in prime factor form.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.4rem;margin:10px 0;">' + N + '</div>', opts, right);
}

/* ── COMBINING TWO RATIOS — Equivalent Ratios L4 (SEAL Section B Q2) ─
   a : b and b′ : c share the middle quantity. Scale both to the LCM of
   the two middle terms, then read off the outer pair. */
function genRatioChain(el){
  el.style.fontSize = '1.05rem';
  const a = rr(1, 5), b = rr(2, 6), b2 = rr(2, 6), c = rr(1, 5);
  const L = b * b2 / gcd(b, b2);
  const k1 = L / b, k2 = L / b2;
  const outA = a * k1, outC = c * k2;
  const g = gcd(outA, outC);
  qData.ansA = outA / g; qData.ansB = outC / g;
  const names = ffPick([['Red', 'Blue', 'White'], ['flour', 'sugar', 'butter'], ['sand', 'cement', 'gravel']]);
  qData.workSteps = names[0] + ' : ' + names[1] + ' = ' + a + ' : ' + b + ' and ' + names[1] + ' : '
    + names[2] + ' = ' + b2 + ' : ' + c + '.<br>The shared part is ' + names[1]
    + ' — scale both ratios so it matches at ' + L + ':<br>' + a + ' : ' + b + ' → ' + (a * k1) + ' : ' + L
    + ' and ' + b2 + ' : ' + c + ' → ' + L + ' : ' + (c * k2) + '.<br>So ' + names[0] + ' : ' + names[2]
    + ' = ' + outA + ' : ' + outC + ' = <b>' + qData.ansA + ' : ' + qData.ansB + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + names[0] + ' : ' + names[1] + ' = ' + a + ' : ' + b
    + ' and ' + names[1] + ' : ' + names[2] + ' = ' + b2 + ' : ' + c
    + '.<br>Find ' + names[0] + ' : ' + names[2] + ' in simplest form.</div>';
}

/* ── FIND THE TERM NUMBER — Arithmetic Sequences L5 (SEAL Q10c) ──── */
function genArithTermNumber(el){
  el.style.fontSize = '1.05rem';
  const a1 = rr(1, 12), d = ffPick([2, 3, 4, 5, 6, 7, 8, 10]);
  const n = rr(12, 60);
  const tn = a1 + (n - 1) * d;
  qData.ans = n;
  qData.workSteps = 'The rule is t<sub>n</sub> = ' + a1 + ' + (n − 1) × ' + d + '.<br>'
    + 'Put t<sub>n</sub> = ' + tn + ': ' + tn + ' = ' + a1 + ' + (n − 1) × ' + d
    + ' → ' + (tn - a1) + ' = (n − 1) × ' + d + ' → n − 1 = ' + ((tn - a1) / d)
    + ' → n = <b>' + n + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">The sequence starts ' + a1 + ', ' + (a1 + d) + ', '
    + (a1 + 2 * d) + ', ' + (a1 + 3 * d) + ', …<br>The number <b>' + tn
    + '</b> is in this sequence. <b>Which term number</b> is it?</div>';
}

/* ═══════════════════════════════════════════════════════════════════
   v96 — TIER 3: the smaller exam items
═══════════════════════════════════════════════════════════════════ */

/* Addition & Subtraction L4 — FOUR DIGITS (Yr 7 Section B Q9).
   The exam works with 6431, 1009, 882 and 2988; the app stopped at
   three digits. Same stacked column layout as L1–L3. */
function genFourDigit(sub){
  const el = id('qText');
  let a = rr(1000, 9999), b = rr(1000, 9999);
  if (sub){ if (b > a) { const t = a; a = b; b = t; } }
  qData.ans = sub ? a - b : a + b;
  qData.workSteps = 'Line the digits up in columns and work from the right, carrying '
    + (sub ? 'or borrowing ' : '') + 'as you go: ' + a + (sub ? ' − ' : ' + ') + b
    + ' = <b>' + qData.ans + '</b>.';
  id('qBox').innerHTML = '<div style="font-family:\'Nunito\',sans-serif;font-weight:900;font-size:2.2rem;'
    + 'text-align:right;line-height:1.4;border-bottom:3px solid var(--text);padding-bottom:6px;'
    + 'min-width:170px;display:inline-block"><div>' + a + '</div><div>'
    + (sub ? '−' : '+') + '&nbsp;' + b + '</div></div>';
}

/* Division L4 — HOW MANY ARE NEEDED (SEAL Section B Q8d).
   Ceiling division in context: 152 croissants at 36 per oven is 4.2
   ovens, which means 5. Students who divide and round the normal way
   get this wrong every time, so it is its own level. */
function genDivisionRoundUp(el){
  el.style.fontSize = '1.2rem'; el.style.lineHeight = '1.5'; el.style.textAlign = 'left';
  const per = ffPick([4, 6, 8, 10, 12, 15, 20, 24, 25, 36]);
  const full = rr(2, 9);
  const extra = rr(1, per - 1);                 // guarantees a partial last group
  const total = per * full + extra;
  qData.ans = full + 1;
  const t = ri(3);
  let text;
  if (t === 0) text = 'A tray holds ' + per + ' muffins. How many trays are needed to bake ' + total + ' muffins?';
  else if (t === 1) text = 'A minibus seats ' + per + ' people. How many minibuses are needed to carry ' + total + ' people?';
  else text = 'A box holds ' + per + ' books. How many boxes are needed to pack ' + total + ' books?';
  qData.workSteps = total + ' ÷ ' + per + ' = ' + full + ' remainder ' + extra + '.<br>'
    + 'Those ' + extra + ' left over still need one more, so round <b>up</b>: <b>' + (full + 1) + '</b>. '
    + 'Rounding the ordinary way would give ' + Math.round(total / per) + ' and leave some behind.';
  el.textContent = text;
}

/* Factors, Multiples & Primes L4 — DESCRIBE THE NUMBER (Yr 7 MC Q3).
   The exam asks which description fits 51 — a combined odd/even,
   prime, square and multiple judgement that no single level covered. */
function fmpDescribe(n){
  const bits = [];
  bits.push(n % 2 ? 'Odd' : 'Even');
  const isPrime = (function(){ if (n < 2) return false; for (let i = 2; i * i <= n; i++) if (n % i === 0) return false; return true; })();
  const isSq = Math.round(Math.sqrt(n)) * Math.round(Math.sqrt(n)) === n;
  return { odd: n % 2 === 1, prime: isPrime, square: isSq,
           mult: function(k){ return n % k === 0; } };
}
function genDescribeNumber(el){
  el.style.fontSize = '1.05rem';
  const N = rr(12, 99);
  const d = fmpDescribe(N);
  const parity = d.odd ? 'Odd' : 'Even';
  const notParity = d.odd ? 'Even' : 'Odd';
  /* The TRUE description is built from N itself, so it can never be wrong.
     Each distractor is checked and only kept when it is genuinely false. */
  let tail;
  if (d.prime) tail = 'prime';
  else if (d.square) tail = 'square';
  else { const k = [3, 5, 7, 11].filter(function(x){ return d.mult(x); }); tail = k.length ? 'a multiple of ' + k[0] : 'composite'; }
  const right = parity + ' and ' + tail;
  const cand = [notParity + ' and ' + tail,
                parity + ' and ' + (d.prime ? 'square' : 'prime'),
                parity + ' and a multiple of ' + [3, 5, 7, 11].filter(function(x){ return !d.mult(x); })[0],
                notParity + ' and ' + (d.square ? 'a multiple of 4' : 'square')];
  const seen = { }; seen[right] = 1;
  const opts = [right];
  cand.forEach(function(t){ if (!seen[t] && opts.length < 4) { seen[t] = 1; opts.push(t); } });
  qData.workSteps = N + ' is ' + parity.toLowerCase() + ', and it is ' + tail + '. '
    + (d.prime ? 'A prime has exactly two factors: 1 and itself.'
       : 'Check the factors: ' + N + ' = ' + (function(){ for (let i = 2; i * i <= N; i++) if (N % i === 0) return i + ' × ' + (N / i); return '1 × ' + N; })() + '.');
  decSetChoice(el, '<div style="' + A_LBL + '">Which of these describes the number below?</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.6rem;margin:10px 0;">' + N + '</div>', opts, right);
}

/* Sequence Rules in Words L6 — TWO-STEP RULES (Yr 7 MC Q10).
   3, 7, 15, 31, … is ×2 + 1: neither arithmetic nor geometric, and
   every existing sequence level assumes one single operation. */
function genTwoStepPattern(el){
  el.style.fontSize = '1.05rem';
  const m = ffPick([2, 2, 2, 3]), c = ffPick([1, 1, 2, -1, 3]);
  const a0 = rr(1, 5);
  const seq = [a0];
  for (let i = 0; i < 5; i++) seq.push(seq[seq.length - 1] * m + c);
  const k = ffPick([3, 4]);                   // which term is hidden
  qData.ans = seq[k];
  const shown = seq.slice(0, 6).map(function(v, i){ return i === k ? '____' : v; });
  qData.workSteps = 'Each term is the one before it × ' + m + (c > 0 ? ' + ' + c : ' − ' + (-c))
    + '.<br>Check: ' + seq[0] + ' × ' + m + (c > 0 ? ' + ' + c : ' − ' + (-c)) + ' = ' + seq[1]
    + ', and ' + seq[1] + ' × ' + m + (c > 0 ? ' + ' + c : ' − ' + (-c)) + ' = ' + seq[2] + '.<br>'
    + 'So the missing term is ' + seq[k - 1] + ' × ' + m + (c > 0 ? ' + ' + c : ' − ' + (-c))
    + ' = <b>' + seq[k] + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">The rule for this pattern takes TWO steps '
    + '(multiply, then add or subtract). Find the missing term.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.9rem;margin:12px 0;">'
    + shown.join(', &nbsp;') + ', &nbsp;…</div>';
}

/* Train & Bus Timetables L5 — WORKING BACKWARDS (SEAL Section B Q8e).
   "It must be ready by 6:20 am — when do you start?" Every existing
   timetable level moves forwards along the clock. */
function ttbClock(mins){
  let m = ((mins % 1440) + 1440) % 1440;
  const h24 = Math.floor(m / 60), mm = m % 60;
  const h12 = (h24 % 12) === 0 ? 12 : (h24 % 12);
  return h12 + ':' + String(mm).padStart(2, '0') + ' ' + (h24 < 12 ? 'am' : 'pm');
}
function genTimetableBackwards(el){
  el.style.fontSize = '1.05rem';
  const finish = rr(6, 20) * 60 + ffPick([0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]);
  const dur = ffPick([25, 35, 40, 45, 50, 55, 70, 80, 95, 110]);
  const start = finish - dur;
  const right = ttbClock(start);
  const seen = { }; seen[right] = 1;
  const opts = [right];
  [finish + dur, start + 60, start - 60, finish - 60, start + 10].forEach(function(v){
    const t = ttbClock(v);
    if (!seen[t] && opts.length < 4) { seen[t] = 1; opts.push(t); }
  });
  const ctx = ffPick([
    ['the bread must be out of the oven', 'baking takes'],
    ['the bus must arrive', 'the trip takes'],
    ['the cake must be ready', 'it takes'],
  ]);
  qData.workSteps = 'Work BACKWARDS from the finish time: ' + ttbClock(finish) + ' minus '
    + dur + ' minutes = <b>' + right + '</b>. Counting forwards from the finish time is the '
    + 'usual mistake — that would give ' + ttbClock(finish + dur) + '.';
  decSetChoice(el, '<div style="' + A_LBL + '">If ' + ctx[0] + ' by <b>' + ttbClock(finish)
    + '</b> and ' + ctx[1] + ' <b>' + dur + ' minutes</b>, what time must it start?</div>', opts, right);
}

/* Naming 2D & 3D Shapes L6/L7 — POLYGON OR NOT, AND COUNTING PARTS
   (Yr 7 Section B Q1a and Q1b). */
const NSH_NOT_POLY = ['circle', 'sphere', 'cylinder', 'cone'];
function genShapePolygon(el){
  el.style.fontSize = '1.05rem';
  const polyKeys = ['triangle', 'pentagon', 'hexagon', 'heptagon', 'octagon', 'nonagon', 'decagon',
                    'square', 'rectangle', 'parallelogram', 'rhombus', 'trapezium', 'kite'];
  const isPoly = Math.random() < 0.55;
  const key = isPoly ? ffPick(polyKeys) : ffPick(NSH_NOT_POLY);
  const sh = SHAPE_LIB[key];
  const right = isPoly ? 'Yes — it is a polygon' : 'No — it is not a polygon';
  qData.workSteps = isPoly
    ? 'A polygon is a CLOSED 2D shape made only of straight sides. A ' + sh.name.toLowerCase()
      + ' has straight sides and no gaps, so it <b>is</b> a polygon.'
    : 'A ' + sh.name.toLowerCase() + ' is <b>not</b> a polygon — '
      + (sh.dim === '3D' ? 'a polygon must be flat (2D), and this is a solid.'
                         : 'a polygon must be made only of straight sides, and this has a curve.');
  decSetChoice(el, '<div style="' + A_LBL + '">Is this shape a polygon?</div>'
    + shWrap(sh.variants[0]), ['Yes — it is a polygon', 'No — it is not a polygon'], right, true);
}
const NSH_SIDES = { triangle:3, square:4, rectangle:4, parallelogram:4, rhombus:4, trapezium:4, kite:4,
                    pentagon:5, hexagon:6, heptagon:7, octagon:8, nonagon:9, decagon:10 };
function genShapeCount(el){
  el.style.fontSize = '1.05rem';
  const key = ffPick(Object.keys(NSH_SIDES));
  const sh = SHAPE_LIB[key], n = NSH_SIDES[key];
  const askVertices = Math.random() < 0.5;
  qData.ans = n;
  qData.workSteps = 'A ' + sh.name.toLowerCase() + ' has ' + n + ' sides and ' + n + ' vertices — '
    + 'in any polygon the two counts are always <b>the same</b>, because each corner joins exactly two sides.';
  el.innerHTML = '<div style="' + A_LBL + '">How many <b>' + (askVertices ? 'vertices (corners)' : 'sides')
    + '</b> does this shape have?</div>' + shWrap(sh.variants[0]);
}

/* v96: levels appended to skills that already exist. Same approach as the v93
   word problems — ONE map and ONE dispatcher, so not a single existing
   generator was reopened to add a level to the end of it. */
const V96_LEVELS = {
  addition: [4], subtraction: [4], division: [4], factorsMultiples: [4],
  primeFactor: [4], ratioEquiv: [4], seqWords: [6], arithSeq: [5],
  timetables: [5], nameShapes: [6, 7],
};
function isV96Level(){
  const a = V96_LEVELS[skill];
  return !!a && a.indexOf(level) >= 0;
}
function genV96Level(el){
  if (skill === 'addition')         return genFourDigit(false);
  if (skill === 'subtraction')      return genFourDigit(true);
  if (skill === 'division')         return genDivisionRoundUp(el);
  if (skill === 'factorsMultiples') return genDescribeNumber(el);
  if (skill === 'primeFactor')      return genPrimeFactorForm(el);
  if (skill === 'ratioEquiv')       return genRatioChain(el);
  if (skill === 'seqWords')         return genTwoStepPattern(el);
  if (skill === 'arithSeq')         return genArithTermNumber(el);
  if (skill === 'timetables')       return genTimetableBackwards(el);
  if (skill === 'nameShapes')       return level === 6 ? genShapePolygon(el) : genShapeCount(el);
}


/* ═══════════════════════════════════════════════════════════════════════
   v98 — THE ALT AUDIT, PART 1: MAPPING FIXES + ENHANCEMENTS
   -----------------------------------------------------------------------
   27 levels APPENDED to skills that already exist. Same discipline as v93
   and v96: ONE map and ONE dispatcher, so not a single existing generator
   was reopened to bolt a level onto the end of it.

   The pattern the audit found, and what these levels are: the app was very
   good at "do the calculation" and thin on RECOGNISE / CHOOSE / CLASSIFY /
   GO BACKWARDS — which is where the cheap 1-mark ALT items live.
═══════════════════════════════════════════════════════════════════════ */
const V98_LEVELS = {
  fracSimplify: [4], intMultDiv: [4], pctExpress: [4, 5], angleParallel: [5],
  pythagoras: [5], factorsMultiples: [5], roots: [4], decMultiply: [5],
  compareDec: [6], algParts: [4], indexMult: [4], algMultiply: [5], squares: [4],
  algDivide: [5], ratioShare: [6, 7], ratioSimplify: [4, 5, 6], algSub: [6],
  eqOneStepAddSub: [4], eqOneStepMulDiv: [4], fracToDec: [4], pctFDP: [4],
  /* fracAddSub L5, fracMultiply L4 and fracDivide L4 were removed in v100 —
     they duplicated fas L4 and fmu/fd L3, which already do exactly this. */
};
function isV98Level(){
  const a = V98_LEVELS[skill];
  return !!a && a.indexOf(level) >= 0;
}
function genV98Level(el){
  if (skill === 'fracSimplify')    return genWhichSimplest(el);
  if (skill === 'intMultDiv')      return genWhichSign(el);
  if (skill === 'pctExpress')      return level === 4 ? genWorkingLine(el) : genGreaterPct(el);
  if (skill === 'angleParallel')   return genParallelDecide(el);
  if (skill === 'pythagoras')      return genRightAngled(el);
  if (skill === 'factorsMultiples')return genAllPrimeSet(el);
  if (skill === 'roots' || skill === 'squares') return genRootBetween(el);
  if (skill === 'decMultiply')     return genDecPlacesCount(el);
  if (skill === 'compareDec')      return genClosestTo(el);
  if (skill === 'algParts')        return genCountTerms(el);
  if (skill === 'indexMult')       return genIndexTrueFalse(el);
  if (skill === 'algMultiply')     return genMissingFactor(el);
  if (skill === 'algDivide')       return genMissingDivisor(el);
  if (skill === 'ratioShare')      return level === 6 ? genRatioAsFraction(el) : genFourPartShare(el);
  if (skill === 'ratioSimplify')   return level === 4 ? genRatioFromDiagram(el)
                                        : level === 5 ? genRatioUnits(el) : genRatioThreeFour(el);
  if (skill === 'algSub')          return genSubDecimals(el);
  if (skill === 'eqOneStepAddSub') return genOneStepDecAddSub(el);
  if (skill === 'eqOneStepMulDiv') return genOneStepDecMulDiv(el);
  if (skill === 'fracToDec')       return genMixedToDecimal(el);
  if (skill === 'pctFDP')          return genPctFDPHard(el);
}

/* A small inline fraction for OPTION BUTTONS. fracHTML() is a block element
   sized for the question box; an option button needs something that sits on
   one line inside a 74px cell. */
function v98Frac(n, d){
  return '<span style="display:inline-block;text-align:center;vertical-align:middle;line-height:1.05;">'
    + '<span style="display:block;border-bottom:2px solid currentColor;padding:0 3px;">' + n + '</span>'
    + '<span style="display:block;">' + d + '</span></span>';
}
function v98Neg(n){ return n < 0 ? '−' + Math.abs(n) : String(n); }
/* A signed fraction, sign carried on the numerator, denominator always positive. */
function v98Sign(n, d){
  if (d < 0) { n = -n; d = -d; }
  const g = gcd(Math.abs(n), Math.abs(d)) || 1;
  return [n / g, d / g];
}

/* ─────────────────────────────────────────────────────────────────
   1. Simplify Fractions L4 — WHICH IS IN SIMPLEST FORM?
   Yr 7 ALT 2 MC Q2 · SEAL ALT 2 MC Q1.
   Exactly one option has gcd 1 — the three distractors are built AS a
   multiple of a reduced fraction, so "already simplest" can never be
   true of two of them at once.
───────────────────────────────────────────────────────────────── */
function genWhichSimplest(el){
  el.style.fontSize = '1.05rem';
  let rn = 0, rd = 0, guard = 0;
  while (guard++ < 200){ const d = rr(3, 12), n = rr(1, d - 1); if (gcd(n, d) === 1){ rn = n; rd = d; break; } }
  const right = v98Frac(rn, rd);
  const opts = [right], seen = {}; seen[rn + '/' + rd] = 1;
  const steps = [];
  let g2 = 0;
  while (opts.length < 4 && g2++ < 400){
    const d0 = rr(2, 11), n0 = rr(1, d0 - 1), k = rr(2, 5);
    if (gcd(n0, d0) !== 1) continue;
    const n = n0 * k, d = d0 * k;
    if (d > 60) continue;
    const key = n + '/' + d;
    if (seen[key]) continue;
    seen[key] = 1;
    opts.push(v98Frac(n, d));
    steps.push(n + '/' + d + ' cancels by ' + k + ' → ' + n0 + '/' + d0);
  }
  qData.workSteps = 'A fraction is in simplest form when the top and bottom share no common factor.<br>'
    + steps.join('<br>') + '<br>Only <b>' + rn + '/' + rd + '</b> cannot be cancelled — its HCF is 1.';
  decSetChoice(el, '<div style="' + A_LBL + '">Which fraction is in <b>simplest form</b>?</div>', opts, right);
}

/* ─────────────────────────────────────────────────────────────────
   2. Multiply / Divide Integers L4 — WHICH SIGN?
   Yr 7 ALT 1 MC Q6 · SEAL ALT 1 MC Q4.
   The answer is generated FIRST and then every one of the four
   operations is tested against it — the question is only kept when
   EXACTLY ONE produces that answer. (−2 ÷ −2 = 1 and −2 × −2 = 4 is
   fine; a = b = 1 would give two right answers and is thrown away.)
───────────────────────────────────────────────────────────────── */
function genWhichSign(el){
  el.style.fontSize = '1.05rem';
  const OPS = ['+', '−', '×', '÷'];
  let a = 0, b = 0, opi = 0, res = 0, ok = false, guard = 0;
  while (guard++ < 400){
    a = nz(rr(-12, 12)); b = nz(rr(-12, 12));
    const vals = [a + b, a - b, a * b, (a % b === 0) ? a / b : NaN];
    opi = ri(4);
    res = vals[opi];
    if (!isFinite(res)) continue;
    let hits = 0;
    for (let i = 0; i < 4; i++) if (isFinite(vals[i]) && vals[i] === res) hits++;
    if (hits === 1){ ok = true; break; }
  }
  if (!ok){ a = -2; b = -2; opi = 2; res = 4; }
  const A = v98Neg(a), B = v98Neg(b), R = v98Neg(res);
  qData.workSteps = 'Try each sign: ' + A + ' + ' + B + ' = ' + v98Neg(a + b)
    + ' · ' + A + ' − ' + B + ' = ' + v98Neg(a - b)
    + ' · ' + A + ' × ' + B + ' = ' + v98Neg(a * b)
    + (a % b === 0 ? ' · ' + A + ' ÷ ' + B + ' = ' + v98Neg(a / b) : '')
    + '.<br>Only <b>' + OPS[opi] + '</b> gives ' + R + '.';
  decSetChoice(el, '<div style="' + A_LBL + '">What sign goes in the box to make this true?</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.2rem;margin:14px 0;">'
    + A + ' &nbsp;<span style="border:2px dashed var(--accent);padding:0 12px;border-radius:6px;">?</span>&nbsp; '
    + B + ' = ' + R + '</div>', OPS, OPS[opi], true);
}

/* ─────────────────────────────────────────────────────────────────
   3. One Amount as a Percentage L4 — PICK THE WORKING LINE
   Yr 7 ALT 5 MC Q5 · SEAL ALT 5 MC Q5 (identical question).
   Recognition, not arithmetic — which is exactly the exam item.
───────────────────────────────────────────────────────────────── */
function genWorkingLine(el){
  el.style.fontSize = '1.05rem';
  let a = 0, b = 0, guard = 0;
  while (guard++ < 200){
    a = rr(7, 70); b = rr(a + 6, 130);
    if (b - a !== a) break;                    // else two options would read the same
  }
  const right = v98Frac(a, b) + ' × 100';
  const opts = [right, v98Frac(b, a) + ' × 100', v98Frac(a, b) + ' ÷ 100', v98Frac(b - a, b) + ' × 100'];
  qData.workSteps = '"' + a + ' out of ' + b + '" is the fraction ' + a + '/' + b
    + '. To turn a fraction into a percentage you multiply by 100.<br>'
    + 'So the working line is <b>' + a + '/' + b + ' × 100</b>. '
    + b + '/' + a + ' is upside down, ÷ 100 goes the wrong way, and ' + (b - a) + '/' + b
    + ' is the percentage that is NOT ' + a + '.';
  decSetChoice(el, '<div style="' + A_LBL + '">Which is the correct working line to express <b>'
    + a + ' out of ' + b + '</b> as a percentage?</div>', opts, right);
}

/* ─────────────────────────────────────────────────────────────────
   4. One Amount as a Percentage L5 — WHICH IS THE GREATER PERCENTAGE?
   Both ALT 5 papers, Q8 (the sports-drink sugar question).
   The two percentages must differ by at least 1.5 points, so the answer
   is never a rounding argument. Fixed option positions: the two labels
   are the same shape every question, so the buttons never move.
───────────────────────────────────────────────────────────────── */
const V98_PCT_CTX = [
  { n1: 'Yellow drink', n2: 'Blue drink', what: 'sugar', unit: 'g', of: 'drink' },
  { n1: 'Bag A', n2: 'Bag B', what: 'red lollies', unit: '', of: 'lollies' },
  { n1: 'Class 7A', n2: 'Class 7B', what: 'students who walk to school', unit: '', of: 'students' },
  { n1: 'Team Blue', n2: 'Team Green', what: 'games won', unit: '', of: 'games played' },
];
function genGreaterPct(el){
  el.style.fontSize = '1.05rem';
  const c = V98_PCT_CTX[ri(V98_PCT_CTX.length)];
  let t1 = 0, t2 = 0, a1 = 0, a2 = 0, p1 = 0, p2 = 0, guard = 0;
  while (guard++ < 400){
    t1 = ffPick([20, 25, 40, 50, 200, 250, 300]); t2 = ffPick([20, 25, 40, 50, 200, 250, 300]);
    a1 = rr(2, t1 - 2); a2 = rr(2, t2 - 2);
    p1 = 100 * a1 / t1; p2 = 100 * a2 / t2;
    if (p1 < 5 || p1 > 95 || p2 < 5 || p2 > 95) continue;
    if (Math.abs(p1 - p2) >= 1.5) break;
  }
  const wantHigher = Math.random() < 0.5;
  const firstWins = wantHigher ? (p1 > p2) : (p1 < p2);
  const correct = firstWins ? c.n1 : c.n2;
  const u = c.unit ? c.unit : '';
  qData.workSteps = c.n1 + ': ' + a1 + ' out of ' + t1 + ' = ' + a1 + '/' + t1 + ' × 100 = <b>'
    + dp(p1, 1) + '%</b>.<br>' + c.n2 + ': ' + a2 + ' out of ' + t2 + ' = ' + a2 + '/' + t2
    + ' × 100 = <b>' + dp(p2, 1) + '%</b>.<br>The ' + (wantHigher ? 'higher' : 'lower')
    + ' percentage is <b>' + correct + '</b>.';
  decSetChoice(el, '<div style="' + A_LBL + '">' + c.n1 + ' has <b>' + a1 + u + '</b> ' + c.what
    + ' out of ' + t1 + u + ' ' + c.of + '.<br>' + c.n2 + ' has <b>' + a2 + u + '</b> ' + c.what
    + ' out of ' + t2 + u + ' ' + c.of + '.<br>Which has the <b>' + (wantHigher ? 'higher' : 'lower')
    + ' percentage</b> of ' + c.what + '?</div>', [c.n1, c.n2], correct, true);
}

/* ─────────────────────────────────────────────────────────────────
   5. Angles on Parallel Lines L5 — ARE THE LINES PARALLEL?
   Yr 7 ALT 4 Q5 · SEAL ALT 4 Q3 (identical question, 2 marks each).
   L1 identifies the relationship; this level asks the JUDGEMENT that
   follows from it. The angles are generated first and the verdict read
   off them — the picture is never labelled from a decision.
   NOTE: no parallel arrow-marks are drawn. Marking the lines parallel
   would answer the question.
───────────────────────────────────────────────────────────────── */
function genParallelDecide(el){
  el.style.fontSize = '1.05rem';
  const kind = ffPick(['co-interior', 'alternate', 'corresponding']);
  const parallel = Math.random() < 0.5;
  const base = rr(35, 145);
  let a = base, b;
  if (kind === 'co-interior') b = parallel ? 180 - base : 180 - base + ffPick([-25, -20, -15, -10, 10, 15, 20, 25]);
  else                        b = parallel ? base       : base       + ffPick([-25, -20, -15, -10, 10, 15, 20, 25]);
  if (b <= 10 || b >= 170) b = parallel ? b : (b > 90 ? b - 30 : b + 30);
  const y1 = 52, y2 = 132, tx1 = 72, ty1 = 18, tx2 = 214, ty2 = 166;
  const m = (ty2 - ty1) / (tx2 - tx1);
  const x1 = tx1 + (y1 - ty1) / m, x2 = tx1 + (y2 - ty1) / m;
  /* label positions: co-interior = both inside, same side · alternate =
     inside, opposite sides · corresponding = same corner at each crossing */
  let la, lb;
  if (kind === 'co-interior')      { la = [x1 + 20, y1 + 22]; lb = [x2 + 20, y2 - 12]; }
  else if (kind === 'alternate')   { la = [x1 + 20, y1 + 22]; lb = [x2 - 30, y2 - 12]; }
  else                             { la = [x1 + 20, y1 + 22]; lb = [x2 + 20, y2 + 24]; }
  const svg = '<svg viewBox="0 0 300 190" style="width:100%;max-width:320px;display:block;margin:6px auto;">'
    + '<line x1="18" y1="' + y1 + '" x2="282" y2="' + y1 + '" stroke="var(--text)" stroke-width="3"/>'
    + '<line x1="18" y1="' + y2 + '" x2="282" y2="' + y2 + '" stroke="var(--text)" stroke-width="3"/>'
    + '<line x1="' + tx1 + '" y1="' + ty1 + '" x2="' + tx2 + '" y2="' + ty2 + '" stroke="var(--accent)" stroke-width="3"/>'
    + '<text x="' + la[0] + '" y="' + la[1] + '" font-size="17" font-weight="800" fill="var(--accent)">' + a + '°</text>'
    + '<text x="' + lb[0] + '" y="' + lb[1] + '" font-size="17" font-weight="800" fill="var(--accent)">' + b + '°</text>'
    + '</svg>';
  const rule = kind === 'co-interior'
    ? 'Co-interior angles on parallel lines add to 180°'
    : (kind === 'alternate' ? 'Alternate angles on parallel lines are equal'
                            : 'Corresponding angles on parallel lines are equal');
  const check = kind === 'co-interior'
    ? (a + ' + ' + b + ' = ' + (a + b) + '°')
    : (a + ' and ' + b + (a === b ? ' are equal' : ' are not equal'));
  qData.workSteps = 'The marked angles are <b>' + kind + '</b>. ' + rule + '.<br>Here ' + check + ' — '
    + (parallel ? 'that is exactly what the rule requires, so the lines <b>are</b> parallel.'
                : 'that breaks the rule, so the lines are <b>not</b> parallel.');
  decSetChoice(el, '<div style="' + A_LBL + '">Are the two lines cut by the transversal parallel?</div>' + svg,
    ['Yes', 'No'], parallel ? 'Yes' : 'No', true);
}

/* ─────────────────────────────────────────────────────────────────
   6. Pythagoras L5 — IS IT RIGHT-ANGLED? (the converse)
   SEAL ALT 4 Q5, "show that the following triangle is right-angled".
   Half the sets are genuine triples; the other half miss by 1 or 2, so
   the check is real arithmetic and not eyeballing the shape.
───────────────────────────────────────────────────────────────── */
const V98_TRIPLES = [[3,4,5],[6,8,10],[5,12,13],[9,12,15],[8,15,17],[7,24,25],[12,16,20],[20,21,29],[10,24,26],[9,40,41]];
function genRightAngled(el){
  el.style.fontSize = '1.05rem';
  const t = V98_TRIPLES[ri(V98_TRIPLES.length)].slice();
  const yes = Math.random() < 0.5;
  let s = t;
  if (!yes){
    let guard = 0;
    while (guard++ < 100){
      const w = t.slice();
      const i = ri(3), d = ffPick([-2, -1, 1, 2]);
      w[i] = w[i] + d;
      if (w[0] <= 0 || w[1] <= 0) continue;
      if (w[0] + w[1] <= w[2]) continue;              // still a real triangle
      if (w[2] <= w[0] || w[2] <= w[1]) continue;     // longest side stays longest
      if (w[0] * w[0] + w[1] * w[1] === w[2] * w[2]) continue;
      s = w; break;
    }
  }
  const u = ffPick(['cm', 'm', 'mm']);
  const sq = s[0] * s[0] + s[1] * s[1], hy = s[2] * s[2];
  qData.workSteps = 'Test the two shorter sides against the longest one: ' + s[0] + '² + ' + s[1] + '² = '
    + (s[0] * s[0]) + ' + ' + (s[1] * s[1]) + ' = ' + sq + ', and ' + s[2] + '² = ' + hy + '.<br>'
    + (sq === hy ? 'They are equal, so a² + b² = c² and the triangle <b>is</b> right-angled.'
                 : 'They are not equal, so a² + b² ≠ c² and the triangle is <b>not</b> right-angled.');
  decSetChoice(el, '<div style="' + A_LBL + '">A triangle has sides <b>' + s[0] + ' ' + u + '</b>, <b>'
    + s[1] + ' ' + u + '</b> and <b>' + s[2] + ' ' + u + '</b>.<br>Is it right-angled?</div>',
    ['Yes', 'No'], sq === hy ? 'Yes' : 'No', true);
}

/* ─────────────────────────────────────────────────────────────────
   7. Factors, Multiples & Primes L5 — WHICH SET IS ALL PRIME?
   Yr 7 ALT 1 MC Q5. Every distractor carries exactly ONE non-prime, and
   it is one of the three classic ones: 1 (not prime), an odd composite
   (9, 15, 21, 25, 27, 33, 35, 49) or a square.
───────────────────────────────────────────────────────────────── */
const V98_PRIMES   = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73];
const V98_NONPRIME = [1,9,15,21,25,27,33,35,49,51,55,57,63,77,81,91];
function genAllPrimeSet(el){
  el.style.fontSize = '1.05rem';
  function pickPrimes(k){ return shuffleArr(V98_PRIMES.slice()).slice(0, k).sort(function(x,y){ return x-y; }); }
  const right = pickPrimes(5);
  const opts = [right.join(', ')], seen = {}; seen[right.join(',')] = 1;
  const spoilers = [];
  let guard = 0;
  while (opts.length < 4 && guard++ < 200){
    const bad = V98_NONPRIME[ri(V98_NONPRIME.length)];
    const set = pickPrimes(4).concat([bad]).sort(function(x,y){ return x-y; });
    const key = set.join(',');
    if (seen[key]) continue;
    seen[key] = 1;
    opts.push(set.join(', '));
    spoilers.push(bad === 1 ? '1 is not prime (it has only ONE factor)'
      : bad + ' = ' + v98SmallFactor(bad) + ' × ' + (bad / v98SmallFactor(bad)) + ', so it is not prime');
  }
  qData.workSteps = 'A prime number has exactly two factors — 1 and itself.<br>'
    + spoilers.join('<br>') + '<br>Only <b>' + right.join(', ') + '</b> is prime all the way through.';
  decSetChoice(el, '<div style="' + A_LBL + '">Which of the following is a set of <b>prime numbers</b>?</div>',
    opts, right.join(', '));
}
function v98SmallFactor(n){ for (let i = 2; i * i <= n; i++) if (n % i === 0) return i; return n; }

/* ─────────────────────────────────────────────────────────────────
   8. Square Roots L4 — BETWEEN WHICH WHOLE NUMBERS?
   Yr 7 ALT 1 Section A Q9 ("which two whole numbers does √34 lie
   between"). Two boxes, all-or-nothing; never a perfect square.
───────────────────────────────────────────────────────────────── */
function genRootBetween(el){
  el.style.fontSize = '1.05rem';
  let N = 0, lo = 0;
  do { N = rr(5, 399); lo = Math.floor(Math.sqrt(N)); } while (lo * lo === N);
  qData.gapTemplate = [0, '&nbsp; &lt; &nbsp;√' + N + '&nbsp; &lt; &nbsp;', 1];
  qData.gapAns = [lo, lo + 1];
  qData.gapHint = 'Fill in the two whole numbers.';
  qData.gapAnsText = lo + ' and ' + (lo + 1);
  qData.workSteps = lo + '² = ' + (lo * lo) + ' and ' + (lo + 1) + '² = ' + ((lo + 1) * (lo + 1))
    + '.<br>' + N + ' sits between them, so √' + N + ' is between <b>' + lo + '</b> and <b>' + (lo + 1) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Which two whole numbers does this square root lie between?</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.6rem;margin:12px 0;">√' + N + '</div>';
}

/* ─────────────────────────────────────────────────────────────────
   9. Multiply Decimals L5 — HOW MANY DECIMAL PLACES?
   Yr 7 ALT 5 MC Q1. Do NOT evaluate — count. The product's last digit is
   forced non-zero, so the count rule (places in the factors add) is never
   contradicted by a trailing zero disappearing.
───────────────────────────────────────────────────────────────── */
function genDecPlacesCount(el){
  el.style.fontSize = '1.05rem';
  let pa = 0, pb = 0, ra = 0, rb = 0, guard = 0;
  while (guard++ < 500){
    pa = rr(1, 3); pb = rr(1, 4);
    ra = rr(11, Math.pow(10, pa + 1) - 1);
    rb = rr(11, Math.pow(10, pb + 1) - 1);
    if (ra % 10 === 0 || rb % 10 === 0) continue;
    if ((ra * rb) % 10 === 0) continue;         // no trailing zero in the product
    break;
  }
  const a = dp(ra / Math.pow(10, pa), pa), b = dp(rb / Math.pow(10, pb), pb);
  const ans = pa + pb;
  const cand = [ans, ans - 1, ans + 1, Math.max(pa, pb), pa * pb, ans + 2];
  const opts = [], seen = {};
  cand.forEach(function(v){ if (v > 0 && !seen[v] && opts.length < 4){ seen[v] = 1; opts.push(String(v)); } });
  qData.workSteps = a + ' has ' + pa + ' decimal place' + (pa === 1 ? '' : 's') + ' and ' + b + ' has '
    + pb + '. Multiplying adds them: ' + pa + ' + ' + pb + ' = <b>' + ans + '</b> decimal places.';
  decSetChoice(el, '<div style="' + A_LBL + '">How many decimal places will there be in the answer?<br>'
    + '<span style="font-size:0.9em;opacity:0.75;">(Do not work it out — count.)</span></div>'
    + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:12px 0;">' + a + ' × ' + b + '</div>',
    opts, String(ans));
}

/* ─────────────────────────────────────────────────────────────────
   10. Compare & Order Decimals L6 — WHICH IS CLOSEST?
   Yr 7 ALT 5 MC Q3. Distances are all different and the minimum is
   unique, so there is exactly one defensible answer; at least one
   distractor carries MORE digits than the winner (the classic trap).
───────────────────────────────────────────────────────────────── */
function genClosestTo(el){
  el.style.fontSize = '1.05rem';
  let T = 0, vals = [], guard = 0;
  while (guard++ < 500){
    T = dp(rr(15, 95) / 10, 1);
    const offs = shuffleArr([0.015, 0.05, 0.1, 0.4, 0.45, 0.085, 0.25]).slice(0, 4);
    vals = offs.map(function(o, i){ return dp(T + (i % 2 ? o : -o), 3); });
    const ds = vals.map(function(v){ return Math.abs(v - T); });
    const uniq = {}; let clash = 0;
    ds.forEach(function(d){ const k = d.toFixed(4); if (uniq[k]) clash = 1; uniq[k] = 1; });
    if (clash) continue;
    if (vals.some(function(v){ return v <= 0; })) continue;
    break;
  }
  let bi = 0;
  vals.forEach(function(v, i){ if (Math.abs(v - T) < Math.abs(vals[bi] - T)) bi = i; });
  const opts = vals.map(function(v){ return String(v); });
  qData.workSteps = 'Find how far each one is from ' + T + ':<br>'
    + vals.map(function(v){ return v + ' is ' + dp(Math.abs(v - T), 3) + ' away'; }).join('<br>')
    + '<br>The smallest gap belongs to <b>' + vals[bi] + '</b>. More digits does not mean further away.';
  decSetChoice(el, '<div style="' + A_LBL + '">Which number is <b>closest in value</b> to ' + T + '?</div>',
    opts, String(vals[bi]));
}

/* ─────────────────────────────────────────────────────────────────
   11. Parts of Expressions L4 — COUNT THE TERMS & PRONUMERALS
   Yr 7 ALT 3 MC Q4 and Q7 · SEAL ALT 3 MC Q2.
   Expressions are built as DATA and counted from that data, so the
   printed expression and the counts can never drift apart. Exactly one
   option matches both counts.
───────────────────────────────────────────────────────────────── */
const V98_LETTERS = ['x','y','a','b','m','n','p','t'];
function v98MakeExpr(nTerms, nVars){
  const letters = shuffleArr(V98_LETTERS.slice()).slice(0, nVars);
  const terms = [];
  for (let i = 0; i < nTerms; i++) terms.push({ c: rr(2, 12), v: letters[i % nVars] });
  /* guarantee every chosen letter really appears */
  shuffleArr(terms);
  const hasConst = Math.random() < 0.5 && nTerms > nVars;
  if (hasConst) terms[terms.length - 1] = { c: rr(2, 20), v: null };
  const used = {}; terms.forEach(function(t){ if (t.v) used[t.v] = 1; });
  return { terms: terms, nTerms: terms.length, nVars: Object.keys(used).length };
}
function v98ExprHTML(e){
  return e.terms.map(function(t, i){
    const sign = i === 0 ? '' : (Math.random() < 0 ? '' : ' + ');
    return (i === 0 ? '' : ' + ') + (t.v ? (t.c === 1 ? '' : t.c) + t.v : t.c);
  }).join('');
}
function genCountTerms(el){
  el.style.fontSize = '1.05rem';
  const wantT = rr(2, 4), wantV = Math.min(rr(1, 2), wantT);
  let right = null, guard = 0;
  while (guard++ < 200){
    const e = v98MakeExpr(wantT, wantV);
    if (e.nTerms === wantT && e.nVars === wantV){ right = e; break; }
  }
  if (!right) right = v98MakeExpr(3, 2);
  const rHTML = v98ExprHTML(right);
  const opts = [rHTML], seen = {}; seen[rHTML] = 1;
  let g2 = 0;
  while (opts.length < 4 && g2++ < 400){
    const t = rr(2, 4), v = Math.min(rr(1, 3), t);
    if (t === right.nTerms && v === right.nVars) continue;   // no second right answer
    const e = v98MakeExpr(t, v);
    if (e.nTerms === right.nTerms && e.nVars === right.nVars) continue;
    const h = v98ExprHTML(e);
    if (seen[h]) continue;
    seen[h] = 1; opts.push(h);
  }
  qData.workSteps = 'Terms are the parts separated by + or −; pronumerals are the different letters used.<br>'
    + '<b>' + rHTML + '</b> has ' + right.nTerms + ' terms and ' + right.nVars + ' pronumeral'
    + (right.nVars === 1 ? '' : 's') + '.';
  decSetChoice(el, '<div style="' + A_LBL + '">Which expression contains exactly <b>' + right.nTerms
    + ' terms</b> and <b>' + right.nVars + ' pronumeral' + (right.nVars === 1 ? '' : 's') + '</b>?</div>',
    opts, rHTML);
}

/* ─────────────────────────────────────────────────────────────────
   12. Index Law (Multiplication) L4 — TRUE OR FALSE?
   SEAL ALT 1 Section A Q6 — three marks in one question, and every
   statement family below is a NAMED misconception. The worked step says
   which one, rather than just giving the right value.
───────────────────────────────────────────────────────────────── */
function genIndexTrueFalse(el){
  el.style.fontSize = '1.05rem';
  const fam = ri(3);
  let stmt = '', isTrue = false, why = '';
  if (fam === 0){
    const b = ffPick([2,3,4,5,6,7,10]), p = rr(2, 6), q = rr(2, 6);
    const shown = (Math.random() < 0.5) ? p + q : p * q;
    isTrue = (shown === p + q);
    stmt = b + aSupChar(p) + ' × ' + b + aSupChar(q) + ' = ' + b + aSupChar(shown);
    why = 'Multiplying powers of the same base ADDS the indices: ' + p + ' + ' + q + ' = ' + (p + q)
      + '. The trap is multiplying them (' + p + ' × ' + q + ' = ' + (p * q) + ').<br>The statement is <b>'
      + (isTrue ? 'TRUE' : 'FALSE') + '</b>.';
  } else if (fam === 1){
    const a = rr(2, 9), b = rr(2, 9);
    const form = ri(3);
    if (form === 0){ stmt = '(−' + a + ')' + aSupChar(0) + ' + ' + b + aSupChar(0) + ' = 0'; isTrue = false;
      why = 'Anything (except 0) to the power 0 is 1, so this is 1 + 1 = 2, not 0.<br>The statement is <b>FALSE</b>.'; }
    else if (form === 1){ stmt = a + aSupChar(0) + ' = 1'; isTrue = true;
      why = 'Any non-zero number to the power 0 is 1.<br>The statement is <b>TRUE</b>.'; }
    else { stmt = a + aSupChar(0) + ' = 0'; isTrue = false;
      why = 'The power 0 does not make the number zero — ' + a + aSupChar(0) + ' = 1.<br>The statement is <b>FALSE</b>.'; }
  } else {
    const b = ffPick([2,3,5,7]), P = ffPick([6,8,10,12]);
    const addForm = Math.random() < 0.5;
    isTrue = !addForm;
    stmt = 'If (' + b + aSupChar('x') + ')' + aSupChar('y') + ' = ' + b + aSupChar(P) + ', then x '
      + (addForm ? '+' : '×') + ' y = ' + P;
    why = 'A power of a power MULTIPLIES the indices, so x × y = ' + P + ' — not x + y.<br>The statement is <b>'
      + (isTrue ? 'TRUE' : 'FALSE') + '</b>.';
  }
  qData.workSteps = why;
  decSetChoice(el, '<div style="' + A_LBL + '">Is this statement true or false?</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.9rem;margin:14px 0;">' + stmt + '</div>',
    ['True', 'False'], isTrue ? 'True' : 'False', true);
}

/* ─────────────────────────────────────────────────────────────────
   13/14. Multiply Terms L5 and Divide Terms L5 — FIND THE MISSING TERM
   Yr 7 ALT 3 Section B Q3 · SEAL ALT 1 Section C Q2.
   The same reasoning as the level above, run BACKWARDS: the generator
   builds a TRUE statement first and then blanks one part of it, so the
   missing term is correct by construction.
───────────────────────────────────────────────────────────────── */
function v98Term(c, L, p){ const v = {}; if (L) v[L] = (p || 1); return { coeff: c, vars: v }; }
function genMissingFactor(el){
  el.style.fontSize = '1.05rem';
  const L1 = ffPick(['x','a','m','p']);
  let L2 = ffPick(['y','b','n','t']);
  const form = ri(3);
  let shown = '', ans = null, steps = '';
  if (form === 0){                                    /* ☐ × 3y = 12xy */
    const m = rr(2, 9), b = rr(2, 9);
    ans = v98Term(m, L1);
    const other = v98Term(b, L2);
    const prod = multiplyFactors([ans, other]);
    shown = '<span class="v98-box">?</span> × ' + prodAnsHtml(other) + ' = ' + prodAnsHtml(prod);
    steps = 'Divide the answer by the term you can see: ' + prodAnsHtml(prod) + ' ÷ ' + prodAnsHtml(other)
      + ' = <b>' + prodAnsHtml(ans) + '</b>.';
  } else if (form === 1){                             /* 4x + ☐ = 7x */
    const k = rr(2, 9), m = rr(2, 9);
    ans = v98Term(m, L1);
    shown = prodAnsHtml(v98Term(k, L1)) + ' + <span class="v98-box">?</span> = ' + prodAnsHtml(v98Term(k + m, L1));
    steps = 'These are like terms, so the coefficients add: ' + k + ' + ? = ' + (k + m)
      + ', giving ? = ' + m + '.<br>The missing term is <b>' + prodAnsHtml(ans) + '</b>.';
  } else {                                            /* ☐ × 2a = 10a² */
    const m = rr(2, 9), b = rr(2, 6);
    ans = v98Term(m, L1);
    const other = v98Term(b, L1);
    const prod = multiplyFactors([ans, other]);
    shown = '<span class="v98-box">?</span> × ' + prodAnsHtml(other) + ' = ' + prodAnsHtml(prod);
    steps = 'The letter appears in both, so its powers added to make ' + prodAnsHtml(prod) + '. Divide back: '
      + prodAnsHtml(prod) + ' ÷ ' + prodAnsHtml(other) + ' = <b>' + prodAnsHtml(ans) + '</b>.';
  }
  qData.prodAns = ans;
  qData.workSteps = steps;
  el.innerHTML = '<div style="' + A_LBL + '">Find the missing term.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:14px 0;">' + shown + '</div>';
}
function genMissingDivisor(el){
  el.style.fontSize = '1.05rem';
  const L = ffPick(['x','a','m','y']);
  const missDivisor = Math.random() < 0.5;
  const q = rr(2, 9), d = rr(2, 9), pw = ri(2) + 1;
  const divisor = v98Term(d, L, 1);
  const quot    = v98Term(q, L, pw);
  const num     = multiplyFactors([divisor, quot]);
  let shown, ans, steps;
  if (missDivisor){
    ans = divisor;
    shown = prodAnsHtml(num) + ' ÷ <span class="v98-box">?</span> = ' + prodAnsHtml(quot);
    steps = 'Divide the top by the answer: ' + prodAnsHtml(num) + ' ÷ ' + prodAnsHtml(quot)
      + ' = <b>' + prodAnsHtml(ans) + '</b>.';
  } else {
    ans = num;
    shown = '<span class="v98-box">?</span> ÷ ' + prodAnsHtml(divisor) + ' = ' + prodAnsHtml(quot);
    steps = 'Multiply back up: ' + prodAnsHtml(divisor) + ' × ' + prodAnsHtml(quot)
      + ' = <b>' + prodAnsHtml(ans) + '</b>.';
  }
  qData.prodAns = ans;
  qData.workSteps = steps;
  el.innerHTML = '<div style="' + A_LBL + '">Find the missing term.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:14px 0;">' + shown + '</div>';
}

/* ─────────────────────────────────────────────────────────────────
   15. Sharing in a Ratio L6 — RATIO AS A FRACTION
   Yr 7 ALT 2 Q8(a). The engine already worked out the total number of
   parts for every share question; this level just asks for it.
───────────────────────────────────────────────────────────────── */
const V98_RATIO_SETS = [
  { items: ['blue', 'green', 'yellow'], thing: 'lollies' },
  { items: ['red', 'white', 'black'],   thing: 'counters' },
  { items: ['sand', 'cement', 'gravel'],thing: 'mix' },
  { items: ['apples', 'pears', 'plums'],thing: 'fruit' },
];
function genRatioAsFraction(el){
  el.style.fontSize = '1.05rem';
  const set = V98_RATIO_SETS[ri(V98_RATIO_SETS.length)];
  const p = [rr(1, 7), rr(1, 7), rr(1, 7)];
  const total = p[0] + p[1] + p[2];
  const k = ri(3);
  const s = v98Sign(p[k], total);
  qData.ansNum = s[0]; qData.ansDen = s[1];
  qData.workSteps = 'Add the parts: ' + p.join(' + ') + ' = ' + total + ' parts altogether.<br>'
    + set.items[k] + ' is ' + p[k] + ' of those ' + total + ' parts → ' + p[k] + '/' + total
    + (s[1] === total ? '' : ' = ' + s[0] + '/' + s[1]) + '.<br>The answer is <b>' + s[0] + '/' + s[1] + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">In a packet of ' + set.thing + ', the ratio '
    + set.items.join(' : ') + ' is <b>' + p.join(' : ') + '</b>.<br>What fraction of the ' + set.thing
    + ' are <b>' + set.items[k] + '</b>? Give your answer in simplest form.</div>';
}

/* ─────────────────────────────────────────────────────────────────
   16. Sharing in a Ratio L7 — FOUR-PART SHARE
   SEAL ALT 2 Q2(a) shares a relay time in 6 : 7 : 8 : 9. Every share
   engine before this stopped at three parts.
───────────────────────────────────────────────────────────────── */
const V98_FOUR_CTX = [
  { story: 'A relay team runs a total time of', unit: 'seconds', who: 'the four runners' },
  { story: 'Four friends share', unit: 'dollars', who: 'the four friends' },
  { story: 'A garden bed of', unit: 'plants', who: 'the four rows' },
  { story: 'A journey of', unit: 'kilometres', who: 'the four stages' },
];
function genFourPartShare(el){
  el.style.fontSize = '1.02rem';
  const c = V98_FOUR_CTX[ri(V98_FOUR_CTX.length)];
  const p = [rr(1, 8), rr(1, 8), rr(1, 8), rr(1, 8)];
  const S = p[0] + p[1] + p[2] + p[3];
  const one = rr(3, 25);
  const total = S * one;
  qData.gapTemplate = [0, ' : ', 1, ' : ', 2, ' : ', 3];
  qData.gapAns = p.map(function(x){ return x * one; });
  qData.gapHint = 'Fill in the four shares, in the order given.';
  qData.gapAnsText = qData.gapAns.join(' : ');
  qData.workSteps = 'Add the parts: ' + p.join(' + ') + ' = ' + S + '.<br>One part = ' + total + ' ÷ ' + S
    + ' = ' + one + ' ' + c.unit + '.<br>Now multiply: ' + p.map(function(x){ return x + ' × ' + one + ' = ' + (x * one); }).join(', ')
    + '.<br>The shares are <b>' + qData.gapAns.join(' : ') + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + c.story + ' <b>' + total + ' ' + c.unit
    + '</b> is divided between ' + c.who + ' in the ratio <b>' + p.join(' : ')
    + '</b>.<br>Work out each share, in the same order.</div>';
}

/* ─────────────────────────────────────────────────────────────────
   17. Simplifying Ratios L4 — RATIO FROM A DIAGRAM
   Yr 7 ALT 2 MC Q5 and Q9(a). Counting the picture IS the skill, so the
   shapes are drawn and the answer boxes take the simplified ratio.
───────────────────────────────────────────────────────────────── */
function v98ShapeSVG(kind, x, y, s){
  if (kind === 'square')   return '<rect x="' + (x - s) + '" y="' + (y - s) + '" width="' + (2*s) + '" height="' + (2*s) + '" fill="var(--accent)" opacity="0.85"/>';
  if (kind === 'circle')   return '<circle cx="' + x + '" cy="' + y + '" r="' + s + '" fill="var(--green)" opacity="0.85"/>';
  if (kind === 'triangle') return '<polygon points="' + x + ',' + (y - s) + ' ' + (x + s) + ',' + (y + s) + ' ' + (x - s) + ',' + (y + s) + '" fill="var(--gold, #e0a030)" opacity="0.9"/>';
  return '<rect x="' + (x - s) + '" y="' + (y - s) + '" width="' + (2*s) + '" height="' + (2*s) + '" fill="var(--accent)"/>';
}
function genRatioFromDiagram(el){
  el.style.fontSize = '1.02rem';
  const three = Math.random() < 0.5;
  const kinds = three ? ['square', 'triangle', 'circle'] : shuffleArr(['square', 'triangle', 'circle']).slice(0, 2);
  const names = { square: 'squares', triangle: 'triangles', circle: 'circles' };
  const counts = kinds.map(function(){ return rr(2, 8); });
  let g = counts[0];
  counts.forEach(function(c){ g = gcd(g, c); });
  const simp = counts.map(function(c){ return c / g; });
  /* draw them in a shuffled row so the student has to count, not read off runs */
  const cells = [];
  kinds.forEach(function(k, i){ for (let j = 0; j < counts[i]; j++) cells.push(k); });
  shuffleArr(cells);
  const perRow = 6, s = 14, gapx = 44, gapy = 42;
  const rows = Math.ceil(cells.length / perRow);
  let body = '';
  cells.forEach(function(k, i){
    const cx = 30 + (i % perRow) * gapx, cy = 26 + Math.floor(i / perRow) * gapy;
    body += v98ShapeSVG(k, cx, cy, s);
  });
  const svg = '<svg viewBox="0 0 ' + (30 + perRow * gapx) + ' ' + (10 + rows * gapy)
    + '" style="width:100%;max-width:340px;display:block;margin:8px auto;">' + body + '</svg>';
  qData.gapTemplate = three ? [0, ' : ', 1, ' : ', 2] : [0, ' : ', 1];
  qData.gapAns = simp;
  qData.gapHint = 'Fill in the ratio in simplest form.';
  qData.gapAnsText = simp.join(' : ');
  qData.workSteps = 'Count each shape: ' + kinds.map(function(k, i){ return counts[i] + ' ' + names[k]; }).join(', ')
    + '.<br>That is ' + counts.join(' : ') + (g > 1 ? ', and both sides divide by ' + g : '')
    + ' → <b>' + simp.join(' : ') + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write the ratio of <b>'
    + kinds.map(function(k){ return names[k]; }).join(' : ') + '</b> in simplest form.</div>' + svg;
}

/* ─────────────────────────────────────────────────────────────────
   18. Simplifying Ratios L5 — DIFFERENT UNITS
   SEAL ALT 2 MC Q2 ("40 cents to $2"). Same shape as One Amount as a
   Percentage L3, which already converts before it compares.
───────────────────────────────────────────────────────────────── */
const V98_UNIT_PAIRS = [
  { small: 'cents', big: '$', k: 100, bigFirstSym: true },
  { small: 'g', big: 'kg', k: 1000 },
  { small: 'mm', big: 'cm', k: 10 },
  { small: 'cm', big: 'm', k: 100 },
  { small: 'm', big: 'km', k: 1000 },
  { small: 'minutes', big: 'hours', k: 60 },
  { small: 'seconds', big: 'minutes', k: 60 },
];
function genRatioUnits(el){
  el.style.fontSize = '1.05rem';
  const u = V98_UNIT_PAIRS[ri(V98_UNIT_PAIRS.length)];
  const smallVal = rr(2, 90) * (u.k >= 100 ? 5 : 1);
  const bigVal = rr(1, 6);
  const bigInSmall = bigVal * u.k;
  const s = v98Sign(smallVal, bigInSmall);
  const smallFirst = Math.random() < 0.5;
  const bigTxt = u.bigFirstSym ? ('$' + bigVal) : (bigVal + ' ' + u.big);
  const smallTxt = u.bigFirstSym ? (smallVal + ' cents') : (smallVal + ' ' + u.small);
  qData.ansA = smallFirst ? s[0] : s[1];
  qData.ansB = smallFirst ? s[1] : s[0];
  qData.workSteps = 'Change both to the same unit first: ' + bigTxt + ' = ' + bigInSmall + ' ' + u.small + '.<br>'
    + (smallFirst ? smallVal + ' : ' + bigInSmall : bigInSmall + ' : ' + smallVal)
    + ', and dividing both sides by their HCF gives <b>' + qData.ansA + ' : ' + qData.ansB + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write this as a ratio in simplest form.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.9rem;margin:14px 0;">'
    + (smallFirst ? smallTxt + ' &nbsp;to&nbsp; ' + bigTxt : bigTxt + ' &nbsp;to&nbsp; ' + smallTxt) + '</div>';
}

/* ─────────────────────────────────────────────────────────────────
   19. Simplifying Ratios L6 — THREE AND FOUR PARTS
   Yr 7 ALT 2 Q7(b) and SEAL ALT 2 Q7(b) both simplify 10 : 55 : 110.
   The given ratio is built as a MULTIPLE of an already-reduced one, so
   the target answer is reduced by construction.
───────────────────────────────────────────────────────────────── */
function genRatioThreeFour(el){
  el.style.fontSize = '1.05rem';
  const n = Math.random() < 0.6 ? 3 : 4;
  let base = [], guard = 0;
  while (guard++ < 300){
    base = []; for (let i = 0; i < n; i++) base.push(rr(1, 12));
    let g = base[0]; base.forEach(function(x){ g = gcd(g, x); });
    if (g === 1) break;
  }
  const k = rr(2, 11);
  const given = base.map(function(x){ return x * k; });
  qData.gapTemplate = n === 3 ? [0, ' : ', 1, ' : ', 2] : [0, ' : ', 1, ' : ', 2, ' : ', 3];
  qData.gapAns = base;
  qData.gapHint = 'Fill in the ratio in simplest form.';
  qData.gapAnsText = base.join(' : ');
  qData.workSteps = 'The highest common factor of ' + given.join(', ') + ' is ' + k
    + '.<br>Divide every part by ' + k + ': <b>' + base.join(' : ') + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write this ratio in simplest form.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:14px 0;">' + given.join(' : ') + '</div>';
}

/* ─────────────────────────────────────────────────────────────────
   20. Substitute into Expressions L6 — DECIMAL VALUES
   Yr 7 ALT 5 Q10 ("if a = 2.46, b = 11.31, find b − 2a"). Every level
   before this substitutes whole numbers.
───────────────────────────────────────────────────────────────── */
function genSubDecimals(el){
  el.style.fontSize = '1.05rem';
  /* both values must genuinely BE decimals — a raw value ending in 0 renders as
     a whole number, and "substitute decimal values" handing a student b = 3 is
     the same defect the rounding level had. */
  let ra, rb;
  do { ra = rr(105, 990); }  while (ra % 10 === 0);
  do { rb = rr(105, 1500); } while (rb % 10 === 0);
  const a = dp(ra / 100, 2), b = dp(rb / 100, 2);
  const forms = [
    { txt: 'b − 2a',  f: function(){ return b - 2 * a; },     how: b + ' − 2 × ' + a },
    { txt: '2b − a',  f: function(){ return 2 * b - a; },     how: '2 × ' + b + ' − ' + a },
    { txt: '3a + b',  f: function(){ return 3 * a + b; },     how: '3 × ' + a + ' + ' + b },
    { txt: 'a + b',   f: function(){ return a + b; },         how: a + ' + ' + b },
    { txt: 'b − a',   f: function(){ return b - a; },         how: b + ' − ' + a },
  ];
  const F = forms[ri(forms.length)];
  const ans = dp(F.f(), 2);
  qData.ans = ans;
  qData.ansTol = 0.005;
  qData.workSteps = 'Put the values in: ' + F.how + ' = <b>' + ans + '</b>. '
    + 'Multiplying happens before adding or subtracting.';
  el.innerHTML = '<div style="' + A_LBL + '">If <b>a = ' + a + '</b> and <b>b = ' + b
    + '</b>, find the value of the expression. Give your answer to 2 decimal places.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.4rem;margin:12px 0;">' + F.txt + '</div>';
}

/* ─────────────────────────────────────────────────────────────────
   21/22. One-Step Equations L4 (both skills) — DECIMAL VALUES
   SEAL ALT 3 opens with x + 4.3 = −3 and −3.2y = 27.4. Every one-step
   level before this sets whole numbers.
   levelModes puts these on the single number box: a decimal solution
   will not go in the numerator/denominator pair.
───────────────────────────────────────────────────────────────── */
function genOneStepDecAddSub(el){
  el.style.fontSize = '1.05rem';
  const V = ffPick(['x','y','a','m']);
  /* the constant must genuinely BE a decimal — a raw value ending in 0 prints as
     a whole number, and if the solution happens to be whole too the question has
     no decimal in it anywhere. (The suite caught this one at 80 reps.) */
  let rc = rr(11, 199); while (rc % 10 === 0) rc = rr(11, 199);
  const c = dp(rc / 10, 1);
  const ansV = dp(rr(-199, 199) / 10, 1);
  const plus = Math.random() < 0.5;
  const rhs = dp(plus ? ansV + c : ansV - c, 1);
  qData.ans = ansV;
  qData.ansTol = 0.0005;
  qData.solveVar = V;
  qData.workSteps = (plus
    ? 'Undo the + ' + c + ' by subtracting it from both sides: ' + V + ' = ' + v98Neg(rhs) + ' − ' + c
    : 'Undo the − ' + c + ' by adding it to both sides: ' + V + ' = ' + v98Neg(rhs) + ' + ' + c)
    + ' = <b>' + v98Neg(ansV) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Solve for ' + V + '.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.4rem;margin:12px 0;">'
    + V + ' ' + (plus ? '+' : '−') + ' ' + c + ' = ' + v98Neg(rhs) + '</div>';
}
function genOneStepDecMulDiv(el){
  el.style.fontSize = '1.05rem';
  const V = ffPick(['x','y','a','m']);
  let rk = nz(rr(-95, 95)); while (rk % 10 === 0) rk = nz(rr(-95, 95));
  let ra = nz(rr(-95, 95)); while (ra % 10 === 0) ra = nz(rr(-95, 95));
  const k = dp(rk / 10, 1);
  const ansV = dp(ra / 10, 1);
  const divide = Math.random() < 0.4;
  if (divide){
    /* pick the SHOWN value first and multiply up, so the equation is exact —
       dividing a random answer by d and rounding leaves a statement that does
       not quite balance, which the suite caught. */
    const d = nz(rr(2, 9));
    /* the shown value must really BE a decimal — a tenth of 0 prints as a whole
       number and the level stops being about decimals at all */
    let raw = nz(rr(-95, 95));
    while (raw % 10 === 0) raw = nz(rr(-95, 95));
    const shown = dp(raw / 10, 1);
    const ansV2 = dp(shown * d, 1);
    qData.ans = ansV2; qData.ansTol = 0.0005; qData.solveVar = V;
    qData.workSteps = 'Undo the ÷ ' + d + ' by multiplying both sides by ' + d + ': ' + V + ' = '
      + shown + ' × ' + d + ' = <b>' + v98Neg(ansV2) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Solve for ' + V + '.</div>'
      + '<div style="text-align:center;font-weight:900;font-size:2.2rem;margin:12px 0;">'
      + V + ' ÷ ' + d + ' = ' + v98Neg(shown) + '</div>';
    return;
  }
  const rhs = dp(k * ansV, 2);
  qData.ans = ansV; qData.ansTol = 0.0005; qData.solveVar = V;
  qData.workSteps = 'Undo the × ' + k + ' by dividing both sides by it: ' + V + ' = ' + v98Neg(rhs)
    + ' ÷ ' + v98Neg(k) + ' = <b>' + v98Neg(ansV) + '</b>. Two negatives divide to a positive.';
  el.innerHTML = '<div style="' + A_LBL + '">Solve for ' + V + '. Give your answer to 1 decimal place.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2.4rem;margin:12px 0;">'
    + v98Neg(k) + V + ' = ' + v98Neg(rhs) + '</div>';
}



/* ─────────────────────────────────────────────────────────────────
   25. Convert Fractions to Decimals L4 — MIXED NUMBERS
   SEAL ALT 2 Q5(a), "convert 2 6/48 to a decimal". Denominators are
   restricted to ones that terminate, so the answer is always exact.
───────────────────────────────────────────────────────────────── */
function genMixedToDecimal(el){
  el.style.fontSize = '1.05rem';
  const DENS = [2,4,5,8,10,16,20,25,40,50];
  const d = ffPick(DENS);
  const n = rr(1, d - 1);
  const w = rr(1, 9);
  const dec = dp(w + n / d, 6);
  qData.ans = dec;
  qData.ansTol = 0.0000005;
  qData.workSteps = 'The whole number stays as it is. Divide the fraction out: ' + n + ' ÷ ' + d + ' = '
    + dp(n / d, 6) + '.<br>So ' + w + ' ' + n + '/' + d + ' = <b>' + dec + '</b>.';
  id('qBox').innerHTML = '<div class="q-text" style="' + A_LBL + '">Write this mixed number as a decimal.'
    + '<div style="display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:1.7rem;font-weight:900;">'
    + '<span>' + w + '</span>' + fracHTML(n, d) + '</div></div>';
}

/* ─────────────────────────────────────────────────────────────────
   26. Convert FDP L4 — OVER 100% AND RECURRING
   The SEAL ALT 5 table contains 164% and 6/11. The pctTable tolerance
   logic already handled recurring values; the ROW generator simply never
   produced either. Same rows, same marking, a wider pool — and every
   table on this level carries at least one of each.
───────────────────────────────────────────────────────────────── */
const V98_FDP_OVER = [[41,25],[6,5],[3,2],[7,5],[11,10],[9,4],[5,2],[9,5],[7,4],[13,10],[8,5],[12,5]];
const V98_FDP_REC  = [[1,3],[2,3],[1,6],[5,6],[6,11],[2,9],[4,9],[1,11],[5,9],[7,12]];
function genPctFDPHard(el){
  el.style.fontSize = '1.05rem';
  const rows = [], usedVals = [];
  function push(base){
    const v = base[0] / base[1];
    if (usedVals.some(function(x){ return Math.abs(x - v) < 1e-9; })) return false;
    usedVals.push(v); rows.push(pctMakeRow(base)); return true;
  }
  let guard = 0;
  while (!push(V98_FDP_OVER[ri(V98_FDP_OVER.length)]) && guard++ < 50) {}
  guard = 0;
  while (!push(V98_FDP_REC[ri(V98_FDP_REC.length)]) && guard++ < 50) {}
  guard = 0;
  while (rows.length < 3 && guard++ < 200){
    push(Math.random() < 0.5 ? V98_FDP_OVER[ri(V98_FDP_OVER.length)] : V98_FDP_REC[ri(V98_FDP_REC.length)]);
  }
  shuffleArr(rows);
  qData.pctRows = rows;
  qData.workSteps = pctFDPReviewHTML(rows);
  el.innerHTML = '<div style="' + A_LBL + '">Fill in the missing boxes. Some values are over 100% and some '
    + 'recur — a rounded decimal is accepted. You score 1 point for each correct box.</div>';
}


/* ═══════════════════════════════════════════════════════════════════════
   v99 — THE 2026 ALT AUDIT, PART 2: THE NINE CONTENT GAPS
   -----------------------------------------------------------------------
   v98 closed the mapping fixes and the enhancements — the failures where
   the content existed and was in the wrong place, or existed in the wrong
   SHAPE. These are the nine where there was no engine at all.

   Six new skills (algWords, algFrac, algPerim, numLine, writtenMult,
   absFact, proportion — seven, counting proportion) and three appended
   levels. Everything routes from ONE map and ONE dispatcher, the same
   discipline as v93, v96 and v98.
═══════════════════════════════════════════════════════════════════════ */
const V99_LEVELS = {
  algWords: [1, 2, 3, 4, 5],
  algFrac: [1, 2, 3, 4, 5, 6],
  algPerim: [1, 2, 3],
  numLine: [1, 2, 3, 4],
  writtenMult: [1, 2, 3],
  absFact: [1, 2, 3],
  proportion: [1, 2, 3],
  division: [5],
  hcfLcm: [5],
  rateConvert: [4],
};
function isV99Level(){
  const a = V99_LEVELS[skill];
  return !!a && a.indexOf(level) >= 0;
}
function genV99Level(el){
  if (skill === 'algWords')    return genAlgWords(el);
  if (skill === 'algFrac')     return genAlgFrac(el);
  if (skill === 'algPerim')    return genAlgPerim(el);
  if (skill === 'numLine')     return genNumLine(el);
  if (skill === 'writtenMult') return genWrittenMult(el);
  if (skill === 'absFact')     return genAbsFact(el);
  if (skill === 'proportion')  return genProportion(el);
  if (skill === 'division')    return genLongDivision(el);
  if (skill === 'hcfLcm')      return genHcfLcmIndex(el);
  if (skill === 'rateConvert') return genCurrency(el);
}

/* small shared helpers */
function v99Sup(p){ return p === 1 ? '' : '<sup>' + p + '</sup>'; }
function v99Term(c, L, p){            /* "3x", "x", "−4x²", "7" */
  const body = L ? L + v99Sup(p || 1) : '';
  const mag = Math.abs(c);
  const num = (L && mag === 1) ? '' : String(mag);
  return (c < 0 ? '−' : '') + num + body;
}
function v99Poly(terms){              /* [{c,L,p}] → "6x + 6", "21 − 4n" */
  let s = '';
  terms.forEach(function(t, i){
    if (t.c === 0) return;
    if (i === 0 || s === '') s += v99Term(t.c, t.L, t.p);
    else s += (t.c < 0 ? ' − ' : ' + ') + v99Term(Math.abs(t.c), t.L, t.p);
  });
  return s || '0';
}

/* ═══════════════════════════════════════════════════════════════════
   1. WRITING EXPRESSIONS & EQUATIONS FROM WORDS  (algWords)
   -------------------------------------------------------------------
   Yr 7 ALT 3 MC Q1, Q2 and Q5 · SEAL ALT 3 MC Q4, Q5 and Section B Q10.
   The app could read a coefficient, substitute, expand, factorise and
   solve — but nothing turned ENGLISH into algebra, which is the half
   students lose marks on. The phrase bank is DATA: the correct
   expression and every distractor are derived from the same record, so
   the words and the algebra cannot drift apart.
═══════════════════════════════════════════════════════════════════ */
/* Each pattern knows: the words, the right expression, and the WRONG
   expression a student produces by mis-reading those words. */
const AW_ONE = [
  { w: '{n} less than {v}',        f: function(v,n){ return v+' − '+n; }, bad: function(v,n){ return n+' − '+v; }, why: '"less than" reverses the order — start from {v} and take {n} away.' },
  { w: '{n} more than {v}',        f: function(v,n){ return v+' + '+n; }, bad: function(v,n){ return n+' − '+v; }, why: '"more than" adds to {v}.' },
  { w: '{v} subtracted from {n}',  f: function(v,n){ return n+' − '+v; }, bad: function(v,n){ return v+' − '+n; }, why: '"subtracted FROM {n}" means {n} comes first.' },
  { w: '{v} multiplied by {n}',    f: function(v,n){ return n+v; },       bad: function(v,n){ return v+' + '+n; }, why: 'multiplying is written with no sign: {n}{v}.' },
  { w: '{n} times {v}',            f: function(v,n){ return n+v; },       bad: function(v,n){ return n+' + '+v; }, why: '"times" means multiply: {n}{v}.' },
  { w: '{v} divided by {n}',       f: function(v,n){ return v+' ÷ '+n; }, bad: function(v,n){ return n+' ÷ '+v; }, why: '"{v} divided by {n}" puts {v} first.' },
  { w: 'the sum of {v} and {n}',   f: function(v,n){ return v+' + '+n; }, bad: function(v,n){ return v+n; },       why: '"sum" means add — {v} + {n}, not {v} times {n}.' },
  { w: 'the product of {v} and {n}', f: function(v,n){ return n+v; },     bad: function(v,n){ return v+' + '+n; }, why: '"product" means multiply.' },
  { w: 'double {v}',               f: function(v,n){ return '2'+v; },     bad: function(v,n){ return v+' + 2'; },  why: 'double means × 2.' },
  { w: '{v} squared',              f: function(v,n){ return v+'²'; },     bad: function(v,n){ return '2'+v; },     why: 'squared is {v} × {v}, not 2 × {v}.' },
];
function awFill(s, v, n){ return s.replace(/\{v\}/g, v).replace(/\{n\}/g, n); }
function genAlgWords(el){
  el.style.fontSize = '1.05rem';
  const v = ffPick(['x', 'n', 'a', 'm', 'y']);

  if (level === 1 || level === 2){
    const pat = AW_ONE[ri(AW_ONE.length)];
    const n = rr(2, 12);
    const words = awFill(pat.w, v, n), right = pat.f(v, n), wrong = pat.bad(v, n);
    const opts = [right, wrong], seen = {}; seen[right] = 1; seen[wrong] = 1;
    let guard = 0;
    while (opts.length < 4 && guard++ < 60){
      const p2 = AW_ONE[ri(AW_ONE.length)], t = p2.f(v, n);
      if (!seen[t]) { seen[t] = 1; opts.push(t); }
    }
    if (level === 1){
      qData.workSteps = '"' + words + '" is <b>' + right + '</b>.<br>' + awFill(pat.why, v, n)
        + ' The usual slip here is ' + wrong + '.';
      return decSetChoice(el, '<div style="' + A_LBL + '">Which expression represents</div>'
        + '<div style="text-align:center;font-weight:900;font-size:1.6rem;margin:12px 0;">“' + words + '”</div>',
        opts, right);
    }
    /* L2 — the reverse: the expression is shown and the WORDS are the options */
    const wOpts = [words], wSeen = {}; wSeen[words] = 1;
    let g2 = 0;
    while (wOpts.length < 4 && g2++ < 80){
      const p3 = AW_ONE[ri(AW_ONE.length)], t = awFill(p3.w, v, n);
      if (!wSeen[t] && p3.f(v, n) !== right) { wSeen[t] = 1; wOpts.push(t); }
    }
    qData.workSteps = '<b>' + right + '</b> reads as "' + words + '". ' + awFill(pat.why, v, n);
    return decSetChoice(el, '<div style="' + A_LBL + '">What does this expression mean in words?</div>'
      + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:12px 0;">' + right + '</div>',
      wOpts, words);
  }

  if (level === 3){
    /* Two operations — SEAL MC Q4 exactly: "quadrupled, then subtracted from 21". */
    const k = ffPick([2, 3, 4, 5, 6]), b = rr(11, 40);
    const kind = ri(2);
    let words, right, opts;
    if (kind === 0){
      const kw = { 2: 'doubled', 3: 'tripled', 4: 'quadrupled', 5: 'multiplied by 5', 6: 'multiplied by 6' }[k];
      words = 'The number ' + v + ' is ' + kw + ' and then subtracted from ' + b;
      right = b + ' − ' + k + v;
      opts = [right, k + v + ' − ' + b, k + '(' + v + ' − ' + b + ')', k + '(' + b + ' − ' + v + ')'];
      qData.workSteps = kw.charAt(0).toUpperCase() + kw.slice(1) + ' means ' + k + v
        + '. "Subtracted FROM ' + b + '" means ' + b + ' comes first, so the answer is <b>' + right + '</b>.<br>'
        + k + v + ' − ' + b + ' is the same two numbers the wrong way round.';
    } else {
      const c = rr(2, 9);
      words = v + ' is increased by ' + c + ' and the result is multiplied by ' + k;
      right = k + '(' + v + ' + ' + c + ')';
      opts = [right, k + v + ' + ' + c, v + ' + ' + k + c, k + v + ' + ' + (k * c) + ' + ' + c];
      qData.workSteps = 'Increase first: ' + v + ' + ' + c
        + '. That WHOLE thing is multiplied by ' + k + ', so it needs brackets: <b>' + right + '</b>.<br>'
        + 'Without the brackets, ' + k + v + ' + ' + c + ' only multiplies the ' + v + '.';
    }
    return decSetChoice(el, '<div style="' + A_LBL + '">Which expression represents</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.35rem;margin:12px 0;">“' + words + '”</div>',
      opts, right);
  }

  if (level === 4){
    /* Generalise a numeric pattern — the shared Yr 7 / SEAL MC item. Three
       numeric lines with the SAME structure and only the first number changing. */
    const a = dp(rr(11, 89) / 10, 1), b = rr(2, 12);
    const vals = shuffleArr([0, 2, 4, 1.2, 3, 5]).slice(0, 3);
    const lines = vals.map(function(x){ return x + ' × ' + a + ' + ' + b; });
    const right = v + ' × ' + a + ' + ' + b;
    const opts = [right, v + ' × (' + a + ' + ' + b + ')', v + ' + ' + a + ' × ' + b, '(' + v + ' + ' + a + ') × ' + b];
    qData.workSteps = 'In every line the SAME thing happens: a number is multiplied by ' + a
      + ' and then ' + b + ' is added. Only the first number changes, so replace it with ' + v
      + ': <b>' + right + '</b>.<br>The brackets in the other options change which part is multiplied.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Which expression generalises this pattern?</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.5rem;margin:12px 0;line-height:1.6;">'
      + lines.join('<br>') + '</div>', opts, right);
  }

  /* L5 — a story to an equation, and then solve it. Three boxes, all-or-nothing:
     the starting amount, the rate, and the answer. Writing the rule and using it
     are one skill, and separating them lets a student guess the arithmetic. */
  const ctx = ffPick([
    { story: 'To hire a party room, Mia pays a fixed booking fee of $', mid: ' and then $', tail: ' per hour.',
      unit: 'hours', tvar: 'h', cvar: 'C', totalWord: 'the total cost' },
    { story: 'A plumber charges a call-out fee of $', mid: ' and then $', tail: ' per hour.',
      unit: 'hours', tvar: 'h', cvar: 'C', totalWord: 'the total charge' },
    { story: 'A gym charges a joining fee of $', mid: ' and then $', tail: ' per month.',
      unit: 'months', tvar: 'm', cvar: 'C', totalWord: 'the total paid' },
  ]);
  const fee = rr(2, 30), rate = rr(2, 15), n = rr(3, 15);
  const total = fee + rate * n;
  qData.gapTemplate = [ctx.cvar + ' = ', 0, ' + ', 1, ctx.tvar + ',&nbsp;&nbsp; ' + ctx.tvar + ' = ', 2];
  qData.gapAns = [fee, rate, n];
  qData.gapHint = 'Fill in the rule, then the answer.';
  qData.gapAnsText = ctx.cvar + ' = ' + fee + ' + ' + rate + ctx.tvar + ',  ' + ctx.tvar + ' = ' + n;
  qData.workSteps = 'The fee is paid once, so it is the starting amount; the ' + rate
    + ' is paid for every ' + ctx.tvar + '. That gives ' + ctx.cvar + ' = ' + fee + ' + ' + rate + ctx.tvar
    + '.<br>Now put ' + ctx.cvar + ' = ' + total + ': ' + total + ' = ' + fee + ' + ' + rate + ctx.tvar
    + ' → ' + (total - fee) + ' = ' + rate + ctx.tvar + ' → ' + ctx.tvar + ' = <b>' + n + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + ctx.story + '<b>' + fee + '</b>' + ctx.mid + '<b>'
    + rate + '</b>' + ctx.tail + '<br>Write the rule for ' + ctx.totalWord + ' ' + ctx.cvar
    + ' after ' + ctx.tvar + ' ' + ctx.unit + ', then use it: if ' + ctx.cvar + ' = <b>$' + total
    + '</b>, what is ' + ctx.tvar + '?</div>';
}

/* ═══════════════════════════════════════════════════════════════════
   2. ALGEBRAIC FRACTIONS  (algFrac)
   -------------------------------------------------------------------
   5r/6 − 12r/18 is on BOTH ALT 3 papers, word for word. SEAL adds
   (12x + 8y)/(14y + 21x) and a divide with negative indices, and SEAL
   ALT 1 Section C Q3 is a two-fraction product with powers. fracSimplify
   L3 simplified ONE algebraic fraction and nothing combined two.

   Built as one family rather than four levels bolted onto four different
   skills, because it IS one method: common denominator, then cancel.
   L1–L4 answer in the fraction boxes (coefficient on top, number below,
   the same convention as Simplify Fractions L3); L5 and L6 are multiple
   choice, because 5y⁵/4x³ and 4/7 after factorising will not go in two
   numeric boxes.
═══════════════════════════════════════════════════════════════════ */
function afSetFracInput(){
  qData.isAlgebraic = true;
  const lbl = id('fracAlgLabel');
  if (lbl){ lbl.textContent = 'Enter the coefficient of the letter on top, the number on the bottom'; lbl.classList.remove('hide'); }
}
function afFrac(c, L, d){    /* the fraction c·L / d, drawn */
  return fracHTML(v99Term(c, L, 1), d);
}
function genAlgFrac(el){
  el.style.fontSize = '1.05rem';
  const L = ffPick(['x', 'r', 'a', 'n', 'y']);

  if (level === 1 || level === 2){
    /* add or subtract two algebraic fractions; L1 shares a denominator */
    let c1, d1, c2, d2, num, den, guard = 0;
    while (guard++ < 500){
      d1 = ffPick([3, 4, 5, 6, 8, 9, 10, 12]);
      d2 = (level === 1) ? d1 : ffPick([3, 4, 5, 6, 8, 9, 10, 12, 15, 18]);
      c1 = rr(1, 15); c2 = rr(1, 15);
      const D = d1 * d2 / gcd(d1, d2);
      const N = (Math.random() < 0.5 && c1 * (D / d1) > c2 * (D / d2))
        ? c1 * (D / d1) - c2 * (D / d2)
        : c1 * (D / d1) + c2 * (D / d2);
      if (N <= 0) continue;
      const g = gcd(N, D);
      num = N / g; den = D / g;
      if (den === 1) continue;                 /* keep it a fraction */
      if (num > 60) continue;
      qData._afSub = (N === c1 * (D / d1) - c2 * (D / d2));
      break;
    }
    const D = d1 * d2 / gcd(d1, d2);
    const a1 = c1 * (D / d1), a2 = c2 * (D / d2);
    const sub = qData._afSub;
    qData.ansNum = num; qData.ansDen = den;
    afSetFracInput();
    qData.workSteps = (d1 === d2
      ? 'The denominators already match, so just ' + (sub ? 'subtract' : 'add') + ' the coefficients: '
        + c1 + (sub ? ' − ' : ' + ') + c2 + ' = ' + (sub ? c1 - c2 : c1 + c2) + '.'
      : 'Common denominator ' + D + ': ' + c1 + L + '/' + d1 + ' = ' + a1 + L + '/' + D
        + ' and ' + c2 + L + '/' + d2 + ' = ' + a2 + L + '/' + D + '.<br>Now '
        + (sub ? 'subtract' : 'add') + ': ' + a1 + (sub ? ' − ' : ' + ') + a2 + ' = '
        + (sub ? a1 - a2 : a1 + a2) + ', over ' + D + '.')
      + '<br>Simplified, that is <b>' + num + L + '/' + den + '</b>.';
    id('qBox').innerHTML = '<div class="q-text" style="' + A_LBL + '">Simplify. Enter the coefficient on top and the number underneath.'
      + '<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;">'
      + afFrac(c1, L, d1) + '<span style="font-size:1.6rem;font-weight:900;">' + (sub ? '−' : '+') + '</span>'
      + afFrac(c2, L, d2) + '</div></div>';
    return;
  }

  if (level === 3 || level === 4){
    /* multiply, or divide (flip and cancel) */
    let c1, d1, c2, d2, num, den, guard = 0;
    while (guard++ < 500){
      c1 = rr(2, 12); d1 = rr(2, 14); c2 = rr(2, 12); d2 = rr(2, 14);
      if (d1 === 1 || d2 === 1) continue;
      const N = (level === 3) ? c1 * c2 : c1 * d2;
      const D = (level === 3) ? d1 * d2 : d1 * c2;
      const g = gcd(N, D);
      num = N / g; den = D / g;
      if (den === 1 || num > 60 || den > 60) continue;
      break;
    }
    qData.ansNum = num; qData.ansDen = den;
    afSetFracInput();
    const opSym = level === 3 ? '×' : '÷';
    qData.workSteps = (level === 3
      ? 'Multiply straight across: ' + c1 + ' × ' + c2 + ' = ' + (c1 * c2) + ' on top, '
        + d1 + ' × ' + d2 + ' = ' + (d1 * d2) + ' underneath.'
      : 'Dividing by a fraction means multiplying by its reciprocal — flip ' + c2 + '/' + d2
        + ' to ' + d2 + '/' + c2 + '.<br>Then ' + c1 + ' × ' + d2 + ' = ' + (c1 * d2) + ' on top and '
        + d1 + ' × ' + c2 + ' = ' + (d1 * c2) + ' underneath.')
      + '<br>Cancel down to <b>' + num + L + '/' + den + '</b>.';
    id('qBox').innerHTML = '<div class="q-text" style="' + A_LBL + '">Simplify. Enter the coefficient on top and the number underneath.'
      + '<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;">'
      + afFrac(c1, L, d1) + '<span style="font-size:1.6rem;font-weight:900;">' + opSym + '</span>'
      + fracHTML(c2, d2) + '</div></div>';
    return;
  }

  if (level === 5){
    /* indices, including a negative index — SEAL ALT 3 Q6b.
       (a·xᵖ / b·y^-q) ÷ (c·xˢ / d·yᵗ)  →  cancel the coefficients and
       subtract the powers. Options are built from the SAME numbers, so a
       distractor is always a named slip, never a random expression. */
    const X = 'x', Y = 'y';
    const p = rr(4, 7), s = p + rr(1, 3);            /* x power ends up on the bottom */
    const q = rr(1, 3), t = rr(2, 4);
    const a = ffPick([2, 3, 4, 5]), b = ffPick([2, 3]), c = ffPick([6, 8, 9, 10]), d = ffPick([10, 12, 15]);
    const N = a * d, D = b * c, g = gcd(N, D);
    const cn = N / g, cd = D / g;
    const yPow = t + q, xPow = s - p;
    const right = '<span>' + v99Term(cn, Y, yPow) + ' / ' + v99Term(cd, X, xPow) + '</span>';
    const opts = [
      right,
      '<span>' + v99Term(cn, Y, Math.abs(t - q)) + ' / ' + v99Term(cd, X, xPow) + '</span>',
      '<span>' + v99Term(cn, X, xPow) + ' / ' + v99Term(cd, Y, yPow) + '</span>',
      '<span>' + v99Term(cn * cd, Y, yPow) + ' / ' + v99Term(1, X, xPow) + '</span>',
    ];
    const uniq = [], seen = {};
    opts.forEach(function(o){ if (!seen[o]) { seen[o] = 1; uniq.push(o); } });
    let guard = 0;
    while (uniq.length < 4 && guard++ < 30){
      const o = '<span>' + v99Term(cn, Y, yPow + guard) + ' / ' + v99Term(cd, X, xPow) + '</span>';
      if (!seen[o]) { seen[o] = 1; uniq.push(o); }
    }
    qData.workSteps = 'Flip the second fraction and multiply: coefficients ' + a + ' × ' + d + ' = ' + N
      + ' over ' + b + ' × ' + c + ' = ' + D + ', which cancels to ' + cn + '/' + cd + '.<br>'
      + 'y<sup>−' + q + '</sup> on the BOTTOM becomes y<sup>' + q + '</sup> on the top, so the y power is '
      + t + ' + ' + q + ' = ' + yPow + '.<br>x: ' + p + ' − ' + s + ' = −' + xPow
      + ', so x<sup>' + xPow + '</sup> stays underneath. The answer is <b>'
      + v99Term(cn, Y, yPow) + ' / ' + v99Term(cd, X, xPow) + '</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Simplify, leaving your answer with positive indices.</div>'
      + '<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0;">'
      + fracHTML(v99Term(a, X, p), b + 'y<sup>−' + q + '</sup>')
      + '<span style="font-size:1.5rem;font-weight:900;">÷</span>'
      + fracHTML(v99Term(c, X, s), v99Term(d, Y, t))
      + '</div>', uniq, right);
  }

  /* L6 — simplify by factorising. SEAL ALT 3 MC Q8 exactly. The numerator and
     denominator are BUILT as k₁(ax + by) and k₂(bx′ + ay′) so the common bracket
     is guaranteed to be there, and the answer is guaranteed to be k₁/k₂. */
  const A = rr(2, 5), B = rr(2, 5);
  let k1 = rr(2, 6), k2 = rr(2, 7);
  while (gcd(k1, k2) !== 1) { k1 = rr(2, 6); k2 = rr(2, 7); }
  const X2 = 'x', Y2 = 'y';
  const topTxt = (k1 * A) + X2 + ' + ' + (k1 * B) + Y2;
  const botTxt = (k2 * B) + Y2 + ' + ' + (k2 * A) + X2;
  const rightHtml = v98Frac(k1, k2);
  const opts = [
    rightHtml,
    v98Frac(k1 + '(' + A + X2 + ' + ' + B + Y2 + ')', k2 + '(' + B + Y2 + ' + ' + A + X2 + ')'),
    v98Frac(k1 * A, k2 * A),
    v98Frac(k1 + '(' + A + X2 + ' + ' + B + Y2 + ')', k2),
  ];
  qData.workSteps = 'Factorise both: the top is ' + k1 + '(' + A + 'x + ' + B + 'y) and the bottom is '
    + k2 + '(' + B + 'y + ' + A + 'x).<br>Those brackets are the SAME thing written in a different order, '
    + 'so they cancel — leaving <b>' + k1 + '/' + k2 + '</b>.<br>'
    + 'You can only cancel a whole bracket, never one term out of a sum.';
  decSetChoice(el, '<div style="' + A_LBL + '">Fully simplify.</div>'
    + '<div style="display:flex;justify-content:center;margin:12px 0;">' + fracHTML(topTxt, botTxt) + '</div>',
    opts, rightHtml);
}

/* ═══════════════════════════════════════════════════════════════════
   3. PERIMETER & AREA AS AN EXPRESSION  (algPerim)
   -------------------------------------------------------------------
   SEAL ALT 3 Q11 and Q12, 9 marks between them. This LOOKS like the
   Measurement gap and is not: no unit conversion and no formula recall,
   only adding labelled sides and collecting like terms. It is an Algebra
   item wearing a Measurement costume, so it is built now rather than
   waiting for the Measurement strand.
   The answer goes in gapFill boxes (coefficient, then constant) — an
   expression parser is not needed to test "did you collect the terms".
═══════════════════════════════════════════════════════════════════ */
function apRectSVG(wLbl, hLbl){
  return '<svg viewBox="0 0 260 150" style="width:100%;max-width:280px;display:block;margin:10px auto;">'
    + '<rect x="40" y="30" width="170" height="90" fill="none" stroke="var(--text)" stroke-width="3"/>'
    + '<text x="125" y="22" text-anchor="middle" font-size="17" font-weight="800" fill="var(--accent)">' + wLbl + '</text>'
    + '<text x="30" y="80" text-anchor="end" font-size="17" font-weight="800" fill="var(--accent)">' + hLbl + '</text>'
    + '</svg>';
}
function genAlgPerim(el){
  el.style.fontSize = '1.05rem';
  const V = ffPick(['x', 'a', 'n']);
  const m1 = ffPick([1, 2, 3]), c1 = rr(1, 9);
  const m2 = ffPick([1, 2, 3]), c2 = rr(1, 9);
  const wLbl = v99Poly([{ c: m1, L: V }, { c: c1 }]);
  const hLbl = v99Poly([{ c: m2, L: V }, { c: c2 }]);
  const pm = 2 * (m1 + m2), pc = 2 * (c1 + c2);

  if (level === 1){
    qData.gapTemplate = ['P = ', 0, V, ' + ', 1];
    qData.gapAns = [pm, pc];
    qData.gapHint = 'Fill in the coefficient and the number.';
    qData.gapAnsText = pm + V + ' + ' + pc;
    qData.workSteps = 'A rectangle has two of each side, so P = 2(' + wLbl + ') + 2(' + hLbl + ').<br>'
      + 'Expand: ' + (2 * m1) + V + ' + ' + (2 * c1) + ' + ' + (2 * m2) + V + ' + ' + (2 * c2)
      + '.<br>Collect the like terms: <b>' + pm + V + ' + ' + pc + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Write a simplified expression for the perimeter.</div>'
      + apRectSVG(wLbl, hLbl);
    return;
  }

  if (level === 2){
    /* find x given the perimeter — the value is chosen first so x is always whole */
    const xv = rr(2, 9);
    const P = pm * xv + pc;
    qData.ans = xv;
    qData.workSteps = 'The perimeter is 2(' + wLbl + ') + 2(' + hLbl + ') = ' + pm + V + ' + ' + pc + '.<br>'
      + 'Set that equal to ' + P + ': ' + pm + V + ' + ' + pc + ' = ' + P + ' → ' + pm + V + ' = ' + (P - pc)
      + ' → ' + V + ' = <b>' + xv + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">The perimeter of this rectangle is <b>' + P
      + ' cm</b>. Find ' + V + '.</div>' + apRectSVG(wLbl, hLbl);
    return;
  }

  /* L3 — substitute a relationship between the two variables, then simplify.
     Sides are in x and y, and x = k·y, so the perimeter comes back in y alone. */
  const k = ffPick([2, 3, 4]);
  const a1 = ffPick([1, 2, 3]), b1 = ffPick([1, 2, 3]);
  const wl = v99Poly([{ c: a1, L: 'x' }]);
  const hl = v99Poly([{ c: b1, L: 'y' }]);
  const coeff = 2 * (a1 * k + b1);
  qData.gapTemplate = ['P = ', 0, 'y'];
  qData.gapAns = [coeff];
  qData.gapHint = 'Fill in the coefficient of y.';
  qData.gapAnsText = coeff + 'y';
  qData.workSteps = 'P = 2(' + wl + ') + 2(' + hl + ') = ' + (2 * a1) + 'x + ' + (2 * b1) + 'y.<br>'
    + 'Now x = ' + k + 'y, so ' + (2 * a1) + 'x becomes ' + (2 * a1) + ' × ' + k + 'y = ' + (2 * a1 * k) + 'y.<br>'
    + (2 * a1 * k) + 'y + ' + (2 * b1) + 'y = <b>' + coeff + 'y</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Write the perimeter in terms of <b>y</b> only, given <b>x = '
    + k + 'y</b>.</div>' + apRectSVG(wl, hl);
}

/* ═══════════════════════════════════════════════════════════════════
   4. NUMBER LINES  (numLine)
   -------------------------------------------------------------------
   Yr 7 ALT 2 MC Q4 and Q6, both ALT 1 papers ("mark all the integers
   less than −3 and greater than −7"), and SEAL ALT 3 (an inequality
   solution shown on a line).

   NO new input mode: plotPts takes its geometry from qData.plotGeom, so
   a one-dimensional line is the same surface with one row of taps. That
   was the whole point of making the mode axis-agnostic in v78.
═══════════════════════════════════════════════════════════════════ */
function nlGeom(lo, hi, den){
  const xs = [];
  for (let i = lo * den; i <= hi * den; i++) xs.push(i);
  const L = 26, R = 274, y = 74;
  const px = function(v){ return L + (v - lo * den) * (R - L) / (hi * den - lo * den); };
  const py = function(){ return y; };
  const step = (R - L) / (hi * den - lo * den);
  const grid = function(){
    let s = '<line x1="' + (L - 12) + '" y1="' + y + '" x2="' + (R + 12) + '" y2="' + y
      + '" stroke="var(--text)" stroke-width="3"/>'
      + '<polygon points="' + (R + 12) + ',' + y + ' ' + (R + 4) + ',' + (y - 5) + ' ' + (R + 4) + ',' + (y + 5) + '" fill="var(--text)"/>'
      + '<polygon points="' + (L - 12) + ',' + y + ' ' + (L - 4) + ',' + (y - 5) + ' ' + (L - 4) + ',' + (y + 5) + '" fill="var(--text)"/>';
    xs.forEach(function(v){
      const big = (v % den === 0);
      s += '<line x1="' + px(v) + '" y1="' + (y - (big ? 9 : 5)) + '" x2="' + px(v) + '" y2="' + (y + (big ? 9 : 5))
        + '" stroke="var(--text)" stroke-width="' + (big ? 2.5 : 1.5) + '"/>';
      if (big) s += '<text x="' + px(v) + '" y="' + (y + 28) + '" text-anchor="middle" font-size="14" '
        + 'font-weight="700" fill="var(--muted)">' + (v / den) + '</text>';
    });
    return s;
  };
  return { px: px, py: py, xs: xs, ys: [0], grid: grid, h: 120, maxW: 430,
           r: Math.max(7, Math.min(12, step * 0.55)) };
}
function genNumLine(el){
  el.style.fontSize = '1.05rem';

  if (level === 1){
    /* read the value the arrow points to — a fraction or a mixed number */
    const den = ffPick([2, 3, 4, 5, 6, 8]);
    const hi = ffPick([1, 2, 3]);
    let t = rr(1, hi * den - 1);
    while (t % den === 0) t = rr(1, hi * den - 1);   /* never a whole number */
    const g = gcd(t, den);
    qData.ansNum = t / g; qData.ansDen = den / g;
    const G = nlGeom(0, hi, den);
    const ax = G.px(t);
    qData.workSteps = 'Each gap is one ' + (den === 2 ? 'half' : den === 3 ? 'third' : den === 4 ? 'quarter'
      : '1/' + den) + ', because 0 to 1 is split into ' + den + ' equal parts.<br>The arrow is at the '
      + t + 'th mark, which is ' + t + '/' + den
      + (g > 1 ? ' — and that simplifies to <b>' + qData.ansNum + '/' + qData.ansDen + '</b>.'
               : ' = <b>' + qData.ansNum + '/' + qData.ansDen + '</b>.');
    id('qBox').innerHTML = '<div class="q-text" style="' + A_LBL + '">What value is the arrow pointing to? '
      + 'Give your answer as a fraction in simplest form.'
      + '<svg viewBox="0 0 300 120" style="width:100%;max-width:430px;display:block;margin:8px auto;">'
      + G.grid()
      + '<polygon points="' + ax + ',66 ' + (ax - 6) + ',48 ' + (ax + 6) + ',48" fill="var(--accent)"/>'
      + '<line x1="' + ax + '" y1="30" x2="' + ax + '" y2="50" stroke="var(--accent)" stroke-width="3"/>'
      + '</svg></div>';
    return;
  }

  if (level === 2){
    /* which arrow is closest to the given value — Yr 7 ALT 2 MC Q4 */
    const den = ffPick([4, 5, 6, 8, 10]);
    const hi = 2;
    const G = nlGeom(0, hi, den);
    const targetTick = rr(1, hi * den - 1);
    const target = targetTick / den;
    const labels = ['A', 'B', 'C', 'D'];
    let ticks = [], guard = 0;
    while (guard++ < 400){
      ticks = shuffleArr(G.xs.filter(function(v){ return v > 0 && v < hi * den; })).slice(0, 4)
        .sort(function(p, q){ return p - q; });
      if (ticks.length < 4) continue;
      /* compare in TICK units, not in fractions of one: |5/6 − 3/6| and
         |1/6 − 3/6| are equal in arithmetic but NOT equal in floating point,
         so a fractional comparison lets a tie through and the question then
         has two right answers. */
      const ds = ticks.map(function(v){ return Math.abs(v - targetTick); });
      const mn = Math.min.apply(null, ds);
      if (ds.filter(function(d){ return d === mn; }).length === 1) break;
    }
    const ds = ticks.map(function(v){ return Math.abs(v - targetTick); });
    let bi = 0; ds.forEach(function(d, i){ if (d < ds[bi]) bi = i; });
    let marks = '';
    ticks.forEach(function(v, i){
      const x = G.px(v);
      marks += '<line x1="' + x + '" y1="34" x2="' + x + '" y2="60" stroke="var(--accent)" stroke-width="2.5"/>'
        + '<polygon points="' + x + ',68 ' + (x - 5) + ',56 ' + (x + 5) + ',56" fill="var(--accent)"/>'
        + '<text x="' + x + '" y="28" text-anchor="middle" font-size="15" font-weight="800" fill="var(--accent)">' + labels[i] + '</text>';
    });
    const tg = gcd(Math.round(target * den), den);
    const tn = Math.round(target * den) / tg, td = den / tg;
    qData.workSteps = 'The line is split into ' + den + 'ths. ' + tn + '/' + td + ' is at the '
      + Math.round(target * den) + 'th mark.<br>'
      + ticks.map(function(v, i){ return labels[i] + ' is at ' + v + '/' + den; }).join(', ')
      + ' — the closest is <b>' + labels[bi] + '</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Which arrow is closest to <b>' + tn + '/' + td + '</b>?</div>'
      + '<svg viewBox="0 0 300 120" style="width:100%;max-width:430px;display:block;margin:8px auto;">'
      + G.grid() + marks + '</svg>', labels, labels[bi], true);
  }

  /* L3 and L4 — the line IS the answer surface. */
  if (level === 3){
    /* "mark all the integers less than −3 and greater than −7" */
    const lo = -9, hi = 9;
    /* the gap must be at least 4, or "every integer between" is one tap and the
       level stops testing the strict-inequality boundary at all */
    let a = rr(-8, 2), b = a + rr(4, 7);
    if (b > 8) { b = 8; a = b - rr(4, 6); }
    const want = [];
    for (let v = a + 1; v <= b - 1; v++) want.push([v, 0]);
    qData.plotGeom = nlGeom(lo, hi, 1);
    qData.plotAns = want;
    qData.plotNeed = want.length;
    qData.plotNoun = 'marked';
    qData.plotInstr = 'Tap every integer that fits. Tap again to remove one.';
    qData.plotAbove = '<div style="' + A_LBL + '">Mark every integer that is <b>greater than ' + a
      + '</b> and <b>less than ' + b + '</b>.</div>';
    qData.workSteps = 'Greater than ' + a + ' means ' + a + ' itself is OUT — start at ' + (a + 1)
      + '. Less than ' + b + ' means ' + b + ' is out too — stop at ' + (b - 1) + '.<br>'
      + 'So the integers are <b>' + want.map(function(p){ return p[0]; }).join(', ') + '</b>.';
    return;
  }

  /* L4 — solve the inequality first, THEN show it.
     The WINDOW is chosen so that every integer drawn on it either satisfies the
     inequality or clearly does not: the line runs from a couple of ticks the
     wrong side of the solution to the last integer that counts. Otherwise a
     student could satisfy the inequality with a tick the answer set never
     included, and be marked wrong for being right. */
  const m = ffPick([2, 3, 4]), c = rr(1, 9);
  const sol = rr(-4, 5);
  const rhs = m * sol + c;
  const gt = Math.random() < 0.5;
  const k = rr(4, 6);
  const want = [];
  if (gt) { for (let v = sol + 1; v <= sol + k; v++) want.push([v, 0]); }
  else    { for (let v = sol - k; v <= sol - 1; v++) want.push([v, 0]); }
  const winLo = gt ? sol - 2 : sol - k, winHi = gt ? sol + k : sol + 2;
  const trimmed = want;
  qData.plotGeom = nlGeom(winLo, winHi, 1);
  qData.plotAns = trimmed;
  qData.plotNeed = trimmed.length;
  qData.plotNoun = 'marked';
  qData.plotInstr = 'Solve it first, then tap every integer shown that satisfies it.';
  qData.plotAbove = '<div style="' + A_LBL + '">Solve <b>' + m + 'x + ' + c + ' ' + (gt ? '&gt;' : '&lt;')
    + ' ' + rhs + '</b>, then mark every integer on this line that satisfies it.</div>';
  qData.workSteps = m + 'x + ' + c + ' ' + (gt ? '>' : '<') + ' ' + rhs + ' → ' + m + 'x '
    + (gt ? '>' : '<') + ' ' + (rhs - c) + ' → x ' + (gt ? '>' : '<') + ' ' + sol
    + '.<br>' + sol + ' itself does NOT satisfy it, so the integers shown are <b>'
    + trimmed.map(function(p){ return p[0]; }).join(', ') + '</b>.';
}

/* ═══════════════════════════════════════════════════════════════════
   5. WRITTEN MULTIPLICATION  (writtenMult)  and  DIVISION L5
   -------------------------------------------------------------------
   Both ALT 1 papers set these explicitly — "use a multiplication or long
   division algorithm accordingly": 132 × 29 and 5932 ÷ 4. The app had
   times tables and division FACTS, and since v96 four-digit column
   addition, but nothing multi-digit for × or ÷.
   Worth naming the tension: the ALT marks are for the SETTING OUT, and a
   fluency app can only check the answer. But a student who cannot get the
   answer will not get the setting-out marks either.
═══════════════════════════════════════════════════════════════════ */
function v99ColHTML(a, b, sym){
  return '<div style="font-family:\'Nunito\',sans-serif;font-weight:900;font-size:2.2rem;'
    + 'text-align:right;line-height:1.4;border-bottom:3px solid var(--text);padding-bottom:6px;'
    + 'min-width:170px;display:inline-block"><div>' + a + '</div><div>' + sym + '&nbsp;' + b + '</div></div>';
}
function genWrittenMult(el){
  const a = level === 1 ? rr(112, 989) : rr(112, 989);
  let b;
  if (level === 1) b = rr(3, 9);
  else if (level === 2) { b = rr(12, 89); while (b % 10 === 0) b = rr(12, 89); }
  else { b = ffPick([102, 203, 304, 405, 506, 607, 708, 809, 120, 230, 340, 450]); }
  qData.ans = a * b;
  qData.workSteps = 'Set it out in columns and multiply by each digit in turn, remembering the place-value zero '
    + 'on the second row: ' + a + ' × ' + b + ' = <b>' + (a * b) + '</b>.'
    + (level === 3 ? '<br>A zero in the multiplier still needs its row — it is what keeps the next row in the right column.' : '');
  id('qBox').innerHTML = v99ColHTML(a, b, '×');
}
function genLongDivision(el){
  /* 4-digit ÷ 1-digit, exact — the ALT's own 5932 ÷ 4 shape. Built from the
     quotient up, so it always divides exactly and the answer is one number. */
  const d = rr(3, 9);
  const q = rr(1000, 9999 / d | 0);
  const n = q * d;
  qData.ans = q;
  qData.workSteps = 'Work left to right, carrying the remainder into the next digit: ' + n + ' ÷ ' + d
    + ' = <b>' + q + '</b>.<br>Check by multiplying back: ' + q + ' × ' + d + ' = ' + n + '.';
  el.textContent = n + ' ÷ ' + d;
}

/* ═══════════════════════════════════════════════════════════════════
   6. HCF & LCM IN INDEX FORM  (hcfLcm L5)
   -------------------------------------------------------------------
   On BOTH ALT 1 papers, in Section A and in multiple choice, and it is
   the POINT of the whole prime-factorisation sequence — the Year 7 paper
   builds to it in Section C Q4. hcfLcm worked on plain numbers only.
   Multiple choice, because a keypad cannot type 3² × 7. Every distractor
   is a named misconception: the higher power for the HCF, the lower for
   the LCM, or multiplying the two numbers together.
═══════════════════════════════════════════════════════════════════ */
function v99Pow(base, p){ return p === 0 ? '' : base + (p === 1 ? '' : '<sup>' + p + '</sup>'); }
function v99Prod(p, a, q, b){
  const parts = [];
  if (a > 0) parts.push(v99Pow(p, a));
  if (b > 0) parts.push(v99Pow(q, b));
  return parts.length ? parts.join(' × ') : '1';
}
function genHcfLcmIndex(el){
  el.style.fontSize = '1.05rem';
  const PR = shuffleArr([2, 3, 5, 7, 11]).slice(0, 2);
  const p = PR[0], q = PR[1];
  let a1, a2, b1, b2, guard = 0;
  while (guard++ < 200){
    a1 = rr(1, 5); a2 = rr(1, 5); b1 = rr(1, 5); b2 = rr(1, 5);
    if (a1 !== a2 && b1 !== b2) break;
  }
  const wantHCF = Math.random() < 0.5;
  const hi = [Math.max(a1, a2), Math.max(b1, b2)], lo = [Math.min(a1, a2), Math.min(b1, b2)];
  const right = wantHCF ? v99Prod(p, lo[0], q, lo[1]) : v99Prod(p, hi[0], q, hi[1]);
  const wrongSwap = wantHCF ? v99Prod(p, hi[0], q, hi[1]) : v99Prod(p, lo[0], q, lo[1]);
  /* Every distractor is a named slip: the other rule's answer, one power taken
     from the wrong side, and adding the indices (which is what multiplying the
     two numbers together does). When a1 < a2 AND b1 < b2 the first number IS the
     HCF, so "one of the two numbers" collapses onto an option we already have —
     the mixed pairs below keep four genuinely different options in every case. */
  const opts = [right, wrongSwap,
    v99Prod(p, lo[0], q, hi[1]), v99Prod(p, hi[0], q, lo[1]),
    v99Prod(p, a1, q, b1), v99Prod(p, a2, q, b2),
    v99Prod(p, a1 + a2, q, b1 + b2)];
  const uniq = [], seen = {};
  opts.forEach(function(o){ if (!seen[o] && uniq.length < 4) { seen[o] = 1; uniq.push(o); } });
  qData.workSteps = 'For the <b>' + (wantHCF ? 'HCF' : 'LCM') + '</b> take the '
    + (wantHCF ? 'LOWEST' : 'HIGHEST') + ' power of every prime that appears.<br>'
    + p + ': ' + (wantHCF ? 'lower' : 'higher') + ' of ' + a1 + ' and ' + a2 + ' is '
    + (wantHCF ? lo[0] : hi[0]) + '. ' + q + ': ' + (wantHCF ? 'lower' : 'higher') + ' of ' + b1
    + ' and ' + b2 + ' is ' + (wantHCF ? lo[1] : hi[1]) + '.<br>So the answer is <b>' + right + '</b>. '
    + 'Taking the ' + (wantHCF ? 'higher' : 'lower') + ' powers instead gives the '
    + (wantHCF ? 'LCM' : 'HCF') + ', which is the usual slip.';
  decSetChoice(el, '<div style="' + A_LBL + '">Find the <b>' + (wantHCF ? 'highest common factor (HCF)'
    : 'lowest common multiple (LCM)') + '</b>, leaving your answer in index form.</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.6rem;margin:12px 0;">'
    + v99Prod(p, a1, q, b1) + '&nbsp;&nbsp;and&nbsp;&nbsp;' + v99Prod(p, a2, q, b2) + '</div>',
    uniq, right);
}

/* ═══════════════════════════════════════════════════════════════════
   7. ABSOLUTE VALUE & FACTORIALS  (absFact)
   -------------------------------------------------------------------
   |−10 + 4!| − |3| is on BOTH ALT 1 papers as a one-mark multiple
   choice, and neither notation existed anywhere in the app.
═══════════════════════════════════════════════════════════════════ */
function v99Fact(n){ let f = 1; for (let i = 2; i <= n; i++) f *= i; return f; }
function genAbsFact(el){
  el.style.fontSize = '1.6rem';
  if (level === 1){
    const two = Math.random() < 0.6;
    const a = nz(rr(-20, 20)), b = nz(rr(-20, 20));
    if (two){
      const plus = Math.random() < 0.5;
      const inside = plus ? a + b : a - b;
      qData.ans = Math.abs(inside);
      qData.workSteps = 'Work out what is inside the bars first: ' + a + (plus ? ' + ' : ' − ')
        + '(' + b + ') = ' + inside + '.<br>The bars mean "how far from zero", so the answer is <b>'
        + Math.abs(inside) + '</b> — never negative.';
      el.innerHTML = '<span style="font-weight:900;">|' + v98Neg(a) + ' ' + (plus ? '+' : '−') + ' '
        + v98Neg(b) + '|</span>';
    } else {
      qData.ans = Math.abs(a);
      qData.workSteps = 'The bars mean the distance from zero, so |' + v98Neg(a) + '| = <b>'
        + Math.abs(a) + '</b>.';
      el.innerHTML = '<span style="font-weight:900;">|' + v98Neg(a) + '|</span>';
    }
    return;
  }
  if (level === 2){
    const n = rr(2, 7);
    qData.ans = v99Fact(n);
    const chain = []; for (let i = n; i >= 1; i--) chain.push(i);
    qData.workSteps = n + '! means multiply every whole number from ' + n + ' down to 1: '
      + chain.join(' × ') + ' = <b>' + v99Fact(n) + '</b>.';
    el.innerHTML = '<span style="font-weight:900;">' + n + '!</span>';
    return;
  }
  /* L3 — the paper's own shape: |a + n!| − |b| */
  const n = rr(3, 5), a = rr(-30, -4), b = rr(2, 9);
  const inside = a + v99Fact(n);
  qData.ans = Math.abs(inside) - Math.abs(b);
  qData.workSteps = 'Factorials come before everything else: ' + n + '! = ' + v99Fact(n) + '.<br>'
    + 'Inside the first bars: ' + a + ' + ' + v99Fact(n) + ' = ' + inside + ', so |' + inside + '| = '
    + Math.abs(inside) + '.<br>|' + b + '| = ' + b + '.<br>' + Math.abs(inside) + ' − ' + b + ' = <b>'
    + qData.ans + '</b>.';
  el.innerHTML = '<span style="font-weight:900;">|' + v98Neg(a) + ' + ' + n + '!| − |' + b + '|</span>';
}

/* ═══════════════════════════════════════════════════════════════════
   8. DIRECT & INVERSE PROPORTION  (proportion)
   -------------------------------------------------------------------
   SEAL ALT 2 Q8: a table of y against x, plot it, then say whether it is
   direct or inverse proportion. Nothing in the app named proportion. The
   PLOTTING half was already built — Table of Values L1–L2 is mapped into
   SEAL ALT 2 by the v98 mapping fixes, so only the naming needed a skill.
═══════════════════════════════════════════════════════════════════ */
function v99Table(xs, ys){
  let t = '<table class="tov-table"><tr><th>x</th>';
  xs.forEach(function(x){ t += '<td>' + x + '</td>'; });
  t += '</tr><tr><th>y</th>';
  ys.forEach(function(y){ t += '<td>' + y + '</td>'; });
  return t + '</tr></table>';
}
function genProportion(el){
  el.style.fontSize = '1.05rem';
  if (level === 1){
    const kind = ri(3);           /* 0 direct · 1 inverse · 2 neither */
    const k = rr(2, 12);
    const xs = [1, 2, 3, 4];
    let ys, right;
    if (kind === 0){ ys = xs.map(function(x){ return k * x; }); right = 'Direct proportion'; }
    else if (kind === 1){ const K = k * 12; ys = xs.map(function(x){ return K / x; }); right = 'Inverse proportion'; }
    else { ys = xs.map(function(x){ return k * x + rr(1, 9); }); right = 'Neither'; }
    /* A "neither" table must not accidentally BE proportional — a random offset
       can land on a constant ratio, and then two options are right at once. */
    if (kind === 2){
      const ratio0 = ys[0] / xs[0], prod0 = ys[0] * xs[0];
      const allRatio = xs.every(function(x, i){ return ys[i] / x === ratio0; });
      const allProd  = xs.every(function(x, i){ return ys[i] * x === prod0; });
      if (allRatio || allProd) ys[3] += 1;
    }
    qData.workSteps = (kind === 0
      ? 'Every y ÷ x gives the same number (' + k + '), so y = ' + k + 'x — <b>direct proportion</b>. '
        + 'Doubling x doubles y.'
      : kind === 1
      ? 'Every y × x gives the same number (' + (ys[0] * xs[0]) + '), so xy is constant — <b>inverse proportion</b>. '
        + 'Doubling x halves y.'
      : 'y ÷ x is not constant and neither is y × x, so this is <b>neither</b>.');
    return decSetChoice(el, '<div style="' + A_LBL + '">Does this table show direct proportion, inverse proportion, or neither?</div>'
      + '<div style="display:flex;justify-content:center;margin:12px 0;">' + v99Table(xs, ys) + '</div>',
      ['Direct proportion', 'Inverse proportion', 'Neither'], right, true);
  }
  if (level === 2){
    /* find the constant k */
    const direct = Math.random() < 0.5;
    const k = direct ? rr(2, 15) : rr(2, 9) * 12;
    const xs = direct ? [1, 2, 3, 4] : [1, 2, 3, 4];   /* k is a multiple of 12, so k/x is whole */
    const ys = xs.map(function(x){ return direct ? k * x : k / x; });
    qData.ans = k;
    qData.workSteps = direct
      ? 'In direct proportion y = kx, so k = y ÷ x. Take any column: ' + ys[1] + ' ÷ ' + xs[1]
        + ' = <b>' + k + '</b>. Every column gives the same k.'
      : 'In inverse proportion xy = k, so multiply any column: ' + xs[1] + ' × ' + ys[1]
        + ' = <b>' + k + '</b>. Every column gives the same k.';
    el.innerHTML = '<div style="' + A_LBL + '">This table shows <b>' + (direct ? 'direct' : 'inverse')
      + ' proportion</b>. Find the constant <b>k</b>.</div>'
      + '<div style="display:flex;justify-content:center;margin:12px 0;">' + v99Table(xs, ys) + '</div>';
    return;
  }
  /* L3 — use the rule to find a missing value */
  const direct = Math.random() < 0.6;
  const k = direct ? rr(2, 15) : rr(2, 9) * 24;
  /* for inverse proportion both x values must DIVIDE k, or the table is a lie */
  const x0 = direct ? rr(2, 6) : ffPick([2, 3, 4, 6]);
  const y0 = direct ? k * x0 : k / x0;
  let x1 = rr(2, 12), guard = 0;
  while ((x1 === x0 || (!direct && k % x1 !== 0)) && guard++ < 200) x1 = rr(2, 12);
  if (x1 === x0 || (!direct && k % x1 !== 0)) x1 = (x0 === 8) ? 12 : 8;
  const y1 = direct ? k * x1 : k / x1;
  qData.ans = y1;
  qData.workSteps = direct
    ? 'y is directly proportional to x, so y = kx. From the pair given, k = ' + y0 + ' ÷ ' + x0 + ' = ' + k
      + '.<br>Then y = ' + k + ' × ' + x1 + ' = <b>' + y1 + '</b>.'
    : 'y is inversely proportional to x, so xy = k. From the pair given, k = ' + x0 + ' × ' + y0 + ' = ' + k
      + '.<br>Then y = ' + k + ' ÷ ' + x1 + ' = <b>' + y1 + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">y is <b>' + (direct ? 'directly' : 'inversely')
    + ' proportional</b> to x.<br>When x = ' + x0 + ', y = ' + y0 + '.<br>Find y when <b>x = ' + x1 + '</b>.</div>';
}

/* ═══════════════════════════════════════════════════════════════════
   9. CURRENCY CONVERSION  (rateConvert L4)
   -------------------------------------------------------------------
   SEAL ALT 2 Q6, 4 marks. A currency is a rate with a dollar sign, so
   the rate engine's arithmetic is the same. The one design point: half
   the questions must go BACKWARDS (foreign → Australian), because
   dividing when you expect to multiply is the whole error.
═══════════════════════════════════════════════════════════════════ */
const V99_CURRENCIES = [
  { name: 'US dollars', sym: 'US$', rate: 0.7370 },
  { name: 'euros', sym: '€', rate: 0.6120 },
  { name: 'British pounds', sym: '£', rate: 0.5240 },
  { name: 'Japanese yen', sym: '¥', rate: 78.14 },
  { name: 'Singapore dollars', sym: 'S$', rate: 0.9860 },
  { name: 'New Zealand dollars', sym: 'NZ$', rate: 1.0850 },
];
function genCurrency(el){
  el.style.fontSize = '1.05rem';
  const c = V99_CURRENCIES[ri(V99_CURRENCIES.length)];
  const toForeign = Math.random() < 0.5;
  if (toForeign){
    const aud = rr(2, 40) * 5;
    qData.ans = dp(aud * c.rate, 2);
    qData.ansTol = 0.005;
    qData.workSteps = 'One Australian dollar buys ' + c.rate + ' ' + c.name + ', so MULTIPLY: '
      + aud + ' × ' + c.rate + ' = <b>' + qData.ans + '</b> ' + c.name + '.';
    el.innerHTML = '<div style="' + A_LBL + '">A$1.00 = <b>' + c.sym + c.rate + '</b><br>'
      + 'Convert <b>A$' + aud + '.00</b> to ' + c.name + '. Give your answer to 2 decimal places.</div>';
    return;
  }
  const foreign = c.rate > 5 ? rr(4, 60) * 100 : rr(5, 80) * 5;
  qData.ans = dp(foreign / c.rate, 2);
  qData.ansTol = 0.005;
  qData.workSteps = 'Going the other way, DIVIDE by the rate: ' + foreign + ' ÷ ' + c.rate
    + ' = <b>' + qData.ans + '</b> Australian dollars.<br>'
    + 'Multiplying here is the classic slip — the rate is "' + c.name + ' per Australian dollar".';
  el.innerHTML = '<div style="' + A_LBL + '">A$1.00 = <b>' + c.sym + c.rate + '</b><br>'
    + 'Convert <b>' + c.sym + foreign + '</b> to Australian dollars. Give your answer to 2 decimal places.</div>';
}


/* ═══════════════════════════════════════════════════════════════════
   v101 — PROBABILITY  ·  14 skills · 74 levels
   -------------------------------------------------------------------
   The second of the two missing strands (Measurement is the other).
   Built from the 7MAT Lessons 4–5 and 7MAS (SEAL) Lessons 4–6 student
   booklets and Laura's Year 7 / Year 7 SEAL topic lists.

   Design notes worth keeping:

   • ONE dispatcher, one map. `PROB_LEVELS` + `genProb` follow the
     WORD_LEVEL / V96 / V98 / V99 pattern — the whole strand lands
     without reopening a single existing generator.

   • The fraction rule TIGHTENS as the ladder climbs (Laura, 1 Sep).
     `PROB_LENIENT` lists the levels where any equivalent fraction is
     accepted — a student meeting probability for the first time is
     marked on the probability, not on the simplifying. Everywhere else
     simplest form is required, and the miss review says WHICH of the
     two things went wrong.

   • Fractions are CONSTRUCTED, never sampled. A drill must not hand a
     student 7/13, so every total is chosen from a bank whose answers a
     Year 7 student can write.

   • Never P = 0 or P = 1 as a fraction answer — the answer panel swaps
     to the whole-number box on ansDen === 1, and "impossible" and
     "unlikely" would both be defensible words.
═══════════════════════════════════════════════════════════════════ */

const PROB_SKILLS = ['probSample','probLang','probTheory','probComp','probExp','probExpect',
                     'probTwoStep','probTree','probTwoWay','probVenn','probNotate','probMutEx',
                     'probAddRule','probCond'];
function isProbSkill(s){ return PROB_SKILLS.indexOf(s === undefined ? skill : s) >= 0; }

/* Levels where ANY equivalent fraction is accepted (Laura's call, 1 Sep). */
const PROB_LENIENT = { probTheory:[1, 2], probExp:[1, 2] };
function probLenientLevel(s, lv){
  const a = PROB_LENIENT[s];
  return !!a && a.indexOf(lv) >= 0;
}

/* ── shared helpers ─────────────────────────────────────────────── */
function pbFrac(n, d){
  const g = gcd(Math.abs(n), Math.abs(d)) || 1;
  qData.ansNum = n / g; qData.ansDen = d / g;
  qData.probMark = true;
  qData.probAnyEquiv = probLenientLevel(skill, level);
  qData.probRaw = n + '/' + d;
}
function pbSimp(n, d){ const g = gcd(Math.abs(n), Math.abs(d)) || 1; return (n / g) + '/' + (d / g); }
function pbFracTxt(n, d){ return pbSimp(n, d); }
function pbPickN(arr, n){ return shuffleArr(arr.slice()).slice(0, n); }
function pbPct(n, d){ return dp(100 * n / d, 1); }

const PB_COLOURS = ['red','blue','green','yellow','black','white','purple','orange'];
const PB_ITEMS = [
  { one:'marble',  many:'marbles',  where:'a bag' },
  { one:'counter', many:'counters', where:'a bag' },
  { one:'ball',    many:'balls',    where:'a box' },
  { one:'lolly',   many:'lollies',  where:'a jar' },
  { one:'cube',    many:'cubes',    where:'a bag' },
];
/* Totals whose parts simplify to fractions a Year 7 student can write. */
function pbBag(nCols, totalBank){
  const item = ffPick(PB_ITEMS);
  const cols = pbPickN(PB_COLOURS, nCols || rr(2, 3));
  const total = ffPick(totalBank || [8, 10, 12, 15, 16, 18, 20, 24]);
  /* split the total into nCols positive parts, none of them the whole total */
  const parts = [];
  let left = total;
  for (let i = 0; i < cols.length - 1; i++){
    const maxHere = left - (cols.length - 1 - i);
    const p = rr(1, Math.max(1, Math.min(maxHere, total - 2)));
    parts.push(p); left -= p;
  }
  parts.push(left);
  const rows = cols.map(function(c, i){ return { name:c, n:parts[i] }; });
  return { item:item, rows:rows, total:total,
    desc: rows.map(function(r){ return r.n + ' ' + r.name; }).join(', ') };
}
function pbBagText(bag){
  return 'There ' + (bag.total === 1 ? 'is' : 'are') + ' ' + bag.desc + ' ' + bag.item.many
    + ' in ' + bag.item.where + '. One ' + bag.item.one + ' is drawn at random.';
}

/* ── the spinner ─────────────────────────────────────────────────── */
function pbSpinnerSVG(labels){
  const n = labels.length, cx = 150, cy = 100, r = 74;
  let s = '';
  for (let i = 0; i < n; i++){
    const a0 = -Math.PI / 2 + i * 2 * Math.PI / n, a1 = -Math.PI / 2 + (i + 1) * 2 * Math.PI / n;
    const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
    const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
    const large = (2 * Math.PI / n) > Math.PI ? 1 : 0;
    s += '<path d="M' + cx + ' ' + cy + ' L' + x0.toFixed(1) + ' ' + y0.toFixed(1)
      + ' A' + r + ' ' + r + ' 0 ' + large + ' 1 ' + x1.toFixed(1) + ' ' + y1.toFixed(1)
      + ' Z" fill="none" stroke="var(--text)" stroke-width="2"/>';
    const am = (a0 + a1) / 2;
    s += '<text x="' + (cx + r * 0.62 * Math.cos(am)).toFixed(1) + '" y="'
      + (cy + r * 0.62 * Math.sin(am) + 6).toFixed(1) + '" text-anchor="middle" font-size="17" '
      + 'font-weight="800" fill="var(--text)">' + labels[i] + '</text>';
  }
  s += '<circle cx="' + cx + '" cy="' + cy + '" r="' + r + '" fill="none" stroke="var(--text)" stroke-width="3"/>'
    + '<line x1="' + cx + '" y1="' + cy + '" x2="' + cx + '" y2="' + (cy - r * 0.78) + '" stroke="var(--accent)" stroke-width="4"/>'
    + '<circle cx="' + cx + '" cy="' + cy + '" r="5" fill="var(--accent)"/>';
  return '<svg viewBox="0 0 300 200" style="width:100%;max-width:280px;display:block;margin:8px auto;">' + s + '</svg>';
}

/* ── the Venn diagram ────────────────────────────────────────────── */
/* vals: {aOnly, both, bOnly, none} — any value may be a string such as '?'.
   shade: 'a' | 'b' | 'both' | 'union' | 'notA' | 'aOnly' | null.
   Pictures go in the QUESTION and words in the OPTIONS (house rule), so the
   shaded-region level draws the region and offers the notation as text.      */
function pbVennSVG(A, B, vals, shade){
  /* cy/r leave room ABOVE the circles for the set labels: a long label like
     "Mountains" sat on top of its own circle at the first size tried. */
  const cxA = 118, cxB = 182, cy = 98, r = 54;
  let sh = '';
  const cA = '<circle cx="' + cxA + '" cy="' + cy + '" r="' + r + '"/>';
  const cB = '<circle cx="' + cxB + '" cy="' + cy + '" r="' + r + '"/>';
  const FILL = 'var(--accent)', OP = '0.28';
  if (shade === 'a')     sh = '<circle cx="' + cxA + '" cy="' + cy + '" r="' + r + '" fill="' + FILL + '" opacity="' + OP + '"/>';
  if (shade === 'b')     sh = '<circle cx="' + cxB + '" cy="' + cy + '" r="' + r + '" fill="' + FILL + '" opacity="' + OP + '"/>';
  if (shade === 'union') sh = '<circle cx="' + cxA + '" cy="' + cy + '" r="' + r + '" fill="' + FILL + '" opacity="' + OP + '"/>'
                            + '<circle cx="' + cxB + '" cy="' + cy + '" r="' + r + '" fill="' + FILL + '" opacity="' + OP + '"/>';
  if (shade === 'both')  sh = '<defs><clipPath id="pbClipA">' + cA + '</clipPath></defs>'
                            + '<g clip-path="url(#pbClipA)"><circle cx="' + cxB + '" cy="' + cy + '" r="' + r + '" fill="' + FILL + '" opacity="0.4"/></g>';
  if (shade === 'aOnly') sh = '<defs><clipPath id="pbClipB2">' + cB + '</clipPath><mask id="pbMaskB"><rect x="0" y="0" width="300" height="180" fill="#fff"/>'
                            + '<circle cx="' + cxB + '" cy="' + cy + '" r="' + r + '" fill="#000"/></mask></defs>'
                            + '<circle cx="' + cxA + '" cy="' + cy + '" r="' + r + '" fill="' + FILL + '" opacity="' + OP + '" mask="url(#pbMaskB)"/>';
  if (shade === 'notA')  sh = '<defs><mask id="pbMaskA"><rect x="12" y="12" width="276" height="156" fill="#fff"/>'
                            + '<circle cx="' + cxA + '" cy="' + cy + '" r="' + r + '" fill="#000"/></mask></defs>'
                            + '<rect x="12" y="12" width="276" height="156" fill="' + FILL + '" opacity="' + OP + '" mask="url(#pbMaskA)"/>';
  const t = function(x, y, txt, sz, col){
    return '<text x="' + x + '" y="' + y + '" text-anchor="middle" font-size="' + (sz || 17)
      + '" font-weight="800" fill="' + (col || 'var(--text)') + '">' + txt + '</text>';
  };
  return '<svg viewBox="0 0 300 180" style="width:100%;max-width:330px;display:block;margin:8px auto;">'
    + '<rect x="12" y="12" width="276" height="156" fill="none" stroke="var(--text)" stroke-width="2.5"/>'
    + sh
    + '<circle cx="' + cxA + '" cy="' + cy + '" r="' + r + '" fill="none" stroke="var(--text)" stroke-width="2.5"/>'
    + '<circle cx="' + cxB + '" cy="' + cy + '" r="' + r + '" fill="none" stroke="var(--text)" stroke-width="2.5"/>'
    + t(66, 36, A, 14, 'var(--muted)') + t(234, 36, B, 14, 'var(--muted)')
    + t(88, cy + 6, String(vals.aOnly)) + t(150, cy + 6, String(vals.both)) + t(212, cy + 6, String(vals.bOnly))
    + t(268, 160, String(vals.none), 15, 'var(--muted)')
    + '</svg>';
}

/* ── the tree diagram ────────────────────────────────────────────── */
/* s1: [{lbl, p}]  ·  s2: [[{lbl, p}, …], …] one array per first-step branch.
   p may be '' to draw an unlabelled tree.                                    */
function pbTreeSVG(s1, s2){
  const x0 = 26, x1 = 118, x2 = 214, W = 300;
  const ends = [];
  s2.forEach(function(row){ row.forEach(function(){ ends.push(0); }); });
  const nEnd = ends.length, H = Math.max(150, 34 * nEnd + 30);
  const yEnd = function(k){ return 26 + k * (H - 52) / Math.max(1, nEnd - 1); };
  const y0 = H / 2;
  let s = '', k = 0;
  s1.forEach(function(b, i){
    const kids = s2[i] || [];
    const first = k, last = k + kids.length - 1;
    const yb = (yEnd(first) + yEnd(last)) / 2;
    s += '<line x1="' + x0 + '" y1="' + y0 + '" x2="' + x1 + '" y2="' + yb.toFixed(1) + '" stroke="var(--text)" stroke-width="2.5"/>'
      + '<text x="' + ((x0 + x1) / 2) + '" y="' + (( y0 + yb) / 2 - 6).toFixed(1) + '" text-anchor="middle" font-size="13" font-weight="800" fill="var(--accent)">' + (b.p || '') + '</text>'
      + '<text x="' + (x1 + 6) + '" y="' + (yb + 5).toFixed(1) + '" font-size="15" font-weight="800" fill="var(--text)">' + b.lbl + '</text>';
    kids.forEach(function(c){
      const ye = yEnd(k);
      s += '<line x1="' + (x1 + 20) + '" y1="' + yb.toFixed(1) + '" x2="' + x2 + '" y2="' + ye.toFixed(1) + '" stroke="var(--text)" stroke-width="2.5"/>'
        + '<text x="' + ((x1 + 20 + x2) / 2) + '" y="' + ((yb + ye) / 2 - 6).toFixed(1) + '" text-anchor="middle" font-size="13" font-weight="800" fill="var(--accent)">' + (c.p || '') + '</text>'
        + '<text x="' + (x2 + 6) + '" y="' + (ye + 5).toFixed(1) + '" font-size="15" font-weight="800" fill="var(--text)">' + c.lbl + '</text>'
        + '<text x="' + (W - 6) + '" y="' + (ye + 5).toFixed(1) + '" text-anchor="end" font-size="13" font-weight="700" fill="var(--muted)">' + (c.out || '') + '</text>';
      k++;
    });
  });
  return '<svg viewBox="0 0 ' + W + ' ' + H + '" style="width:100%;max-width:360px;display:block;margin:8px auto;">' + s + '</svg>';
}

/* ── a plain results / outcome table ─────────────────────────────── */
function pbTableHTML(headers, rows){ return daFreqTable(headers, rows); }

/* ── the dice-totals grid ────────────────────────────────────────── */
function pbDiceGridHTML(){
  const head = ['+', '1', '2', '3', '4', '5', '6'];
  const rows = [];
  for (let a = 1; a <= 6; a++){
    const r = [String(a)];
    for (let b = 1; b <= 6; b++) r.push(String(a + b));
    rows.push(r);
  }
  return daFreqTable(head, rows);
}

/* ── the 0–1 probability line (plotPts, twelfths) ────────────────── */
/* No new input mode: plotPts takes its geometry from qData.plotGeom, exactly
   as the v99 Number Lines levels do. Twelfths so a half, third, quarter and
   sixth are all real ticks — the answer is never "somewhere near". */
function pbLineGeom(){
  const den = 12, L = 30, R = 272, y = 78;
  const xs = [];
  for (let i = 0; i <= den; i++) xs.push(i);
  const px = function(v){ return L + v * (R - L) / den; };
  const NAMED = { 0:'0', 3:'&#188;', 6:'&#189;', 9:'&#190;', 12:'1' };
  const grid = function(){
    let s = '<line x1="' + L + '" y1="' + y + '" x2="' + R + '" y2="' + y + '" stroke="var(--text)" stroke-width="3"/>';
    xs.forEach(function(v){
      const big = (NAMED[v] !== undefined);
      s += '<line x1="' + px(v) + '" y1="' + (y - (big ? 10 : 5)) + '" x2="' + px(v) + '" y2="' + (y + (big ? 10 : 5))
        + '" stroke="var(--text)" stroke-width="' + (big ? 2.5 : 1.5) + '"/>';
      if (big) s += '<text x="' + px(v) + '" y="' + (y + 30) + '" text-anchor="middle" font-size="15" font-weight="800" fill="var(--muted)">' + NAMED[v] + '</text>';
    });
    s += '<text x="' + L + '" y="' + (y - 22) + '" text-anchor="middle" font-size="12" font-weight="700" fill="var(--muted)">impossible</text>'
      +  '<text x="' + R + '" y="' + (y - 22) + '" text-anchor="middle" font-size="12" font-weight="700" fill="var(--muted)">certain</text>';
    return s;
  };
  return { px: px, py: function(){ return y; }, xs: xs, ys: [0], grid: grid, h: 120, maxW: 430, r: 9 };
}

/* ═══ the dispatcher ══════════════════════════════════════════════ */
function genProb(el){
  el.style.fontSize = '1.05rem';
  if (skill === 'probSample')  return genProbSample(el);
  if (skill === 'probLang')    return genProbLang(el);
  if (skill === 'probTheory')  return genProbTheory(el);
  if (skill === 'probComp')    return genProbComp(el);
  if (skill === 'probExp')     return genProbExp(el);
  if (skill === 'probExpect')  return genProbExpect(el);
  if (skill === 'probTwoStep') return genProbTwoStep(el);
  if (skill === 'probTree')    return genProbTree(el);
  if (skill === 'probTwoWay')  return genProbTwoWay(el);
  if (skill === 'probVenn')    return genProbVenn(el);
  if (skill === 'probNotate')  return genProbNotate(el);
  if (skill === 'probMutEx')   return genProbMutEx(el);
  if (skill === 'probAddRule') return genProbAddRule(el);
  if (skill === 'probCond')    return genProbCond(el);
}

/* ═══ 1. SAMPLE SPACE ═════════════════════════════════════════════ */
/* Every trial knows its own outcome LIST, so "how many outcomes",
   "which set is the sample space" and "which outcome is impossible"
   are all read off the same record and cannot disagree. */
function pbTrial(){
  const k = ri(6);
  if (k === 0) return { d:'a fair coin is flipped', out:['H','T'], noun:'outcomes' };
  if (k === 1) return { d:'a standard six-sided die is rolled', out:['1','2','3','4','5','6'], noun:'outcomes' };
  if (k === 2){ const n = rr(3, 8), L = ['A','B','C','D','E','F','G','H'].slice(0, n);
    return { d:'a spinner with ' + n + ' equal parts labelled ' + L.join(', ') + ' is spun', out:L, noun:'outcomes', spin:L }; }
  if (k === 3) return { d:'a day of the week is chosen at random',
    out:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], noun:'outcomes' };
  if (k === 4){ const n = ffPick([8, 9, 10, 12]); const L = [];
    for (let i = 1; i <= n; i++) L.push(String(i));
    return { d:'a card is chosen at random from cards numbered 1 to ' + n, out:L, noun:'outcomes' }; }
  /* Every word here has DISTINCT letters, deliberately: the sample space lists
     each outcome once, so a word with a repeated letter would make "how many
     outcomes" and "which set is the sample space" disagree with each other.
     (Theoretical Probability L5 uses repeated-letter words on purpose — there
     the repeat is the point, because it changes the favourable count.) */
  const w = ffPick(['SPIN','TRIAL','DICE','CHANGE','RANDOM','MATHS','PRIZE']);
  return { d:'a letter is chosen at random from the word ' + w, out:w.split(''), noun:'outcomes', word:w };
}
function genProbSample(el){
  if (level === 1){
    const t = pbTrial();
    qData.ans = t.out.length;
    qData.workSteps = 'List them: ' + t.out.join(', ') + '.<br>That is <b>' + t.out.length + '</b> outcomes in the sample space.';
    el.innerHTML = '<div style="' + A_LBL + '">How many outcomes are in the sample space when</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.35rem;margin:14px 0;">' + t.d + '?</div>';
    return;
  }
  if (level === 2){
    let t = pbTrial();
    let guard = 0;
    while (t.out.length > 8 && guard++ < 20) t = pbTrial();
    const right = '{ ' + t.out.join(', ') + ' }';
    const dropped = t.out.slice(0, t.out.length - 1);
    const extra = t.out.concat(['?']);
    const opts = [right, '{ ' + dropped.join(', ') + ' }', '{ ' + extra.join(', ') + ' }',
                  '{ ' + t.out.slice(0, Math.max(1, Math.floor(t.out.length / 2))).join(', ') + ' }'];
    const seen = {}; const clean = [];
    opts.forEach(function(o){ if (!seen[o]) { seen[o] = 1; clean.push(o); } });
    qData.workSteps = 'The sample space is EVERY outcome that could happen, listed once each: <b>' + right + '</b>.<br>'
      + 'A set that is missing an outcome, or that has one that cannot happen, is not the sample space.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Which set is the sample space when ' + t.d + '?</div>', clean, right);
  }
  if (level === 3){
    let t = pbTrial();
    let guard = 0;
    while (t.out.length < 4 && guard++ < 20) t = pbTrial();
    const uniq = t.out.filter(function(o, i){ return t.out.indexOf(o) === i; });
    const shown = pbPickN(uniq, 3);
    const pool = ['9','Z','0','J','13','Sun2','Q'];
    let bad = null;
    for (let i = 0; i < pool.length && bad === null; i++) if (t.out.indexOf(pool[i]) < 0) bad = pool[i];
    qData.workSteps = 'The sample space is ' + t.out.join(', ') + '. <b>' + bad + '</b> is not in it, so it cannot happen.';
    return decSetChoice(el, '<div style="' + A_LBL + '">' + t.d.charAt(0).toUpperCase() + t.d.slice(1)
      + '.<br>Which of these could <b>NOT</b> be the result?</div>', shown.concat([bad]), bad);
  }
  if (level === 4){
    const n = ffPick([6, 8, 10, 12]);
    const conds = [
      { w:'even', f:function(v){ return v % 2 === 0; } },
      { w:'odd', f:function(v){ return v % 2 === 1; } },
      { w:'greater than ' + Math.ceil(n / 2), f:function(v){ return v > Math.ceil(n / 2); } },
      { w:'less than ' + Math.ceil(n / 2), f:function(v){ return v < Math.ceil(n / 2); } },
      { w:'a multiple of 3', f:function(v){ return v % 3 === 0; } },
      { w:'a factor of ' + n, f:function(v){ return n % v === 0; } },
    ];
    const c = ffPick(conds);
    const hits = [];
    for (let v = 1; v <= n; v++) if (c.f(v)) hits.push(v);
    qData.ans = hits.length;
    qData.workSteps = 'Go through 1 to ' + n + ' and keep the ones that are ' + c.w + ': '
      + hits.join(', ') + '.<br>That is <b>' + hits.length + '</b> favourable outcomes.';
    el.innerHTML = '<div style="' + A_LBL + '">A card is chosen at random from cards numbered 1 to ' + n + '.<br>'
      + 'How many outcomes are <b>' + c.w + '</b>?</div>';
    return;
  }
  if (level === 5){
    const twoCoins = Math.random() < 0.5;
    let right, bad, prompt;
    if (twoCoins){
      right = ['HH','HT','TH','TT']; bad = ['HHT','H'];
      prompt = 'Two coins are tossed. Tick <b>every</b> outcome in the sample space.';
    } else {
      right = ['1H','1T','2H','2T','3H','3T']; bad = ['4H','1B'];
      prompt = 'A three-part spinner (1, 2, 3) is spun and a coin is tossed. Tick <b>every</b> outcome in the sample space.';
    }
    const opts = shuffleArr(right.concat(bad));
    qData.msOptions = opts.map(function(o, i){ return { code:'m' + i, label:o }; });
    qData.msAns = qData.msOptions.filter(function(o){ return right.indexOf(o.label) >= 0; }).map(function(o){ return o.code; });
    qData.msInstr = 'Tick every outcome that is in the sample space.';
    qData.workSteps = 'Pair every outcome of the first step with every outcome of the second: <b>'
      + right.join(', ') + '</b> — ' + right.length + ' outcomes.';
    el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>';
    return;
  }
  /* L6 — the multiplication principle */
  const A = pbTrial();
  let B = pbTrial();
  let g = 0;
  while (B.d === A.d && g++ < 20) B = pbTrial();
  qData.ans = A.out.length * B.out.length;
  qData.workSteps = 'The first step has ' + A.out.length + ' outcomes and the second has ' + B.out.length + '.<br>'
    + 'Every outcome of the first pairs with every outcome of the second: ' + A.out.length + ' × '
    + B.out.length + ' = <b>' + qData.ans + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">A two-step experiment: first ' + A.d + ', then ' + B.d + '.<br>'
    + 'How many outcomes are in the sample space?</div>';
}

/* ═══ 2. LANGUAGE OF CHANCE ═══════════════════════════════════════ */
const PB_WORDS = ['impossible','unlikely','even chance','likely','certain'];
function pbWordFor(p){
  if (p === 0) return 'impossible';
  if (p === 1) return 'certain';
  if (Math.abs(p - 0.5) < 1e-9) return 'even chance';
  return p < 0.5 ? 'unlikely' : 'likely';
}
/* Build an event whose probability lands SAFELY inside one band — never at
   0.45, where "unlikely" and "even chance" are both arguable. */
function pbBandedEvent(){
  const want = ffPick(PB_WORDS);
  const bag = pbBag(2, [8, 10, 12, 16, 20]);
  const a = bag.rows[0], b = bag.rows[1];
  const text = pbBagText(bag);
  if (want === 'impossible')
    return { text:text, ev:'drawing a ' + ffPick(PB_COLOURS.filter(function(c){ return c !== a.name && c !== b.name; })) + ' ' + bag.item.one,
             word:'impossible', why:'There are none of that colour in ' + bag.item.where + ', so it can never happen — P = 0.' };
  if (want === 'certain')
    return { text:text, ev:'drawing a ' + a.name + ' or a ' + b.name + ' ' + bag.item.one,
             word:'certain', why:'Every ' + bag.item.one + ' is ' + a.name + ' or ' + b.name + ', so it always happens — P = 1.' };
  const total = ffPick([8, 10, 12, 16, 20]);
  let f;
  if (want === 'even chance') f = total / 2;
  else if (want === 'unlikely') f = Math.max(1, Math.round(total * 0.25));
  else f = Math.round(total * 0.75);
  const c1 = ffPick(PB_COLOURS), c2 = ffPick(PB_COLOURS.filter(function(c){ return c !== c1; }));
  const item = ffPick(PB_ITEMS);
  const t2 = 'There are ' + f + ' ' + c1 + ' and ' + (total - f) + ' ' + c2 + ' ' + item.many
    + ' in ' + item.where + '. One ' + item.one + ' is drawn at random.';
  return { text:t2, ev:'drawing a ' + c1 + ' ' + item.one, word:want,
           why:'P = ' + f + '/' + total + ' = ' + dp(f / total, 2) + ', which is ' + want + '.' };
}
function genProbLang(el){
  if (level === 1){
    const e = pbBandedEvent();
    qData.workSteps = e.why;
    return decSetChoice(el, '<div style="' + A_LBL + '">' + e.text + '</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.2rem;margin:12px 0;">How would you describe ' + e.ev + '?</div>',
      PB_WORDS.slice(), e.word, true);
  }
  if (level === 2){
    const bank = [ {v:0, s:'0'}, {v:1, s:'1'}, {v:0.5, s:'0.5'}, {v:0.5, s:'50%'}, {v:0.5, s:'&#189;'},
      {v:0.9, s:'0.9'}, {v:0.85, s:'85%'}, {v:0.05, s:'0.05'}, {v:0.1, s:'10%'}, {v:0.75, s:'&#190;'},
      {v:0.2, s:'1/5'}, {v:0.95, s:'95%'}, {v:0.25, s:'0.25'} ];
    const b = ffPick(bank);
    qData.workSteps = 'A probability of ' + b.s.replace(/&#\d+;/g, '') + ' is ' + (b.v === 0 ? '0 — it can never happen'
      : b.v === 1 ? '1 — it always happens' : b.v === 0.5 ? 'exactly halfway' : b.v < 0.5 ? 'below a half' : 'above a half')
      + ', so the event is <b>' + pbWordFor(b.v) + '</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">An event has probability</div>'
      + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:12px 0;">' + b.s + '</div>'
      + '<div style="' + A_LBL + '">How would you describe it?</div>', PB_WORDS.slice(), pbWordFor(b.v), true);
  }
  if (level === 3){
    const word = ffPick(PB_WORDS);
    const byWord = { impossible:['0'], certain:['1'], 'even chance':['0.5'],
      unlikely:['0.1','0.15','0.2','0.05'], likely:['0.8','0.85','0.9','0.75'] };
    const right = ffPick(byWord[word]);
    const wrongPool = ['0','1','0.5','0.1','0.9','0.2','0.8'].filter(function(v){
      return pbWordFor(parseFloat(v)) !== word;
    });
    const opts = shuffleArr(pbPickN(wrongPool, 3).concat([right]));
    qData.workSteps = '"' + word + '" sits ' + (word === 'impossible' ? 'right at 0' : word === 'certain' ? 'right at 1'
      : word === 'even chance' ? 'exactly at 0.5' : word === 'unlikely' ? 'below 0.5 but above 0' : 'above 0.5 but below 1')
      + ' on the probability scale, so <b>' + right + '</b> is the one that fits.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Which probability best matches</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.6rem;margin:12px 0;">&ldquo;' + word + '&rdquo;?</div>', opts, right);
  }
  if (level === 4){
    /* Generate the trial FIRST, then classify it — never label first. */
    const eq = Math.random() < 0.5;
    let text;
    if (eq){
      const t = ffPick([
        'a fair coin is flipped and you look at heads or tails',
        'a standard die is rolled and you look at the number rolled',
        'a spinner with 4 equal parts (A, B, C, D) is spun',
        'a card is chosen at random from cards numbered 1 to 10' ]);
      text = t;
    } else {
      const bag = pbBag(2, [10, 12, 16, 20]);
      text = 'a ' + bag.item.one + ' is drawn from ' + bag.item.where + ' holding ' + bag.desc + ' ' + bag.item.many
        + ', and you look at its colour';
    }
    const right = eq ? 'Equally likely' : 'Not equally likely';
    qData.workSteps = eq
      ? 'Every outcome has the same chance here, so the outcomes are <b>equally likely</b>.'
      : 'There are different numbers of each colour, so one colour is more likely than another — the outcomes are <b>not equally likely</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">In this trial, ' + text + '.<br>'
      + 'Are the outcomes equally likely?</div>', ['Equally likely', 'Not equally likely'], right, true);
  }
  if (level === 5){
    const total = ffPick([12, 16, 20, 24]);
    let f1 = rr(2, total - 2), f2 = rr(2, total - 2);
    let g = 0;
    while (Math.abs(f1 - f2) < Math.max(2, total * 0.15) && g++ < 60) f2 = rr(2, total - 2);
    const c1 = ffPick(PB_COLOURS), c2 = ffPick(PB_COLOURS.filter(function(c){ return c !== c1; }));
    const item = ffPick(PB_ITEMS);
    const A = 'drawing a ' + c1 + ' ' + item.one + ' from ' + item.where + ' of ' + total + ' with ' + f1 + ' ' + c1;
    const B = 'drawing a ' + c2 + ' ' + item.one + ' from ' + item.where + ' of ' + total + ' with ' + f2 + ' ' + c2;
    const right = f1 > f2 ? A : B;
    qData.workSteps = 'Both bags hold ' + total + ', so compare the favourable counts directly: '
      + f1 + ' versus ' + f2 + '. <b>' + (f1 > f2 ? c1 : c2) + '</b> is more likely.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Which event is <b>more likely</b>?</div>', [A, B], right);
  }
  if (level === 6){
    /* cmpSetOrder (v71) wants {val, html, text} — the same tile shape the
       Compare & Order Decimals levels use, so the ordering panel and its
       marking are shared code, not a second copy. */
    const bank = [ {val:0.25, html:'<b>0.25</b>', text:'0.25'}, {val:0.5, html:'<b>50%</b>', text:'50%'},
      {val:0.2, html:'<b>1/5</b>', text:'1/5'}, {val:0.8, html:'<b>0.8</b>', text:'0.8'},
      {val:0.1, html:'<b>10%</b>', text:'10%'}, {val:0.75, html:'<b>3/4</b>', text:'3/4'},
      {val:0.05, html:'<b>0.05</b>', text:'0.05'}, {val:0.6, html:'<b>60%</b>', text:'60%'},
      {val:1 / 3, html:'<b>1/3</b>', text:'1/3'}, {val:0.95, html:'<b>0.95</b>', text:'0.95'} ];
    let tiles = [];
    let g = 0;
    while (g++ < 200){
      tiles = pbPickN(bank, 4);
      const vs = tiles.map(function(t){ return t.val; }).sort(function(a, b){ return a - b; });
      let ok = true;
      for (let i = 1; i < vs.length; i++) if (vs[i] - vs[i - 1] < 0.08) ok = false;
      if (ok) break;
    }
    return cmpSetOrder(el, tiles, 'asc');
  }
  /* L7 — mark the probability on the 0–1 line */
  const den12 = [ {n:3, d:12, ev:null}, {n:6, d:12}, {n:9, d:12}, {n:4, d:12}, {n:8, d:12}, {n:2, d:12}, {n:10, d:12} ];
  const pick = ffPick(den12);
  const tick = pick.n;
  const bag = { total:12, f:tick };
  const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
  qData.plotGeom = pbLineGeom();
  qData.plotAns = [[tick, 0]];
  qData.plotNeed = 1;
  qData.plotNoun = 'marked';
  qData.plotInstr = 'Tap the line to mark the probability. Tap again to move it.';
  qData.plotAbove = '<div style="' + A_LBL + '">There are ' + bag.f + ' ' + c1 + ' ' + item.many + ' among <b>12</b> '
    + item.many + ' in ' + item.where + '.<br>Mark <b>P(' + c1 + ')</b> on the probability line.</div>';
  qData.workSteps = 'P(' + c1 + ') = ' + bag.f + '/12 = <b>' + pbSimp(bag.f, 12) + '</b>.<br>'
    + 'The line is split into twelfths, so count ' + bag.f + ' small steps from 0.';
}

/* ═══ 3. THEORETICAL PROBABILITY ══════════════════════════════════ */
function genProbTheory(el){
  if (level === 1){
    const which = ri(3);
    if (which === 0){
      const n = ffPick([4, 5, 6, 8]);
      const L = ['A','B','C','D','E','F','G','H'].slice(0, n);
      const t = ffPick(L);
      pbFrac(1, n);
      qData.workSteps = 'The spinner has ' + n + ' equal parts, and only one of them is ' + t + '.<br>'
        + 'P(' + t + ') = 1/' + n + (n === qData.ansDen ? '' : ' = ' + pbSimp(1, n)) + '.';
      el.innerHTML = '<div style="' + A_LBL + '">The spinner has ' + n + ' equal parts. Find <b>P(' + t + ')</b> as a fraction.</div>'
        + pbSpinnerSVG(L);
      return;
    }
    if (which === 1){
      const n = ffPick([6, 8, 10, 12]);
      const t = rr(1, n);
      pbFrac(1, n);
      qData.workSteps = 'There are ' + n + ' equally likely outcomes and one of them is ' + t + '.<br>'
        + 'P(' + t + ') = 1/' + n + '.';
      el.innerHTML = '<div style="' + A_LBL + '">A card is chosen at random from cards numbered 1 to ' + n
        + '.<br>Find <b>P(' + t + ')</b> as a fraction.</div>';
      return;
    }
    const n = 6, t = rr(1, 6);
    pbFrac(1, 6);
    qData.workSteps = 'A die has 6 equally likely outcomes, and only one of them is a ' + t + '. P(' + t + ') = 1/6.';
    el.innerHTML = '<div style="' + A_LBL + '">A standard six-sided die is rolled.<br>Find <b>P(' + t + ')</b> as a fraction.</div>';
    return;
  }
  if (level === 2){
    const bag = pbBag(rr(2, 3), [8, 10, 12, 15, 16, 20]);
    const r = ffPick(bag.rows);
    if (r.n === bag.total) { r.n = bag.total - 1; bag.rows[bag.rows.length - 1].n += 1; }
    pbFrac(r.n, bag.total);
    qData.workSteps = 'Favourable = ' + r.n + ' ' + r.name + '. Total = ' + bag.total + '.<br>'
      + 'P(' + r.name + ') = ' + r.n + '/' + bag.total
      + (pbSimp(r.n, bag.total) !== (r.n + '/' + bag.total) ? ' = <b>' + pbSimp(r.n, bag.total) + '</b>' : '') + '.';
    el.innerHTML = '<div style="' + A_LBL + '">' + pbBagText(bag) + '<br>Find <b>P(' + r.name + ')</b> as a fraction.</div>';
    return;
  }
  if (level === 3){
    const n = ffPick([10, 12, 15, 20]);
    const conds = [
      { w:'even', f:function(v){ return v % 2 === 0; } },
      { w:'odd', f:function(v){ return v % 2 === 1; } },
      { w:'a multiple of 3', f:function(v){ return v % 3 === 0; } },
      { w:'a multiple of 5', f:function(v){ return v % 5 === 0; } },
      { w:'prime', f:function(v){ if (v < 2) return false; for (let i = 2; i * i <= v; i++) if (v % i === 0) return false; return true; } },
      { w:'greater than ' + Math.round(n / 2), f:function(v){ return v > Math.round(n / 2); } },
    ];
    const c = ffPick(conds);
    const hits = [];
    for (let v = 1; v <= n; v++) if (c.f(v)) hits.push(v);
    if (hits.length === 0 || hits.length === n) return genProbTheory(el);
    pbFrac(hits.length, n);
    qData.workSteps = 'The numbers that are ' + c.w + ' are ' + hits.join(', ') + ' — that is ' + hits.length + ' of ' + n + '.<br>'
      + 'P = ' + hits.length + '/' + n + ' = <b>' + pbSimp(hits.length, n) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">The numbers 1 to ' + n + ' are written on cards and one is chosen at random.<br>'
      + 'Find the probability that it is <b>' + c.w + '</b>. Give your answer as a fraction in simplest form.</div>';
    return;
  }
  if (level === 4){
    const bag = pbBag(3, [12, 15, 16, 20, 24]);
    const two = pbPickN(bag.rows, 2);
    const f = two[0].n + two[1].n;
    if (f >= bag.total) return genProbTheory(el);
    pbFrac(f, bag.total);
    qData.workSteps = 'Count BOTH colours as favourable: ' + two[0].n + ' + ' + two[1].n + ' = ' + f + '.<br>'
      + 'P(' + two[0].name + ' or ' + two[1].name + ') = ' + f + '/' + bag.total + ' = <b>' + pbSimp(f, bag.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + pbBagText(bag) + '<br>Find <b>P(' + two[0].name + ' or '
      + two[1].name + ')</b> in simplest form.</div>';
    return;
  }
  if (level === 5){
    const w = ffPick(['PROBABILITY','MATHEMATICS','STATISTICS','EXPERIMENT','CHANCE','OUTCOMES']);
    const letters = w.split('');
    const counts = {};
    letters.forEach(function(c){ counts[c] = (counts[c] || 0) + 1; });
    const keys = Object.keys(counts);
    const useVowel = Math.random() < 0.4;
    let f, desc;
    if (useVowel){
      f = letters.filter(function(c){ return 'AEIOU'.indexOf(c) >= 0; }).length;
      desc = 'a vowel';
    } else {
      const L = ffPick(keys);
      f = counts[L];
      desc = 'the letter ' + L;
    }
    if (f === 0 || f === letters.length) return genProbTheory(el);
    pbFrac(f, letters.length);
    qData.workSteps = w + ' has ' + letters.length + ' letters, and ' + f + ' of them are ' + desc + '.<br>'
      + 'P = ' + f + '/' + letters.length + ' = <b>' + pbSimp(f, letters.length) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A letter is chosen at random from the word</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.8rem;letter-spacing:2px;margin:12px 0;">' + w + '</div>'
      + '<div style="' + A_LBL + '">Find the probability that it is <b>' + desc + '</b>, in simplest form.</div>';
    return;
  }
  if (level === 6){
    const total = ffPick([4, 5, 8, 10, 20, 25, 50]);
    const f = rr(1, total - 1);
    qData.ans = dp(f / total, 4);
    qData.ansTol = 0.0005;
    qData.workSteps = 'P = ' + f + '/' + total + '. Divide to get a decimal: ' + f + ' ÷ ' + total
      + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">There are ' + f + ' winning tickets among ' + total
      + ' tickets. One ticket is drawn at random.<br>Find the probability of winning, as a <b>decimal</b>.</div>';
    return;
  }
  if (level === 7){
    const total = ffPick([4, 5, 8, 10, 20, 25, 40, 50]);
    const f = rr(1, total - 1);
    qData.ans = dp(100 * f / total, 2);
    qData.ansTol = 0.05;
    qData.workSteps = 'P = ' + f + '/' + total + '. To make it a percentage, × 100: ' + f + ' ÷ ' + total
      + ' × 100 = <b>' + qData.ans + '%</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A jar holds ' + total + ' ' + ffPick(PB_ITEMS).many + ', of which '
      + f + ' are ' + ffPick(PB_COLOURS) + '. One is drawn at random.<br>'
      + 'Find the probability it is that colour, as a <b>percentage</b>.</div>';
    return;
  }
  if (level === 8){
    const den = ffPick([8, 10, 12, 20]);
    const a = rr(1, den - 3), b = rr(1, den - a - 1);
    const c = den - a - b;
    if (c < 1) return genProbTheory(el);
    const cols = pbPickN(PB_COLOURS, 3);
    pbFrac(c, den);
    qData.workSteps = 'All the probabilities must add to 1.<br>' + a + '/' + den + ' + ' + b + '/' + den
      + ' = ' + (a + b) + '/' + den + ', so P(' + cols[2] + ') = ' + den + '/' + den + ' &minus; ' + (a + b) + '/' + den
      + ' = ' + c + '/' + den + ' = <b>' + pbSimp(c, den) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A spinner lands on ' + cols.join(', ') + '.<br>'
      + 'P(' + cols[0] + ') = ' + a + '/' + den + ' and P(' + cols[1] + ') = ' + b + '/' + den + '.<br>'
      + 'Find <b>P(' + cols[2] + ')</b> in simplest form.</div>';
    return;
  }
  /* L9 — go backwards from the probability to the count */
  const total = ffPick([10, 12, 15, 20, 24, 30]);
  const dens = [2, 3, 4, 5, 6].filter(function(d){ return total % d === 0; });
  const d = ffPick(dens);
  const n = rr(1, d - 1);
  qData.ans = total * n / d;
  const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
  qData.workSteps = 'P(' + c1 + ') = ' + n + '/' + d + ' means ' + n + ' out of every ' + d + '.<br>'
    + total + ' ÷ ' + d + ' = ' + (total / d) + ', so ' + n + ' × ' + (total / d) + ' = <b>' + qData.ans + '</b> '
    + c1 + ' ' + item.many + '.';
  el.innerHTML = '<div style="' + A_LBL + '">' + item.where.charAt(0).toUpperCase() + item.where.slice(1)
    + ' holds <b>' + total + '</b> ' + item.many + '. The probability of drawing a ' + c1 + ' one is <b>'
    + n + '/' + d + '</b>.<br>How many ' + c1 + ' ' + item.many + ' are there?</div>';
}

/* ═══ 4. COMPLEMENT ═══════════════════════════════════════════════ */
function genProbComp(el){
  if (level === 1){
    const d = ffPick([5, 6, 8, 10, 12, 20]);
    const n = rr(1, d - 1);
    if (gcd(d - n, d) === d) return genProbComp(el);
    pbFrac(d - n, d);
    if (qData.ansDen === 1) return genProbComp(el);
    qData.workSteps = 'The two probabilities add to 1: P(not A) = 1 &minus; ' + n + '/' + d + ' = '
      + d + '/' + d + ' &minus; ' + n + '/' + d + ' = ' + (d - n) + '/' + d
      + ' = <b>' + pbSimp(d - n, d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">P(A) = <b>' + n + '/' + d + '</b>.<br>'
      + 'Find <b>P(not A)</b> in simplest form.</div>';
    return;
  }
  if (level === 2){
    const p = dp(rr(1, 99) / 100, 2);
    qData.ans = dp(1 - p, 2);
    qData.workSteps = 'P(not A) = 1 &minus; ' + p + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">P(A) = <b>' + p + '</b>.<br>Find <b>P(not A)</b> as a decimal.</div>';
    return;
  }
  if (level === 3){
    const p = rr(1, 99);
    qData.ans = 100 - p;
    qData.workSteps = 'The two percentages add to 100%: 100 &minus; ' + p + ' = <b>' + qData.ans + '%</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">P(A) = <b>' + p + '%</b>.<br>Find <b>P(not A)</b> as a percentage.</div>';
    return;
  }
  if (level === 4){
    const ctx = ffPick([
      { e:'it rains tomorrow', not:'it does not rain' },
      { e:'the bus is late', not:'the bus is on time' },
      { e:'a randomly chosen student walks to school', not:'a student does not walk to school' },
      { e:'the team wins', not:'the team does not win' },
      { e:'a light globe is faulty', not:'a light globe is not faulty' },
    ]);
    const asPct = Math.random() < 0.5;
    if (asPct){
      const p = rr(5, 95);
      qData.ans = 100 - p;
      qData.workSteps = 'The event and its complement add to 100%: 100 &minus; ' + p + ' = <b>' + qData.ans + '%</b>.';
      el.innerHTML = '<div style="' + A_LBL + '">The probability that ' + ctx.e + ' is <b>' + p + '%</b>.<br>'
        + 'Find the probability that ' + ctx.not + ', as a percentage.</div>';
    } else {
      const p = dp(rr(5, 95) / 100, 2);
      qData.ans = dp(1 - p, 2);
      qData.workSteps = 'The event and its complement add to 1: 1 &minus; ' + p + ' = <b>' + qData.ans + '</b>.';
      el.innerHTML = '<div style="' + A_LBL + '">The probability that ' + ctx.e + ' is <b>' + p + '</b>.<br>'
        + 'Find the probability that ' + ctx.not + ', as a decimal.</div>';
    }
    return;
  }
  /* L5 — which event IS the complement */
  const n = 6;
  const sets = [
    { e:'rolling a number greater than 4 on a die', c:'rolling a number 4 or less',
      bad:['rolling a number less than 4', 'rolling a 5 or a 6', 'rolling an even number'] },
    { e:'rolling an even number on a die', c:'rolling an odd number',
      bad:['rolling a 2, 4 or 6', 'rolling a number greater than 3', 'rolling a 1 or a 3'] },
    { e:'drawing a red card from a deck', c:'drawing a black card',
      bad:['drawing a heart', 'drawing a diamond', 'drawing a picture card'] },
    { e:'a student in the class being 12 years old', c:'a student not being 12 years old',
      bad:['a student being 13 years old', 'a student being older than 12', 'a student being younger than 12'] },
    { e:'the spinner landing on A', c:'the spinner not landing on A',
      bad:['the spinner landing on B', 'the spinner landing on C', 'the spinner landing on B or C only'] },
  ];
  const s = ffPick(sets);
  qData.workSteps = 'The complement is <b>everything else</b> — every outcome that is NOT "' + s.e + '".<br>'
    + 'That is: <b>' + s.c + '</b>. The other options leave some outcomes out.';
  return decSetChoice(el, '<div style="' + A_LBL + '">Which event is the <b>complement</b> of</div>'
    + '<div style="text-align:center;font-weight:900;font-size:1.15rem;margin:12px 0;">' + s.e + '?</div>',
    [s.c].concat(pbPickN(s.bad, 3)), s.c);
}

/* ═══ 5. EXPERIMENTAL PROBABILITY ═════════════════════════════════ */
function pbResults(nOut, totalBank){
  const total = ffPick(totalBank || [40, 50, 60, 80, 100]);
  const parts = [];
  let left = total;
  for (let i = 0; i < nOut - 1; i++){
    const share = Math.max(1, Math.round(left / (nOut - i)) + rr(-3, 3));
    const p = Math.max(1, Math.min(share, left - (nOut - 1 - i)));
    parts.push(p); left -= p;
  }
  parts.push(left);
  return { total:total, parts:parts };
}
function genProbExp(el){
  if (level === 1){
    const r = pbResults(6, [60, 90, 120]);
    const t = r.total, target = rr(1, 6);
    pbFrac(r.parts[target - 1], t);
    if (qData.ansDen === 1) return genProbExp(el);
    qData.workSteps = 'Experimental probability = how often it happened ÷ how many trials.<br>P(' + target + ') = '
      + r.parts[target - 1] + '/' + t + ' = <b>' + pbSimp(r.parts[target - 1], t) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A die was rolled <b>' + t + '</b> times, with these results.<br>'
      + 'Find the experimental probability of rolling a <b>' + target + '</b>, as a fraction.</div>'
      + pbTableHTML(['Number', '1', '2', '3', '4', '5', '6'],
          [['Frequency'].concat(r.parts.map(String))]);
    return;
  }
  if (level === 2){
    const meals = pbPickN(['beef','chicken','fish','pasta','curry','salad'], 4);
    const r = pbResults(4, [40, 50, 60, 80]);
    const i = ri(4);
    pbFrac(r.parts[i], r.total);
    if (qData.ansDen === 1) return genProbExp(el);
    qData.workSteps = 'Total orders = ' + r.parts.join(' + ') + ' = ' + r.total + '.<br>P(' + meals[i] + ') = '
      + r.parts[i] + '/' + r.total + ' = <b>' + pbSimp(r.parts[i], r.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A restaurant recorded the main meals ordered one evening.<br>'
      + 'Find the experimental probability that a customer orders <b>' + meals[i] + '</b>, as a fraction.</div>'
      + pbTableHTML(['Meal'].concat(meals), [['Orders'].concat(r.parts.map(String))]);
    return;
  }
  if (level === 3){
    const total = ffPick([200, 400, 500, 800, 1000]);
    const hits = rr(5, Math.round(total / 8));
    qData.ans = dp(100 * hits / total, 2);
    qData.ansTol = 0.05;
    qData.workSteps = 'Experimental probability = ' + hits + '/' + total + '.<br>As a percentage: ' + hits
      + ' ÷ ' + total + ' × 100 = <b>' + qData.ans + '%</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A store served <b>' + total + '</b> customers in a month and received <b>'
      + hits + '</b> complaints.<br>Find the experimental probability that a customer complains, as a <b>percentage</b>.</div>';
    return;
  }
  if (level === 4){
    const r = pbResults(6, [60, 90, 120]);
    const which = ffPick([
      { w:'an even number', idx:[1, 3, 5] },
      { w:'an odd number', idx:[0, 2, 4] },
      { w:'a number greater than 4', idx:[4, 5] },
      { w:'a number less than 3', idx:[0, 1] },
    ]);
    let f = 0;
    which.idx.forEach(function(i){ f += r.parts[i]; });
    if (f === 0 || f === r.total) return genProbExp(el);
    pbFrac(f, r.total);
    if (qData.ansDen === 1) return genProbExp(el);
    qData.workSteps = 'Add the frequencies that count: ' + which.idx.map(function(i){ return r.parts[i]; }).join(' + ')
      + ' = ' + f + '.<br>P(' + which.w + ') = ' + f + '/' + r.total + ' = <b>' + pbSimp(f, r.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A die was rolled <b>' + r.total + '</b> times.<br>'
      + 'Find the experimental probability of <b>' + which.w + '</b>, as a fraction in simplest form.</div>'
      + pbTableHTML(['Number', '1', '2', '3', '4', '5', '6'], [['Frequency'].concat(r.parts.map(String))]);
    return;
  }
  if (level === 5){
    const trials = ffPick([20, 30, 40, 60]);
    const theoryN = 1, theoryD = ffPick([2, 4, 6]);
    const expect = trials / theoryD;
    const drift = ffPick([-1, 1]) * Math.max(1, Math.round(expect * ffPick([0.3, 0.5, 0.7])));
    const actual = Math.max(0, Math.min(trials, Math.round(expect + drift)));
    const right = actual > expect ? 'More often than expected' : 'Less often than expected';
    qData.workSteps = 'Theoretical: P = 1/' + theoryD + ', so in ' + trials + ' trials you would expect '
      + trials + ' ÷ ' + theoryD + ' = ' + expect + '.<br>It actually happened ' + actual + ' times — <b>'
      + right.toLowerCase() + '</b>. A difference like this is normal in a small number of trials.';
    return decSetChoice(el, '<div style="' + A_LBL + '">An event with theoretical probability <b>1/' + theoryD
      + '</b> was tried <b>' + trials + '</b> times and happened <b>' + actual + '</b> times.<br>'
      + 'How did the experiment compare with the theory?</div>',
      ['More often than expected', 'Less often than expected', 'Exactly as expected'], right, true);
  }
  /* L6 — the long run */
  const qs = [
    { q:'A coin is flipped more and more times. What happens to the relative frequency of heads?',
      a:'It gets closer to 0.5', bad:['It stays exactly at 0.5', 'It moves further from 0.5', 'It becomes 1'],
      why:'The more trials you run, the closer the experimental probability gets to the theoretical one. It does not have to hit it exactly.' },
    { q:'Two students test the same coin. One flips it 10 times, the other 500 times. Whose experimental probability would you trust more?',
      a:'The one who flipped it 500 times', bad:['The one who flipped it 10 times', 'They are equally reliable', 'Neither — only theory counts'],
      why:'More trials means the relative frequency has settled closer to the true probability.' },
    { q:'What is the name for the effect where more and more trials bring the experimental probability closer to the theoretical one?',
      a:'The law of large numbers', bad:['The law of averages of small samples', 'Equally likely outcomes', 'The complement rule'],
      why:'It is the law of large numbers — nothing about a small run of trials guarantees the theoretical proportion.' },
    { q:'A die is rolled 30 times and a six comes up 9 times. What does that tell you about the die?',
      a:'Not much — 30 rolls is a small sample', bad:['The die is definitely biased', 'The die is definitely fair', 'P(six) is really 9/30'],
      why:'9 out of 30 is above the expected 5, but a short run varies a lot. You would need many more rolls to call it biased.' },
  ];
  const it = ffPick(qs);
  qData.workSteps = it.why;
  return decSetChoice(el, '<div style="' + A_LBL + '">' + it.q + '</div>', [it.a].concat(it.bad), it.a);
}

/* ═══ 6. EXPECTED NUMBER OF OUTCOMES ══════════════════════════════ */
function genProbExpect(el){
  if (level === 1){
    const d = ffPick([2, 3, 4, 5, 6]);
    const trials = d * ffPick([5, 10, 12, 15, 20]);
    qData.ans = trials / d;
    const what = d === 2 ? 'a head when a coin is flipped' : d === 6 ? 'a six when a die is rolled'
      : 'the letter A when a ' + d + '-part spinner is spun';
    qData.workSteps = 'Expected number = probability × number of trials.<br>1/' + d + ' × ' + trials + ' = '
      + trials + ' ÷ ' + d + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">The probability of ' + what + ' is <b>1/' + d + '</b>.<br>'
      + 'In <b>' + trials + '</b> trials, how many would you expect?</div>';
    return;
  }
  if (level === 2){
    const totals = [10, 12, 15, 20, 25];
    const total = ffPick(totals);
    const f = rr(1, total - 1);
    const mult = ffPick([4, 5, 8, 10, 12, 20]);
    const trials = total * mult;
    qData.ans = f * mult;
    const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
    qData.workSteps = 'P(' + c1 + ') = ' + f + '/' + total + '.<br>Expected = ' + f + '/' + total + ' × '
      + trials + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + item.where.charAt(0).toUpperCase() + item.where.slice(1)
      + ' holds ' + total + ' ' + item.many + ', of which <b>' + f + '</b> are ' + c1
      + '. One is drawn and put back, <b>' + trials + '</b> times.<br>How many ' + c1 + ' ' + item.many
      + ' would you expect to draw?</div>';
    return;
  }
  if (level === 3){
    const asPct = Math.random() < 0.5;
    const p = ffPick([5, 10, 15, 20, 25, 40, 50, 60, 75, 80]);
    const trials = ffPick([20, 40, 60, 80, 100, 200]);
    qData.ans = dp(p * trials / 100, 2);
    qData.workSteps = asPct
      ? p + '% of ' + trials + ' = ' + (p / 100) + ' × ' + trials + ' = <b>' + qData.ans + '</b>.'
      : 'Expected = ' + (p / 100) + ' × ' + trials + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">The probability that a randomly chosen item is faulty is <b>'
      + (asPct ? p + '%' : dp(p / 100, 2)) + '</b>.<br>In a batch of <b>' + trials
      + '</b> items, how many faulty ones would you expect?</div>';
    return;
  }
  if (level === 4){
    const k = ffPick([3, 4, 5, 8, 10]);
    const made = k * ffPick([40, 60, 120, 250, 506]);
    qData.ans = made / k;
    qData.workSteps = '"1 in every ' + k + '" is a probability of 1/' + k + '.<br>' + made + ' ÷ ' + k
      + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A factory finds that <b>1 in every ' + k + '</b> toys is faulty.<br>'
      + 'If they make <b>' + made + '</b> toys, how many would they expect to be faulty?</div>';
    return;
  }
  if (level === 5){
    const p = ffPick([0.1, 0.15, 0.2, 0.25, 0.4]);
    const days = ffPick([20, 40, 60, 100]);
    qData.ans = dp((1 - p) * days, 2);
    qData.workSteps = 'P(late) = ' + p + ', so P(on time) = 1 &minus; ' + p + ' = ' + dp(1 - p, 2) + '.<br>'
      + dp(1 - p, 2) + ' × ' + days + ' = <b>' + qData.ans + '</b> days.';
    el.innerHTML = '<div style="' + A_LBL + '">The probability the bus is late is <b>' + p + '</b>.<br>'
      + 'Over <b>' + days + '</b> school days, how many would you expect it to be <b>on time</b>?</div>';
    return;
  }
  /* L6 — backwards: expected count → probability */
  const d = ffPick([2, 3, 4, 5, 6, 8, 10]);
  const trials = d * ffPick([4, 5, 6, 10, 12]);
  const n = rr(1, d - 1);
  const expect = trials * n / d;
  pbFrac(n, d);
  if (qData.ansDen === 1) return genProbExpect(el);
  qData.workSteps = 'Probability = expected ÷ trials = ' + expect + '/' + trials + ' = <b>' + pbSimp(n, d) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">In <b>' + trials + '</b> trials an event is expected to happen <b>'
    + expect + '</b> times.<br>What is the probability of the event? Give a fraction in simplest form.</div>';
}

/* ═══ 7. TWO-STEP EXPERIMENTS ═════════════════════════════════════ */
function genProbTwoStep(el){
  if (level === 1){
    const a = ffPick([2, 3, 4, 5, 6, 8]), b = ffPick([2, 3, 4, 5, 6]);
    qData.ans = a * b;
    const nameA = a === 2 ? 'a coin is tossed' : 'a ' + a + '-part spinner is spun';
    const nameB = b === 2 ? 'a coin is tossed' : b === 6 ? 'a die is rolled' : 'a ' + b + '-sided die is rolled';
    qData.workSteps = 'Multiply the outcomes of the two steps: ' + a + ' × ' + b + ' = <b>' + qData.ans + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + nameA.charAt(0).toUpperCase() + nameA.slice(1) + ' and then '
      + nameB + '.<br>How many outcomes are in the sample space?</div>';
    return;
  }
  if (level === 2){
    const which = ffPick([
      { w:'a Head and a 6', f:1 }, { w:'a Tail and an even number', f:3 },
      { w:'a Head and a number greater than 4', f:2 }, { w:'a Tail and a 1', f:1 },
      { w:'a Head and an odd number', f:3 },
    ]);
    pbFrac(which.f, 12);
    if (qData.ansDen === 1) return genProbTwoStep(el);
    const rows = [['H'].concat(['H1','H2','H3','H4','H5','H6']), ['T'].concat(['T1','T2','T3','T4','T5','T6'])];
    qData.workSteps = 'The table has 12 equally likely outcomes. ' + which.f + ' of them give ' + which.w + '.<br>'
      + 'P = ' + which.f + '/12 = <b>' + pbSimp(which.f, 12) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A coin is tossed and a die is rolled.<br>Find <b>P(' + which.w
      + ')</b> in simplest form.</div>'
      + pbTableHTML(['', '1', '2', '3', '4', '5', '6'], rows);
    return;
  }
  if (level === 3){
    const which = ffPick([
      { w:'exactly one head', f:2 }, { w:'two heads', f:1 }, { w:'at least one tail', f:3 },
      { w:'no heads', f:1 }, { w:'at least one head', f:3 }, { w:'two tails', f:1 },
    ]);
    pbFrac(which.f, 4);
    if (qData.ansDen === 1) return genProbTwoStep(el);
    qData.workSteps = 'The sample space is HH, HT, TH, TT — 4 equally likely outcomes.<br>'
      + which.f + ' of them give ' + which.w + ', so P = ' + which.f + '/4 = <b>' + pbSimp(which.f, 4) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Two coins are tossed.<br>Find <b>P(' + which.w + ')</b> in simplest form.</div>';
    return;
  }
  if (level === 4){
    const t = rr(2, 12);
    let f = 0;
    for (let a = 1; a <= 6; a++) for (let b = 1; b <= 6; b++) if (a + b === t) f++;
    pbFrac(f, 36);
    if (qData.ansDen === 1) return genProbTwoStep(el);
    qData.workSteps = 'Count the cells in the grid that show ' + t + ': there are ' + f + ' of them, out of 36.<br>'
      + 'P(total = ' + t + ') = ' + f + '/36 = <b>' + pbSimp(f, 36) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Two dice are rolled and the numbers are added.<br>'
      + 'Find <b>P(total = ' + t + ')</b> in simplest form.</div>' + pbDiceGridHTML();
    return;
  }
  if (level === 5){
    const cond = ffPick([
      { w:'greater than 9', f:function(s){ return s > 9; } },
      { w:'less than 5', f:function(s){ return s < 5; } },
      { w:'at least 10', f:function(s){ return s >= 10; } },
      { w:'an even total', f:function(s){ return s % 2 === 0; } },
      { w:'a multiple of 3', f:function(s){ return s % 3 === 0; } },
      { w:'7 or more', f:function(s){ return s >= 7; } },
    ]);
    let f = 0;
    for (let a = 1; a <= 6; a++) for (let b = 1; b <= 6; b++) if (cond.f(a + b)) f++;
    pbFrac(f, 36);
    if (qData.ansDen === 1) return genProbTwoStep(el);
    qData.workSteps = 'Count every cell in the grid whose total is ' + cond.w + ': ' + f + ' cells out of 36.<br>'
      + 'P = ' + f + '/36 = <b>' + pbSimp(f, 36) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Two dice are rolled and the numbers are added.<br>'
      + 'Find the probability the total is <b>' + cond.w + '</b>, in simplest form.</div>' + pbDiceGridHTML();
    return;
  }
  if (level === 6){
    const total = ffPick([4, 5, 6, 8, 10]);
    const f = rr(1, total - 1);
    const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
    pbFrac(f * f, total * total);
    if (qData.ansDen === 1) return genProbTwoStep(el);
    qData.workSteps = 'With replacement the bag is the same both times, so P(' + c1 + ') = ' + f + '/' + total
      + ' each draw.<br>Multiply along the branches: ' + f + '/' + total + ' × ' + f + '/' + total + ' = '
      + (f * f) + '/' + (total * total) + ' = <b>' + pbSimp(f * f, total * total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + item.where.charAt(0).toUpperCase() + item.where.slice(1)
      + ' holds ' + total + ' ' + item.many + ', ' + f + ' of them ' + c1 + '. One is drawn, its colour noted, and '
      + '<b>put back</b>. A second is then drawn.<br>Find <b>P(both ' + c1 + ')</b> in simplest form.</div>';
    return;
  }
  /* L7 — without replacement */
  const total = ffPick([5, 6, 8, 10]);
  const f = rr(2, total - 1);
  const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
  pbFrac(f * (f - 1), total * (total - 1));
  if (qData.ansDen === 1) return genProbTwoStep(el);
  qData.workSteps = 'First draw: ' + f + '/' + total + '.<br>The ' + item.one + ' is NOT put back, so the second draw is '
    + (f - 1) + '/' + (total - 1) + ' — one fewer ' + c1 + ' and one fewer altogether.<br>'
    + f + '/' + total + ' × ' + (f - 1) + '/' + (total - 1) + ' = ' + (f * (f - 1)) + '/' + (total * (total - 1))
    + ' = <b>' + pbSimp(f * (f - 1), total * (total - 1)) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + item.where.charAt(0).toUpperCase() + item.where.slice(1)
    + ' holds ' + total + ' ' + item.many + ', ' + f + ' of them ' + c1 + '. Two are drawn <b>without replacement</b>.<br>'
    + 'Find <b>P(both ' + c1 + ')</b> in simplest form.</div>';
}

/* ═══ 8. TREE DIAGRAMS ════════════════════════════════════════════ */
function genProbTree(el){
  if (level === 1){
    const steps = ffPick([2, 3]);
    const perStep = ffPick([2, 3, 4]);
    qData.ans = Math.pow(perStep, steps);
    qData.workSteps = 'Each step branches into ' + perStep + ', and there are ' + steps + ' steps.<br>'
      + perStep + (steps === 2 ? ' × ' + perStep : ' × ' + perStep + ' × ' + perStep) + ' = ' + perStep + '<sup>'
      + steps + '</sup> = <b>' + qData.ans + '</b> end branches.';
    el.innerHTML = '<div style="' + A_LBL + '">A tree diagram has <b>' + steps + '</b> steps, and each step has <b>'
      + perStep + '</b> outcomes.<br>How many end branches (outcomes) does it have?</div>';
    return;
  }
  if (level === 2){
    const all = ['HH','HT','TH','TT'];
    const missing = ffPick(all);
    const shown = all.filter(function(o){ return o !== missing; });
    const s1 = [{ lbl:'H', p:'' }, { lbl:'T', p:'' }];
    const s2 = [[{ lbl:'H', p:'', out:'H?' }, { lbl:'T', p:'', out:'H?' }],
                [{ lbl:'H', p:'', out:'T?' }, { lbl:'T', p:'', out:'T?' }]];
    qData.workSteps = 'Follow every path from left to right: HH, HT, TH, TT.<br>The one missing from the list is <b>'
      + missing + '</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Two coins are tossed. This tree shows the outcomes, but the list '
      + shown.join(', ') + ' is missing one.<br>Which outcome is missing?</div>' + pbTreeSVG(s1, s2),
      all.slice(), missing, true);
  }
  if (level === 3){
    const parts = ffPick([2, 3, 4]);
    const L = ['A','B','C','D'].slice(0, parts);
    const a = ffPick(L), b = ffPick(L);
    pbFrac(1, parts * parts);
    const s1 = L.map(function(x){ return { lbl:x, p:'1/' + parts }; });
    const s2 = L.map(function(){ return L.map(function(y){ return { lbl:y, p:'1/' + parts }; }); });
    qData.workSteps = 'Each branch has probability 1/' + parts + ', and the spinner is the same both times.<br>'
      + 'Multiply along the path: 1/' + parts + ' × 1/' + parts + ' = <b>1/' + (parts * parts) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A ' + parts + '-part spinner (' + L.join(', ')
      + ') is spun twice.<br>Find <b>P(' + a + ' then ' + b + ')</b> as a fraction.</div>' + pbTreeSVG(s1, s2);
    return;
  }
  if (level === 4){
    const d = ffPick([4, 5, 8, 10]);
    const n = rr(1, d - 1);
    const m = d - n;
    const want = ffPick(['HH','HT','TH','TT']);
    const pv = { H:[n, d], T:[m, d] };
    const num = pv[want[0]][0] * pv[want[1]][0];
    pbFrac(num, d * d);
    if (qData.ansDen === 1) return genProbTree(el);
    const s1 = [{ lbl:'H', p:n + '/' + d }, { lbl:'T', p:m + '/' + d }];
    const s2 = [[{ lbl:'H', p:n + '/' + d, out:'HH' }, { lbl:'T', p:m + '/' + d, out:'HT' }],
                [{ lbl:'H', p:n + '/' + d, out:'TH' }, { lbl:'T', p:m + '/' + d, out:'TT' }]];
    qData.workSteps = 'P(H) = ' + n + '/' + d + ' and P(T) = ' + m + '/' + d + ' on every toss.<br>'
      + 'Multiply along the ' + want + ' path: ' + pv[want[0]][0] + '/' + d + ' × ' + pv[want[1]][0] + '/' + d
      + ' = ' + num + '/' + (d * d) + ' = <b>' + pbSimp(num, d * d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A biased coin has <b>P(H) = ' + n + '/' + d + '</b>. It is tossed twice.<br>'
      + 'Find <b>P(' + want + ')</b> in simplest form.</div>' + pbTreeSVG(s1, s2);
    return;
  }
  if (level === 5){
    const d = ffPick([4, 5, 8, 10]);
    const n = rr(1, d - 1), m = d - n;
    const num = 2 * n * m;
    pbFrac(num, d * d);
    if (qData.ansDen === 1) return genProbTree(el);
    const s1 = [{ lbl:'H', p:n + '/' + d }, { lbl:'T', p:m + '/' + d }];
    const s2 = [[{ lbl:'H', p:n + '/' + d, out:'HH' }, { lbl:'T', p:m + '/' + d, out:'HT' }],
                [{ lbl:'H', p:n + '/' + d, out:'TH' }, { lbl:'T', p:m + '/' + d, out:'TT' }]];
    qData.workSteps = 'Two paths give exactly one head: HT and TH.<br>HT = ' + n + '/' + d + ' × ' + m + '/' + d
      + ' = ' + (n * m) + '/' + (d * d) + ', and TH is the same.<br>ADD the paths: ' + (n * m) + '/' + (d * d)
      + ' + ' + (n * m) + '/' + (d * d) + ' = ' + num + '/' + (d * d) + ' = <b>' + pbSimp(num, d * d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A coin with <b>P(H) = ' + n + '/' + d + '</b> is tossed twice.<br>'
      + 'Find <b>P(exactly one head)</b> in simplest form.</div>' + pbTreeSVG(s1, s2);
    return;
  }
  /* L6 — without replacement, read off the tree */
  const total = ffPick([5, 6, 8]);
  const f = rr(2, total - 2);
  const g2 = total - f;
  const c1 = ffPick(PB_COLOURS), c2 = ffPick(PB_COLOURS.filter(function(c){ return c !== c1; }));
  const item = ffPick(PB_ITEMS);
  const num = f * (f - 1);
  pbFrac(num, total * (total - 1));
  if (qData.ansDen === 1) return genProbTree(el);
  const s1 = [{ lbl:c1, p:f + '/' + total }, { lbl:c2, p:g2 + '/' + total }];
  const s2 = [[{ lbl:c1, p:(f - 1) + '/' + (total - 1), out:'' }, { lbl:c2, p:g2 + '/' + (total - 1), out:'' }],
              [{ lbl:c1, p:f + '/' + (total - 1), out:'' }, { lbl:c2, p:(g2 - 1) + '/' + (total - 1), out:'' }]];
  qData.workSteps = 'The second branch changes because nothing is put back: after a ' + c1 + ' there are '
    + (f - 1) + ' ' + c1 + ' left out of ' + (total - 1) + '.<br>' + f + '/' + total + ' × ' + (f - 1) + '/'
    + (total - 1) + ' = ' + num + '/' + (total * (total - 1)) + ' = <b>' + pbSimp(num, total * (total - 1)) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + item.where.charAt(0).toUpperCase() + item.where.slice(1) + ' holds '
    + f + ' ' + c1 + ' and ' + g2 + ' ' + c2 + ' ' + item.many + '. Two are drawn <b>without replacement</b>.<br>'
    + 'Find <b>P(both ' + c1 + ')</b> in simplest form.</div>' + pbTreeSVG(s1, s2);
}

/* ═══ 9. TWO-WAY TABLES ═══════════════════════════════════════════ */
/* A two-way table is built from the four inner cells and then has its
   margins computed — so the totals can never disagree with the body. */
function pbTwoWayData(){
  const ctx = ffPick([
    { A:'Girls', notA:'Boys', B:'French', notB:'No French', rowLbl:'', who:'students' },
    { A:'Bike', notA:'No bike', B:'Scooter', notB:'No scooter', who:'students' },
    { A:'Year 7', notA:'Year 8', B:'Walks', notB:'Does not walk', who:'students' },
    { A:'Cat', notA:'No cat', B:'Dog', notB:'No dog', who:'families' },
  ]);
  const a = rr(3, 15), b = rr(3, 15), c = rr(3, 15), d = rr(3, 15);
  return { ctx:ctx, a:a, b:b, c:c, d:d,
    rowT1:a + b, rowT2:c + d, colT1:a + c, colT2:b + d, total:a + b + c + d };
}
function pbTwoWayHTML(t, hide){
  const cell = function(v, key){ return (hide && hide.indexOf(key) >= 0) ? '?' : String(v); };
  return daFreqTable(['', t.ctx.B, t.ctx.notB, 'Total'], [
    [t.ctx.A,    cell(t.a, 'a'), cell(t.b, 'b'), cell(t.rowT1, 'r1')],
    [t.ctx.notA, cell(t.c, 'c'), cell(t.d, 'd'), cell(t.rowT2, 'r2')],
    ['Total',    cell(t.colT1, 'c1'), cell(t.colT2, 'c2'), cell(t.total, 'tot')],
  ]);
}
function genProbTwoWay(el){
  if (level === 1){
    const t = pbTwoWayData();
    /* Four blanks: one inner cell, one row total, one column total, the grand
       total — so every one is found a different way. 1 point per correct box. */
    qData.gridSpec = {
      title: 'Complete the two-way table.',
      cols: ['', t.ctx.B, t.ctx.notB, 'Total'],
      rows: [
        { cells: [ {t:'h', v:t.ctx.A},    {t:'g', v:t.a},     {t:'b', a:t.b},     {t:'g', v:t.rowT1} ] },
        { cells: [ {t:'h', v:t.ctx.notA}, {t:'g', v:t.c},     {t:'g', v:t.d},     {t:'b', a:t.rowT2} ] },
        { cells: [ {t:'h', v:'Total'},    {t:'b', a:t.colT1}, {t:'b', a:t.colT2}, {t:'g', v:t.total} ] },
      ]
    };
    qData.gridInstr = 'Fill in every missing number.';
    qData.workSteps = 'Each row and each column adds to its total.<br>'
      + t.ctx.A + ': ' + t.rowT1 + ' &minus; ' + t.a + ' = <b>' + t.b + '</b>.<br>'
      + t.ctx.notA + ' total: ' + t.c + ' + ' + t.d + ' = <b>' + t.rowT2 + '</b>.<br>'
      + t.ctx.B + ' total: ' + t.a + ' + ' + t.c + ' = <b>' + t.colT1 + '</b>, and '
      + t.ctx.notB + ' total: ' + t.b + ' + ' + t.d + ' = <b>' + t.colT2 + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + t.total + ' ' + t.ctx.who
      + ' were surveyed. Complete the two-way table.</div>';
    return;
  }
  if (level === 2){
    const t = pbTwoWayData();
    const pick = ffPick([
      { w:t.ctx.A + ' and ' + t.ctx.B, n:t.a }, { w:t.ctx.A + ' and ' + t.ctx.notB, n:t.b },
      { w:t.ctx.notA + ' and ' + t.ctx.B, n:t.c }, { w:t.ctx.notA + ' and ' + t.ctx.notB, n:t.d },
    ]);
    pbFrac(pick.n, t.total);
    if (qData.ansDen === 1) return genProbTwoWay(el);
    qData.workSteps = 'Read the cell where ' + pick.w.replace(' and ', ' meets ') + ': ' + pick.n + '.<br>'
      + 'P = ' + pick.n + '/' + t.total + ' = <b>' + pbSimp(pick.n, t.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">One of the ' + t.total + ' ' + t.ctx.who
      + ' is chosen at random.<br>Find <b>P(' + pick.w + ')</b> in simplest form.</div>' + pbTwoWayHTML(t);
    return;
  }
  if (level === 3){
    const t = pbTwoWayData();
    const which = ffPick([
      { w:'both ' + t.ctx.A + ' and ' + t.ctx.B, n:t.a, why:'"Both" is the single cell where they meet: ' + t.a + '.' },
      { w:t.ctx.A + ' or ' + t.ctx.B + ' (or both)', n:t.a + t.b + t.c,
        why:'"Or" is every cell in that row or that column: ' + t.a + ' + ' + t.b + ' + ' + t.c + ' = ' + (t.a + t.b + t.c) + '.' },
      { w:'neither ' + t.ctx.A + ' nor ' + t.ctx.B, n:t.d,
        why:'"Neither" is the cell outside both: ' + t.d + '.' },
    ]);
    pbFrac(which.n, t.total);
    if (qData.ansDen === 1) return genProbTwoWay(el);
    qData.workSteps = which.why + '<br>P = ' + which.n + '/' + t.total + ' = <b>' + pbSimp(which.n, t.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">One of the ' + t.total + ' ' + t.ctx.who
      + ' is chosen at random.<br>Find the probability they are <b>' + which.w + '</b>, in simplest form.</div>'
      + pbTwoWayHTML(t);
    return;
  }
  if (level === 4){
    const t = pbTwoWayData();
    const ask = ffPick([
      { w:'are ' + t.ctx.notA, n:t.rowT2, why:t.total + ' &minus; ' + t.rowT1 + ' = ' + t.rowT2 },
      { w:'are ' + t.ctx.A + ' and ' + t.ctx.notB, n:t.b, why:t.rowT1 + ' &minus; ' + t.a + ' = ' + t.b },
      { w:'are ' + t.ctx.notA + ' and ' + t.ctx.B, n:t.c, why:t.colT1 + ' &minus; ' + t.a + ' = ' + t.c },
    ]);
    qData.ans = ask.n;
    qData.workSteps = 'Build the table from the words first, then read it: ' + ask.why + ' → <b>' + ask.n + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">In a group of <b>' + t.total + '</b> ' + t.ctx.who + ', <b>'
      + t.rowT1 + '</b> are ' + t.ctx.A + ' and <b>' + t.colT1 + '</b> are ' + t.ctx.B + '. Of the ' + t.ctx.A
      + ', <b>' + t.a + '</b> are also ' + t.ctx.B + '.<br>How many ' + ask.w + '?</div>';
    return;
  }
  /* L5 — given that … (conditional, Yr 9–10) */
  const t = pbTwoWayData();
  const cond = ffPick([
    { given:t.ctx.A, w:t.ctx.B, n:t.a, d:t.rowT1 },
    { given:t.ctx.notA, w:t.ctx.B, n:t.c, d:t.rowT2 },
    { given:t.ctx.B, w:t.ctx.A, n:t.a, d:t.colT1 },
  ]);
  pbFrac(cond.n, cond.d);
  if (qData.ansDen === 1) return genProbTwoWay(el);
  qData.workSteps = '"Given that" changes the TOTAL you divide by — only the ' + cond.given
    + ' row/column counts now.<br>' + cond.n + ' of the ' + cond.d + ' ' + cond.given + ' are also ' + cond.w
    + ': ' + cond.n + '/' + cond.d + ' = <b>' + pbSimp(cond.n, cond.d) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">One of the ' + t.total + ' ' + t.ctx.who + ' is chosen at random.<br>'
    + 'Given that they are <b>' + cond.given + '</b>, find the probability that they are <b>' + cond.w
    + '</b>, in simplest form.</div>' + pbTwoWayHTML(t);
}

/* ═══ 10. VENN DIAGRAMS ═══════════════════════════════════════════ */
function pbVennData(){
  const ctx = ffPick([
    { A:'Guitar', B:'Piano', who:'students' },
    { A:'Soccer', B:'Tennis', who:'students' },
    { A:'Netflix', B:'Disney+', who:'students' },
    { A:'Beach', B:'Mountains', who:'students' },
    { A:'French', B:'German', who:'students' },
  ]);
  const both = rr(2, 8), aOnly = rr(3, 12), bOnly = rr(3, 12), none = rr(1, 8);
  return { ctx:ctx, both:both, aOnly:aOnly, bOnly:bOnly, none:none,
    nA:aOnly + both, nB:bOnly + both, total:aOnly + bOnly + both + none };
}
function genProbVenn(el){
  const v = pbVennData();
  const vals = { aOnly:v.aOnly, both:v.both, bOnly:v.bOnly, none:v.none };
  if (level === 1){
    const ask = ffPick([
      { w:'play only ' + v.ctx.A, n:v.aOnly, why:'"Only ' + v.ctx.A + '" is the part of the ' + v.ctx.A + ' circle outside the overlap.' },
      { w:'do both', n:v.both, why:'"Both" is the overlap.' },
      { w:'do ' + v.ctx.A + ' (in total)', n:v.nA, why:'The whole ' + v.ctx.A + ' circle: ' + v.aOnly + ' + ' + v.both + '.' },
      { w:'do neither', n:v.none, why:'"Neither" sits outside both circles.' },
      { w:'were surveyed altogether', n:v.total, why:'Add every region: ' + v.aOnly + ' + ' + v.both + ' + ' + v.bOnly + ' + ' + v.none + '.' },
    ]);
    qData.ans = ask.n;
    qData.workSteps = ask.why + ' → <b>' + ask.n + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">The Venn diagram shows the ' + v.ctx.who + ' who do '
      + v.ctx.A + ' and ' + v.ctx.B + '.<br>How many <b>' + ask.w + '</b>?</div>'
      + pbVennSVG(v.ctx.A, v.ctx.B, vals);
    return;
  }
  if (level === 2){
    qData.gapTemplate = [v.ctx.A + ' only ', 0, '  &nbsp; both ', 1, '  &nbsp; ' + v.ctx.B + ' only ', 2];
    qData.gapAns = [v.aOnly, v.both, v.bOnly];
    qData.gapHint = 'Start with the overlap, then take it off each total.';
    qData.gapAnsText = v.aOnly + ', ' + v.both + ', ' + v.bOnly;
    qData.workSteps = 'Fill the OVERLAP first: ' + v.both + ' do both.<br>'
      + v.ctx.A + ' only = ' + v.nA + ' &minus; ' + v.both + ' = <b>' + v.aOnly + '</b>.<br>'
      + v.ctx.B + ' only = ' + v.nB + ' &minus; ' + v.both + ' = <b>' + v.bOnly + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">In a group of ' + v.ctx.who + ', <b>' + v.nA + '</b> do '
      + v.ctx.A + ', <b>' + v.nB + '</b> do ' + v.ctx.B + ', and <b>' + v.both + '</b> do both.<br>'
      + 'Fill in the three regions of the Venn diagram.</div>'
      + pbVennSVG(v.ctx.A, v.ctx.B, { aOnly:'?', both:'?', bOnly:'?', none:v.none });
    return;
  }
  if (level === 3){
    const ask = ffPick([
      { w:'both ' + v.ctx.A + ' and ' + v.ctx.B, n:v.both, why:'the overlap' },
      { w:v.ctx.A + ' or ' + v.ctx.B + ' (or both)', n:v.aOnly + v.both + v.bOnly, why:'every region inside a circle' },
      { w:'only ' + v.ctx.B, n:v.bOnly, why:'the ' + v.ctx.B + ' circle outside the overlap' },
    ]);
    pbFrac(ask.n, v.total);
    if (qData.ansDen === 1) return genProbVenn(el);
    qData.workSteps = 'Favourable = ' + ask.why + ' = ' + ask.n + '. Total = ' + v.total + '.<br>P = '
      + ask.n + '/' + v.total + ' = <b>' + pbSimp(ask.n, v.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">One of the ' + v.total + ' ' + v.ctx.who
      + ' is chosen at random.<br>Find the probability they do <b>' + ask.w + '</b>, in simplest form.</div>'
      + pbVennSVG(v.ctx.A, v.ctx.B, vals);
    return;
  }
  if (level === 4){
    pbFrac(v.none, v.total);
    if (qData.ansDen === 1) return genProbVenn(el);
    qData.workSteps = 'The number outside both circles is ' + v.none + '.<br>P(neither) = ' + v.none + '/'
      + v.total + ' = <b>' + pbSimp(v.none, v.total) + '</b>.<br>You could also do 1 &minus; P(' + v.ctx.A
      + ' or ' + v.ctx.B + ') — same answer.';
    el.innerHTML = '<div style="' + A_LBL + '">One of the ' + v.total + ' ' + v.ctx.who
      + ' is chosen at random.<br>Find <b>P(neither ' + v.ctx.A + ' nor ' + v.ctx.B + ')</b> in simplest form.</div>'
      + pbVennSVG(v.ctx.A, v.ctx.B, vals);
    return;
  }
  if (level === 5){
    const opts = [
      { code:'both', txt:'A &cap; B', why:'the overlap — in A AND in B' },
      { code:'union', txt:'A &cup; B', why:'everything in either circle — A OR B' },
      { code:'notA', txt:'A&prime;', why:'everything OUTSIDE A' },
      { code:'aOnly', txt:'A only', why:'the part of A that is not in B' },
    ];
    const right = ffPick(opts);
    qData.workSteps = 'The shaded region is <b>' + right.txt + '</b> — ' + right.why + '.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Which set does the <b>shaded</b> region show?</div>'
      + pbVennSVG('A', 'B', { aOnly:'', both:'', bOnly:'', none:'' }, right.code),
      opts.map(function(o){ return o.txt; }), right.txt, true);
  }
  /* L6 — three sets */
  const S = ffPick([['Football','Basketball','Tennis'], ['Maths','Science','Art'], ['Dog','Cat','Bird']]);
  const abc = rr(2, 6), ab = rr(2, 8), ac = rr(2, 8), bc = rr(2, 8);
  const aO = rr(3, 15), bO = rr(3, 15), cO = rr(3, 15);
  const nA = aO + ab + ac + abc, nB = bO + ab + bc + abc, nC = cO + ac + bc + abc;
  const ask = ffPick([
    { w:'play only ' + S[0], n:aO, why:'Start from the middle and work out: ' + nA + ' &minus; ' + ab + ' &minus; ' + ac + ' &minus; ' + abc + ' = ' + aO },
    { w:'play ' + S[0] + ' and ' + S[1] + ' but not ' + S[2], n:ab, why:'The ' + S[0] + '–' + S[1] + ' overlap outside the middle is ' + ab },
    { w:'play at least one sport', n:aO + bO + cO + ab + ac + bc + abc,
      why:'Add every region inside the three circles: ' + (aO + bO + cO + ab + ac + bc + abc) },
  ]);
  qData.ans = ask.n;
  qData.workSteps = ask.why + ' → <b>' + ask.n + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">' + nA + ' do ' + S[0] + ', ' + nB + ' do ' + S[1] + ' and ' + nC
    + ' do ' + S[2] + '. ' + ab + ' do ' + S[0] + ' and ' + S[1] + ', ' + ac + ' do ' + S[0] + ' and ' + S[2]
    + ', ' + bc + ' do ' + S[1] + ' and ' + S[2] + ', and ' + abc + ' do all three.<br>How many <b>' + ask.w + '</b>?'
    + '<br><span style="font-size:0.85em;color:var(--muted)">(Every overlap count includes the middle.)</span></div>';
}

/* ═══ 11. PROBABILITY NOTATION ════════════════════════════════════ */
function genProbNotate(el){
  if (level === 1){
    const items = [
      { q:'P(A)', a:'the probability that event A happens',
        bad:['the number of times A happens', 'the number of outcomes in A', 'A is certain'] },
      { q:'P(A) = 0', a:'A can never happen', bad:['A always happens', 'A has an even chance', 'A is likely'] },
      { q:'P(A) = 1', a:'A is certain to happen', bad:['A can never happen', 'A happens once', 'A is unlikely'] },
      { q:'n(A)', a:'the number of outcomes in A',
        bad:['the probability of A', 'the number of trials', 'the complement of A'] },
    ];
    const it = ffPick(items);
    qData.workSteps = '<b>' + it.q + '</b> means ' + it.a + '.';
    return decSetChoice(el, '<div style="' + A_LBL + '">What does this notation mean?</div>'
      + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:12px 0;">' + it.q + '</div>',
      [it.a].concat(it.bad), it.a);
  }
  if (level === 2){
    const d = ffPick([4, 5, 6, 8, 10, 12]);
    const n = rr(1, d - 1);
    pbFrac(d - n, d);
    if (qData.ansDen === 1) return genProbNotate(el);
    qData.workSteps = 'A&prime; is the complement of A — everything that is NOT A.<br>P(A&prime;) = 1 &minus; '
      + n + '/' + d + ' = <b>' + pbSimp(d - n, d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">P(A) = <b>' + n + '/' + d + '</b>.<br>'
      + 'Find <b>P(A&prime;)</b> in simplest form.</div>';
    return;
  }
  if (level === 3){
    const useAnd = Math.random() < 0.5;
    const right = useAnd ? 'A &cap; B' : 'A &cup; B';
    qData.workSteps = '&cap; means <b>and</b> (in both sets) and &cup; means <b>or</b> (in either set).<br>'
      + 'So "' + (useAnd ? 'A and B' : 'A or B') + '" is written <b>' + right + '</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">How do you write</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.6rem;margin:12px 0;">&ldquo;A '
      + (useAnd ? 'and' : 'or') + ' B&rdquo;</div>', ['A &cap; B', 'A &cup; B', 'A&prime;', 'n(A)'], right, true);
  }
  /* L4 — set language */
  const items = [
    { q:'&xi;', a:'the whole sample space', bad:['the empty set', 'the complement of A', 'the overlap of A and B'] },
    { q:'n(A) = 5', a:'there are 5 outcomes in A', bad:['P(A) = 5', 'A happens 5 times out of 1', 'A has 5 complements'] },
    { q:'A &cap; B = &empty;', a:'A and B cannot both happen', bad:['A and B always happen together', 'A and B are the same event', 'A is certain'] },
    { q:'A&prime;', a:'everything in the sample space that is not in A', bad:['everything in A', 'A and B together', 'the number of outcomes in A'] },
  ];
  const it = ffPick(items);
  qData.workSteps = '<b>' + it.q + '</b> means ' + it.a + '.';
  return decSetChoice(el, '<div style="' + A_LBL + '">What does this mean?</div>'
    + '<div style="text-align:center;font-weight:900;font-size:2rem;margin:12px 0;">' + it.q + '</div>',
    [it.a].concat(it.bad), it.a);
}

/* ═══ 12. MUTUALLY EXCLUSIVE EVENTS ═══════════════════════════════ */
/* Every pair is generated and THEN classified by testing the outcomes —
   never labelled first, so a pair can never be mislabelled. */
const PB_DIE_EVENTS = [
  { w:'rolling an even number', f:function(v){ return v % 2 === 0; } },
  { w:'rolling an odd number', f:function(v){ return v % 2 === 1; } },
  { w:'rolling a number greater than 4', f:function(v){ return v > 4; } },
  { w:'rolling a number less than 3', f:function(v){ return v < 3; } },
  { w:'rolling a 6', f:function(v){ return v === 6; } },
  { w:'rolling a 1', f:function(v){ return v === 1; } },
  { w:'rolling a multiple of 3', f:function(v){ return v % 3 === 0; } },
  { w:'rolling a prime number', f:function(v){ return v === 2 || v === 3 || v === 5; } },
];
function pbOverlap(e1, e2){
  let n = 0;
  for (let v = 1; v <= 6; v++) if (e1.f(v) && e2.f(v)) n++;
  return n;
}
function pbCountDie(e){ let n = 0; for (let v = 1; v <= 6; v++) if (e.f(v)) n++; return n; }
function genProbMutEx(el){
  if (level === 1){
    let e1 = ffPick(PB_DIE_EVENTS), e2 = ffPick(PB_DIE_EVENTS);
    let g = 0;
    while (e1.w === e2.w && g++ < 40) e2 = ffPick(PB_DIE_EVENTS);
    const ov = pbOverlap(e1, e2);
    const right = ov === 0 ? 'Yes' : 'No';
    const shared = [];
    for (let v = 1; v <= 6; v++) if (e1.f(v) && e2.f(v)) shared.push(v);
    qData.workSteps = ov === 0
      ? 'No roll is in both events, so they cannot both happen — they ARE mutually exclusive.'
      : 'Rolling ' + shared.join(' or ') + ' is in BOTH events, so they can happen together — they are NOT mutually exclusive.';
    return decSetChoice(el, '<div style="' + A_LBL + '">A die is rolled once. Are these two events mutually exclusive?</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.15rem;margin:12px 0;">' + e1.w + '<br>'
      + '<span style="color:var(--muted);font-size:0.9em">and</span><br>' + e2.w + '</div>',
      ['Yes', 'No'], right, true);
  }
  if (level === 2){
    let pairs = [], guard = 0;
    let good = null;
    while (guard++ < 300 && (!good || pairs.length < 3)){
      const e1 = ffPick(PB_DIE_EVENTS), e2 = ffPick(PB_DIE_EVENTS);
      if (e1.w === e2.w) continue;
      const txt = e1.w + ' &amp; ' + e2.w;
      if (pairs.indexOf(txt) >= 0 || (good && good.txt === txt)) continue;
      if (pbOverlap(e1, e2) === 0){ if (!good) good = { txt:txt }; }
      else if (pairs.length < 3) pairs.push(txt);
    }
    if (!good) return genProbMutEx(el);
    qData.workSteps = 'A pair is mutually exclusive when NO single roll is in both events.<br>'
      + 'Only <b>' + good.txt.replace('&amp;', 'and') + '</b> has no roll in common.';
    return decSetChoice(el, '<div style="' + A_LBL + '">A die is rolled once. Which pair of events is '
      + '<b>mutually exclusive</b>?</div>', [good.txt].concat(pairs), good.txt);
  }
  if (level === 3){
    let e1 = ffPick(PB_DIE_EVENTS), e2 = ffPick(PB_DIE_EVENTS);
    let g = 0;
    while ((e1.w === e2.w || pbOverlap(e1, e2) !== 0) && g++ < 200) { e1 = ffPick(PB_DIE_EVENTS); e2 = ffPick(PB_DIE_EVENTS); }
    if (pbOverlap(e1, e2) !== 0) return genProbMutEx(el);
    const n1 = pbCountDie(e1), n2 = pbCountDie(e2);
    if (n1 + n2 === 6) return genProbMutEx(el);
    pbFrac(n1 + n2, 6);
    if (qData.ansDen === 1) return genProbMutEx(el);
    qData.workSteps = 'These events are mutually exclusive, so you can simply ADD.<br>P = ' + n1 + '/6 + '
      + n2 + '/6 = ' + (n1 + n2) + '/6 = <b>' + pbSimp(n1 + n2, 6) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A die is rolled. The events <b>' + e1.w + '</b> and <b>' + e2.w
      + '</b> are mutually exclusive.<br>Find the probability that <b>one or the other</b> happens, in simplest form.</div>';
    return;
  }
  /* L4 — when you cannot just add */
  let e1 = ffPick(PB_DIE_EVENTS), e2 = ffPick(PB_DIE_EVENTS);
  let g = 0;
  while ((e1.w === e2.w || pbOverlap(e1, e2) === 0) && g++ < 200) { e1 = ffPick(PB_DIE_EVENTS); e2 = ffPick(PB_DIE_EVENTS); }
  if (pbOverlap(e1, e2) === 0) return genProbMutEx(el);
  const n1 = pbCountDie(e1), n2 = pbCountDie(e2), ov = pbOverlap(e1, e2);
  const shared = [];
  for (let v = 1; v <= 6; v++) if (e1.f(v) && e2.f(v)) shared.push(v);
  const right = 'No — you would count ' + shared.join(', ') + ' twice';
  const bad = ['Yes — the events are mutually exclusive',
               'Yes — adding always works for "or"',
               'No — you should multiply instead'];
  qData.workSteps = n1 + '/6 + ' + n2 + '/6 double-counts the ' + ov + ' outcome'
    + (ov === 1 ? '' : 's') + ' in both events (' + shared.join(', ') + ').<br>'
    + 'The correct answer is ' + n1 + '/6 + ' + n2 + '/6 &minus; ' + ov + '/6 = <b>'
    + pbSimp(n1 + n2 - ov, 6) + '</b> — that is the addition rule.';
  return decSetChoice(el, '<div style="' + A_LBL + '">A die is rolled. Can you find P(' + e1.w.replace('rolling ', '')
    + ' <b>or</b> ' + e2.w.replace('rolling ', '') + ') by just adding the two probabilities?</div>',
    [right].concat(bad), right);
}

/* ═══ 13. THE ADDITION RULE ═══════════════════════════════════════ */
function genProbAddRule(el){
  const d = ffPick([10, 12, 20, 24]);
  if (level === 1){
    const both = rr(1, Math.floor(d / 5) + 1);
    const a = rr(both + 1, Math.floor(d / 2)), b = rr(both + 1, Math.floor(d / 2));
    const un = a + b - both;
    if (un >= d) return genProbAddRule(el);
    pbFrac(un, d);
    if (qData.ansDen === 1) return genProbAddRule(el);
    qData.workSteps = 'P(A &cup; B) = P(A) + P(B) &minus; P(A &cap; B).<br>' + a + '/' + d + ' + ' + b + '/' + d
      + ' &minus; ' + both + '/' + d + ' = ' + un + '/' + d + ' = <b>' + pbSimp(un, d) + '</b>.<br>'
      + 'Subtracting the overlap is what stops it being counted twice.';
    el.innerHTML = '<div style="' + A_LBL + '">P(A) = ' + a + '/' + d + ', P(B) = ' + b + '/' + d
      + ' and P(A &cap; B) = ' + both + '/' + d + '.<br>Find <b>P(A &cup; B)</b> in simplest form.</div>';
    return;
  }
  if (level === 2){
    const both = rr(1, Math.floor(d / 5) + 1);
    const a = rr(both + 1, Math.floor(d / 2)), b = rr(both + 1, Math.floor(d / 2));
    const un = a + b - both;
    if (un >= d) return genProbAddRule(el);
    pbFrac(both, d);
    if (qData.ansDen === 1) return genProbAddRule(el);
    qData.workSteps = 'Rearrange the rule: P(A &cap; B) = P(A) + P(B) &minus; P(A &cup; B).<br>' + a + '/' + d
      + ' + ' + b + '/' + d + ' &minus; ' + un + '/' + d + ' = ' + both + '/' + d + ' = <b>'
      + pbSimp(both, d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">P(A) = ' + a + '/' + d + ', P(B) = ' + b + '/' + d
      + ' and P(A &cup; B) = ' + un + '/' + d + '.<br>Find <b>P(A &cap; B)</b> in simplest form.</div>';
    return;
  }
  if (level === 3){
    const v = pbVennData();
    const un = v.aOnly + v.both + v.bOnly;
    pbFrac(un, v.total);
    if (qData.ansDen === 1) return genProbAddRule(el);
    qData.workSteps = 'From the diagram: P(' + v.ctx.A + ') = ' + v.nA + '/' + v.total + ', P(' + v.ctx.B + ') = '
      + v.nB + '/' + v.total + ', P(both) = ' + v.both + '/' + v.total + '.<br>'
      + v.nA + ' + ' + v.nB + ' &minus; ' + v.both + ' = ' + un + ', so P = ' + un + '/' + v.total
      + ' = <b>' + pbSimp(un, v.total) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Use the addition rule to find <b>P(' + v.ctx.A + ' &cup; ' + v.ctx.B
      + ')</b> for one of the ' + v.total + ' ' + v.ctx.who + ' chosen at random. Give a fraction in simplest form.</div>'
      + pbVennSVG(v.ctx.A, v.ctx.B, { aOnly:v.aOnly, both:v.both, bOnly:v.bOnly, none:v.none });
    return;
  }
  /* L4 — pick the correct working line */
  const a = rr(2, 6), b = rr(2, 6), both = 1;
  const right = a + '/' + d + ' + ' + b + '/' + d + ' &minus; ' + both + '/' + d;
  const bad = [ a + '/' + d + ' + ' + b + '/' + d,
                a + '/' + d + ' + ' + b + '/' + d + ' + ' + both + '/' + d,
                a + '/' + d + ' × ' + b + '/' + d ];
  qData.workSteps = 'P(A &cup; B) = P(A) + P(B) &minus; P(A &cap; B) — you add, then take the overlap off once.<br>'
    + 'Adding alone counts the overlap twice; multiplying is for "and" on independent steps.';
  return decSetChoice(el, '<div style="' + A_LBL + '">P(A) = ' + a + '/' + d + ', P(B) = ' + b + '/' + d
    + ' and P(A &cap; B) = ' + both + '/' + d + '.<br>Which line correctly works out <b>P(A &cup; B)</b>?</div>',
    [right].concat(bad), right);
}

/* ═══ 14. CONDITIONAL PROBABILITY (Yr 10 — built ahead) ═══════════ */
function genProbCond(el){
  if (level === 1){
    const t = pbTwoWayData();
    const cond = ffPick([
      { given:t.ctx.A, w:t.ctx.B, n:t.a, d:t.rowT1 },
      { given:t.ctx.notA, w:t.ctx.notB, n:t.d, d:t.rowT2 },
      { given:t.ctx.B, w:t.ctx.notA, n:t.c, d:t.colT1 },
    ]);
    pbFrac(cond.n, cond.d);
    if (qData.ansDen === 1) return genProbCond(el);
    qData.workSteps = 'Given ' + cond.given + ', the total becomes ' + cond.d + ' — only that row or column.<br>P = '
      + cond.n + '/' + cond.d + ' = <b>' + pbSimp(cond.n, cond.d) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">Find <b>P(' + cond.w + ' | ' + cond.given
      + ')</b> — the probability of ' + cond.w + ' given ' + cond.given + '. Simplest form.</div>' + pbTwoWayHTML(t);
    return;
  }
  if (level === 2){
    const v = pbVennData();
    pbFrac(v.both, v.nA);
    if (qData.ansDen === 1) return genProbCond(el);
    qData.workSteps = 'Given they do ' + v.ctx.A + ', only the ' + v.nA + ' inside that circle count.<br>'
      + v.both + ' of them also do ' + v.ctx.B + ': ' + v.both + '/' + v.nA + ' = <b>' + pbSimp(v.both, v.nA) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">A ' + v.ctx.who.replace(/s$/, '') + ' is chosen at random from those who do <b>'
      + v.ctx.A + '</b>.<br>Find the probability they also do <b>' + v.ctx.B + '</b>, in simplest form.</div>'
      + pbVennSVG(v.ctx.A, v.ctx.B, { aOnly:v.aOnly, both:v.both, bOnly:v.bOnly, none:v.none });
    return;
  }
  if (level === 3){
    const total = ffPick([5, 6, 8, 10]);
    const f = rr(2, total - 1);
    const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
    pbFrac(f - 1, total - 1);
    if (qData.ansDen === 1) return genProbCond(el);
    qData.workSteps = 'The first ' + c1 + ' has already gone, so ' + (f - 1) + ' ' + c1 + ' are left out of '
      + (total - 1) + '.<br>P = ' + (f - 1) + '/' + (total - 1) + ' = <b>' + pbSimp(f - 1, total - 1) + '</b>.';
    el.innerHTML = '<div style="' + A_LBL + '">' + item.where.charAt(0).toUpperCase() + item.where.slice(1) + ' holds '
      + total + ' ' + item.many + ', ' + f + ' of them ' + c1 + '. Two are drawn without replacement and the first is '
      + c1 + '.<br>Find the probability the <b>second</b> is also ' + c1 + ', in simplest form.</div>';
    return;
  }
  if (level === 4){
    const indep = Math.random() < 0.5;
    const ctx = indep
      ? ffPick(['tossing a coin twice', 'rolling a die and spinning a spinner', 'drawing a card WITH replacement, twice'])
      : ffPick(['drawing two counters without replacement', 'dealing two cards without replacement',
                'taking two lollies from a bag without replacement']);
    const right = indep ? 'Independent' : 'Not independent';
    qData.workSteps = indep
      ? 'Nothing about the first step changes the second, so the events are <b>independent</b>.'
      : 'The first item is not put back, so the second probability changes — the events are <b>not independent</b>.';
    return decSetChoice(el, '<div style="' + A_LBL + '">Are the two steps independent?</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.2rem;margin:12px 0;">' + ctx + '</div>',
      ['Independent', 'Not independent'], right, true);
  }
  /* L5 — the multiplication rule with a conditional second factor */
  const total = ffPick([5, 6, 8, 10]);
  const f = rr(2, total - 1);
  const c1 = ffPick(PB_COLOURS), item = ffPick(PB_ITEMS);
  pbFrac(f * (f - 1), total * (total - 1));
  if (qData.ansDen === 1) return genProbCond(el);
  qData.workSteps = 'P(A &cap; B) = P(A) × P(B | A).<br>P(first ' + c1 + ') = ' + f + '/' + total
    + ', and P(second ' + c1 + ' | first ' + c1 + ') = ' + (f - 1) + '/' + (total - 1) + '.<br>'
    + f + '/' + total + ' × ' + (f - 1) + '/' + (total - 1) + ' = <b>'
    + pbSimp(f * (f - 1), total * (total - 1)) + '</b>.';
  el.innerHTML = '<div style="' + A_LBL + '">Use <b>P(A &cap; B) = P(A) × P(B | A)</b>.<br>'
    + item.where.charAt(0).toUpperCase() + item.where.slice(1) + ' holds ' + total + ' ' + item.many + ', '
    + f + ' of them ' + c1 + '. Two are taken without replacement.<br>Find <b>P(both ' + c1
    + ')</b> in simplest form.</div>';
}

/* ═══════════════════════════════════════════════════════════════════
   v102 · 📏 MEASUREMENT · RELEASE A · 10 skills · 53 levels
   -------------------------------------------------------------------
   Built from the 7MAT Measurement booklet (Lessons 1–4) and the 7MAS
   SEAL booklet (Lessons 1–2). Challenge questions are not assessed and
   are not built; Enrichment items are built as the LAST level of their
   skill and kept out of every ALT (Laura, 4 Oct).

   Four rules specific to this strand:

   • EVERY DIAGRAM IS DRAWN TO ITS OWN LABELS. One uniform scale per
     picture, so a 12 × 3 rectangle is long and thin, a slant side is
     visibly longer than the height it leans over, an obtuse triangle's
     height really does fall outside its base and a 135° sector really
     is 135°. Every distractor length printed on a diagram is the true
     length of the line it sits on (Pythagorean triples), never a guess.

   • EXACT MEANS IN TERMS OF π. The piExact mode reads kπ and a + kπ.
     A decimal typed on an exact level is marked wrong, and if it is the
     right SIZE the miss review says so ("now give it exactly"), the same
     idea as probability's "now simplify it".

   • 2 d.p. MEANS THE π KEY, NOT 3.14 (Laura, 4 Oct). Tolerance is 0.005
     round the correctly rounded value, and every 2 d.p. question is
     RE-ROLLED until its 3.14 answer differs from its π answer, so the
     distinction is tested on every question. A 3.14 answer gets its own
     miss-review line.

   • CONSTRUCT THE NUMBERS. Missing lengths come out whole, exact π
     coefficients are integers, and sector angles are only paired with
     radii that make the arc or area a whole multiple of π.
═══════════════════════════════════════════════════════════════════ */

const MEAS_SKILLS = ['measLength','measPerim','measCirc','measArc','measAreaUnits','measArea',
                     'measMissing','measQuad','measCircArea','measComposite'];
function isMeasSkill(s){ return MEAS_SKILLS.indexOf(s === undefined ? skill : s) >= 0; }

/* ── numbers ─────────────────────────────────────────────────────── */
/* Australian style: no separator up to 9999, a space from 10 000 up. */
function msNum(v){
  let s = String(dp(v, 6));
  if (s.indexOf('e') >= 0) s = Number(v).toFixed(6).replace(/0+$/, '').replace(/\.$/, '');
  let neg = false;
  if (s[0] === '-') { neg = true; s = s.slice(1); }
  const parts = s.split('.');
  let i = parts[0];
  if (i.length >= 5) i = i.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
  return (neg ? '−' : '') + i + (parts[1] ? '.' + parts[1] : '');
}
function msU(v, u){ return msNum(v) + ' ' + u; }
function msU2(v, u){ return msNum(v) + ' ' + u + '²'; }
function msUnit(){ return ffPick(['cm', 'cm', 'm', 'mm']); }
function msLen(lo, hi, decChance){
  if (Math.random() < (decChance || 0)) return dp(rr(lo * 10 + 1, hi * 10 - 1) / 10, 1);
  return rr(lo, hi);
}

/* ── π answers ───────────────────────────────────────────────────── */
function msPiTxt(a, k){
  const kt = (k === 1 ? '' : msNum(k)) + 'π';
  return a ? msNum(a) + ' + ' + kt : kt;
}
function msSetPiExact(a, k, unitTxt){
  qData.piAns = { a: a, k: k };
  qData.piDec = a + k * Math.PI;
  qData.ansDisplay = msPiTxt(a, k) + (unitTxt ? ' ' + unitTxt : '');
}
/* 2 d.p. with the π key. Returns null when the 3.14 answer would round to the
   same 2 d.p. value, and the caller re-rolls, so every question discriminates. */
function msPi2(fn){
  const a = dp(fn(Math.PI), 2), b = dp(fn(3.14), 2);
  return (Math.abs(a - b) < 0.0051) ? null : { ans: a, alt: b };
}
function msSetPi2(v, unitTxt){
  qData.ans = v.ans; qData.ansTol = 0.005; qData.pi314 = v.alt;
  qData.ansDisplay = msNum(v.ans) + (unitTxt ? ' ' + unitTxt : '');
}
function msRoll(make){
  let r = null, g = 0;
  while (!r && g++ < 200) r = make();
  return r;
}

/* Parse a typed exact answer: kπ, π, a + kπ, kπ + a (pi, ×, * tolerated).
   Returns null (empty), {invalid}, {plain, v} for a number with no π, or {a, k}. */
function piParse(raw){
  let s = String(raw).toLowerCase().replace(/\s+/g, '').replace(/pi/g, 'π')
    .replace(/[×*]/g, '').replace(/−/g, '-');
  if (s === '') return null;
  if (/^-?\d*\.?\d+$/.test(s)) return { plain: true, v: parseFloat(s) };
  if (s[0] !== '-' && s[0] !== '+') s = '+' + s;
  const terms = s.match(/[+-][^+-]*/g);
  if (!terms || terms.join('') !== s) return { invalid: 'form' };
  let a = 0, k = 0, seenA = false, seenK = false;
  for (let i = 0; i < terms.length; i++){
    const t = terms[i], sign = (t[0] === '-') ? -1 : 1, body = t.slice(1);
    let m;
    if ((m = body.match(/^(\d*\.?\d*)π$/)) && m[1] !== '.'){
      if (seenK) return { invalid: 'form' };
      seenK = true; k = sign * (m[1] === '' ? 1 : parseFloat(m[1]));
    } else if ((m = body.match(/^π(\d*\.?\d+)$/))){
      if (seenK) return { invalid: 'form' };
      seenK = true; k = sign * parseFloat(m[1]);
    } else if (/^\d*\.?\d+$/.test(body)){
      if (seenA) return { invalid: 'form' };
      seenA = true; a = sign * parseFloat(body);
    } else return { invalid: 'form' };
  }
  if (isNaN(a) || isNaN(k)) return { invalid: 'form' };
  if (!seenK) return { plain: true, v: a };
  return { a: a, k: k };
}

/* ═══ drawing toolkit ═══════════════════════════════════════════════
   Shapes are described in MATH coordinates (y up) and fitted into the
   viewBox with ONE uniform scale, which is what makes them true to their
   labels. Curves are sampled into the polygon, so a rectangle with a
   semicircle on the end is just a polygon with forty extra points and the
   same labelling code serves every shape.                                */
const MS_FONT = 15;
function msTxtW(t){ return String(t).replace(/<[^>]+>/g, '').replace(/&[a-z]+;/g, 'x').length * 8.2; }
function msText(x, y, t, o){
  o = o || {};
  return '<text x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" text-anchor="' + (o.anchor || 'middle')
    + '" font-size="' + (o.size || MS_FONT) + '" font-weight="800" fill="' + (o.col || 'var(--text)') + '">' + t + '</text>';
}
function msFit(pts, W, H, padX, padY){
  let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
  pts.forEach(function(p){ x0 = Math.min(x0, p[0]); x1 = Math.max(x1, p[0]); y0 = Math.min(y0, p[1]); y1 = Math.max(y1, p[1]); });
  const dx = Math.max(x1 - x0, 1e-6), dy = Math.max(y1 - y0, 1e-6);
  const sc = Math.min((W - 2 * padX) / dx, (H - 2 * padY) / dy);
  const ox = (W - dx * sc) / 2 - x0 * sc, oy = (H + dy * sc) / 2 + y0 * sc;
  return { sc: sc, P: function(p){ return [ox + p[0] * sc, oy - p[1] * sc]; } };
}
function msArea2(pts){
  let s = 0;
  for (let i = 0; i < pts.length; i++){ const a = pts[i], b = pts[(i + 1) % pts.length]; s += a[0] * b[1] - b[0] * a[1]; }
  return s / 2;
}
function msPath(F, pts, close){
  return 'M' + pts.map(function(p){ const s = F.P(p); return s[0].toFixed(1) + ' ' + s[1].toFixed(1); }).join(' L') + (close === false ? '' : ' Z');
}
function msArcPts(cx, cy, r, a0, a1, n){
  const out = [], N = n || Math.max(8, Math.round(Math.abs(a1 - a0) / 6));
  for (let i = 0; i <= N; i++){
    const a = (a0 + (a1 - a0) * i / N) * Math.PI / 180;
    out.push([cx + r * Math.cos(a), cy + r * Math.sin(a)]);
  }
  return out;
}
/* A label beside the segment p→q, pushed outward (or inward) from the shape. */
function msEdgeLbl(F, p, q, t, ccw, inward, col){
  const dx = q[0] - p[0], dy = q[1] - p[1], L = Math.hypot(dx, dy) || 1;
  let nx = dy / L, ny = -dx / L;
  if (!ccw) { nx = -nx; ny = -ny; }
  if (inward) { nx = -nx; ny = -ny; }
  const m = F.P([(p[0] + q[0]) / 2, (p[1] + q[1]) / 2]);
  const sx = nx, sy = -ny;
  const off = 9 + Math.abs(sx) * msTxtW(t) / 2 + Math.abs(sy) * 7;
  return msText(m[0] + sx * off, m[1] + sy * off + 5, t, { col: col });
}
/* A label beside a segment on a chosen side (+1 left of p→q on screen, −1 right). */
function msSideLbl(F, p, q, t, side, col){
  const a = F.P(p), b = F.P(q);
  const dx = b[0] - a[0], dy = b[1] - a[1], L = Math.hypot(dx, dy) || 1;
  const nx = -dy / L * side, ny = dx / L * side;
  const m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
  const off = 8 + Math.abs(nx) * msTxtW(t) / 2 + Math.abs(ny) * 7;
  return msText(m[0] + nx * off, m[1] + ny * off + 5, t, { col: col });
}
function msLine(F, p, q, o){
  o = o || {};
  const a = F.P(p), b = F.P(q);
  return '<line x1="' + a[0].toFixed(1) + '" y1="' + a[1].toFixed(1) + '" x2="' + b[0].toFixed(1) + '" y2="' + b[1].toFixed(1)
    + '" stroke="' + (o.col || 'var(--text)') + '" stroke-width="' + (o.w || 2) + '"' + (o.dash ? ' stroke-dasharray="6 4"' : '') + '/>';
}
function msRight(F, v, a, b, size){
  const V = F.P(v), A = F.P(a), B = F.P(b), s = size || 10;
  const u = function(P){ const dx = P[0] - V[0], dy = P[1] - V[1], L = Math.hypot(dx, dy) || 1; return [dx / L * s, dy / L * s]; };
  const ua = u(A), ub = u(B);
  return '<path d="M' + (V[0] + ua[0]).toFixed(1) + ' ' + (V[1] + ua[1]).toFixed(1) + ' L' + (V[0] + ua[0] + ub[0]).toFixed(1) + ' '
    + (V[1] + ua[1] + ub[1]).toFixed(1) + ' L' + (V[0] + ub[0]).toFixed(1) + ' ' + (V[1] + ub[1]).toFixed(1)
    + '" fill="none" stroke="var(--text)" stroke-width="1.6"/>';
}
function msTick(F, p, q, n){
  const a = F.P(p), b = F.P(q);
  const dx = b[0] - a[0], dy = b[1] - a[1], L = Math.hypot(dx, dy) || 1;
  const ux = dx / L, uy = dy / L, nx = -uy * 6, ny = ux * 6;
  const m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
  let s = '';
  for (let i = 0; i < (n || 1); i++){
    const o = (i - ((n || 1) - 1) / 2) * 5;
    const c = [m[0] + ux * o, m[1] + uy * o];
    s += '<line x1="' + (c[0] - nx).toFixed(1) + '" y1="' + (c[1] - ny).toFixed(1) + '" x2="' + (c[0] + nx).toFixed(1)
      + '" y2="' + (c[1] + ny).toFixed(1) + '" stroke="var(--text)" stroke-width="2"/>';
  }
  return s;
}
/* The one shape renderer. See the option list in the guide (§19). */
function msShape(o){
  const W = o.W || 300, H = o.H || 190;
  const all = o.pts.slice();
  (o.holes || []).forEach(function(h){ h.forEach(function(p){ all.push(p); }); });
  (o.frame || []).forEach(function(p){ all.push(p); });
  const F = msFit(all, W, H, o.padX || 58, o.padY || 26);
  const ccw = msArea2(o.pts) > 0;
  let s = '<path d="' + msPath(F, o.pts) + '" fill="' + (o.fill ? 'var(--accent)' : 'none') + '" fill-opacity="'
    + (o.fill ? '0.22' : '0') + '" stroke="var(--text)" stroke-width="2.5" stroke-linejoin="round"/>';
  (o.holes || []).forEach(function(h){
    s += '<path d="' + msPath(F, h) + '" fill="var(--surface, #fff)" stroke="var(--text)" stroke-width="2.5"/>';
  });
  (o.lines || []).forEach(function(l){ s += msLine(F, l[0], l[1]); });
  (o.dashed || []).forEach(function(l){ s += msLine(F, l[0], l[1], { dash: true, w: 1.8 }); });
  (o.rights || []).forEach(function(r){ s += msRight(F, r.v, r.a, r.b); });
  (o.ticks || []).forEach(function(t){ s += msTick(F, t.p, t.q, t.n); });
  (o.lbl || []).forEach(function(l){ s += msEdgeLbl(F, l.p, l.q, l.t, (l.ccw === undefined ? ccw : l.ccw), l.inward, l.col); });
  (o.side || []).forEach(function(l){ s += msSideLbl(F, l.p, l.q, l.t, l.side, l.col); });
  (o.dots || []).forEach(function(d){ const P = F.P(d); s += '<circle cx="' + P[0].toFixed(1) + '" cy="' + P[1].toFixed(1) + '" r="3" fill="var(--text)"/>'; });
  (o.texts || []).forEach(function(c){ const P = F.P(c.at); s += msText(P[0], P[1] + 5, c.t, { col: c.col, size: c.size }); });
  if (o.extra) s += o.extra(F);
  return '<svg viewBox="0 0 ' + W + ' ' + H + '" style="width:100%;max-width:' + (o.maxW || 330)
    + 'px;display:block;margin:6px auto;">' + s + '</svg>';
}
function msQ(el, prompt, svg, sub){
  el.innerHTML = '<div style="' + A_LBL + '">' + prompt + '</div>' + (svg || '')
    + (sub ? '<div style="text-align:center;font-weight:800;margin-top:4px;">' + sub + '</div>' : '');
}

/* ── shape builders (each returns an SVG string) ─────────────────── */
function msRectSVG(l, w, labels, o){
  o = o || {};
  const P = [[0, 0], [l, 0], [l, w], [0, w]];
  const lb = [];
  if (labels.b) lb.push({ p: P[0], q: P[1], t: labels.b });
  if (labels.r) lb.push({ p: P[1], q: P[2], t: labels.r });
  if (labels.t) lb.push({ p: P[2], q: P[3], t: labels.t });
  if (labels.l) lb.push({ p: P[3], q: P[0], t: labels.l });
  const ticks = o.square ? [0, 1, 2, 3].map(function(i){ return { p: P[i], q: P[(i + 1) % 4], n: 1 }; }) : [];
  return msShape({ pts: P, lbl: lb, ticks: ticks, rights: [{ v: P[0], a: P[1], b: P[3] }], fill: o.fill,
    texts: o.inside ? [{ at: [l / 2, w / 2], t: o.inside, size: 13 }] : [] });
}
/* Triangle on base (0,0)–(b,0) with apex (ax, h). */
function msTriSVG(b, ax, h, o){
  o = o || {};
  const A = [0, 0], B = [b, 0], C = [ax, h];
  const lb = [], dashed = [], rights = [], side = [];
  if (o.base) lb.push({ p: A, q: B, t: o.base });
  if (o.left) lb.push({ p: C, q: A, t: o.left });
  if (o.right) lb.push({ p: B, q: C, t: o.right });
  const foot = [ax, 0];
  if (o.height){
    const inside = ax > 1e-9 && ax < b - 1e-9, onA = Math.abs(ax) < 1e-9, onB = Math.abs(ax - b) < 1e-9;
    if (inside){ dashed.push([C, foot]); rights.push({ v: foot, a: B, b: C }); }
    else if (onA || onB){ rights.push({ v: foot, a: (onA ? B : A), b: C }); }
    else { dashed.push([C, foot]); dashed.push([foot, ax < 0 ? A : B]); rights.push({ v: foot, a: (ax < 0 ? A : B), b: C }); }
    if (onA) lb.push({ p: C, q: A, t: o.height });
    else if (onB) lb.push({ p: B, q: C, t: o.height });
    else side.push({ p: foot, q: C, t: o.height, side: (ax < 0 ? -1 : ax > b ? 1 : (ax > b / 2 ? -1 : 1)) });
  }
  return msShape({ pts: [A, B, C], lbl: lb, dashed: dashed, rights: rights, side: side,
    ticks: o.ticks || [], frame: [foot], fill: o.fill });
}
function msParaSVG(b, off, h, o){
  o = o || {};
  const P = [[0, 0], [b, 0], [b + off, h], [off, h]];
  const foot = [off, 0];
  const lb = [{ p: P[0], q: P[1], t: o.base }];
  if (o.slant) lb.push({ p: P[3], q: P[0], t: o.slant });
  return msShape({ pts: P, lbl: lb, dashed: [[P[3], foot]], rights: [{ v: foot, a: P[1], b: P[3] }],
    side: [{ p: foot, q: P[3], t: o.height, side: 1 }], fill: o.fill });
}
function msRegPts(n, s){
  const pts = [[0, 0]];
  let ang = 0, x = 0, y = 0;
  for (let i = 0; i < n - 1; i++){
    x += s * Math.cos(ang); y += s * Math.sin(ang);
    pts.push([x, y]);
    ang += 2 * Math.PI / n;
  }
  return pts;
}
const MS_POLY_NAME = { 3:'equilateral triangle', 4:'square', 5:'regular pentagon', 6:'regular hexagon', 8:'regular octagon' };

/* L-shape: W × H with the top-right corner (W − w1) × (H − h1) removed, then
   optionally mirrored. Returns the six corners and named edges. */
function msLShape(W, H, w1, h1, flip){
  let P = [[0, 0], [W, 0], [W, h1], [w1, h1], [w1, H], [0, H]];
  if (flip) P = P.map(function(p){ return [W - p[0], p[1]]; });
  return { P: P,
    bottom: [P[0], P[1]], right: [P[1], P[2]], stepH: [P[2], P[3]], stepV: [P[3], P[4]], top: [P[4], P[5]], left: [P[5], P[0]] };
}

/* Circle pictures. kind: 'radius' | 'diameter' | 'plain'. */
function msCircleSVG(r, o){
  o = o || {};
  const W = 300, H = 200, R = 74, cx = 150, cy = 100;
  let s = '<circle cx="' + cx + '" cy="' + cy + '" r="' + R + '" fill="' + (o.fill ? 'var(--accent)' : 'none') + '" fill-opacity="'
    + (o.fill ? '0.22' : '0') + '" stroke="' + (o.hl === 'circ' ? 'var(--accent)' : 'var(--text)') + '" stroke-width="' + (o.hl === 'circ' ? 5 : 2.5) + '"/>';
  const ang = (o.angle != null ? o.angle : -32) * Math.PI / 180;
  const ex = cx + R * Math.cos(ang), ey = cy + R * Math.sin(ang);
  const col = function(part){ return (o.hl === part) ? 'var(--accent)' : 'var(--text)'; };
  const wid = function(part){ return (o.hl === part) ? 5 : 2.2; };
  let nx = -Math.sin(ang), ny = Math.cos(ang);
  if (ny > 0) { nx = -nx; ny = -ny; }          // always label on the upper side of the line
  const lblAt = function(px, py){
    const off = 9 + Math.abs(nx) * msTxtW(o.lbl) / 2 + Math.abs(ny) * 8;
    return msText(px + nx * off, py + ny * off + 5, o.lbl);
  };
  if (o.kind === 'radius' || o.hl === 'radius'){
    s += '<line x1="' + cx + '" y1="' + cy + '" x2="' + ex.toFixed(1) + '" y2="' + ey.toFixed(1) + '" stroke="' + col('radius') + '" stroke-width="' + wid('radius') + '"/>';
    if (o.lbl) s += lblAt((cx + ex) / 2, (cy + ey) / 2);
  }
  if (o.kind === 'diameter' || o.hl === 'diameter'){
    const ax = cx - R * Math.cos(ang), ay = cy - R * Math.sin(ang);
    s += '<line x1="' + ax.toFixed(1) + '" y1="' + ay.toFixed(1) + '" x2="' + ex.toFixed(1) + '" y2="' + ey.toFixed(1) + '" stroke="' + col('diameter') + '" stroke-width="' + wid('diameter') + '"/>';
    if (o.lbl) s += lblAt(cx + R * 0.45 * Math.cos(ang), cy + R * 0.45 * Math.sin(ang));
  }
  s += '<circle cx="' + cx + '" cy="' + cy + '" r="' + (o.hl === 'centre' ? 6 : 3) + '" fill="' + col('centre') + '"/>';
  if (o.inside) s += msText(cx, cy + 30, o.inside);
  return '<svg viewBox="0 0 ' + W + ' ' + H + '" style="width:100%;max-width:260px;display:block;margin:6px auto;">' + s + '</svg>';
}
/* Sector of angle th (degrees) and radius r, symmetric about the upward vertical. */
function msSectorPts(r, th){
  const a0 = 90 - th / 2, a1 = 90 + th / 2;
  const arc = msArcPts(0, 0, r, a0, a1);
  return { pts: [[0, 0]].concat(arc), A: arc[0], B: arc[arc.length - 1], a0: a0, a1: a1 };
}
function msSectorSVG(r, th, o){
  o = o || {};
  const S = msSectorPts(r, th);
  const extra = function(F){
    let s = '';
    if (o.rLbl && th > 180){
      /* a reflex sector: the only open space is the notch, so the radius is
         named as r = … just below the notch opening */
      const a = S.a0 * Math.PI / 180, P = F.P([0, r * Math.sin(a)]);
      s += msText(P[0], P[1] + 22, 'r = ' + o.rLbl);
    } else if (o.rLbl){
      /* the radius at angle a0 bounds the sector on its clockwise side, so the
         outside of that edge is a further 90° clockwise. Works for reflex sectors
         too, where it puts the label in the open notch. */
      const a = S.a0 * Math.PI / 180, m = F.P([0.55 * r * Math.cos(a), 0.55 * r * Math.sin(a)]);
      const nx = Math.sin(a), ny = Math.cos(a);           // screen coords (y down)
      const off = 9 + Math.abs(nx) * msTxtW(o.rLbl) / 2 + Math.abs(ny) * 8;
      s += msText(m[0] + nx * off, m[1] + ny * off + 5, o.rLbl);
    }
    if (th === 90) s += msRight(F, [0, 0], S.A, S.B, 12);
    else {
      const arc = msArcPts(0, 0, r * 0.2, S.a0, S.a1, 24);
      s += '<path d="' + msPath(F, arc, false) + '" fill="none" stroke="var(--text)" stroke-width="1.6"/>';
    }
    if (o.thLbl){
      /* inside the angle along its bisector (straight up), just past the arc mark */
      /* a narrow sector has no room inside, so the angle sits just below the vertex */
      if (th < 45) { const V = F.P([0, 0]); s += msText(V[0], V[1] + 20, o.thLbl, { size: 14 }); }
      else { const P = F.P([0, r * 0.38]); s += msText(P[0], P[1] + 5, o.thLbl, { size: 14 }); }
    }
    if (o.arcLbl){
      const P = F.P([0, r]);
      s += msText(P[0], P[1] - 10, o.arcLbl, { col: 'var(--accent)' });
    }
    return s;
  };
  return msShape({ pts: S.pts, fill: o.fill, extra: extra, frame: [[0, 0]], padY: th > 180 ? 34 : 30, H: th > 180 ? 205 : 190 });
}
function msSemiSVG(r, o){
  o = o || {};
  const arc = msArcPts(0, 0, r, 0, 180);
  const pts = arc.concat([[-r, 0]]);
  const lb = [], lines = [], side = [];
  if (o.dLbl) lb.push({ p: [-r, 0], q: [r, 0], t: o.dLbl, ccw: true });
  if (o.rLbl) {
    const e = [r * Math.cos(Math.PI / 4), r * Math.sin(Math.PI / 4)];
    lines.push([[0, 0], e]);
    side.push({ p: [0, 0], q: e, t: o.rLbl, side: -1 });
  }
  return msShape({ pts: pts, lbl: lb, dots: [[0, 0]], lines: lines, side: side, fill: o.fill, padY: 30 });
}
function msQuadSVG(r, o){
  o = o || {};
  const arc = msArcPts(0, 0, r, 0, 90);
  const pts = [[0, 0]].concat(arc);
  return msShape({ pts: pts, lbl: o.rLbl ? [{ p: [0, 0], q: [r, 0], t: o.rLbl }] : [],
    rights: [{ v: [0, 0], a: [r, 0], b: [0, r] }], fill: o.fill, padX: 70 });
}

/* ═══ the dispatcher ══════════════════════════════════════════════ */
function genMeas(el){
  el.style.fontSize = '1.05rem';
  if (skill === 'measLength')    return genMeasLength(el);
  if (skill === 'measPerim')     return genMeasPerim(el);
  if (skill === 'measCirc')      return genMeasCirc(el);
  if (skill === 'measArc')       return genMeasArc(el);
  if (skill === 'measAreaUnits') return genMeasAreaUnits(el);
  if (skill === 'measArea')      return genMeasArea(el);
  if (skill === 'measMissing')   return genMeasMissing(el);
  if (skill === 'measQuad')      return genMeasQuad(el);
  if (skill === 'measCircArea')  return genMeasCircArea(el);
  if (skill === 'measComposite') return genMeasComposite(el);
  return genMeas3D(el);   /* v103: Release B */
}

/* ═══ 1. UNITS OF LENGTH ══════════════════════════════════════════ */
const MS_LEN_OBJ = [
  ['the length of an ant', 'mm'], ['the thickness of a coin', 'mm'], ['the width of a grain of rice', 'mm'],
  ['the thickness of a credit card', 'mm'], ['the length of a ladybird', 'mm'],
  ['the length of a pencil', 'cm'], ['the width of a book', 'cm'], ['the length of a shoe', 'cm'],
  ['the length of a pencil case', 'cm'], ['the height of a coffee mug', 'cm'],
  ['the length of a swimming pool', 'm'], ['the height of a gum tree', 'm'], ['the length of a netball court', 'm'],
  ['the height of a skyscraper in the Melbourne CBD', 'm'], ['the length of a football oval', 'm'],
  ['the distance from Melbourne to Sydney', 'km'], ['the length of the Murray River', 'km'],
  ['the distance run in a marathon', 'km'], ['the distance flown from Perth to Darwin', 'km'],
  ['the distance across Port Phillip Bay', 'km']
];
const MS_LEN_OPTS = ['millimetres (mm)', 'centimetres (cm)', 'metres (m)', 'kilometres (km)'];
const MS_LEN_STEPS = [['m', 'cm', 100], ['cm', 'mm', 10], ['km', 'm', 1000], ['m', 'mm', 1000]];
function genMeasLength(el){
  if (level === 1){
    const o = ffPick(MS_LEN_OBJ);
    const right = MS_LEN_OPTS[['mm', 'cm', 'm', 'km'].indexOf(o[1])];
    decSetChoice(el, '<div style="' + A_LBL + '">Which unit is the most sensible to measure</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.3rem;margin:14px 0;">' + o[0] + '?</div>', MS_LEN_OPTS, right, true);
    qData.workSteps = 'Think about the size: millimetres for tiny things, centimetres for things you hold, metres for rooms, buildings and sports grounds, kilometres for journeys. So <b>' + right + '</b>.';
    return;
  }
  if (level === 2 || level === 3){
    const st = ffPick(MS_LEN_STEPS), big = st[0], small = st[1], f = st[2];
    let bigVal;
    const k = ri(3);
    if (k === 0) bigVal = rr(1, 20);
    else if (k === 1 || f === 10) bigVal = dp(rr(11, 99) / 10, 1);
    else bigVal = dp(rr(101, 999) / 100, 2);
    const smallVal = dp(bigVal * f, 6);
    if (level === 2){
      qData.ans = smallVal; qData.ansDisplay = msU(smallVal, small);
      qData.workSteps = '1 ' + big + ' = ' + msNum(f) + ' ' + small + '. Big unit → small unit, so multiply: ' + msNum(bigVal) + ' × ' + msNum(f) + ' = <b>' + msU(smallVal, small) + '</b>.';
      msQ(el, 'Convert to ' + small + '.', '', '<span style="font-size:1.9rem;">' + msU(bigVal, big) + ' = ? ' + small + '</span>');
    } else {
      qData.ans = bigVal; qData.ansDisplay = msU(bigVal, big);
      qData.workSteps = msNum(f) + ' ' + small + ' = 1 ' + big + '. Small unit → big unit, so divide: ' + msNum(smallVal) + ' ÷ ' + msNum(f) + ' = <b>' + msU(bigVal, big) + '</b>.';
      msQ(el, 'Convert to ' + big + '.', '', '<span style="font-size:1.9rem;">' + msU(smallVal, small) + ' = ? ' + big + '</span>');
    }
    return;
  }
  if (level === 4){
    const toMM = Math.random() < 0.4, f = toMM ? 1000000 : 100000, small = toMM ? 'mm' : 'cm';
    const km = toMM ? ffPick([rr(1, 9), dp(rr(11, 99) / 10, 1)]) : ffPick([rr(1, 9), dp(rr(11, 99) / 10, 1), dp(rr(101, 999) / 100, 2)]);
    const sv = dp(km * f, 6), down = Math.random() < 0.5;
    const via = toMM ? 'km → m (× 1000), then m → mm (× 1000)' : 'km → m (× 1000), then m → cm (× 100)';
    if (down){
      qData.ans = sv; qData.ansDisplay = msU(sv, small);
      qData.workSteps = 'Go through metres: ' + via + '. That is × ' + msNum(f) + ': ' + msNum(km) + ' × ' + msNum(f) + ' = <b>' + msU(sv, small) + '</b>.';
      msQ(el, 'Convert to ' + small + '.', '', '<span style="font-size:1.8rem;">' + msU(km, 'km') + ' = ? ' + small + '</span>');
    } else {
      qData.ans = km; qData.ansDisplay = msU(km, 'km');
      qData.workSteps = 'Go back through metres: ' + small + ' → m, then m → km. That is ÷ ' + msNum(f) + ': ' + msNum(sv) + ' ÷ ' + msNum(f) + ' = <b>' + msU(km, 'km') + '</b>.';
      msQ(el, 'Convert to km.', '', '<span style="font-size:1.8rem;">' + msU(sv, small) + ' = ? km</span>');
    }
    return;
  }
  /* Level 5: order four lengths in mixed units (compared in mm). */
  const smallSet = Math.random() < 0.5;
  let tiles = [], g = 0;
  while (g++ < 80){
    tiles = []; const seen = {}, units = {};
    const anchor = rr(30, 250) * 10;
    let ok = true;
    for (let i = 0; i < 4; i++){
      const u = smallSet ? ffPick(['mm', 'cm', 'm']) : ffPick(['cm', 'm', 'km']);
      const base = Math.round(anchor * (0.55 + Math.random() * 1.1) / 10) * 10;
      let shown, mm;
      if (smallSet){ mm = base; shown = u === 'mm' ? base : (u === 'cm' ? base / 10 : base / 1000); }
      else { mm = base * 1000; shown = u === 'cm' ? base * 100 : (u === 'm' ? base : base / 1000); }
      if (seen[mm]) { ok = false; break; }
      seen[mm] = 1; units[u] = 1;
      tiles.push({ val: mm, html: '<b>' + msU(shown, u) + '</b>', text: msU(shown, u) });
    }
    if (ok && Object.keys(units).length >= 2) break;
  }
  cmpSetOrder(el, tiles, 'asc');
  qData.arrangeInstr = 'Tap the lengths from shortest to longest.';
  el.innerHTML = '<div style="' + A_LBL + '">Put these lengths in order from <b>shortest</b> to <b>longest</b>.</div>';
  qData.workSteps = 'Change them all to ' + (smallSet ? 'millimetres' : 'metres') + ' first, then compare. In order: '
    + qData.arrangeAns.map(function(c){ return qData.arrangeText[c]; }).join(' , ') + '.';
}

/* ═══ 2. PERIMETER ════════════════════════════════════════════════ */
const MS_TRIPLES = [[3, 4, 5], [6, 8, 10], [5, 12, 13], [9, 12, 15], [8, 15, 17], [12, 16, 20], [7, 24, 25]];
function msTriple(maxLeg){
  const pool = MS_TRIPLES.filter(function(t){ return t[1] <= (maxLeg || 99); });
  const t = ffPick(pool);
  return Math.random() < 0.5 ? [t[0], t[1], t[2]] : [t[1], t[0], t[2]];
}
/* A not-too-flat triangle with whole sides; L = left (apex to A), R = right, B = base. */
function msSSS(lo, hi){
  for (let g = 0; g < 300; g++){
    const L = rr(lo, hi), R = rr(lo, hi), B = rr(lo, hi);
    if (L + R <= B + 2 || L + B <= R + 2 || R + B <= L + 2) continue;
    const ax = (L * L + B * B - R * R) / (2 * B), h = Math.sqrt(Math.max(0, L * L - ax * ax));
    if (h < B * 0.35) continue;
    return { L: L, R: R, B: B, ax: ax, h: h };
  }
  return { L: 5, R: 6, B: 7, ax: 19 / 7, h: Math.sqrt(25 - (19 / 7) * (19 / 7)) };
}
function genMeasPerim(el){
  const u = msUnit();
  if (level === 1){
    if (Math.random() < 0.3){
      const s = msLen(2, 25, 0.25);
      qData.ans = dp(4 * s, 6); qData.ansDisplay = msU(qData.ans, u);
      qData.workSteps = 'A square has four equal sides: 4 × ' + msNum(s) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this square.', msRectSVG(s, s, { b: msU(s, u) }, { square: true }));
      return;
    }
    let l = msLen(4, 24, 0.25), w = msLen(2, 15, 0.2);
    if (w > l) { const t = l; l = w; w = t; }
    if (l < w * 1.3) l = dp(w * 1.3 + rr(1, 4), 1);
    qData.ans = dp(2 * (l + w), 6); qData.ansDisplay = msU(qData.ans, u);
    qData.workSteps = 'Two lengths and two widths: 2 × ' + msNum(l) + ' + 2 × ' + msNum(w) + ' = ' + msNum(2 * l) + ' + ' + msNum(2 * w) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the perimeter of this rectangle.', msRectSVG(l, w, { b: msU(l, u), r: msU(w, u) }));
    return;
  }
  if (level === 2){
    const k = ri(3);
    if (k === 0){
      const T = msSSS(3, 20);
      qData.ans = T.L + T.R + T.B; qData.ansDisplay = msU(qData.ans, u);
      qData.workSteps = 'Add all three sides: ' + T.L + ' + ' + T.R + ' + ' + T.B + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this triangle.', msTriSVG(T.B, T.ax, T.h, { base: msU(T.B, u), left: msU(T.L, u), right: msU(T.R, u) }));
      return;
    }
    const t = ffPick([[3, 4, 5], [4, 3, 5], [6, 8, 10], [8, 6, 10], [5, 12, 13], [9, 12, 15], [12, 9, 15]]);
    const off = t[0], h = t[1], leg = t[2];
    if (k === 1){
      const top = rr(3, 14), bot = top + 2 * off;
      qData.ans = top + bot + 2 * leg; qData.ansDisplay = msU(qData.ans, u);
      const P = [[0, 0], [bot, 0], [bot - off, h], [off, h]];
      qData.workSteps = 'Add all four sides: ' + bot + ' + ' + leg + ' + ' + top + ' + ' + leg + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this trapezium.', msShape({ pts: P,
        lbl: [{ p: P[0], q: P[1], t: msU(bot, u) }, { p: P[1], q: P[2], t: msU(leg, u) }, { p: P[2], q: P[3], t: msU(top, u) }, { p: P[3], q: P[0], t: msU(leg, u) }] }));
      return;
    }
    const top = rr(3, 14), bot = top + off;
    qData.ans = top + bot + h + leg; qData.ansDisplay = msU(qData.ans, u);
    const P = [[0, 0], [bot, 0], [top, h], [0, h]];
    qData.workSteps = 'Add all four sides: ' + bot + ' + ' + leg + ' + ' + top + ' + ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the perimeter of this shape.', msShape({ pts: P, rights: [{ v: P[0], a: P[1], b: P[3] }, { v: P[3], a: P[0], b: P[2] }],
      lbl: [{ p: P[0], q: P[1], t: msU(bot, u) }, { p: P[1], q: P[2], t: msU(leg, u) }, { p: P[2], q: P[3], t: msU(top, u) }, { p: P[3], q: P[0], t: msU(h, u) }] }));
    return;
  }
  if (level === 3){
    const n = ffPick([3, 5, 6, 8, 5, 6]), s = msLen(2, 25, 0.3);
    const P = msRegPts(n, s);
    qData.ans = dp(n * s, 6); qData.ansDisplay = msU(qData.ans, u);
    qData.workSteps = 'A ' + MS_POLY_NAME[n] + ' has ' + n + ' equal sides: ' + n + ' × ' + msNum(s) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This shape is regular: the tick marks show the sides are equal. Find its perimeter.',
      msShape({ pts: P, lbl: [{ p: P[0], q: P[1], t: msU(s, u) }], ticks: P.map(function(p, i){ return { p: p, q: P[(i + 1) % n], n: 1 }; }) }));
    return;
  }
  if (level === 4){
    const rect = Math.random() < 0.6, pair = ffPick([['m', 'cm', 100], ['cm', 'mm', 10]]);
    const B = pair[0], S = pair[1], f = pair[2], askSmall = Math.random() < 0.6;
    if (rect){
      /* the length is in the big unit; the width (in the small unit) is always
         the shorter side, so the drawing matches the numbers */
      let lB, wS;
      if (f === 100){ lB = dp(rr(11, 30) / 10, 1); wS = rr(15, Math.min(95, Math.floor(lB * 100) - 10)); }
      else { lB = rr(5, 30); wS = rr(15, Math.min(95, lB * 10 - 5)); }
      const lS = dp(lB * f, 6), wB = dp(wS / f, 6);
      const ans = askSmall ? dp(2 * (lS + wS), 6) : dp(2 * (lB + wB), 6);
      qData.ans = ans; qData.ansDisplay = msU(ans, askSmall ? S : B);
      qData.workSteps = askSmall
        ? 'Convert first: ' + msU(lB, B) + ' = ' + msU(lS, S) + '. Then 2 × ' + msNum(lS) + ' + 2 × ' + wS + ' = <b>' + qData.ansDisplay + '</b>.'
        : 'Convert first: ' + msU(wS, S) + ' = ' + msU(wB, B) + '. Then 2 × ' + msNum(lB) + ' + 2 × ' + msNum(wB) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this rectangle in <b>' + (askSmall ? S : B) + '</b>.', msRectSVG(lB, wB, { b: msU(lB, B), r: msU(wS, S) }));
      return;
    }
    let T, bS, bB, tax, th, g4 = 0;
    do {
      T = msSSS(4, 15);
      bS = T.B * f + (f === 100 ? rr(1, 19) * 5 : rr(1, 9));      // e.g. 1145 cm, 124 mm
      bB = dp(bS / f, 6);
      tax = (T.L * T.L + bB * bB - T.R * T.R) / (2 * bB);
      th = Math.sqrt(Math.max(0, T.L * T.L - tax * tax));
    } while (th < 0.35 * bB && g4++ < 100);
    const ans = askSmall ? dp((T.L + T.R) * f + bS, 6) : dp(T.L + T.R + bB, 6);
    qData.ans = ans; qData.ansDisplay = msU(ans, askSmall ? S : B);
    qData.workSteps = askSmall
      ? 'Convert the ' + B + ' sides: ' + T.L + ' ' + B + ' = ' + msU(T.L * f, S) + ', ' + T.R + ' ' + B + ' = ' + msU(T.R * f, S) + '. Add: ' + msNum(T.L * f) + ' + ' + msNum(T.R * f) + ' + ' + msNum(bS) + ' = <b>' + qData.ansDisplay + '</b>.'
      : 'Convert the base: ' + msU(bS, S) + ' = ' + msU(bB, B) + '. Add: ' + T.L + ' + ' + T.R + ' + ' + msNum(bB) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the perimeter of this triangle in <b>' + (askSmall ? S : B) + '</b>.', msTriSVG(bB, tax, th, { base: msU(bS, S), left: msU(T.L, B), right: msU(T.R, B) }));
    return;
  }
  if (level === 5){
    const k = ri(4);
    if (k === 0){
      const l = rr(6, 25), w = rr(2, l - 2), P = 2 * (l + w);
      qData.ans = w; qData.ansDisplay = msU(w, u);
      qData.workSteps = 'P = 2 × length + 2 × width, so 2 × width = ' + P + ' − 2 × ' + l + ' = ' + (P - 2 * l) + ', and the width is ' + (P - 2 * l) + ' ÷ 2 = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'The perimeter of this rectangle is <b>' + msU(P, u) + '</b>. Find the missing side.', msRectSVG(l, w, { b: msU(l, u), r: '?' }));
      return;
    }
    if (k === 1){
      const n = ffPick([3, 5, 6, 8]), s = rr(2, 20), P = msRegPts(n, s);
      qData.ans = s; qData.ansDisplay = msU(s, u);
      qData.workSteps = 'All ' + n + ' sides are equal: ' + (n * s) + ' ÷ ' + n + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This ' + MS_POLY_NAME[n] + ' has a perimeter of <b>' + msU(n * s, u) + '</b>. Find the length of one side.',
        msShape({ pts: P, lbl: [{ p: P[0], q: P[1], t: '?' }], ticks: P.map(function(p, i){ return { p: p, q: P[(i + 1) % n], n: 1 }; }) }));
      return;
    }
    if (k === 2){
      let a, b, g = 0;
      do { a = rr(5, 20); b = rr(3, 2 * a - 2); } while ((b < a * 0.5 || b === a) && g++ < 50);
      const P = 2 * a + b, h = Math.sqrt(a * a - b * b / 4);
      qData.ans = b; qData.ansDisplay = msU(b, u);
      qData.workSteps = 'Isosceles: the two marked sides are both ' + a + '. Base = ' + P + ' − ' + a + ' − ' + a + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This isosceles triangle has a perimeter of <b>' + msU(P, u) + '</b>. Find the base.',
        msTriSVG(b, b / 2, h, { base: '?', left: msU(a, u), right: msU(a, u), ticks: [{ p: [0, 0], q: [b / 2, h], n: 1 }, { p: [b, 0], q: [b / 2, h], n: 1 }] }));
      return;
    }
    const T = msSSS(4, 20), P = T.L + T.R + T.B, which = ri(3);
    const val = [T.B, T.L, T.R][which];
    qData.ans = val; qData.ansDisplay = msU(val, u);
    const known = [T.B, T.L, T.R].filter(function(v, i){ return i !== which; });
    qData.workSteps = 'Take the two known sides from the perimeter: ' + P + ' − ' + known[0] + ' − ' + known[1] + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This triangle has a perimeter of <b>' + msU(P, u) + '</b>. Find the side marked ?.',
      msTriSVG(T.B, T.ax, T.h, { base: which === 0 ? '?' : msU(T.B, u), left: which === 1 ? '?' : msU(T.L, u), right: which === 2 ? '?' : msU(T.R, u) }));
    return;
  }
  if (level === 6){
    const W = rr(8, 20), H = rr(6, 16), w1 = rr(2, W - 3), h1 = rr(2, H - 3);
    const S = msLShape(W, H, w1, h1, Math.random() < 0.5);
    const a = W - w1, b = H - h1;
    qData.gapTemplate = ['a = ', 0, '&nbsp;' + u + '&nbsp;&nbsp;&nbsp;&nbsp;b = ', 1, '&nbsp;' + u];
    qData.gapAns = [a, b];
    qData.gapHint = 'Find a and b.';
    qData.gapAnsText = 'a = ' + a + ' ' + u + ', b = ' + b + ' ' + u;
    qData.workSteps = 'The short sides across add up to the long side: a = ' + W + ' − ' + w1 + ' = <b>' + a + '</b>.<br>'
      + 'The short sides up add up to the long side: b = ' + H + ' − ' + h1 + ' = <b>' + b + '</b>.';
    msQ(el, 'Every corner is a right angle. Find the lengths a and b.', msShape({ pts: S.P,
      lbl: [{ p: S.bottom[0], q: S.bottom[1], t: msU(W, u) }, { p: S.left[0], q: S.left[1], t: msU(H, u) },
            { p: S.top[0], q: S.top[1], t: msU(w1, u) }, { p: S.right[0], q: S.right[1], t: msU(h1, u) },
            { p: S.stepH[0], q: S.stepH[1], t: 'a', col: 'var(--accent)' }, { p: S.stepV[0], q: S.stepV[1], t: 'b', col: 'var(--accent)' }] }));
    return;
  }
  if (level === 7){
    if (Math.random() < 0.5){
      const r = ffPick([[3, 2], [2, 1], [3, 1], [4, 3], [5, 2], [5, 3], [4, 1]]), k = rr(2, 12);
      const L = r[0] * k, Wd = r[1] * k, P = 2 * (L + Wd);
      qData.gapTemplate = ['length = ', 0, '&nbsp;' + u + '&nbsp;&nbsp;&nbsp;width = ', 1, '&nbsp;' + u];
      qData.gapAns = [L, Wd];
      qData.gapHint = 'Fill in the length and the width.';
      qData.gapAnsText = 'length ' + L + ' ' + u + ', width ' + Wd + ' ' + u;
      qData.workSteps = 'Going round the rectangle counts ' + r[0] + ' + ' + r[1] + ' + ' + r[0] + ' + ' + r[1] + ' = ' + (2 * (r[0] + r[1])) + ' parts.<br>'
        + 'One part = ' + P + ' ÷ ' + (2 * (r[0] + r[1])) + ' = ' + k + '. Length = ' + r[0] + ' × ' + k + ' = <b>' + L + '</b>, width = ' + r[1] + ' × ' + k + ' = <b>' + Wd + '</b>.';
      msQ(el, 'The length and width of a rectangle are in the ratio <b>' + r[0] + ' : ' + r[1] + '</b>. Its perimeter is <b>' + msU(P, u) + '</b>.<br>Find its length and width.', '');
      return;
    }
    const r = ffPick([[2, 3, 4], [3, 4, 5], [2, 4, 5], [4, 5, 6], [3, 5, 7], [5, 6, 7], [2, 3, 3]]), k = rr(2, 9);
    const s = r.map(function(x){ return x * k; }), P = s[0] + s[1] + s[2], parts = r[0] + r[1] + r[2];
    qData.gapTemplate = [0, '&nbsp;' + u + ',&nbsp;&nbsp;', 1, '&nbsp;' + u + ',&nbsp;&nbsp;', 2, '&nbsp;' + u];
    qData.gapAns = s;
    qData.gapHint = 'Shortest side first.';
    qData.gapAnsText = s.join(' ' + u + ', ') + ' ' + u;
    qData.workSteps = 'Total parts = ' + r.join(' + ') + ' = ' + parts + '. One part = ' + P + ' ÷ ' + parts + ' = ' + k + '.<br>Sides: <b>' + s.join(', ') + '</b>.';
    msQ(el, 'The sides of a triangle are in the ratio <b>' + r.join(' : ') + '</b>. Its perimeter is <b>' + msU(P, u) + '</b>.<br>Find the three side lengths.', '');
    return;
  }
  /* Level 8 (Enrichment): two people each measure three sides of one rectangle. */
  let l, w;
  do { l = rr(4, 30); w = rr(3, 25); } while (l === w);
  const X = 2 * l + w, Y = l + 2 * w;
  qData.ans = 2 * (l + w); qData.ansDisplay = msU(qData.ans, u);
  qData.workSteps = 'One person measured two of one side and one of the other; the other person did the opposite. Together that is three lengths and three widths:<br>'
    + X + ' + ' + Y + ' = ' + (X + Y) + ' = 3 × (length + width), so length + width = ' + ((X + Y) / 3) + '.<br>Perimeter = 2 × ' + ((X + Y) / 3) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'Luna measures three sides of a rectangle and they total <b>' + msU(X, u) + '</b>. Mateo measures three sides of the same rectangle and they total <b>' + msU(Y, u) + '</b>.<br>Find the perimeter of the rectangle.', '');
}

/* ═══ 3. CIRCUMFERENCE ════════════════════════════════════════════ */
const MS_CIRC_PARTS = ['centre', 'radius', 'diameter', 'circumference'];
function genMeasCirc(el){
  const u = msUnit();
  if (level === 1){
    const p = ffPick(MS_CIRC_PARTS);
    const hl = { centre: 'centre', radius: 'radius', diameter: 'diameter', circumference: 'circ' }[p];
    decSetChoice(el, '<div style="' + A_LBL + '">What is the highlighted part of the circle called?</div>'
      + msCircleSVG(1, { hl: hl, angle: ffPick([-32, -150, 25, 160, -70]) }), MS_CIRC_PARTS.slice(), p, true);
    qData.workSteps = { centre: 'The point in the middle is the <b>centre</b>.',
      radius: 'A line from the centre to the edge is a <b>radius</b>.',
      diameter: 'A line from edge to edge THROUGH the centre is a <b>diameter</b>. It is two radii long.',
      circumference: 'The distance all the way around is the <b>circumference</b>.' }[p];
    return;
  }
  if (level === 2){
    const r = msLen(2, 40, 0.35), toD = Math.random() < 0.5;
    if (toD){
      qData.ans = dp(2 * r, 6); qData.ansDisplay = msU(qData.ans, u);
      qData.workSteps = 'd = 2r = 2 × ' + msNum(r) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the <b>diameter</b> of this circle.', msCircleSVG(r, { kind: 'radius', lbl: msU(r, u) }));
    } else {
      const d = dp(2 * r, 6);
      qData.ans = r; qData.ansDisplay = msU(r, u);
      qData.workSteps = 'r = d ÷ 2 = ' + msNum(d) + ' ÷ 2 = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the <b>radius</b> of this circle.', msCircleSVG(r, { kind: 'diameter', lbl: msU(d, u) }));
    }
    return;
  }
  if (level === 3){
    const d = rr(2, 30);
    msSetPiExact(0, d, u);
    qData.workSteps = 'C = πd = π × ' + d + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the circumference. Give your answer <b>exactly</b>, in terms of π.', msCircleSVG(d / 2, { kind: 'diameter', lbl: msU(d, u) }));
    return;
  }
  if (level === 4){
    if (Math.random() < 0.7){
      const r = rr(2, 20);
      msSetPiExact(0, 2 * r, u);
      qData.workSteps = 'C = 2πr = 2 × π × ' + r + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the circumference. Give your answer <b>exactly</b>, in terms of π.', msCircleSVG(r, { kind: 'radius', lbl: msU(r, u) }));
    } else {
      const d = rr(3, 30);
      msSetPiExact(0, d, u);
      qData.workSteps = 'This time you are given the diameter, so C = πd = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the circumference. Give your answer <b>exactly</b>, in terms of π.', msCircleSVG(d / 2, { kind: 'diameter', lbl: msU(d, u) }));
    }
    return;
  }
  if (level === 5){
    const r = msRoll(function(){
      const isR = Math.random() < 0.5, v = msLen(isR ? 2 : 3, isR ? 25 : 40, 0.35);
      const p = msPi2(function(P){ return isR ? 2 * P * v : P * v; });
      return p ? { isR: isR, v: v, p: p } : null;
    });
    msSetPi2(r.p, u);
    qData.workSteps = (r.isR ? 'C = 2πr = 2 × π × ' + msNum(r.v) : 'C = πd = π × ' + msNum(r.v)) + ' = ' + (r.isR ? 2 * Math.PI * r.v : Math.PI * r.v).toFixed(4)
      + '… = <b>' + qData.ansDisplay + '</b> (2 d.p.). Use the π key: 3.14 gives ' + msNum(r.p.alt) + ', which is not the same to two decimal places.';
    msQ(el, 'Find the circumference, correct to <b>two decimal places</b>.', msCircleSVG(r.v, { kind: r.isR ? 'radius' : 'diameter', lbl: msU(r.v, u) }));
    return;
  }
  if (level === 6){
    const d = rr(2, 20) * 2, askR = Math.random() < 0.6;
    qData.ans = askR ? d / 2 : d; qData.ansDisplay = msU(qData.ans, u);
    qData.workSteps = 'C = πd, so the number in front of π is the diameter: d = ' + d + (askR ? ', and r = ' + d + ' ÷ 2 = <b>' + qData.ansDisplay + '</b>.' : '. So d = <b>' + qData.ansDisplay + '</b>.');
    msQ(el, 'A circle has a circumference of <b>' + d + 'π ' + u + '</b>. Find its <b>' + (askR ? 'radius' : 'diameter') + '</b>.', msCircleSVG(1, { kind: 'plain', inside: 'C = ' + d + 'π ' + u }));
    return;
  }
  /* Level 7 (Enrichment): laps and paths. */
  if (Math.random() < 0.5){
    const r = msRoll(function(){
      const D = ffPick([60, 70, 75, 80, 90, 100, 120]), n = rr(3, 15);
      const a = Math.round(n * Math.PI * D), b = Math.round(n * 3.14 * D);
      return a !== b ? { D: D, n: n, a: a, b: b } : null;
    });
    qData.ans = r.a; qData.pi314 = r.b; qData.ansDisplay = msU(r.a, 'm');
    qData.workSteps = 'One lap = πd = π × ' + r.D + ' = ' + (Math.PI * r.D).toFixed(3) + '… m.<br>' + r.n + ' laps = ' + r.n + ' × ' + (Math.PI * r.D).toFixed(3) + '… = ' + (r.n * Math.PI * r.D).toFixed(2) + ' m ≈ <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A circular running track has a diameter of <b>' + r.D + ' m</b>. A runner completes <b>' + r.n + ' laps</b>. How far does the runner travel, correct to the <b>nearest metre</b>?', '');
    return;
  }
  const r = msRoll(function(){
    const d = rr(4, 20), w = ffPick([1, 1.5, 2, 0.5]);
    const p = msPi2(function(P){ return P * (d + 2 * w); });
    return p ? { d: d, w: w, p: p } : null;
  });
  msSetPi2(r.p, 'm');
  qData.workSteps = 'The path adds ' + msNum(r.w) + ' m on EACH side, so the outer diameter is ' + r.d + ' + 2 × ' + msNum(r.w) + ' = ' + msNum(r.d + 2 * r.w) + ' m.<br>C = π × ' + msNum(r.d + 2 * r.w) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'A circular pond has a diameter of <b>' + r.d + ' m</b>. A path <b>' + msNum(r.w) + ' m</b> wide goes all the way around it. Find the distance around the <b>outside edge</b> of the path, correct to two decimal places.', '');
}

/* ═══ 4. PERIMETER OF CIRCLE PARTS ════════════════════════════════ */
const MS_SECTOR_TH = [20, 30, 36, 40, 45, 60, 72, 80, 100, 108, 120, 135, 140, 144, 150, 160, 200, 210, 216, 225, 240, 252, 270, 288, 300, 315];
function msSectorPair(test){
  const pairs = [];
  MS_SECTOR_TH.forEach(function(th){ for (let r = 2; r <= 20; r++) if (test(th, r)) pairs.push([th, r]); });
  return ffPick(pairs);
}
function genMeasArc(el){
  const u = msUnit();
  if (level === 1){
    if (Math.random() < 0.55){
      const useD = Math.random() < 0.6, r = rr(2, 15);
      msSetPiExact(0, r, u);
      qData.workSteps = 'The curve is half the circumference: ½ × π × ' + (2 * r) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the length of the <b>curved part only</b> of this semicircle. Give it exactly, in terms of π.',
        msSemiSVG(r, useD ? { dLbl: msU(2 * r, u) } : { rLbl: msU(r, u) }));
    } else {
      const r = rr(1, 10) * 2;
      msSetPiExact(0, r / 2, u);
      qData.workSteps = 'The curve is a quarter of the circumference: ¼ × 2 × π × ' + r + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the length of the <b>curved part only</b> of this quadrant. Give it exactly, in terms of π.', msQuadSVG(r, { rLbl: msU(r, u) }));
    }
    return;
  }
  if (level === 2){
    const r = msRoll(function(){
      const semi = Math.random() < 0.5, v = semi ? msLen(3, 30, 0.2) : msLen(2, 20, 0.2);
      const p = semi ? msPi2(function(P){ return P * v / 2 + v; }) : msPi2(function(P){ return P * v / 2 + 2 * v; });
      return p ? { semi: semi, v: v, p: p } : null;
    });
    msSetPi2(r.p, u);
    if (r.semi){
      qData.workSteps = 'Curve = ½ × π × ' + msNum(r.v) + ' = ' + (Math.PI * r.v / 2).toFixed(4) + '…<br>Add the straight edge (the diameter): + ' + msNum(r.v) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this semicircle, correct to two decimal places.', msSemiSVG(r.v / 2, { dLbl: msU(r.v, u) }));
    } else {
      qData.workSteps = 'Curve = ¼ × 2 × π × ' + msNum(r.v) + ' = ' + (Math.PI * r.v / 2).toFixed(4) + '…<br>Add the two radii: + 2 × ' + msNum(r.v) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this quadrant, correct to two decimal places.', msQuadSVG(r.v, { rLbl: msU(r.v, u) }));
    }
    return;
  }
  if (level === 3){
    if (Math.random() < 0.5){
      const r = rr(2, 15);
      msSetPiExact(2 * r, r, u);
      qData.workSteps = 'Straight edge = ' + (2 * r) + '. Curve = ½ × π × ' + (2 * r) + ' = ' + msPiTxt(0, r) + '.<br>Perimeter = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this semicircle. Give it exactly, in terms of π.', msSemiSVG(r, { dLbl: msU(2 * r, u) }));
    } else {
      const r = rr(1, 10) * 2;
      msSetPiExact(2 * r, r / 2, u);
      qData.workSteps = 'Two radii = 2 × ' + r + ' = ' + (2 * r) + '. Curve = ¼ × 2 × π × ' + r + ' = ' + msPiTxt(0, r / 2) + '.<br>Perimeter = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the perimeter of this quadrant. Give it exactly, in terms of π.', msQuadSVG(r, { rLbl: msU(r, u) }));
    }
    return;
  }
  if (level === 4 || level === 5){
    const pr = msSectorPair(function(th, r){ return (th * r) % 180 === 0; });
    const th = pr[0], r = pr[1], k = th * r / 180;
    if (level === 4){
      msSetPiExact(0, k, u);
      qData.workSteps = 'Arc = ' + th + '/360 × 2 × π × ' + r + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the <b>arc length</b> of this sector. Give it exactly, in terms of π.', msSectorSVG(r, th, { rLbl: msU(r, u), thLbl: th + '°' }));
    } else {
      msSetPiExact(2 * r, k, u);
      qData.workSteps = 'Arc = ' + th + '/360 × 2 × π × ' + r + ' = ' + msPiTxt(0, k) + '. Add the two radii: 2 × ' + r + ' = ' + (2 * r) + '.<br>Perimeter = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the <b>perimeter</b> of this sector. Give it exactly, in terms of π.', msSectorSVG(r, th, { rLbl: msU(r, u), thLbl: th + '°' }));
    }
    return;
  }
  if (level === 6){
    const r = msRoll(function(){
      const k = ri(3);
      if (k === 0){ const L = rr(6, 20), W = rr(3, Math.max(4, L - 2));
        const p = msPi2(function(P){ return 2 * L + W + P * W / 2; }); return p ? { k: 0, L: L, W: W, p: p } : null; }
      if (k === 1){ const L = rr(6, 20), W = rr(3, Math.max(4, L - 2));
        const p = msPi2(function(P){ return 2 * L + P * W; }); return p ? { k: 1, L: L, W: W, p: p } : null; }
      const s = rr(4, 16);
      const p = msPi2(function(P){ return 3 * s + P * s / 2; }); return p ? { k: 2, L: s, W: s, p: p } : null;
    });
    msSetPi2(r.p, u);
    const L = r.L, W = r.W;
    if (r.k === 0){
      const pts = [[0, 0]].concat(msArcPts(L, W / 2, W / 2, -90, 90)).concat([[0, W]]);
      qData.workSteps = 'Straight edges: ' + L + ' + ' + W + ' + ' + L + ' = ' + (2 * L + W) + '. Curve = ½ × π × ' + W + ' = ' + (Math.PI * W / 2).toFixed(4) + '…<br>Total = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This shape is a rectangle with a semicircle on one end. Find its perimeter, correct to two decimal places.',
        msShape({ pts: pts, lbl: [{ p: [0, 0], q: [L, 0], t: msU(L, u) }, { p: [0, W], q: [0, 0], t: msU(W, u) }], dashed: [[[L, 0], [L, W]]], rights: [{ v: [0, 0], a: [L, 0], b: [0, W] }] }));
    } else if (r.k === 1){
      const pts = [[0, 0], [L, 0]].concat(msArcPts(L, W / 2, W / 2, -90, 90).slice(1)).concat([[0, W]]).concat(msArcPts(0, W / 2, W / 2, 90, 270).slice(1, -1));
      qData.workSteps = 'Two straight sides: 2 × ' + L + ' = ' + (2 * L) + '. Two semicircles make one whole circle: π × ' + W + ' = ' + (Math.PI * W).toFixed(4) + '…<br>Total = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This running track is two straight sides joined by two semicircles. Find its perimeter, correct to two decimal places.',
        msShape({ pts: pts, lbl: [{ p: [0, 0], q: [L, 0], t: msU(L, u) }], dashed: [[[0, 0], [0, W]], [[L, 0], [L, W]]],
          texts: [{ at: [L / 2, W / 2], t: 'width ' + msU(W, u), size: 13 }], padX: 40 }));
    } else {
      const s = L, arc = msArcPts(s / 2, s, s / 2, 0, 180);
      const pts = [[0, 0], [s, 0]].concat(arc);
      qData.workSteps = 'Three straight sides: 3 × ' + s + ' = ' + (3 * s) + '. Curve = ½ × π × ' + s + ' = ' + (Math.PI * s / 2).toFixed(4) + '…<br>Total = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This shape is a square with a semicircle on top. Find its perimeter, correct to two decimal places.',
        msShape({ pts: pts, lbl: [{ p: [0, 0], q: [s, 0], t: msU(s, u) }], dashed: [[[0, s], [s, s]]],
          ticks: [{ p: [0, 0], q: [s, 0], n: 1 }, { p: [s, 0], q: [s, s], n: 1 }, { p: [0, s], q: [0, 0], n: 1 }], rights: [{ v: [0, 0], a: [s, 0], b: [0, s] }] }));
    }
    return;
  }
  /* Level 7 (Enrichment): the angle from a given arc length. */
  const r = rr(5, 20), th0 = rr(25, 300), arc = dp(th0 / 360 * 2 * Math.PI * r, 1);
  const ans = Math.round(arc * 360 / (2 * Math.PI * r));
  qData.ans = ans; qData.ansDisplay = ans + '°';
  qData.workSteps = 'The arc is θ/360 of the circumference. Circumference = 2 × π × ' + r + ' = ' + (2 * Math.PI * r).toFixed(3) + '…<br>θ = ' + msNum(arc) + ' ÷ ' + (2 * Math.PI * r).toFixed(3) + '… × 360 = ' + (arc * 360 / (2 * Math.PI * r)).toFixed(2) + ' ≈ <b>' + ans + '°</b>.';
  msQ(el, 'A sector has a radius of <b>' + msU(r, u) + '</b> and an arc length of <b>' + msU(arc, u) + '</b>. Find the angle at the centre, to the nearest degree.',
    msSectorSVG(r, ans, { rLbl: msU(r, u), thLbl: 'θ', arcLbl: msU(arc, u) }));
}

/* ═══ 5. UNITS OF AREA ════════════════════════════════════════════ */
const MS_AREA_OBJ = [
  ['the area of a pinhead', 'mm²'], ['the area of a grain of sand', 'mm²'], ['the area of a ladybird’s spot', 'mm²'],
  ['the area of a phone screen', 'cm²'], ['the area of a page in a book', 'cm²'], ['the area of a playing card', 'cm²'],
  ['the area of a bedroom floor', 'm²'], ['the area of a basketball court', 'm²'], ['the area of a classroom', 'm²'],
  ['the area of a farm', 'ha'], ['the area of a vineyard', 'ha'], ['the area of a golf course', 'ha'],
  ['the area of Victoria', 'km²'], ['the area of Port Phillip Bay', 'km²'], ['the area of Australia', 'km²']
];
const MS_AREA_OPTS = ['mm²', 'cm²', 'm²', 'hectares (ha)', 'km²'];
function msConvQ(el, pairs){
  const st = ffPick(pairs), big = st[0], small = st[1], f = st[2], down = Math.random() < 0.5;
  let bigVal;
  const k = ri(3);
  if (k === 0) bigVal = rr(2, 50);
  else if (k === 1) bigVal = dp(rr(11, 99) / 10, 1);
  else bigVal = (f >= 10000) ? dp(rr(1, 99) / 100, 2) : dp(rr(11, 99) / 10, 1);
  const smallVal = dp(bigVal * f, 6);
  if (down){
    qData.ans = smallVal; qData.ansDisplay = msNum(smallVal) + ' ' + small;
    qData.workSteps = '1 ' + big + ' = ' + msNum(f) + ' ' + small + '. Big unit → small unit, so multiply: ' + msNum(bigVal) + ' × ' + msNum(f) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Convert to ' + small + '.', '', '<span style="font-size:1.8rem;">' + msNum(bigVal) + ' ' + big + ' = ? ' + small + '</span>');
  } else {
    qData.ans = bigVal; qData.ansDisplay = msNum(bigVal) + ' ' + big;
    qData.workSteps = msNum(f) + ' ' + small + ' = 1 ' + big + '. Small unit → big unit, so divide: ' + msNum(smallVal) + ' ÷ ' + msNum(f) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Convert to ' + big + '.', '', '<span style="font-size:1.8rem;">' + msNum(smallVal) + ' ' + small + ' = ? ' + big + '</span>');
  }
}
function genMeasAreaUnits(el){
  if (level === 1){
    const o = ffPick(MS_AREA_OBJ);
    const right = MS_AREA_OPTS[['mm²', 'cm²', 'm²', 'ha', 'km²'].indexOf(o[1])];
    decSetChoice(el, '<div style="' + A_LBL + '">Which unit is the most sensible to measure</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.3rem;margin:14px 0;">' + o[0] + '?</div>', MS_AREA_OPTS, right, true);
    qData.workSteps = 'mm² for tiny things, cm² for things you hold, m² for rooms and courts, hectares for farms and parks, km² for whole regions. So <b>' + right + '</b>.';
    return;
  }
  if (level === 2) return msConvQ(el, [['cm²', 'mm²', 100], ['m²', 'cm²', 10000]]);
  return msConvQ(el, [['ha', 'm²', 10000], ['km²', 'ha', 100], ['km²', 'm²', 1000000]]);
}

/* ═══ 6. AREA OF RECTANGLES, PARALLELOGRAMS & TRIANGLES ═══════════ */
function msAreaRect(el, u){
  if (Math.random() < 0.3){
    const s = msLen(2, 20, 0.2);
    qData.ans = dp(s * s, 6); qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'A = s² = ' + msNum(s) + ' × ' + msNum(s) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this square.', msRectSVG(s, s, { b: msU(s, u) }, { square: true }));
    return;
  }
  let l = msLen(4, 20, 0.2), w = msLen(2, 14, 0.15);
  if (w > l) { const t = l; l = w; w = t; }
  if (l < w * 1.3) l = dp(w * 1.3 + rr(1, 4), 1);
  qData.ans = dp(l * w, 6); qData.ansDisplay = msU2(qData.ans, u);
  qData.workSteps = 'A = l × w = ' + msNum(l) + ' × ' + msNum(w) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'Find the area of this rectangle.', msRectSVG(l, w, { b: msU(l, u), r: msU(w, u) }));
}
function msAreaPara(el, u){
  const t = ffPick([[3, 4, 5], [4, 3, 5], [6, 8, 10], [8, 6, 10], [5, 12, 13], [12, 5, 13], [9, 12, 15], [12, 9, 15]]);
  const h = t[0], off = t[1], s = t[2], b = rr(Math.max(off + 2, h), Math.max(off + 3, Math.round(2.5 * h)));
  qData.ans = b * h; qData.ansDisplay = msU2(qData.ans, u);
  qData.workSteps = 'A = b × h, using the PERPENDICULAR height (the dashed line), not the slanted side of ' + s + ': ' + b + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'Find the area of this parallelogram.', msParaSVG(b, off, h, { base: msU(b, u), height: msU(h, u), slant: msU(s, u) }));
}
function msAreaTri(el, u){
  const k = ri(3);
  if (k === 0){
    const t = msTriple(16), b = t[0], h = t[1], hyp = t[2];
    qData.ans = dp(b * h / 2, 6); qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'In a right-angled triangle the two shorter sides are the base and the height. A = ½ × ' + b + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>. (The ' + hyp + ' is not needed.)';
    msQ(el, 'Find the area of this triangle.', msTriSVG(b, 0, h, { base: msU(b, u), height: msU(h, u), right: msU(hyp, u) }));
    return;
  }
  let b = rr(4, 20), h = rr(3, 16);
  if (k === 1){
    let ax, slant = null;
    const tr = MS_TRIPLES.concat(MS_TRIPLES.map(function(t){ return [t[1], t[0], t[2]]; }))
      .filter(function(t){ return t[0] >= 2 && t[0] <= 12 && t[1] >= 3 && t[1] <= 16; });
    if (Math.random() < 0.6){ const t = ffPick(tr); ax = t[0]; h = t[1]; slant = t[2]; b = rr(ax + 2, ax + 12); }
    else ax = dp(b * (0.25 + Math.random() * 0.5), 2);
    if ((b * h) % 2) b++;
    qData.ans = dp(b * h / 2, 6); qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'A = ½ × b × h = ½ × ' + b + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.' + (slant ? ' (The slanted side of ' + slant + ' is not needed.)' : '');
    msQ(el, 'Find the area of this triangle.', msTriSVG(b, ax, h, { base: msU(b, u), height: msU(h, u), left: slant ? msU(slant, u) : null }));
    return;
  }
  if ((b * h) % 2) b++;
  const ax = Math.random() < 0.5 ? b + dp(b * (0.2 + Math.random() * 0.4), 2) : -dp(b * (0.2 + Math.random() * 0.4), 2);
  qData.ans = dp(b * h / 2, 6); qData.ansDisplay = msU2(qData.ans, u);
  qData.workSteps = 'On an obtuse triangle the height falls OUTSIDE the shape, but it is still the height: A = ½ × ' + b + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'Find the area of this triangle.', msTriSVG(b, ax, h, { base: msU(b, u), height: msU(h, u) }));
}
function genMeasArea(el){
  const u = msUnit();
  if (level === 1) return msAreaRect(el, u);
  if (level === 2) return msAreaPara(el, u);
  if (level === 3) return msAreaTri(el, u);
  if (level === 4) return [msAreaRect, msAreaPara, msAreaTri][ri(3)](el, u);
  /* Level 5: convert first */
  const k = ri(4);
  if (k === 0){
    const a = rr(6, 19) * 5, b = dp(rr(11, 30) / 10, 1), A = dp(a / 100 * b, 6);
    qData.ans = A; qData.ansDisplay = msU2(A, 'm');
    qData.workSteps = 'Convert to metres first: ' + a + ' cm = ' + msNum(a / 100) + ' m. A = ' + msNum(a / 100) + ' × ' + msNum(b) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this rectangle in <b>m²</b>.', msRectSVG(b, a / 100, { b: msU(b, 'm'), r: msU(a, 'cm') }));
    return;
  }
  if (k === 1){
    const b = dp(rr(10, 20) / 10, 1), h = rr(5, 9) * 10, A = dp(b * h / 100 / 2, 6);   // kept readable: height at least a quarter of the base
    qData.ans = A; qData.ansDisplay = msU2(A, 'm');
    qData.workSteps = 'Convert to metres first: ' + h + ' cm = ' + msNum(h / 100) + ' m. A = ½ × ' + msNum(b) + ' × ' + msNum(h / 100) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this triangle in <b>m²</b>.', msTriSVG(b, b * 0.4, h / 100, { base: msU(b, 'm'), height: msU(h, 'cm') }));
    return;
  }
  if (k === 2){
    const s = dp(rr(2, 9) / 10, 1), cm = dp(s * 100, 6), A = dp(cm * cm, 6);
    qData.ans = A; qData.ansDisplay = msU2(A, 'cm');
    qData.workSteps = 'Convert to centimetres first: ' + msNum(s) + ' m = ' + msNum(cm) + ' cm. A = ' + msNum(cm) + ' × ' + msNum(cm) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this square in <b>cm²</b>.', msRectSVG(s, s, { b: msU(s, 'm') }, { square: true }));
    return;
  }
  const mm = rr(3, 12) * 10, cmv = dp(rr(15, 90) / 10, 1), A = dp(mm / 10 * cmv, 6);
  qData.ans = A; qData.ansDisplay = msU2(A, 'cm');
  qData.workSteps = 'Convert to centimetres first: ' + mm + ' mm = ' + msNum(mm / 10) + ' cm. A = ' + msNum(mm / 10) + ' × ' + msNum(cmv) + ' = <b>' + qData.ansDisplay + '</b>.';
  const l = Math.max(mm / 10, cmv), w = Math.min(mm / 10, cmv);
  msQ(el, 'Find the area of this rectangle in <b>cm²</b>.', msRectSVG(l, w, (l === mm / 10) ? { b: msU(mm, 'mm'), r: msU(cmv, 'cm') } : { b: msU(cmv, 'cm'), r: msU(mm, 'mm') }));
}

/* ═══ 7. MISSING LENGTH FROM AREA ═════════════════════════════════ */
function genMeasMissing(el){
  const u = msUnit();
  if (level === 1){
    let l, w;
    do { l = rr(4, 16); w = rr(2, 12); if (w > l) { const t = l; l = w; w = t; } } while (l < w * 1.3);
    const A = l * w, askL = Math.random() < 0.5;
    qData.ans = askL ? l : w; qData.ansDisplay = msU(qData.ans, u);
    qData.workSteps = 'A = l × w, so the missing side = ' + A + ' ÷ ' + (askL ? w : l) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The area of this rectangle is <b>' + msU2(A, u) + '</b>. Find the side marked ?.',
      msRectSVG(l, w, askL ? { b: '?', r: msU(w, u) } : { b: msU(l, u), r: '?' }));
    return;
  }
  if (level === 2){
    const s = rr(2, 20);
    qData.ans = s; qData.ansDisplay = msU(s, u);
    qData.workSteps = 'A square’s side is the square root of its area: √' + (s * s) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The area of this square is <b>' + msU2(s * s, u) + '</b>. Find its side length.', msRectSVG(s, s, { b: '?' }, { square: true }));
    return;
  }
  if (level === 3){
    const t = ffPick([[3, 4, 5], [4, 3, 5], [6, 8, 10], [8, 6, 10], [5, 12, 13], [12, 5, 13], [9, 12, 15]]);
    const h = t[0], off = t[1], b = rr(Math.max(off + 2, h), Math.max(off + 3, Math.round(2.5 * h))), A = b * h;
    qData.ans = h; qData.ansDisplay = msU(h, u);
    qData.workSteps = 'A = b × h, so h = ' + A + ' ÷ ' + b + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The area of this parallelogram is <b>' + msU2(A, u) + '</b>. Find the perpendicular height.', msParaSVG(b, off, h, { base: msU(b, u), height: '?' }));
    return;
  }
  let b = rr(4, 20), h = rr(3, 16);
  if ((b * h) % 2) h++;
  const A = b * h / 2, askH = Math.random() < 0.6, ax = dp(b * (0.3 + Math.random() * 0.4), 2);
  qData.ans = askH ? h : b; qData.ansDisplay = msU(qData.ans, u);
  qData.workSteps = 'A = ½ × b × h, so b × h = 2 × ' + A + ' = ' + (2 * A) + '. Then ' + (askH ? 'h = ' + (2 * A) + ' ÷ ' + b : 'b = ' + (2 * A) + ' ÷ ' + h) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'The area of this triangle is <b>' + msU2(A, u) + '</b>. Find the ' + (askH ? 'height' : 'base') + '.',
    msTriSVG(b, ax, h, { base: askH ? msU(b, u) : '?', height: askH ? '?' : msU(h, u) }));
}

/* ═══ 8. RHOMBUSES, KITES & TRAPEZIUMS (SEAL) ═════════════════════ */
function msKiteSVG(x, p, q, o){
  /* horizontal diagonal x (bisected), vertical diagonal p above + q below the crossing */
  o = o || {};
  const P = [[0, -q], [x / 2, 0], [0, p], [-x / 2, 0]];
  const extra = function(F){
    const X = F.P([-x / 4, 0]), Y = F.P([0, -q / 2]);
    return msText(X[0], X[1] - 7, 'x', { col: 'var(--accent)' }) + msText(Y[0] + 11, Y[1] + 5, 'y', { col: 'var(--accent)' });
  };
  return msShape({ pts: P, dashed: [[[-x / 2, 0], [x / 2, 0]], [[0, -q], [0, p]]], rights: [{ v: [0, 0], a: [x / 2, 0], b: [0, p] }], extra: extra });
}
function msTrapSVG(a, b, h, off, o){
  o = o || {};
  const P = [[0, 0], [b, 0], [off + a, h], [off, h]];
  return msShape({ pts: P, lbl: [{ p: P[0], q: P[1], t: o.b }, { p: P[2], q: P[3], t: o.a }], dashed: [[[off, h], [off, 0]]],
    rights: [{ v: [off, 0], a: P[1], b: [off, h] }], side: [{ p: [off, 0], q: [off, h], t: o.h, side: 1 }], frame: [[off, 0]] });
}
function genMeasQuad(el){
  const u = msUnit();
  if (level === 1){
    const rh = Math.random() < 0.5;
    let x = rr(4, 20), y = rr(4, 20);
    if (x === y) y += 2;
    if ((x * y) % 2) x++;
    const p = rh ? y / 2 : dp(y * (0.25 + Math.random() * 0.15), 2), q = y - p;
    qData.ans = x * y / 2; qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'A = ½ × x × y, using the two diagonals: ½ × ' + x + ' × ' + y + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this ' + (rh ? 'rhombus' : 'kite') + '. The dashed lines are its diagonals.', msKiteSVG(x, p, q), 'x = ' + msU(x, u) + '&nbsp;&nbsp;&nbsp;y = ' + msU(y, u));
    return;
  }
  if (level === 2){
    let a = rr(3, 14), b = a + rr(3, 12), h = rr(Math.max(3, Math.ceil(b / 3)), Math.max(6, Math.ceil(b / 3) + 6));
    if (((a + b) * h) % 2) h++;
    const off = dp((b - a) * (0.3 + Math.random() * 0.4), 2);
    qData.ans = (a + b) * h / 2; qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'A = ½ × (a + b) × h = ½ × (' + a + ' + ' + b + ') × ' + h + ' = ½ × ' + (a + b) + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this trapezium.', msTrapSVG(a, b, h, off, { a: msU(a, u), b: msU(b, u), h: msU(h, u) }));
    return;
  }
  if (Math.random() < 0.5){
    let a = rr(3, 14), b = a + rr(3, 12), h = rr(Math.max(3, Math.ceil(b / 3)), Math.max(6, Math.ceil(b / 3) + 6));
    if (((a + b) * h) % 2) h++;
    const A = (a + b) * h / 2, off = dp((b - a) * (0.3 + Math.random() * 0.4), 2);
    qData.ans = h; qData.ansDisplay = msU(h, u);
    qData.workSteps = 'A = ½ × (a + b) × h, so ' + A + ' = ½ × ' + (a + b) + ' × h = ' + msNum((a + b) / 2) + ' × h.<br>h = ' + A + ' ÷ ' + msNum((a + b) / 2) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The area of this trapezium is <b>' + msU2(A, u) + '</b>. Find its height.', msTrapSVG(a, b, h, off, { a: msU(a, u), b: msU(b, u), h: '?' }));
    return;
  }
  const rh = Math.random() < 0.5;
  let x = rr(4, 20), y = rr(4, 20);
  if (x === y) y += 2;
  if ((x * y) % 2) x++;
  const A = x * y / 2, p = rh ? y / 2 : dp(y * 0.32, 2), q = y - p, askY = Math.random() < 0.5;
  qData.ans = askY ? y : x; qData.ansDisplay = msU(qData.ans, u);
  qData.workSteps = 'A = ½ × x × y, so x × y = 2 × ' + A + ' = ' + (2 * A) + '. The missing diagonal = ' + (2 * A) + ' ÷ ' + (askY ? x : y) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'The area of this ' + (rh ? 'rhombus' : 'kite') + ' is <b>' + msU2(A, u) + '</b>. Find the diagonal marked ?.',
    msKiteSVG(x, p, q), askY ? 'x = ' + msU(x, u) + '&nbsp;&nbsp;&nbsp;y = ?' : 'x = ?&nbsp;&nbsp;&nbsp;y = ' + msU(y, u));
}

/* ═══ 9. AREA OF CIRCLES & SECTORS (SEAL) ═════════════════════════ */
function genMeasCircArea(el){
  const u = msUnit();
  if (level === 1){
    const r = rr(2, 15), useD = Math.random() < 0.4;
    msSetPiExact(0, r * r, u + '²');
    qData.workSteps = (useD ? 'Halve the diameter first: r = ' + (2 * r) + ' ÷ 2 = ' + r + '. ' : '') + 'A = πr² = π × ' + r + '² = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this circle. Give your answer <b>exactly</b>, in terms of π.',
      msCircleSVG(r, { kind: useD ? 'diameter' : 'radius', lbl: msU(useD ? 2 * r : r, u), fill: true }));
    return;
  }
  if (level === 2){
    const r = msRoll(function(){
      const useD = Math.random() < 0.4, v = msLen(2, useD ? 30 : 15, 0.3), rad = useD ? v / 2 : v;
      const p = msPi2(function(P){ return P * rad * rad; });
      return p ? { useD: useD, v: v, rad: rad, p: p } : null;
    });
    msSetPi2(r.p, u + '²');
    qData.workSteps = (r.useD ? 'r = ' + msNum(r.v) + ' ÷ 2 = ' + msNum(r.rad) + '. ' : '') + 'A = π × ' + msNum(r.rad) + '² = ' + (Math.PI * r.rad * r.rad).toFixed(4) + '… = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this circle, correct to <b>two decimal places</b>.', msCircleSVG(r.v, { kind: r.useD ? 'diameter' : 'radius', lbl: msU(r.v, u), fill: true }));
    return;
  }
  if (level === 3){
    const r = rr(1, 8) * 2;
    if (Math.random() < 0.5){
      msSetPiExact(0, r * r / 2, u + '²');
      const useD = Math.random() < 0.5;
      qData.workSteps = (useD ? 'r = ' + (2 * r) + ' ÷ 2 = ' + r + '. ' : '') + 'Half a circle: ½ × π × ' + r + '² = ½ × ' + (r * r) + 'π = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the area of this semicircle. Give it exactly, in terms of π.', msSemiSVG(r, useD ? { dLbl: msU(2 * r, u), fill: true } : { rLbl: msU(r, u), fill: true }));
    } else {
      msSetPiExact(0, r * r / 4, u + '²');
      qData.workSteps = 'A quarter of a circle: ¼ × π × ' + r + '² = ¼ × ' + (r * r) + 'π = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the area of this quadrant. Give it exactly, in terms of π.', msQuadSVG(r, { rLbl: msU(r, u), fill: true }));
    }
    return;
  }
  if (level === 4){
    const pr = msSectorPair(function(th, r){ return (th * r * r) % 360 === 0 && r <= 15; });
    const th = pr[0], r = pr[1];
    msSetPiExact(0, th * r * r / 360, u + '²');
    qData.workSteps = 'A = ' + th + '/360 × π × ' + r + '² = ' + th + '/360 × ' + (r * r) + 'π = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this sector. Give it exactly, in terms of π.', msSectorSVG(r, th, { rLbl: msU(r, u), thLbl: th + '°', fill: true }));
    return;
  }
  if (level === 5){
    const r = rr(2, 15), askD = Math.random() < 0.4;
    qData.ans = askD ? 2 * r : r; qData.ansDisplay = msU(qData.ans, u);
    qData.workSteps = 'A = πr², so r² = ' + (r * r) + ' and r = √' + (r * r) + ' = ' + r + (askD ? '. The diameter is 2 × ' + r + ' = <b>' + qData.ansDisplay + '</b>.' : '. So r = <b>' + qData.ansDisplay + '</b>.');
    msQ(el, 'A circle has an area of <b>' + (r * r) + 'π ' + u + '²</b>. Find its <b>' + (askD ? 'diameter' : 'radius') + '</b>.', msCircleSVG(1, { kind: 'plain', inside: 'A = ' + (r * r) + 'π ' + u + '²', fill: true }));
    return;
  }
  if (level === 6){
    const r = rr(5, 20), th0 = rr(25, 320), A = dp(th0 / 360 * Math.PI * r * r, 1);
    const ans = Math.round(A * 360 / (Math.PI * r * r));
    qData.ans = ans; qData.ansDisplay = ans + '°';
    qData.workSteps = 'The whole circle is π × ' + r + '² = ' + (Math.PI * r * r).toFixed(3) + '…<br>θ = ' + msNum(A) + ' ÷ ' + (Math.PI * r * r).toFixed(3) + '… × 360 = ' + (A * 360 / (Math.PI * r * r)).toFixed(2) + ' ≈ <b>' + ans + '°</b>.';
    msQ(el, 'A sector of radius <b>' + msU(r, u) + '</b> has an area of <b>' + msU2(A, u) + '</b>. Find the angle at the centre, to the nearest degree.',
      msSectorSVG(r, ans, { rLbl: msU(r, u), thLbl: 'θ', fill: true }));
    return;
  }
  /* Level 7 (Enrichment): the square with the same area as a circle. */
  const r = msRoll(function(){
    const rad = rr(2, 15), p = msPi2(function(P){ return Math.sqrt(P * rad * rad); });
    return p ? { rad: rad, p: p } : null;
  });
  msSetPi2(r.p, u);
  qData.workSteps = 'Circle: A = π × ' + r.rad + '² = ' + (Math.PI * r.rad * r.rad).toFixed(4) + '…<br>Square side = √' + (Math.PI * r.rad * r.rad).toFixed(4) + '… = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'A circle of radius <b>' + msU(r.rad, u) + '</b> and a square have the same area. Find the side length of the square, correct to two decimal places.', '');
}

/* ═══ 10. COMPOSITE AREA ══════════════════════════════════════════ */
function genMeasComposite(el){
  const u = msUnit();
  if (level === 1){
    const W = rr(8, 18), H = rr(6, 14), w1 = rr(2, W - 3), h1 = rr(2, H - 3);
    const S = msLShape(W, H, w1, h1, Math.random() < 0.5);
    const A = W * h1 + w1 * (H - h1);
    qData.ans = A; qData.ansDisplay = msU2(A, u);
    qData.workSteps = 'The missing height of the top part is ' + H + ' − ' + h1 + ' = ' + (H - h1) + '.<br>Split it with a line across: a ' + W + ' × ' + h1 + ' rectangle (' + (W * h1) + ') and a ' + w1 + ' × ' + (H - h1) + ' rectangle (' + (w1 * (H - h1)) + ').<br>' + (W * h1) + ' + ' + (w1 * (H - h1)) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this shape. Every corner is a right angle.', msShape({ pts: S.P, fill: true,
      lbl: [{ p: S.bottom[0], q: S.bottom[1], t: msU(W, u) }, { p: S.left[0], q: S.left[1], t: msU(H, u) }, { p: S.top[0], q: S.top[1], t: msU(w1, u) },
            { p: S.right[0], q: S.right[1], t: msU(h1, u) }] }));
    return;
  }
  if (level === 2){
    const k = ri(3);
    if (k === 0){
      const W = rr(10, 18), H = rr(8, 14), w = rr(2, W - 6), h = rr(2, H - 5);
      const x0 = dp((W - w) * (0.35 + Math.random() * 0.3), 2), y0 = dp((H - h) * (0.35 + Math.random() * 0.3), 2);
      const hole = [[x0, y0], [x0 + w, y0], [x0 + w, y0 + h], [x0, y0 + h]];
      qData.ans = W * H - w * h; qData.ansDisplay = msU2(qData.ans, u);
      qData.workSteps = 'Whole rectangle: ' + W + ' × ' + H + ' = ' + (W * H) + '. Hole: ' + w + ' × ' + h + ' = ' + (w * h) + '.<br>' + (W * H) + ' − ' + (w * h) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'A ' + msU(w, u) + ' by ' + msU(h, u) + ' rectangle is cut out of the middle. Find the shaded area that is left.', msShape({ pts: [[0, 0], [W, 0], [W, H], [0, H]], holes: [hole], fill: true,
        lbl: [{ p: [0, 0], q: [W, 0], t: msU(W, u) }, { p: [W, 0], q: [W, H], t: msU(H, u) }] }));
      return;
    }
    if (k === 1){
      const L = rr(6, 16), W = rr(4, 10), p = ffPick([1, 1, 2, 1.5, 0.5]);
      const A = dp((L + 2 * p) * (W + 2 * p) - L * W, 6);
      qData.ans = A; qData.ansDisplay = msU2(A, 'm');
      const pool = [[p, p], [p + L, p], [p + L, p + W], [p, p + W]];
      qData.workSteps = 'Outside rectangle: (' + L + ' + 2 × ' + msNum(p) + ') × (' + W + ' + 2 × ' + msNum(p) + ') = ' + msNum(L + 2 * p) + ' × ' + msNum(W + 2 * p) + ' = ' + msNum((L + 2 * p) * (W + 2 * p)) + '.<br>Pool: ' + L + ' × ' + W + ' = ' + (L * W) + '. Path = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'A ' + L + ' m by ' + W + ' m pool is surrounded by a path <b>' + msNum(p) + ' m</b> wide. Find the area of the path (shaded).', msShape({
        pts: [[0, 0], [L + 2 * p, 0], [L + 2 * p, W + 2 * p], [0, W + 2 * p]], holes: [pool], fill: true,
        texts: [{ at: [p + L / 2, p + W / 2], t: 'pool', size: 13, col: 'var(--muted)' }] }));
      return;
    }
    const W = rr(8, 18), H = rr(6, 14), cw = rr(2, W - 3), ch = rr(2, H - 3);
    const S = msLShape(W, H, W - cw, H - ch, Math.random() < 0.5);
    qData.ans = W * H - cw * ch; qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'Fill in the missing corner to make a ' + W + ' × ' + H + ' rectangle (' + (W * H) + '), then take the corner away: ' + cw + ' × ' + ch + ' = ' + (cw * ch) + '.<br>' + (W * H) + ' − ' + (cw * ch) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the area of this shape by subtracting the missing corner.', msShape({ pts: S.P, fill: true,
      lbl: [{ p: S.bottom[0], q: S.bottom[1], t: msU(W, u) }, { p: S.left[0], q: S.left[1], t: msU(H, u) },
            { p: S.stepH[0], q: S.stepH[1], t: msU(cw, u) }, { p: S.stepV[0], q: S.stepV[1], t: msU(ch, u) }] }));
    return;
  }
  if (level === 3){
    if (Math.random() < 0.55){
      let W = rr(4, 16), H = rr(3, 12), t = rr(2, 8);
      if ((W * t) % 2) t++;
      const P = [[0, 0], [W, 0], [W, H], [W / 2, H + t], [0, H]];
      qData.ans = W * H + W * t / 2; qData.ansDisplay = msU2(qData.ans, u);
      qData.workSteps = 'Rectangle: ' + W + ' × ' + H + ' = ' + (W * H) + '. Triangle: ½ × ' + W + ' × ' + t + ' = ' + (W * t / 2) + '.<br>' + (W * H) + ' + ' + (W * t / 2) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This shape is a rectangle with a triangle on top. Find its area.', msShape({ pts: P, fill: true, dashed: [[[0, H], [W, H]], [[W / 2, H + t], [W / 2, H]]],
        lbl: [{ p: P[0], q: P[1], t: msU(W, u) }, { p: P[1], q: P[2], t: msU(H, u) }],
        side: [{ p: [W / 2, H], q: [W / 2, H + t * 0.55], t: msU(t, u), side: 1 }], rights: [{ v: [0, 0], a: P[1], b: P[4] }] }));
      return;
    }
    let W = rr(4, 14), H = rr(3, 10), b = rr(2, 8);
    if ((b * H) % 2) b++;
    const P = [[0, 0], [W + b, 0], [W, H], [0, H]];
    qData.ans = W * H + b * H / 2; qData.ansDisplay = msU2(qData.ans, u);
    qData.workSteps = 'Rectangle: ' + W + ' × ' + H + ' = ' + (W * H) + '. Triangle: ½ × ' + b + ' × ' + H + ' = ' + (b * H / 2) + '.<br>' + (W * H) + ' + ' + (b * H / 2) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This shape is a rectangle with a right-angled triangle joined on. Find its area.', msShape({ pts: P, fill: true, dashed: [[[W, 0], [W, H]]],
      lbl: [{ p: P[3], q: P[0], t: msU(H, u) }, { p: P[2], q: P[3], t: msU(W, u) }],
      side: [{ p: [W + b, 0], q: [W, 0], t: msU(b, u), side: -1 }], rights: [{ v: [0, 0], a: P[1], b: P[3] }, { v: [W, 0], a: [W + b, 0], b: [W, H] }] }));
    return;
  }
  /* Level 4: with circle parts, 2 d.p. */
  const r = msRoll(function(){
    const k = ri(3);
    if (k === 0){ const L = rr(6, 16), W = rr(2, 6) * 2;
      const p = msPi2(function(P){ return L * W + P * (W / 2) * (W / 2) / 2; }); return p ? { k: 0, L: L, W: W, p: p } : null; }
    if (k === 1){ const L = rr(8, 18), W = rr(6, 12), rad = rr(1, Math.floor(Math.min(L, W) / 2) - 1);
      const p = msPi2(function(P){ return L * W - P * rad * rad; }); return p ? { k: 1, L: L, W: W, rad: rad, p: p } : null; }
    const s = rr(4, 16);
    const p = msPi2(function(P){ return s * s - P * s * s / 4; }); return p ? { k: 2, L: s, W: s, p: p } : null;
  });
  msSetPi2(r.p, u + '²');
  const L = r.L, W = r.W;
  if (r.k === 0){
    const pts = [[0, 0]].concat(msArcPts(L, W / 2, W / 2, -90, 90)).concat([[0, W]]);
    qData.workSteps = 'Rectangle: ' + L + ' × ' + W + ' = ' + (L * W) + '. Semicircle: radius ' + (W / 2) + ', ½ × π × ' + (W / 2) + '² = ' + (Math.PI * W * W / 8).toFixed(4) + '…<br>Total = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This shape is a rectangle with a semicircle on one end. Find its area, correct to two decimal places.',
      msShape({ pts: pts, fill: true, lbl: [{ p: [0, 0], q: [L, 0], t: msU(L, u) }, { p: [0, W], q: [0, 0], t: msU(W, u) }], dashed: [[[L, 0], [L, W]]], rights: [{ v: [0, 0], a: [L, 0], b: [0, W] }] }));
  } else if (r.k === 1){
    const cx = L / 2, cy = W / 2, hole = msArcPts(cx, cy, r.rad, 0, 360, 48);
    qData.workSteps = 'Rectangle: ' + L + ' × ' + W + ' = ' + (L * W) + '. Hole: π × ' + r.rad + '² = ' + (Math.PI * r.rad * r.rad).toFixed(4) + '…<br>' + (L * W) + ' − ' + (Math.PI * r.rad * r.rad).toFixed(4) + '… = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A circular hole of radius <b>' + msU(r.rad, u) + '</b> is cut out of this rectangle. Find the shaded area left, correct to two decimal places.',
      msShape({ pts: [[0, 0], [L, 0], [L, W], [0, W]], holes: [hole], fill: true, lbl: [{ p: [0, 0], q: [L, 0], t: msU(L, u) }, { p: [L, 0], q: [L, W], t: msU(W, u) }] }));
  } else {
    const s = L;
    /* the shaded region: the square minus a quadrant centred on its top-left corner */
    const q = msArcPts(0, s, s, -90, 0);       // (0, 0) round to (s, s)
    const region = [[s, 0]].concat(q.slice().reverse());
    qData.workSteps = 'Square: ' + s + ' × ' + s + ' = ' + (s * s) + '. Quadrant: ¼ × π × ' + s + '² = ' + (Math.PI * s * s / 4).toFixed(4) + '…<br>' + (s * s) + ' − ' + (Math.PI * s * s / 4).toFixed(4) + '… = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A quadrant of radius <b>' + msU(s, u) + '</b> is cut from a corner of this square. Find the shaded area left, correct to two decimal places.',
      msShape({ pts: region, fill: true, lines: [[[0, 0], [s, 0]], [[0, 0], [0, s]], [[0, s], [s, s]]],
        frame: [[0, 0], [0, s]], dots: [[0, s]], lbl: [{ p: [s, 0], q: [s, s], t: msU(s, u) }] }));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v103 · 📏 MEASUREMENT · RELEASE B · 8 skills · 47 levels
   -------------------------------------------------------------------
   Surface area, volume and capacity. Built from the 7MAT Measurement
   booklet (Lesson 5) and the 7MAS SEAL booklet (Lessons 3 to 5).
   Challenge questions are not assessed and are not built. Enrichment
   items, and SEAL's filling and pouring problems, are built as the LAST
   levels of their skill and kept out of every ALT (Laura, 4 Oct).

   The Release A rules carry over unchanged: every solid is drawn to its
   own labels (one uniform scale; the depth axis is drawn at half scale,
   the usual oblique convention, so a cube still looks like a cube), exact
   means in terms of π, a rounded circle answer means the π key and never
   3.14 (every such question is re-rolled until 3.14 gives a different
   answer), and the numbers are constructed so the answers are clean.
═══════════════════════════════════════════════════════════════════ */

MEAS_SKILLS.push('measSA', 'measSACyl', 'measVolUnits', 'measVolRect', 'measVolPrism',
                 'measVolCyl', 'measCap', 'measCompSolid');

function msU3(v, u){ return msNum(v) + ' ' + u + '³'; }
function msMoney(v){ return '$' + (Math.abs(v - Math.round(v)) < 1e-9 ? msNum(Math.round(v)) : Number(v).toFixed(2)); }
/* one decimal place with the π key, re-rolled when 3.14 gives the same answer */
function msPi1(fn){
  const a = dp(fn(Math.PI), 1), b = dp(fn(3.14), 1);
  return (Math.abs(a - b) < 0.051) ? null : { ans: a, alt: b };
}
function msSetPi1(v, unitTxt){
  qData.ans = v.ans; qData.ansTol = 0.05; qData.pi314 = v.alt;
  qData.ansDisplay = msNum(v.ans) + (unitTxt ? ' ' + unitTxt : '');
}

/* ═══ 3D drawing toolkit ═════════════════════════════════════════════
   A prism is its FRONT FACE (a polygon in math coordinates, y up) pushed
   back by its depth. The depth runs up and to the right at 35°, drawn at
   half scale. A side face is visible when its outward normal points the
   same way as the depth, which decides which back edges are solid and
   which are dashed. Curved parts of a front face (a half cylinder on top
   of a block, a cylinder lying down) are just many points flagged
   "smooth": they get a side line only where the outline turns away.   */
const MS3_K = 0.5, MS3_A = 35 * Math.PI / 180;
/* labels on a solid often sit over a dashed hidden edge, so they get a halo */
function ms3Halo(svg){ return svg.replace(/<text /g, '<text stroke="var(--surface, #fff)" stroke-width="4" stroke-linejoin="round" paint-order="stroke" '); }
function ms3Off(depth){ return [depth * MS3_K * Math.cos(MS3_A), depth * MS3_K * Math.sin(MS3_A)]; }
function ms3P(x, y, z){ const d = ms3Off(z); return [x + d[0], y + d[1]]; }

function msPrismSVG(poly, depth, o){
  o = o || {};
  const W = o.W || 300, H = o.H || 200;
  let P = poly.slice(), smooth = (o.smooth || []).slice();
  if (msArea2(P) < 0) { P.reverse(); smooth.reverse(); }
  const n = P.length, d = ms3Off(depth);
  const B = P.map(function(p){ return [p[0] + d[0], p[1] + d[1]]; });
  const vis = P.map(function(p, i){
    const q = P[(i + 1) % n], nx = q[1] - p[1], ny = -(q[0] - p[0]);
    return nx * d[0] + ny * d[1] > 1e-9;
  });
  const all = P.concat(B).concat(o.frame || []);
  const F = msFit(all, W, H, o.padX || 60, o.padY || 26);
  const conn = function(i){
    const a = vis[(i - 1 + n) % n], b = vis[i];
    if (smooth[i]) return (a !== b) ? 'vis' : null;
    return (a || b) ? 'vis' : 'hid';
  };
  let s = '';
  /* fills first: the visible side faces (lightly shaded) and the front face */
  for (let i = 0; i < n; i++){
    if (!vis[i]) continue;
    const j = (i + 1) % n;
    s += '<path d="' + msPath(F, [P[i], P[j], B[j], B[i]]) + '" fill="' + (o.fill ? 'var(--accent)' : 'var(--surface, #fff)')
      + '" fill-opacity="' + (o.fill ? '0.10' : '1') + '" stroke="none"/>';
  }
  s += '<path d="' + msPath(F, P) + '" fill="' + (o.fill || o.frontFill ? 'var(--accent)' : 'var(--surface, #fff)') + '" fill-opacity="'
    + (o.frontFill ? '0.32' : o.fill ? '0.20' : '1') + '" stroke="none"/>';
  /* then the hidden edges, dashed, showing through */
  if (!o.noHidden) for (let i = 0; i < n; i++){
    if (!vis[i]) s += msLine(F, B[i], B[(i + 1) % n], { dash: true, w: 1.5 });
    if (conn(i) === 'hid') s += msLine(F, P[i], B[i], { dash: true, w: 1.5 });
  }
  /* then every visible edge, and the front outline on top */
  for (let i = 0; i < n; i++){
    if (vis[i]) s += msLine(F, B[i], B[(i + 1) % n], { w: 2.2 });
    if (conn(i) === 'vis') s += msLine(F, P[i], B[i], { w: 2.2 });
  }
  s += '<path d="' + msPath(F, P) + '" fill="none" stroke="var(--text)" stroke-width="2.5" stroke-linejoin="round"/>';
  (o.holes || []).forEach(function(h){ s += '<path d="' + msPath(F, h) + '" fill="var(--surface, #fff)" stroke="var(--text)" stroke-width="2.2"/>'; });
  (o.lines || []).forEach(function(l){ s += msLine(F, l[0], l[1], { w: l[2] || 1.2 }); });
  (o.dashed || []).forEach(function(l){ s += msLine(F, l[0], l[1], { dash: true, w: 1.8 }); });
  (o.rights || []).forEach(function(r){ s += msRight(F, r.v, r.a, r.b); });
  (o.ticks || []).forEach(function(t){ s += msTick(F, t.p, t.q, t.n); });
  const ccw = true;
  (o.lbl || []).forEach(function(l){ s += msEdgeLbl(F, l.p, l.q, l.t, ccw, l.inward, l.col); });
  (o.side || []).forEach(function(l){ s += msSideLbl(F, l.p, l.q, l.t, l.side, l.col); });
  (o.texts || []).forEach(function(c){ const Q = F.P(c.at); s += msText(Q[0], Q[1] + 5, c.t, { col: c.col, size: c.size }); });
  if (o.depthLbl){
    /* on the visible side line that sits lowest and furthest right */
    let best = -1, score = -Infinity;
    for (let i = 0; i < n; i++){
      if (conn(i) !== 'vis' || smooth[i]) continue;
      const sc = P[i][0] - P[i][1] * 1.01;
      if (sc > score) { score = sc; best = i; }
    }
    if (best < 0) best = 0;
    const a = F.P(P[best]), b = F.P(B[best]);
    const dx = b[0] - a[0], dy = b[1] - a[1];
    const side = ((-dy) + dx) > 0 ? 1 : -1;   /* the normal that points right and down */
    s += msSideLbl(F, P[best], B[best], o.depthLbl, side, o.depthCol);
  }
  if (o.extra) s += o.extra(F);
  return '<svg viewBox="0 0 ' + W + ' ' + H + '" style="width:100%;max-width:' + (o.maxW || 330)
    + 'px;display:block;margin:6px auto;">' + ms3Halo(s) + '</svg>';
}

/* A rectangular prism l (across) × h (up) × w (deep). lab: {l, h, w} label text. */
function msBoxSVG(l, h, w, lab, o){
  o = o || {};
  lab = lab || {};
  const P = [[0, 0], [l, 0], [l, h], [0, h]];
  const lb = [];
  if (lab.l) lb.push({ p: P[0], q: P[1], t: lab.l });
  if (lab.h) lb.push({ p: P[3], q: P[0], t: lab.h });
  return msPrismSVG(P, w, Object.assign({ lbl: lb, depthLbl: lab.w }, o));
}
/* A solid block of unit cubes, every cube edge drawn on the three faces you can see. */
function msBlockSVG(l, h, w){
  const lines = [];
  for (let i = 1; i < l; i++){ lines.push([[i, 0], [i, h]]); lines.push([[i, h], ms3P(i, h, w)]); }
  for (let j = 1; j < h; j++){ lines.push([[0, j], [l, j]]); lines.push([[l, j], ms3P(l, j, w)]); }
  for (let k = 1; k < w; k++){ lines.push([ms3P(0, h, k), ms3P(l, h, k)]); lines.push([ms3P(l, 0, k), ms3P(l, h, k)]); }
  return msPrismSVG([[0, 0], [l, 0], [l, h], [0, h]], w, { lines: lines, fill: true, padX: 40, noHidden: true });
}
/* An upright cylinder of radius r and height h. o: rLbl | dLbl, hLbl, fill. */
function msCylSVG(r, h, o){
  o = o || {};
  const ry = r * 0.3, W = 300, H = o.H || 210;
  const ell = function(cy, a0, a1){ const out = []; for (let i = 0; i <= 48; i++){ const t = (a0 + (a1 - a0) * i / 48) * Math.PI / 180; out.push([r * Math.cos(t), cy + ry * Math.sin(t)]); } return out; };
  const F = msFit([[-r, -ry], [r, h + ry]], W, H, o.padX || 70, 22);
  const outline = ell(0, 180, 360).concat(ell(h, 0, 180));
  let s = '<path d="' + msPath(F, outline) + '" fill="' + (o.fill ? 'var(--accent)' : 'none') + '" fill-opacity="0.18" stroke="none"/>';
  s += '<path d="' + msPath(F, ell(0, 0, 180), false) + '" fill="none" stroke="var(--text)" stroke-width="1.5" stroke-dasharray="6 4"/>';
  s += '<path d="' + msPath(F, ell(0, 180, 360), false) + '" fill="none" stroke="var(--text)" stroke-width="2.5"/>';
  s += msLine(F, [-r, 0], [-r, h], { w: 2.5 }) + msLine(F, [r, 0], [r, h], { w: 2.5 });
  s += '<path d="' + msPath(F, ell(h, 0, 360)) + '" fill="' + (o.fill ? 'var(--accent)' : 'var(--surface, #fff)') + '" fill-opacity="'
    + (o.fill ? '0.30' : '1') + '" stroke="var(--text)" stroke-width="2.5"/>';
  const C = F.P([0, h]);
  s += '<circle cx="' + C[0].toFixed(1) + '" cy="' + C[1].toFixed(1) + '" r="3" fill="var(--text)"/>';
  if (o.rLbl){
    s += msLine(F, [0, h], [r, h], { w: 2 });
    const M = F.P([r / 2, h + ry]);
    s += msText(M[0], M[1] - 7, o.rLbl);
  }
  if (o.dLbl){
    s += msLine(F, [-r, h], [r, h], { w: 2 });
    const M = F.P([0, h + ry]);
    s += msText(M[0], M[1] - 7, o.dLbl);
  }
  if (o.hLbl) s += msSideLbl(F, [r, 0], [r, h], o.hLbl, 1);
  if (o.inside) { const M = F.P([0, h / 2]); s += msText(M[0], M[1], o.inside, { size: 13 }); }
  return '<svg viewBox="0 0 ' + W + ' ' + H + '" style="width:100%;max-width:' + (o.maxW || 300)
    + 'px;display:block;margin:6px auto;">' + ms3Halo(s) + '</svg>';
}
/* front-face helpers */
function msSemiTop(l, h, n){
  /* a rectangle l × h with a semicircle of diameter l on top; returns {pts, smooth} */
  const r = l / 2, pts = [[0, 0], [l, 0], [l, h]], sm = [false, false, false];
  for (let i = 1; i < (n || 24); i++){ const t = Math.PI * i / (n || 24); pts.push([r + r * Math.cos(t), h + r * Math.sin(t)]); sm.push(true); }
  pts.push([0, h]); sm.push(false);
  return { pts: pts, smooth: sm };
}

/* ═══ the Release B dispatcher (genMeas hands over to it) ═══════════ */
function genMeas3D(el){
  el.style.fontSize = '1.05rem';
  if (skill === 'measSA')        return genMeasSA(el);
  if (skill === 'measSACyl')     return genMeasSACyl(el);
  if (skill === 'measVolUnits')  return genMeasVolUnits(el);
  if (skill === 'measVolRect')   return genMeasVolRect(el);
  if (skill === 'measVolPrism')  return genMeasVolPrism(el);
  if (skill === 'measVolCyl')    return genMeasVolCyl(el);
  if (skill === 'measCap')       return genMeasCap(el);
  if (skill === 'measCompSolid') return genMeasCompSolid(el);
}
/* three different whole numbers in the given ranges */
function msDims3(a, b, c){
  let x, y, z, g = 0;
  do { x = rr(a[0], a[1]); y = rr(b[0], b[1]); z = rr(c[0], c[1]); } while ((x === y || y === z || x === z) && g++ < 100);
  return [x, y, z];
}
/* a right-angled triangle from a Pythagorean triple, longer leg as the base */
const MS3_TRIPLES = [[3, 4, 5], [6, 8, 10], [5, 12, 13], [9, 12, 15], [8, 15, 17], [12, 16, 20]];
function msRightTri(maxLeg){
  const t = ffPick(MS3_TRIPLES.filter(function(x){ return x[1] <= (maxLeg || 99); }));
  return { b: Math.max(t[0], t[1]), h: Math.min(t[0], t[1]), c: t[2] };
}
function msRightPrismSVG(T, L, lab){
  const P = [[0, 0], [T.b, 0], [0, T.h]], lb = [];
  if (lab.b) lb.push({ p: P[0], q: P[1], t: lab.b });
  if (lab.h) lb.push({ p: P[2], q: P[0], t: lab.h });
  if (lab.c) lb.push({ p: P[1], q: P[2], t: lab.c });
  return msPrismSVG(P, L, { lbl: lb, depthLbl: lab.L, rights: [{ v: P[0], a: P[1], b: P[2] }] });
}
/* isosceles triangle (a tent): base 2·off, height h, slant c */
function msTentSVG(off, h, L, lab){
  const P = [[0, 0], [2 * off, 0], [off, h]], lb = [], side = [];
  if (lab.b) lb.push({ p: P[0], q: P[1], t: lab.b });
  if (lab.c) lb.push({ p: P[2], q: P[0], t: lab.c });
  if (lab.h) side.push({ p: [off, 0], q: [off, h], t: lab.h, side: 1 });
  return msPrismSVG(P, L, { lbl: lb, side: side, depthLbl: lab.L, dashed: lab.h ? [[[off, h], [off, 0]]] : [],
    rights: lab.h ? [{ v: [off, 0], a: P[1], b: P[2] }] : [], ticks: [{ p: P[0], q: P[2], n: 1 }, { p: P[1], q: P[2], n: 1 }] });
}

/* ═══ 11. SURFACE AREA OF PRISMS (SEAL Lesson 3) ════════════════════ */
function genMeasSA(el){
  const u = msUnit();
  if (level === 1){
    const s = msLen(2, 15, 0.2), f = dp(s * s, 6), A = dp(6 * f, 6);
    qData.ans = A; qData.ansDisplay = msU2(A, u);
    qData.workSteps = 'A cube has 6 identical square faces. One face: ' + msNum(s) + ' × ' + msNum(s) + ' = ' + msNum(f) + '. All six: 6 × ' + msNum(f) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the total surface area of this cube.', msBoxSVG(s, s, s, { l: msU(s, u) }));
    return;
  }
  if (level === 2){
    const d = msDims3([5, 15], [2, 10], [2, 9]), l = d[0], h = d[1], w = d[2];
    const a = l * w, b = l * h, c = w * h, A = 2 * (a + b + c);
    qData.ans = A; qData.ansDisplay = msU2(A, u);
    qData.workSteps = 'Three pairs of matching faces: 2 × (' + l + ' × ' + w + ' + ' + l + ' × ' + h + ' + ' + w + ' × ' + h + ') = 2 × (' + a + ' + ' + b + ' + ' + c + ') = 2 × ' + (a + b + c) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the total surface area of this rectangular prism.', msBoxSVG(l, h, w, { l: msU(l, u), h: msU(h, u), w: msU(w, u) }));
    return;
  }
  if (level === 3){
    if (Math.random() < 0.45){
      const s = rr(2, 12), A = 6 * s * s;
      qData.ans = s; qData.ansDisplay = msU(s, u);
      qData.workSteps = 'Six equal faces, so one face is ' + A + ' ÷ 6 = ' + (s * s) + '. Each face is a square, so the edge is √' + (s * s) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'The total surface area of this cube is <b>' + msU2(A, u) + '</b>. Find the length of each edge.', msBoxSVG(s, s, s, { l: '?' }));
      return;
    }
    const d = msDims3([5, 14], [2, 10], [2, 9]), l = d[0], h = d[1], w = d[2];
    const A = 2 * (l * w + l * h + w * h), top = 2 * l * w, rest = A - top, per = 2 * (l + w);
    qData.ans = h; qData.ansDisplay = msU(h, u);
    qData.workSteps = 'The top and bottom: 2 × ' + l + ' × ' + w + ' = ' + top + '. That leaves ' + A + ' − ' + top + ' = ' + rest + ' for the four sides, which is the height × 2 × (' + l + ' + ' + w + ') = height × ' + per + '. Height = ' + rest + ' ÷ ' + per + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The total surface area of this rectangular prism is <b>' + msU2(A, u) + '</b>. Find the length marked ?.', msBoxSVG(l, h, w, { l: msU(l, u), h: '?', w: msU(w, u) }));
    return;
  }
  if (level === 4 || level === 5){
    const pyth = level === 5;
    if (Math.random() < 0.55){
      const T = msRightTri(16), L = rr(Math.max(4, Math.ceil(T.b * 0.7)), Math.min(25, T.b * 2 + 2));
      const tri = T.b * T.h / 2, rects = (T.b + T.h + T.c) * L, A = 2 * tri + rects;
      qData.ans = A; qData.ansDisplay = msU2(A, u);
      const hide = pyth ? 'c' : null;
      let ws = '';
      if (pyth) ws = 'Pythagoras first: c² = ' + T.b + '² + ' + T.h + '² = ' + (T.b * T.b + T.h * T.h) + ', so c = ' + T.c + '. ';
      ws += 'Two triangles: 2 × ½ × ' + T.b + ' × ' + T.h + ' = ' + (2 * tri) + '. Three rectangles, all ' + L + ' long: (' + T.b + ' + ' + T.h + ' + ' + T.c + ') × ' + L + ' = ' + rects + '. Total: ' + (2 * tri) + ' + ' + rects + ' = <b>' + qData.ansDisplay + '</b>.';
      qData.workSteps = ws;
      msQ(el, pyth ? 'Use Pythagoras’ theorem to find the missing side first, then find the total surface area of this triangular prism.'
                   : 'Find the total surface area of this triangular prism.',
        msRightPrismSVG(T, L, { b: msU(T.b, u), h: msU(T.h, u), c: hide === 'c' ? null : msU(T.c, u), L: msU(L, u) }));
      return;
    }
    const t = ffPick([[3, 4, 5], [4, 3, 5], [6, 8, 10], [8, 6, 10], [5, 12, 13], [12, 5, 13], [9, 12, 15]]);
    const off = t[0], h = t[1], c = t[2], b = 2 * off, L = rr(Math.max(4, Math.ceil(b * 0.6)), Math.max(5, Math.min(25, Math.round(b * 1.2))));
    const tri = b * h, rects = (b + 2 * c) * L, A = tri + rects;
    qData.ans = A; qData.ansDisplay = msU2(A, u);
    let ws = '';
    if (pyth) ws = 'Pythagoras first, in half the triangle: slant² = ' + off + '² + ' + h + '² = ' + (off * off + h * h) + ', so the slant is ' + c + '. ';
    ws += 'Two triangles: 2 × ½ × ' + b + ' × ' + h + ' = ' + tri + '. Three rectangles: (' + b + ' + ' + c + ' + ' + c + ') × ' + L + ' = ' + rects + '. Total: ' + tri + ' + ' + rects + ' = <b>' + qData.ansDisplay + '</b>.';
    qData.workSteps = ws;
    msQ(el, pyth ? 'The two sloping sides are equal. Use Pythagoras’ theorem to find their length first, then find the total surface area.'
                 : 'The two sloping sides are equal. Find the total surface area of this triangular prism.',
      msTentSVG(off, h, L, { b: msU(b, u), h: msU(h, u), c: pyth ? null : msU(c, u), L: msU(L, u) }));
    return;
  }
  if (level === 6){
    const k = ri(3);
    if (k === 0){
      const d = msDims3([12, 40], [8, 30], [5, 25]), l = d[0], h = d[2], w = d[1];
      const A = l * w + 2 * l * h + 2 * w * h;
      qData.ans = A; qData.ansDisplay = msU2(A, 'cm');
      qData.workSteps = 'No lid, so only ONE ' + l + ' × ' + w + ' face: ' + (l * w) + '. The four sides: 2 × ' + l + ' × ' + h + ' + 2 × ' + w + ' × ' + h + ' = ' + (2 * l * h + 2 * w * h) + '. Total: <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This box has <b>no lid</b>. Find the area of card needed to make it.', msBoxSVG(l, h, w, { l: msU(l, 'cm'), h: msU(h, 'cm'), w: msU(w, 'cm') }));
      return;
    }
    if (k === 1){
      const l = rr(3, 8), w = rr(3, 7), h = ffPick([2.4, 2.5, 2.7, 3]);
      const A = dp(2 * (l + w) * h, 6);
      qData.ans = A; qData.ansDisplay = msU2(A, 'm');
      qData.workSteps = 'Only the four walls: two are ' + l + ' × ' + msNum(h) + ' and two are ' + w + ' × ' + msNum(h) + '. 2 × (' + l + ' + ' + w + ') × ' + msNum(h) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'A room is ' + l + ' m long, ' + w + ' m wide and ' + msNum(h) + ' m high. Find the total area of the <b>four walls</b>.', msBoxSVG(l, h, w, { l: msU(l, 'm'), h: msU(h, 'm'), w: msU(w, 'm') }));
      return;
    }
    const l = rr(8, 25), w = rr(4, 12), h = ffPick([1.2, 1.5, 1.8, 2]);
    const base = l * w, walls = dp(2 * (l + w) * h, 6), A = dp(base + walls, 6);
    qData.ans = A; qData.ansDisplay = msU2(A, 'm');
    qData.workSteps = 'The base: ' + l + ' × ' + w + ' = ' + base + '. The four walls: 2 × (' + l + ' + ' + w + ') × ' + msNum(h) + ' = ' + msNum(walls) + '. No top. Total: <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A swimming pool is ' + l + ' m long, ' + w + ' m wide and ' + msNum(h) + ' m deep. The inside (the base and the four walls) is to be tiled. Find the area to be tiled.', msBoxSVG(l, h, w, { l: msU(l, 'm'), h: msU(h, 'm'), w: msU(w, 'm') }));
    return;
  }
  /* Level 7: cost and coverage */
  if (Math.random() < 0.5){
    const l = rr(2, 6), w = rr(2, 5), h = ffPick([2, 2.2, 2.4]), rate = ffPick([25, 30, 35, 40, 45, 46, 50, 55]);
    const area = dp(l * w + 2 * (l + w) * h, 6), cost = dp(area * rate, 2);
    qData.ans = cost; qData.ansTol = 0.005; qData.ansDisplay = msMoney(cost);
    qData.workSteps = 'Walls: 2 × (' + l + ' + ' + w + ') × ' + msNum(h) + ' = ' + msNum(dp(2 * (l + w) * h, 6)) + ' m². Roof: ' + l + ' × ' + w + ' = ' + (l * w) + ' m². No floor. Area: ' + msNum(area) + ' m². Cost: ' + msNum(area) + ' × $' + rate + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A garden shed is ' + l + ' m long, ' + w + ' m wide and ' + msNum(h) + ' m high, with a flat roof and no floor. Sheeting costs <b>$' + rate + ' per m²</b>. Find the cost of covering the walls and the roof.', msBoxSVG(l, h, w, { l: msU(l, 'm'), h: msU(h, 'm'), w: msU(w, 'm') }));
    return;
  }
  let l, w, h, cov, area, need, g = 0;
  do {
    l = rr(3, 7); w = rr(3, 6); h = ffPick([2.4, 2.5, 2.7]); cov = ffPick([8, 10, 12, 15, 16]);
    area = dp(2 * (l + w) * h - 1.8, 6); need = Math.ceil(area / cov - 1e-9);
  } while (Math.abs(area / cov - Math.round(area / cov)) < 0.05 && g++ < 50);
  qData.ans = need; qData.ansDisplay = need + ' L';
  qData.workSteps = 'Four walls: 2 × (' + l + ' + ' + w + ') × ' + msNum(h) + ' = ' + msNum(dp(2 * (l + w) * h, 6)) + ' m². Take away the door: − 1.8 = ' + msNum(area) + ' m². Litres: ' + msNum(area) + ' ÷ ' + cov + ' = ' + (area / cov).toFixed(2) + '…, so buy <b>' + qData.ansDisplay + '</b> (round UP, or the last bit is not painted).';
  msQ(el, 'The four walls of a room ' + l + ' m by ' + w + ' m by ' + msNum(h) + ' m high are painted. A door 2 m by 0.9 m is not painted. One litre of paint covers <b>' + cov + ' m²</b>. How many whole litres must be bought for one coat?',
    msBoxSVG(l, h, w, { l: msU(l, 'm'), h: msU(h, 'm'), w: msU(w, 'm') }));
}

/* ═══ 12. SURFACE AREA OF CYLINDERS (SEAL Lesson 3) ═════════════════ */
function msCylLbl(r, u){ return Math.random() < 0.7 ? { rLbl: msU(r, u), isR: true } : { dLbl: msU(2 * r, u), isR: false }; }
function genMeasSACyl(el){
  const u = msUnit();
  if (level === 1 || level === 2){
    let r, h, g = 0;
    do { r = rr(1, 10); h = rr(2, 20); } while ((h > 5 * r || r > 4 * h) && g++ < 100);
    const lb = msCylLbl(r, u);
    const pre = lb.isR ? '' : 'r = ' + (2 * r) + ' ÷ 2 = ' + r + '. ';
    if (level === 1){
      msSetPiExact(0, 2 * r * h, u + '²');
      qData.workSteps = pre + 'The curved surface unrolls into a rectangle: 2πr × h = 2 × π × ' + r + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the <b>curved surface area</b> of this cylinder. Give it exactly, in terms of π.', msCylSVG(r, h, Object.assign({ hLbl: msU(h, u) }, lb)));
    } else {
      msSetPiExact(0, 2 * r * r + 2 * r * h, u + '²');
      qData.workSteps = pre + 'Two circles: 2πr² = 2 × π × ' + r + '² = ' + (2 * r * r) + 'π. The curved surface: 2πrh = ' + (2 * r * h) + 'π. Total: <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the <b>total surface area</b> of this closed cylinder. Give it exactly, in terms of π.', msCylSVG(r, h, Object.assign({ hLbl: msU(h, u) }, lb)));
    }
    return;
  }
  if (level === 3){
    const R = msRoll(function(){
      const r = msLen(1, 12, 0.3), h = msLen(2, 25, 0.25), tot = Math.random() < 0.6;
      if (h > 5 * r || r > 4 * h) return null;
      const p = msPi2(function(P){ return tot ? 2 * P * r * r + 2 * P * r * h : 2 * P * r * h; });
      return p ? { r: r, h: h, tot: tot, p: p } : null;
    });
    msSetPi2(R.p, u + '²');
    qData.workSteps = (R.tot ? 'Total = 2πr² + 2πrh = 2 × π × ' + msNum(R.r) + '² + 2 × π × ' + msNum(R.r) + ' × ' + msNum(R.h)
                             : 'Curved surface = 2πrh = 2 × π × ' + msNum(R.r) + ' × ' + msNum(R.h))
      + ' = <b>' + qData.ansDisplay + '</b> (2 d.p.). Use the π key: 3.14 gives ' + msNum(R.p.alt) + '.';
    msQ(el, 'Find the <b>' + (R.tot ? 'total surface area' : 'curved surface area') + '</b> of this cylinder, correct to two decimal places.', msCylSVG(R.r, R.h, { rLbl: msU(R.r, u), hLbl: msU(R.h, u) }));
    return;
  }
  if (level === 4){
    const r = rr(2, 9), h = rr(3, 15), k = 2 * r * h;
    msSetPiExact(0, r * r, u + '²');
    qData.workSteps = 'Curved area = 2πrh, so ' + k + 'π = 2 × π × r × ' + h + ' = ' + (2 * h) + 'πr. So r = ' + k + ' ÷ ' + (2 * h) + ' = ' + r + '. One end: πr² = π × ' + r + '² = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The curved surface of this cylinder has an area of <b>' + k + 'π ' + u + '²</b>. Find the area of one circular end, exactly.', msCylSVG(r, h, { rLbl: 'r = ?', hLbl: msU(h, u) }));
    return;
  }
  /* Level 5 (Enrichment): equal total surface areas */
  let r1, h1, r2, h2, g = 0;
  do { r1 = rr(2, 6); h1 = rr(3, 12); r2 = rr(2, 6); h2 = (r1 * r1 + r1 * h1 - r2 * r2) / r2; } while ((r2 === r1 || h2 < 1) && g++ < 100);
  qData.ans = dp(h2, 2); qData.ansTol = 0.005; qData.ansDisplay = msU(dp(h2, 2), u);
  qData.workSteps = 'First cylinder: 2π × ' + r1 + '² + 2π × ' + r1 + ' × ' + h1 + ' = ' + (2 * (r1 * r1 + r1 * h1)) + 'π. Second: 2π × ' + r2 + '² + 2π × ' + r2 + ' × h = ' + (2 * r2 * r2) + 'π + ' + (2 * r2) + 'πh. Set them equal and divide by π: '
    + (2 * r2) + 'h = ' + (2 * (r1 * r1 + r1 * h1)) + ' − ' + (2 * r2 * r2) + ' = ' + (2 * (r1 * r1 + r1 * h1 - r2 * r2)) + ', so h = <b>' + qData.ansDisplay + '</b> (2 d.p.).';
  msQ(el, 'Two closed cylinders have the same total surface area. The first has radius ' + msU(r1, u) + ' and height ' + msU(h1, u) + '. The second has radius ' + msU(r2, u) + '. Find the height of the second cylinder, correct to two decimal places.', '');
}

/* ═══ 13. UNITS OF VOLUME & CAPACITY (7MAT L5, SEAL L4–5) ═══════════ */
const MS_VOL_OBJ = [
  ['a sugar cube', 'cm³'], ['a matchbox', 'cm³'], ['a dice', 'cm³'], ['a mobile phone', 'cm³'], ['a lunch box', 'cm³'],
  ['a swimming pool', 'm³'], ['a shipping container', 'm³'], ['a classroom', 'm³'], ['a water tank on a farm', 'm³'], ['a removalist’s truck', 'm³'],
  ['a grain of sand', 'mm³'], ['a raindrop', 'mm³'], ['a grain of rice', 'mm³'], ['a pinhead', 'mm³']
];
const MS_VOL_OPTS = ['cubic millimetres (mm³)', 'cubic centimetres (cm³)', 'cubic metres (m³)'];
function msVolConvQ(el, v, from, to, f, mult, note){
  const out = mult ? dp(v * f, 6) : dp(v / f, 9);
  qData.ans = out; qData.ansDisplay = msNum(out) + ' ' + to;
  qData.workSteps = note + ' ' + (mult ? 'Multiply' : 'Divide') + ': ' + msNum(v) + (mult ? ' × ' : ' ÷ ') + msNum(f) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'Convert to ' + to + '.', '', '<span style="font-size:1.8rem;">' + msNum(v) + ' ' + from + ' = ? ' + to + '</span>');
}
function genMeasVolUnits(el){
  if (level === 1){
    const k = ri(3);
    const unit = k === 0 ? ffPick(['mm', 'cm', 'm', 'km']) : k === 1 ? ffPick(['mm²', 'cm²', 'm²', 'km²', 'ha']) : ffPick(['mm³', 'cm³', 'm³']);
    const v = Math.random() < 0.4 ? dp(rr(11, 999) / 10, 1) : rr(2, 900);
    const right = ['Length', 'Area', 'Volume'][k];
    decSetChoice(el, '<div style="' + A_LBL + '">Is this measurement a length, an area or a volume?</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.9rem;margin:14px 0;">' + msNum(v) + ' ' + unit + '</div>', ['Length', 'Area', 'Volume'], right, true);
    qData.workSteps = 'Look at the unit. No power: a length. Squared (²) or hectares: an area. Cubed (³): a volume. So <b>' + right + '</b>.';
    return;
  }
  if (level === 2){
    const o = ffPick(MS_VOL_OBJ), right = MS_VOL_OPTS[['mm³', 'cm³', 'm³'].indexOf(o[1])];
    decSetChoice(el, '<div style="' + A_LBL + '">Which unit is the most sensible for the volume of</div>'
      + '<div style="text-align:center;font-weight:900;font-size:1.3rem;margin:14px 0;">' + o[0] + '?</div>', MS_VOL_OPTS, right, true);
    qData.workSteps = 'A 1 cm cube is about the size of a sugar cube; a 1 m cube would fill a big box. Tiny things use mm³. So <b>' + right + '</b>.';
    return;
  }
  if (level === 3){
    const k = ri(4);
    if (k === 0) return msVolConvQ(el, ffPick([rr(2, 20), dp(rr(11, 99) / 10, 1)]), 'cm³', 'mm³', 1000, true, '1 cm³ = 10 × 10 × 10 = 1000 mm³.');
    if (k === 1) return msVolConvQ(el, ffPick([rr(2, 90) * 1000, rr(11, 99) * 100, rr(2, 9) * 500]), 'mm³', 'cm³', 1000, false, '1000 mm³ = 1 cm³.');
    if (k === 2) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(1, 9) / 10, 1), dp(rr(11, 49) / 10, 1)]), 'm³', 'cm³', 1000000, true, '1 m³ = 100 × 100 × 100 = 1 000 000 cm³.');
    return msVolConvQ(el, ffPick([rr(1, 9) * 100000, rr(11, 99) * 10000, rr(2, 9) * 1000000]), 'cm³', 'm³', 1000000, false, '1 000 000 cm³ = 1 m³.');
  }
  if (level === 4){
    const k = ri(6);
    if (k === 0) return msVolConvQ(el, ffPick([rr(20, 900), rr(2, 9) * 250]), 'cm³', 'mL', 1, true, '1 cm³ holds exactly 1 mL.');
    if (k === 1) return msVolConvQ(el, ffPick([rr(2, 90) * 100, rr(11, 99) * 50, rr(2, 30) * 1000]), 'cm³', 'L', 1000, false, '1000 cm³ = 1 L.');
    if (k === 2) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(11, 99) / 10, 1), dp(rr(1, 9) / 10, 1)]), 'L', 'cm³', 1000, true, '1 L = 1000 cm³.');
    if (k === 3) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(11, 99) / 10, 1), dp(rr(1, 9) / 10, 1)]), 'm³', 'L', 1000, true, '1 m³ = 1000 L.');
    if (k === 4) return msVolConvQ(el, ffPick([rr(2, 90) * 100, rr(2, 9) * 1000, rr(11, 99) * 50]), 'L', 'm³', 1000, false, '1000 L = 1 m³.');
    return msVolConvQ(el, ffPick([rr(2, 30), dp(rr(11, 99) / 10, 1)]), 'm³', 'kL', 1, true, '1 m³ holds exactly 1 kL (1000 L).');
  }
  if (level === 5){
    const k = ri(4);
    if (k === 0) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(11, 99) / 10, 1), dp(rr(1, 9) / 10, 1), dp(rr(101, 999) / 100, 2)]), 'L', 'mL', 1000, true, '1 L = 1000 mL.');
    if (k === 1) return msVolConvQ(el, ffPick([rr(2, 9) * 1000, rr(11, 99) * 100, rr(101, 999) * 10, rr(2, 9) * 250]), 'mL', 'L', 1000, false, '1000 mL = 1 L.');
    if (k === 2) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(11, 99) / 10, 1), dp(rr(1, 9) / 10, 1)]), 'kL', 'L', 1000, true, '1 kL = 1000 L.');
    return msVolConvQ(el, ffPick([rr(2, 9) * 1000, rr(11, 99) * 100, rr(101, 999) * 10]), 'L', 'kL', 1000, false, '1000 L = 1 kL.');
  }
  if (level === 6){
    const k = ri(4);
    if (k === 0) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(11, 99) / 10, 1), dp(rr(1, 9) / 10, 1)]), 'ML', 'kL', 1000, true, '1 ML (megalitre) = 1000 kL.');
    if (k === 1) return msVolConvQ(el, ffPick([rr(2, 9) * 1000, rr(11, 99) * 100, rr(101, 999) * 10]), 'kL', 'ML', 1000, false, '1000 kL = 1 ML.');
    if (k === 2) return msVolConvQ(el, ffPick([rr(2, 9), dp(rr(11, 99) / 10, 1)]), 'ML', 'L', 1000000, true, '1 ML = 1000 kL = 1 000 000 L.');
    return msVolConvQ(el, ffPick([rr(2, 9) * 1000000, rr(11, 99) * 100000]), 'L', 'ML', 1000000, false, '1 000 000 L = 1 ML.');
  }
  /* Level 7: order four volumes and capacities, compared in mL */
  const big = Math.random() < 0.5;
  let tiles = [], g = 0;
  while (g++ < 120){
    tiles = []; const seen = {}, units = {};
    const anchor = big ? rr(3, 40) * 100 : rr(5, 60) * 50;   /* litres (big) or mL (small) */
    let ok = true;
    for (let i = 0; i < 4; i++){
      const base = Math.round(anchor * (0.55 + Math.random() * 1.1) / 10) * 10;
      const ml = big ? base * 1000 : base;
      let shown, un;
      if (big){ un = ffPick(['L', 'kL', 'm³']); shown = un === 'L' ? base : base / 1000; }
      else { un = ffPick(['mL', 'L', 'cm³']); shown = un === 'L' ? base / 1000 : base; }
      if (seen[ml] || shown <= 0) { ok = false; break; }
      seen[ml] = 1; units[un] = 1;
      tiles.push({ val: ml, html: '<b>' + msNum(shown) + ' ' + un + '</b>', text: msNum(shown) + ' ' + un });
    }
    if (ok && Object.keys(units).length >= 2) break;
  }
  cmpSetOrder(el, tiles, 'asc');
  qData.arrangeInstr = 'Tap from smallest to largest.';
  el.innerHTML = '<div style="' + A_LBL + '">Put these in order from <b>smallest</b> to <b>largest</b>.</div>';
  qData.workSteps = 'Change them all to ' + (big ? 'litres (1 kL = 1 m³ = 1000 L)' : 'millilitres (1 cm³ = 1 mL, 1 L = 1000 mL)') + ' first. In order: '
    + qData.arrangeAns.map(function(c){ return qData.arrangeText[c]; }).join(' , ') + '.';
}

/* ═══ 14. VOLUME OF RECTANGULAR PRISMS (7MAT L5, SEAL L4) ════════════ */
function msBlockCount(N){
  const out = [];
  for (let a = 1; a * a * a <= N; a++) if (N % a === 0)
    for (let b = a; a * b * b <= N; b++) if ((N / a) % b === 0) out.push([a, b, N / a / b]);
  return out;
}
function genMeasVolRect(el){
  const u = msUnit();
  if (level === 1){
    let l, h, w, g = 0;
    do { l = rr(2, 5); h = rr(1, 4); w = rr(1, 4); } while ((l * h * w < 6 || l * h * w > 60) && g++ < 100);
    qData.ans = l * h * w; qData.ansDisplay = msU3(qData.ans, 'cm');
    qData.workSteps = 'Count one layer: ' + l + ' × ' + w + ' = ' + (l * w) + ' cubes. There are ' + h + ' layer' + (h > 1 ? 's' : '') + ': ' + (l * w) + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Each small cube is <b>1 cm³</b>. This solid block has no gaps inside. Find its volume.', msBlockSVG(l, h, w));
    return;
  }
  if (level === 2){
    const d = msDims3([4, 15], [2, 10], [2, 9]), l = d[0], h = d[1], w = d[2];
    qData.ans = l * w * h; qData.ansDisplay = msU3(qData.ans, u);
    qData.workSteps = 'V = l × w × h = ' + l + ' × ' + w + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the volume of this rectangular prism.', msBoxSVG(l, h, w, { l: msU(l, u), h: msU(h, u), w: msU(w, u) }));
    return;
  }
  if (level === 3){
    const k = ri(3);
    if (k === 0){
      const s = ffPick([rr(2, 12), rr(2, 12), dp(rr(3, 19) / 2, 1)]);
      qData.ans = dp(s * s * s, 6); qData.ansDisplay = msU3(qData.ans, u);
      qData.workSteps = 'V = s³ = ' + msNum(s) + ' × ' + msNum(s) + ' × ' + msNum(s) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the volume of this cube.', msBoxSVG(s, s, s, { l: msU(s, u) }));
      return;
    }
    const s = rr(2, 10), V = s * s * s;
    if (k === 1){
      qData.ans = s; qData.ansDisplay = msU(s, u);
      qData.workSteps = 'V = s³, so s is the cube root: ' + s + ' × ' + s + ' × ' + s + ' = ' + V + ', so s = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'A cube has a volume of <b>' + msU3(V, u) + '</b>. Find the length of each edge.', msBoxSVG(s, s, s, { l: '?' }));
      return;
    }
    qData.ans = s; qData.ansDisplay = String(s);
    qData.workSteps = 'The cube is ' + s + ' × ' + s + ' × ' + s + ' = ' + V + ' small cubes, so there are <b>' + s + '</b> along each edge.';
    msQ(el, 'A solid cube is built from <b>' + V + '</b> unit cubes. How many unit cubes are along each edge?', '');
    return;
  }
  if (level === 4){
    let a, b, c, g = 0;
    do {
      a = dp(rr(12, 60) / 10, 1); b = dp(rr(5, 30) / 10, 1); c = ffPick([rr(1, 4), dp(rr(5, 25) / 10, 1)]);
    } while ((Number.isInteger(a) && Number.isInteger(b)) && g++ < 50);
    const V = dp(a * b * c, 6);
    qData.ans = V; qData.ansDisplay = msU3(V, 'm');
    qData.workSteps = 'V = l × w × h = ' + msNum(a) + ' × ' + msNum(b) + ' × ' + msNum(c) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the volume of this crate.', msBoxSVG(a, c, b, { l: msU(a, 'm'), h: msU(c, 'm'), w: msU(b, 'm') }));
    return;
  }
  if (level === 5){
    const d = msDims3([4, 15], [2, 10], [2, 9]), l = d[0], h = d[1], w = d[2], V = l * w * h;
    const ask = ffPick(['l', 'h', 'w']), val = { l: l, h: h, w: w }[ask];
    const others = ['l', 'w', 'h'].filter(function(x){ return x !== ask; }).map(function(x){ return { l: l, h: h, w: w }[x]; });
    qData.ans = val; qData.ansDisplay = msU(val, u);
    qData.workSteps = 'V = l × w × h, so the missing length = V ÷ (the other two) = ' + V + ' ÷ (' + others[0] + ' × ' + others[1] + ') = ' + V + ' ÷ ' + (others[0] * others[1]) + ' = <b>' + qData.ansDisplay + '</b>.';
    const lab = { l: msU(l, u), h: msU(h, u), w: msU(w, u) }; lab[ask] = '?';
    msQ(el, 'The volume of this prism is <b>' + msU3(V, u) + '</b>. Find the length marked ?.', msBoxSVG(l, h, w, lab));
    return;
  }
  if (level === 6){
    if (Math.random() < 0.5){
      /* answer in m³: one length in cm */
      const lcm = ffPick([40, 50, 60, 80, 120, 150]), b = dp(rr(5, 20) / 10, 1), c = dp(rr(5, 20) / 10, 1), lm = lcm / 100;
      const V = dp(lm * b * c, 6);
      qData.ans = V; qData.ansDisplay = msU3(V, 'm');
      qData.workSteps = 'Convert first: ' + lcm + ' cm = ' + msNum(lm) + ' m. Then ' + msNum(lm) + ' × ' + msNum(b) + ' × ' + msNum(c) + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'Find the volume of this prism in <b>m³</b>.', msBoxSVG(b, c, lm, { l: msU(b, 'm'), h: msU(c, 'm'), w: msU(lcm, 'cm') }));
      return;
    }
    const a = rr(2, 8), bmm = ffPick([15, 25, 35, 40, 45, 60]), cmm = ffPick([20, 30, 50, 80]);
    const V = dp(a * bmm / 10 * cmm / 10, 6);
    qData.ans = V; qData.ansDisplay = msU3(V, 'cm');
    qData.workSteps = 'Convert first: ' + bmm + ' mm = ' + msNum(bmm / 10) + ' cm and ' + cmm + ' mm = ' + msNum(cmm / 10) + ' cm. Then ' + a + ' × ' + msNum(bmm / 10) + ' × ' + msNum(cmm / 10) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the volume of this prism in <b>cm³</b>.', msBoxSVG(cmm / 10, a, bmm / 10, { l: msU(cmm, 'mm'), h: msU(a, 'cm'), w: msU(bmm, 'mm') }));
    return;
  }
  /* Level 7 (Enrichment): how many different blocks */
  const N = ffPick([12, 16, 18, 20, 24, 30, 36, 48]), list = msBlockCount(N);
  qData.ans = list.length; qData.ansDisplay = String(list.length);
  qData.workSteps = 'List them in order so none is missed: ' + list.map(function(t){ return t.join(' × '); }).join(', ') + '. That is <b>' + list.length + '</b> different blocks.';
  msQ(el, 'A solid rectangular block is built from <b>' + N + '</b> unit cubes. How many different blocks could it be? (Count 2 × 3 × 4 and 4 × 3 × 2 as the same block.)', '');
}

/* ═══ 15. VOLUME OF PRISMS: V = A × h (7MAT L5, SEAL L4) ══════════════ */
const MS_FACES = [
  [[0, 0], [10, 0], [10, 3], [4, 3], [4, 7], [0, 7]],          /* L */
  [[0, 0], [8, 0], [8, 5], [4, 8], [0, 5]],                     /* house */
  [[0, 0], [10, 0], [7, 5], [3, 5]],                            /* trapezium */
  [[0, 0], [9, 0], [3, 6]],                                     /* triangle */
  [[0, 0], [3, 0], [3, 4], [7, 4], [7, 0], [10, 0], [10, 7], [0, 7]],   /* U, upside down */
  [[0, 0], [6, 0], [8, 3], [6, 6], [0, 6]]                      /* arrow */
];
function msFaceScaled(A){
  const P = ffPick(MS_FACES), a = Math.abs(msArea2(P)), k = Math.sqrt(A / a);
  return P.map(function(p){ return [p[0] * k, p[1] * k]; });
}
function msCentroidish(P){
  /* a point safely inside: the average of the vertices, nudged toward the base */
  let x = 0, y = 0; P.forEach(function(p){ x += p[0]; y += p[1]; });
  return [x / P.length, y / P.length * 0.8];
}
function genMeasVolPrism(el){
  const u = msUnit();
  if (level === 1){
    const A = rr(6, 60), L = ffPick([rr(3, 20), dp(rr(15, 95) / 10, 1)]), F = msFaceScaled(A), V = dp(A * L, 6);
    qData.ans = V; qData.ansDisplay = msU3(V, u);
    qData.workSteps = 'Any prism: V = area of the cross-section × length = ' + A + ' × ' + msNum(L) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'The shaded end of this prism has an area of <b>' + msU2(A, u) + '</b>. Find its volume.',
      msPrismSVG(F, L, { frontFill: true, depthLbl: msU(L, u) }));
    return;
  }
  if (level === 2){
    if (Math.random() < 0.5){
      const T = msRightTri(16), L = rr(Math.max(3, Math.ceil(T.b * 0.6)), Math.min(25, 2 * T.b)), A = T.b * T.h / 2, V = A * L;
      qData.ans = V; qData.ansDisplay = msU3(V, u);
      qData.workSteps = 'The triangle: ½ × ' + T.b + ' × ' + T.h + ' = ' + msNum(A) + '. V = ' + msNum(A) + ' × ' + L + ' = <b>' + qData.ansDisplay + '</b>. (The ' + T.c + ' is not needed.)';
      msQ(el, 'Find the volume of this triangular prism.', msRightTriPrism(T, L, u));
      return;
    }
    let b, h, ax, L, g = 0;
    do { b = rr(4, 14); h = rr(3, 10); ax = rr(1, b - 1); L = rr(4, 20); } while ((b * h * L) % 2 !== 0 && g++ < 50);
    const A = b * h / 2, V = A * L;
    qData.ans = V; qData.ansDisplay = msU3(V, u);
    qData.workSteps = 'The triangle: ½ × base × height = ½ × ' + b + ' × ' + h + ' = ' + msNum(A) + '. V = ' + msNum(A) + ' × ' + L + ' = <b>' + qData.ansDisplay + '</b>.';
    const P = [[0, 0], [b, 0], [ax, h]];
    msQ(el, 'Find the volume of this triangular prism.', msPrismSVG(P, L, { lbl: [{ p: P[0], q: P[1], t: msU(b, u) }], dashed: [[[ax, h], [ax, 0]]],
      rights: [{ v: [ax, 0], a: P[1], b: P[2] }], side: [{ p: [ax, 0], q: [ax, h], t: msU(h, u), side: ax > b / 2 ? -1 : 1 }], depthLbl: msU(L, u) }));
    return;
  }
  if (level === 3){
    let a, b, h, L, g = 0;
    do { a = rr(3, 9); b = a + rr(2, 6); h = rr(Math.ceil(b * 0.4), Math.max(Math.ceil(b * 0.4), Math.min(12, b))); L = rr(Math.max(3, Math.ceil(b * 0.5)), Math.min(15, b + 3)); } while (((a + b) * h * L) % 2 !== 0 && g++ < 80);
    const A = (a + b) * h / 2, V = A * L;
    qData.ans = V; qData.ansDisplay = msU3(V, u);
    qData.workSteps = 'The trapezium: ½ × (' + a + ' + ' + b + ') × ' + h + ' = ' + msNum(A) + '. V = ' + msNum(A) + ' × ' + L + ' = <b>' + qData.ansDisplay + '</b>.';
    const P = [[0, 0], [b, 0], [a, h], [0, h]];
    msQ(el, 'Find the volume of this trapezoidal prism.', msPrismSVG(P, L, {
      lbl: [{ p: P[0], q: P[1], t: msU(b, u) }, { p: P[2], q: P[3], t: msU(a, u) }, { p: P[3], q: P[0], t: msU(h, u) }],
      rights: [{ v: P[0], a: P[1], b: P[3] }, { v: P[3], a: P[0], b: P[2] }], depthLbl: msU(L, u) }));
    return;
  }
  if (level === 4){
    const A = rr(6, 60), L = rr(3, 20), V = A * L, F = msFaceScaled(A);
    if (Math.random() < 0.5){
      qData.ans = L; qData.ansDisplay = msU(L, u);
      qData.workSteps = 'V = A × length, so length = V ÷ A = ' + V + ' ÷ ' + A + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This prism has a volume of <b>' + msU3(V, u) + '</b> and the shaded end has an area of <b>' + msU2(A, u) + '</b>. Find its length.',
        msPrismSVG(F, L, { frontFill: true, depthLbl: '?' }));
    } else {
      qData.ans = A; qData.ansDisplay = msU2(A, u);
      qData.workSteps = 'V = A × length, so A = V ÷ length = ' + V + ' ÷ ' + L + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'This prism has a volume of <b>' + msU3(V, u) + '</b>. Find the area of the shaded end.',
        msPrismSVG(F, L, { frontFill: true, depthLbl: msU(L, u) }));
    }
    return;
  }
  /* Level 5: the triangle's height from the volume */
  let b, h, L, ax, g = 0;
  do { b = rr(4, 14); h = rr(3, 12); L = rr(4, 20); ax = rr(1, b - 1); } while ((b * h * L) % 2 !== 0 && g++ < 50);
  const V = b * h * L / 2;
  qData.ans = h; qData.ansDisplay = msU(h, u);
  qData.workSteps = 'V = ½ × b × h × length, so ' + V + ' = ½ × ' + b + ' × h × ' + L + ' = ' + (b * L / 2) + 'h. h = ' + V + ' ÷ ' + (b * L / 2) + ' = <b>' + qData.ansDisplay + '</b>.';
  const P = [[0, 0], [b, 0], [ax, h]];
  msQ(el, 'This triangular prism has a volume of <b>' + msU3(V, u) + '</b>. Find the height of the triangle.', msPrismSVG(P, L, { lbl: [{ p: P[0], q: P[1], t: msU(b, u) }],
    dashed: [[[ax, h], [ax, 0]]], rights: [{ v: [ax, 0], a: P[1], b: P[2] }], side: [{ p: [ax, 0], q: [ax, h], t: '?', side: ax > b / 2 ? -1 : 1 }], depthLbl: msU(L, u) }));
}
function msRightTriPrism(T, L, u){ return msRightPrismSVG(T, L, { b: msU(T.b, u), h: msU(T.h, u), c: msU(T.c, u), L: msU(L, u) }); }

/* ═══ 16. VOLUME OF CYLINDERS (SEAL L4) ═════════════════════════════ */
function genMeasVolCyl(el){
  const u = msUnit();
  if (level === 1 || level === 3){
    let r, h, g = 0;
    do { r = rr(1, 10); h = rr(1, 20); } while ((h > 5 * r || r > 4 * h) && g++ < 100);
    const diam = level === 3;
    msSetPiExact(0, r * r * h, u + '³');
    qData.workSteps = (diam ? 'Halve the diameter first: r = ' + (2 * r) + ' ÷ 2 = ' + r + '. ' : '') + 'V = πr²h = π × ' + r + '² × ' + h + ' = π × ' + (r * r) + ' × ' + h + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the volume of this cylinder. Give it exactly, in terms of π.', msCylSVG(r, h, diam ? { dLbl: msU(2 * r, u), hLbl: msU(h, u) } : { rLbl: msU(r, u), hLbl: msU(h, u) }));
    return;
  }
  if (level === 2){
    const R = msRoll(function(){
      const r = msLen(1, 12, 0.3), h = msLen(2, 25, 0.25), isR = Math.random() < 0.65;
      if (h > 5 * r || r > 4 * h) return null;
      const p = msPi2(function(P){ return P * r * r * h; });
      return p ? { r: r, h: h, isR: isR, p: p } : null;
    });
    msSetPi2(R.p, u + '³');
    qData.workSteps = (R.isR ? '' : 'r = ' + msNum(2 * R.r) + ' ÷ 2 = ' + msNum(R.r) + '. ') + 'V = πr²h = π × ' + msNum(R.r) + '² × ' + msNum(R.h) + ' = <b>' + qData.ansDisplay + '</b> (2 d.p.). Use the π key: 3.14 gives ' + msNum(R.p.alt) + '.';
    msQ(el, 'Find the volume of this cylinder, correct to <b>two decimal places</b>.', msCylSVG(R.r, R.h, R.isR ? { rLbl: msU(R.r, u), hLbl: msU(R.h, u) } : { dLbl: msU(dp(2 * R.r, 6), u), hLbl: msU(R.h, u) }));
    return;
  }
  if (level === 4){
    const r = rr(2, 10), h = rr(2, 15), k = r * r * h;
    qData.ans = h; qData.ansDisplay = msU(h, u);
    qData.workSteps = 'V = πr²h, so ' + k + 'π = π × ' + r + '² × h = ' + (r * r) + 'πh. h = ' + k + ' ÷ ' + (r * r) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This cylinder has a volume of <b>' + k + 'π ' + u + '³</b>. Find its height.', msCylSVG(r, h, { rLbl: msU(r, u), hLbl: '?' }));
    return;
  }
  if (level === 5){
    const r = rr(2, 10), h = rr(2, 15), k = r * r * h;
    qData.ans = r; qData.ansDisplay = msU(r, u);
    qData.workSteps = 'V = πr²h, so ' + k + 'π = π × r² × ' + h + '. r² = ' + k + ' ÷ ' + h + ' = ' + (r * r) + ', so r = √' + (r * r) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This cylinder has a volume of <b>' + k + 'π ' + u + '³</b>. Find its radius.', msCylSVG(r, h, { rLbl: 'r = ?', hLbl: msU(h, u) }));
    return;
  }
  /* Level 6 (Enrichment): melt it, freeze it as a cube */
  const R = msRoll(function(){
    const r = rr(2, 8), h = rr(2, 12);
    const p = msPi2(function(P){ return Math.cbrt(P * r * r * h); });
    return p ? { r: r, h: h, p: p } : null;
  });
  msSetPi2(R.p, 'cm');
  qData.workSteps = 'The volume does not change. V = π × ' + R.r + '² × ' + R.h + ' = ' + (Math.PI * R.r * R.r * R.h).toFixed(3) + '… cm³. The cube’s side is the cube root: ∛' + (Math.PI * R.r * R.r * R.h).toFixed(3) + '… = <b>' + qData.ansDisplay + '</b> (2 d.p.).';
  msQ(el, 'A cylinder of ice has radius ' + R.r + ' cm and height ' + R.h + ' cm. It is melted and refrozen as a cube. Find the side length of the cube, correct to two decimal places.', msCylSVG(R.r, R.h, { rLbl: R.r + ' cm', hLbl: R.h + ' cm' }));
}

/* ═══ 17. CAPACITY (7MAT L5, SEAL L5) ═══════════════════════════════ */
function genMeasCap(el){
  if (level === 1){
    const l = rr(4, 12) * 5, w = rr(3, 8) * 5, h = rr(2, 8) * 5, V = l * w * h, L = dp(V / 1000, 6);
    qData.ans = L; qData.ansDisplay = msNum(L) + ' L';
    qData.workSteps = 'V = ' + l + ' × ' + w + ' × ' + h + ' = ' + msNum(V) + ' cm³. 1000 cm³ = 1 L, so ' + msNum(V) + ' ÷ 1000 = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'Find the capacity of this container in <b>litres</b>. The measurements are inside measurements.', msBoxSVG(l, h, w, { l: msU(l, 'cm'), h: msU(h, 'cm'), w: msU(w, 'cm') }));
    return;
  }
  if (level === 2){
    const a = dp(rr(10, 40) / 10, 1), b = dp(rr(8, 25) / 10, 1), c = dp(rr(5, 20) / 10, 1), V = dp(a * b * c, 6), kl = Math.random() < 0.4;
    qData.ans = kl ? V : dp(V * 1000, 6); qData.ansDisplay = msNum(qData.ans) + (kl ? ' kL' : ' L');
    qData.workSteps = 'V = ' + msNum(a) + ' × ' + msNum(b) + ' × ' + msNum(c) + ' = ' + msNum(V) + ' m³. ' + (kl ? '1 m³ = 1 kL, so <b>' + qData.ansDisplay + '</b>.' : '1 m³ = 1000 L, so ' + msNum(V) + ' × 1000 = <b>' + qData.ansDisplay + '</b>.');
    msQ(el, 'Find the capacity of this tank in <b>' + (kl ? 'kilolitres' : 'litres') + '</b>.', msBoxSVG(a, c, b, { l: msU(a, 'm'), h: msU(c, 'm'), w: msU(b, 'm') }));
    return;
  }
  if (level === 3){
    const R = msRoll(function(){
      const r = rr(4, 30), h = rr(8, 80), isR = Math.random() < 0.6;
      const p = msPi1(function(P){ return P * r * r * h / 1000; });
      return p ? { r: r, h: h, isR: isR, p: p } : null;
    });
    msSetPi1(R.p, 'L');
    qData.workSteps = (R.isR ? '' : 'r = ' + (2 * R.r) + ' ÷ 2 = ' + R.r + '. ') + 'V = πr²h = π × ' + R.r + '² × ' + R.h + ' = ' + (Math.PI * R.r * R.r * R.h).toFixed(2) + '… cm³. ÷ 1000 for litres: <b>' + qData.ansDisplay + '</b> (1 d.p.). Use the π key: 3.14 gives ' + msNum(R.p.alt) + ' L.';
    msQ(el, 'Find the capacity of this cylindrical container in <b>litres</b>, correct to one decimal place. The measurements are inside measurements.',
      msCylSVG(R.r, R.h, R.isR ? { rLbl: msU(R.r, 'cm'), hLbl: msU(R.h, 'cm') } : { dLbl: msU(2 * R.r, 'cm'), hLbl: msU(R.h, 'cm') }));
    return;
  }
  if (level === 4){
    if (Math.random() < 0.5){
      const l = rr(2, 6), w = dp(rr(8, 20) / 10, 1), d = ffPick([0.3, 0.4, 0.5, 0.6]), rate = ffPick([45, 55, 60, 65, 70, 80]);
      const V = dp(l * w * d, 6), cost = dp(V * rate, 2);
      qData.ans = cost; qData.ansTol = 0.005; qData.ansDisplay = msMoney(cost);
      qData.workSteps = 'Volume of soil: ' + l + ' × ' + msNum(w) + ' × ' + msNum(d) + ' = ' + msNum(V) + ' m³. Cost: ' + msNum(V) + ' × $' + rate + ' = <b>' + qData.ansDisplay + '</b>.';
      msQ(el, 'A garden bed is ' + l + ' m long, ' + msNum(w) + ' m wide and ' + msNum(d) + ' m deep. Soil costs <b>$' + rate + ' per cubic metre</b>. Find the cost of filling it.', msBoxSVG(l, d, w, { l: msU(l, 'm'), h: msU(d, 'm'), w: msU(w, 'm') }));
      return;
    }
    const l = rr(4, 10), w = rr(3, 6), t = ffPick([0.1, 0.15, 0.2]), rate = ffPick([180, 190, 200, 220, 240]);
    const V = dp(l * w * t, 6), cost = dp(V * rate, 2);
    qData.ans = cost; qData.ansTol = 0.005; qData.ansDisplay = msMoney(cost);
    qData.workSteps = 'Volume of concrete: ' + l + ' × ' + w + ' × ' + msNum(t) + ' = ' + msNum(V) + ' m³. Cost: ' + msNum(V) + ' × $' + rate + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A concrete slab is ' + l + ' m long, ' + w + ' m wide and ' + msNum(t) + ' m thick. Concrete costs <b>$' + rate + ' per cubic metre</b>. Find the cost of the concrete.', msBoxSVG(l, t, w, { l: msU(l, 'm'), h: msU(t, 'm'), w: msU(w, 'm') }));
    return;
  }
  if (level === 5){
    if (Math.random() < 0.5){
      const L = rr(3, 6), W = dp(rr(18, 25) / 10, 1), Hh = dp(rr(18, 24) / 10, 1), box = ffPick([[1, 0.5, 0.5], [0.5, 0.5, 0.5], [0.8, 0.5, 0.4], [1, 0.4, 0.5]]);
      const Vt = dp(L * W * Hh, 6), Vb = dp(box[0] * box[1] * box[2], 6), n = Math.floor(Vt / Vb + 1e-9);
      qData.ans = n; qData.ansDisplay = String(n);
      qData.workSteps = 'Truck: ' + L + ' × ' + msNum(W) + ' × ' + msNum(Hh) + ' = ' + msNum(Vt) + ' m³. One box: ' + box.map(msNum).join(' × ') + ' = ' + msNum(Vb) + ' m³. ' + msNum(Vt) + ' ÷ ' + msNum(Vb) + ' = ' + msNum(dp(Vt / Vb, 3)) + ', so at most <b>' + n + '</b> whole boxes.';
      msQ(el, 'A truck has an inside space ' + L + ' m long, ' + msNum(W) + ' m wide and ' + msNum(Hh) + ' m high. Boxes are ' + box.map(function(x){ return msNum(x) + ' m'; }).join(' by ') + '. By volume, what is the greatest number of boxes that could fit?', '');
      return;
    }
    let l, w, h, per, n, g = 0;
    do { l = rr(6, 12); w = rr(5, 9); h = 3; per = ffPick([5, 6, 7, 8]); n = Math.floor(l * w * h / per); } while ((l * w * h) % per === 0 && g++ < 50);
    qData.ans = n; qData.ansDisplay = String(n);
    qData.workSteps = 'Room: ' + l + ' × ' + w + ' × ' + h + ' = ' + (l * w * h) + ' m³. ' + (l * w * h) + ' ÷ ' + per + ' = ' + msNum(dp(l * w * h / per, 2)) + ', so at most <b>' + n + '</b> people (round DOWN: a part person does not get their air).';
    msQ(el, 'A room is ' + l + ' m by ' + w + ' m by ' + h + ' m high. Each person needs at least <b>' + per + ' m³</b> of air. What is the greatest number of people the room should hold?', '');
    return;
  }
  if (level === 6){
    const a = ffPick([1.5, 2, 2.5, 3]), b = ffPick([1, 1.2, 1.5, 2]), c = ffPick([1, 1.2, 1.5]);
    const Lt = Math.round(a * b * c * 1000), rates = [10, 12, 15, 20, 24, 25, 30, 40, 50, 60].filter(function(r){ return Lt % r === 0; });
    const rate = ffPick(rates), t = Lt / rate;
    qData.ans = t; qData.ansDisplay = msNum(t) + ' minutes';
    qData.workSteps = 'Volume: ' + msNum(a) + ' × ' + msNum(b) + ' × ' + msNum(c) + ' = ' + msNum(dp(a * b * c, 6)) + ' m³ = ' + msNum(Lt) + ' L. Time: ' + msNum(Lt) + ' ÷ ' + rate + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A tank ' + msNum(a) + ' m long, ' + msNum(b) + ' m wide and ' + msNum(c) + ' m high is filled at <b>' + rate + ' L per minute</b>. How many minutes does it take to fill?', msBoxSVG(a, c, b, { l: msU(a, 'm'), h: msU(c, 'm'), w: msU(b, 'm') }));
    return;
  }
  /* Level 7: pour it into another container and find the depth */
  let l1, w1, h1, l2, w2, frac, V, d, g = 0;
  do {
    l1 = rr(2, 6) * 5; w1 = rr(2, 5) * 5; h1 = rr(2, 6) * 5; frac = ffPick([1, 1, 0.5, 0.75]);
    l2 = rr(3, 8) * 5; w2 = rr(3, 7) * 5; V = l1 * w1 * h1 * frac; d = V / (l2 * w2);
  } while ((Math.abs(d * 10 - Math.round(d * 10)) > 1e-9 || d < 1 || d > 40) && g++ < 400);
  qData.ans = dp(d, 6); qData.ansDisplay = msU(dp(d, 6), 'cm');
  const fw = frac === 1 ? 'full of' : frac === 0.5 ? 'half full of' : 'three-quarters full of';
  qData.workSteps = 'Water: ' + l1 + ' × ' + w1 + ' × ' + h1 + (frac === 1 ? '' : ' × ' + msNum(frac)) + ' = ' + msNum(V) + ' cm³. The volume stays the same, so depth = ' + msNum(V) + ' ÷ (' + l2 + ' × ' + w2 + ') = ' + msNum(V) + ' ÷ ' + (l2 * w2) + ' = <b>' + qData.ansDisplay + '</b>.';
  msQ(el, 'A container ' + l1 + ' cm by ' + w1 + ' cm by ' + h1 + ' cm is ' + fw + ' water. The water is poured into an empty container with a base of ' + l2 + ' cm by ' + w2 + ' cm. How deep is the water now?', '');
}

/* ═══ 18. VOLUME OF COMPOSITE SOLIDS (SEAL L5) ══════════════════════ */
function genMeasCompSolid(el){
  const u = ffPick(['cm', 'cm', 'm']);
  if (level === 1){
    let W, H, w1, h1, D, g = 0;
    do { W = rr(6, 14); H = rr(5, 12); w1 = rr(3, W - 3); h1 = rr(2, H - 3); D = rr(3, 10); } while ((w1 > W * 0.6 || w1 < W * 0.3 || h1 > H * 0.6 || h1 < H * 0.35 || D > W * 0.7) && g++ < 300);
    const S = msLShape(W, H, w1, h1), A = W * h1 + w1 * (H - h1), V = A * D;
    qData.ans = V; qData.ansDisplay = msU3(V, u);
    qData.workSteps = 'Split the end into two rectangles: ' + W + ' × ' + h1 + ' = ' + (W * h1) + ' and ' + w1 + ' × ' + (H - h1) + ' = ' + (w1 * (H - h1)) + '. End area: ' + A + '. V = ' + A + ' × ' + D + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'This solid is made from two rectangular prisms. Find its volume.', msPrismSVG(S.P, D, {
      lbl: [{ p: S.bottom[0], q: S.bottom[1], t: msU(W, u) }, { p: S.left[0], q: S.left[1], t: msU(H, u) },
            { p: S.top[0], q: S.top[1], t: msU(w1, u) }, { p: S.right[0], q: S.right[1], t: msU(h1, u) }],
      depthLbl: msU(D, u) }));
    return;
  }
  if (level === 2){
    let W, H, nw, nh, x0, D, g = 0;
    do { W = rr(8, 16); H = rr(5, 10); nw = rr(3, W - 4); nh = rr(2, H - 2); x0 = rr(2, W - nw - 2); D = rr(3, 10); } while ((nw > W * 0.5 || nw < W * 0.35 || nh < H * 0.3 || D > W * 0.7) && g++ < 300);
    const P = [[0, 0], [W, 0], [W, H], [x0 + nw, H], [x0 + nw, H - nh], [x0, H - nh], [x0, H], [0, H]];
    const V = (W * H - nw * nh) * D;
    qData.ans = V; qData.ansDisplay = msU3(V, u);
    qData.workSteps = 'The whole block: ' + W + ' × ' + H + ' × ' + D + ' = ' + (W * H * D) + '. The part cut out: ' + nw + ' × ' + nh + ' × ' + D + ' = ' + (nw * nh * D) + '. V = ' + (W * H * D) + ' − ' + (nw * nh * D) + ' = <b>' + qData.ansDisplay + '</b>.';
    msQ(el, 'A slot <b>' + msU(nw, u) + ' wide</b> and <b>' + msU(nh, u) + ' deep</b> has been cut right through this rectangular block. Find the volume that is left.', msPrismSVG(P, D, {
      lbl: [{ p: P[0], q: P[1], t: msU(W, u) }, { p: P[7], q: P[0], t: msU(H, u) },
            ],
      depthLbl: msU(D, u) }));
    return;
  }
  /* Level 3: a block with a half cylinder on top, or with a round hole through it (2 d.p.) */
  const hole = Math.random() < 0.4;
  const R = msRoll(function(){
    const l = rr(4, 12) , h = rr(3, 10), D = rr(4, 15), r = hole ? rr(Math.max(1, Math.ceil(Math.min(l, h) * 0.2)), Math.max(1, Math.floor(Math.min(l, h) / 2) - 1)) : l / 2;
    const p = msPi2(function(P){ return hole ? (l * h - P * r * r) * D : (l * h + P * r * r / 2) * D; });
    return p ? { l: l, h: h, D: D, r: r, p: p } : null;
  });
  msSetPi2(R.p, u + '³');
  if (hole){
    const cx = R.l / 2, cy = R.h / 2, circ = [];
    for (let i = 0; i < 40; i++){ const t = 2 * Math.PI * i / 40; circ.push([cx + R.r * Math.cos(t), cy + R.r * Math.sin(t)]); }
    qData.workSteps = 'Block: ' + R.l + ' × ' + R.h + ' × ' + R.D + ' = ' + (R.l * R.h * R.D) + '. Hole: π × ' + R.r + '² × ' + R.D + ' = ' + (Math.PI * R.r * R.r * R.D).toFixed(3) + '…. V = <b>' + qData.ansDisplay + '</b> (2 d.p.).';
    msQ(el, 'A round hole of radius ' + msU(R.r, u) + ' is drilled right through this block. Find the volume left, correct to two decimal places.',
      msPrismSVG([[0, 0], [R.l, 0], [R.l, R.h], [0, R.h]], R.D, { holes: [circ], lbl: [{ p: [0, 0], q: [R.l, 0], t: msU(R.l, u) }, { p: [0, R.h], q: [0, 0], t: msU(R.h, u) }], depthLbl: msU(R.D, u) }));
    return;
  }
  const S = msSemiTop(R.l, R.h);
  qData.workSteps = 'End area: the rectangle ' + R.l + ' × ' + R.h + ' = ' + (R.l * R.h) + ', plus a semicircle of radius ' + msNum(R.r) + ': ½ × π × ' + msNum(R.r) + '² = ' + (Math.PI * R.r * R.r / 2).toFixed(3) + '…. V = end area × ' + R.D + ' = <b>' + qData.ansDisplay + '</b> (2 d.p.).';
  msQ(el, 'This solid is a rectangular prism with half a cylinder on top. Find its volume, correct to two decimal places.',
    msPrismSVG(S.pts, R.D, { smooth: S.smooth, lbl: [{ p: [0, 0], q: [R.l, 0], t: msU(R.l, u) }, { p: [0, R.h], q: [0, 0], t: msU(R.h, u) }], depthLbl: msU(R.D, u) }));
}

</script>
</body>
</html>