A.6 + A.7 billboard My Sign applet + gameboard My Sea applet image-rendering + applet-level FLIP-to-back — TDD. Sprints A.6 + A.7 of [[project-image-based-deck-face-rendering]]: rolls image-mode out to the two card-rendering applets (My Sign on /billboard/, My Sea on /gameboard/). Both reuse the shared .sig-stage-card.sig-stage-card--image SCSS contract via a comma-list selector extension covering the parallel container classes (.my-sign-applet-card.my-sign-applet-card--image + .my-sea-slot.my-sea-slot--image) — single source of truth for the contour-stroke drop-shadow chain + tray-card silhouette black depth shadow + .is-flipped-to-back visibility toggle + the --img-stroke-color arcana-keyed CSS prop. Templates branch server-side on card.deck_variant.has_card_images: image-mode renders <img class="sig-stage-card-img" src="{{ card.image_url }}"> w. the marker class + data-arcana-key attr; text mode keeps the existing fan-card-corner + fan-card-face scaffold unchanged. SCSS import-order quirk: _card-deck.scss imports BEFORE both _billboard.scss (which nests .my-sign-applet-card inside .my-sign-applet-body for container queries) and _gameboard.scss (which nests .my-sea-slot--filled.--gravity/--levity inside #id_applet_my_sea w. specificity 1,2,0). The shared top-level image-mode rule at 0,2,0 loses on bg/border/padding to those nested base rules, so each app's stylesheet gets a parallel &.--image { background: transparent; border: 0; padding: 0 } override inside its own nest. The filter-chain rules on .sig-stage-card-img (descendant selector inside the shared rule) DO win since the apps don't restyle that class — only the outer container needs the parallel override. Sprint A.6 bonus: applet-level FLIP btn for non-polarized image-equipped decks (Minchiate today). Mirrors the my_sign.html main page A.5-polish-2 FLIP-to-back contract — .my-sign-applet-flip-btn nested inside the .--image card so absolute positioning anchors to the card bounds; inline <script> IIFE (gated inside the sig-present {% with card %} scope to keep card in lexical reach + prevent the JS selector string leaking into the no-sig DOM where assertNotContains "my-sign-applet-card" ITs catch it) attaches a click handler that runs the same rotateY 0→90→0 animation, toggles .is-flipped-to-back at the halfway point, and clears data-flipping at end; SCSS .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn { opacity: 0; pointer-events: none } hides the btn mid-spin. Critical scope bug caught + fixed during browser verify: initial draft had the script BLOCK + its {% if card.deck_variant.has_card_images %} gate placed AFTER the {% endwith %} closing tag — card was out of scope at the {% if %} evaluation, Django treats undefined vars as empty string, the gate evaluated falsy, and the script NEVER rendered (the FLIP btn rendered fine since it was inside the with block, but no JS handler → click did nothing but the CSS depress animation). Fix: move {% endwith %} to AFTER the script gate so card is still in scope. 7 new ITs total: 2 in BillboardAppletMySignTest (image-equipped Minchiate renders --image class + img + correct asset URL + lacks text scaffold; Earthman keeps the text scaffold + lacks --image); 3 in BillboardMySignViewTest (data-deck-polarized attr present; back-img element renders for non-polarized image deck; polarized deck omits it); 1 in GameboardViewTest (image-equipped Minchiate slot renders --image + img + lacks text scaffold); plus regression coverage on the no-sig empty-state assertion that originally caught the script-scope bug (assertNotContains validates the script doesn't leak in the no-sig case). Tests: 6 new ITs green; 1306/1306 IT+UT total green (72s; +6 from bdf6a25's 1303 — minus 3 dups since some ITs were counted across both A.6 + A.5-polish-2 runs). Visual verify by user 2026-05-25 PM: stage card image renders cleanly; FLIP cycles to back image + back via animation; FLIP btn hides during 500ms spin; placeholder dim styling correctly distinguishes no-deck state

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/apps/gameboard/tests/integrated/test_views.py

@@ -130,6 +130,47 @@ class GameboardViewTest(TestCase):
         empty_positions = {e.get("data-position") for e in empties}
         self.assertEqual(empty_positions, {"cover", "crown"})
 
+    def test_my_sea_applet_slot_renders_image_when_deck_has_card_images(self):
+        """Sprint A.7 — when the drawn card belongs to an image-equipped deck
+        (Minchiate today), the .my-sea-slot--filled carries `.my-sea-slot--image`
+        + renders an <img.sig-stage-card-img> child instead of the text scaffold.
+        Shares the contour-stroke + depth shadow SCSS w. my_sign + my-sea
+        central sig + my-sign-applet via the comma-list selector in
+        `_card-deck.scss`."""
+        from apps.epic.models import personal_sig_cards, TarotCard, DeckVariant
+        from apps.gameboard.models import MySeaDraw
+        sig_pile = personal_sig_cards(self.user)
+        self.user.significator = sig_pile[0]
+        self.user.save()
+        minchiate = DeckVariant.objects.get(slug="minchiate-fiorentine-1860-1890")
+        # Use a Minchiate card for the slot draw (doesn't need to be the sig
+        # — the sig is from Earthman; the drawn card is a separate concept).
+        card = TarotCard.objects.filter(
+            deck_variant=minchiate, slug="il-matto",
+        ).first()
+        MySeaDraw.objects.create(
+            user=self.user,
+            spread="situation-action-outcome",
+            hand=[{"position": "lay", "card_id": card.id,
+                   "reversed": False, "polarity": "gravity"}],
+            significator_id=self.user.significator_id,
+        )
+        response = self.client.get("/gameboard/")
+        parsed = lxml.html.fromstring(response.content)
+        [filled] = parsed.cssselect("#id_applet_my_sea .my-sea-slot--filled")
+        self.assertIn("my-sea-slot--image", filled.get("class", ""))
+        self.assertEqual(filled.get("data-arcana-key"), "MAJOR")
+        [img] = filled.cssselect("img.sig-stage-card-img")
+        self.assertIn(
+            "minchiate-fiorentine-1860-1890-trumps-00-il-matto.png",
+            img.get("src", ""),
+        )
+        # Text scaffold absent in image mode.
+        self.assertEqual(
+            len(filled.cssselect(".fan-card-corner")), 0,
+            "Image-mode slot must not render the text scaffold",
+        )
+
     def test_my_sea_applet_renders_slots_even_when_user_significator_cleared(self):
         """Regression (user bug 2026-05-25 PM): deleting User.significator
         (via my-sign DEL) must NOT blank the My Sea applet on the gameboard