Flashcard flip: paint one face explicitly, never rely on backface-visibility

On a GPU-composited desktop the flipped card showed the question mirrored
over the answer. Both faces are glass layers with backdrop-filter, and on
some compositing paths the front's backface keeps rendering, so the
pre-rotated back face and the mirrored front face both painted.

- The faces are now painted by an explicit visibility swap driven by the
  animation's own rotation (onUpdate): the swap lands at the 90° edge-on
  moment, where it cannot be seen, so exactly one face is ever in the
  render tree — independent of backface-visibility and of the browser's
  3D flattening rules. onAnimationComplete lands the swap for instant
  flips (reduced motion now skips the spring, matching the app's motion
  rules).
- PromptCard takes an optional style so the face can carry the visibility.
- phase-2 suite: the painted-face invariant at rest, flipped and flipped
  back, plus the answer reading inside the card (56 checks).
- README: decision 53. SW -> freezmo-v39.

tests/phase2-test.mjs

@@ -175,6 +175,48 @@ const browser = await launchBrowser();
   await context.close();
 }
 
+/* 1d. flashcard flip paints exactly one face ------------------------- */
+{
+  const { context, page } = await makePage(browser);
+  const flashDeck = {
+    ...DECK,
+    id: "seed_flash",
+    title: "Flashcards",
+    activities: [
+      { type: "flashcard", id: "f1", xp: 10, topic: "Sky", front: "Why is the sky blue?", back: "Rayleigh scattering.", explanation: "e" },
+      { type: "flashcard", id: "f2", xp: 10, topic: "Sky", front: "Second question", back: "Second answer", explanation: "e" },
+    ],
+  };
+  await seed(page, { decks: [flashDeck] });
+  await page.goto(`${BASE}/deck/seed_flash`, { waitUntil: "networkidle" });
+  await page.waitForTimeout(1000);
+
+  const faces = () =>
+    page.evaluate(() => {
+      const motion = document.querySelector("button.group > div");
+      const [front, back] = motion ? [...motion.children] : [];
+      const visibility = (element) => (element ? getComputedStyle(element).visibility : null);
+      return { front: visibility(front), back: visibility(back) };
+    });
+
+  const atRest = await faces();
+  check("flashcard: front face painted at rest", atRest.front === "visible" && atRest.back === "hidden", JSON.stringify(atRest));
+  await page.locator("button.group").first().click();
+  await page.waitForTimeout(900);
+  const flipped = await faces();
+  check(
+    "flashcard: flip paints the back face only (never mirrored)",
+    flipped.front === "hidden" && flipped.back === "visible",
+    JSON.stringify(flipped),
+  );
+  check("flashcard: the answer reads inside the card", await page.locator("button.group").getByText("Rayleigh scattering.").isVisible());
+  await page.locator("button.group").first().click();
+  await page.waitForTimeout(1000);
+  const back = await faces();
+  check("flashcard: flipping back restores the question face", back.front === "visible" && back.back === "hidden", JSON.stringify(back));
+  await context.close();
+}
+
 /* 2. SRS due → review session; stats screen -------------------------- */
 {
   const now = Date.now();