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/static_src/scss/_billboard.scss

@@ -485,6 +485,19 @@ body.page-billposts {
         // `_card-deck.scss:1002-1019` for levity, :1039-1057 for gravity).
         background: rgba(var(--priUser), 1);
         border: 0.12rem solid rgba(var(--secUser), 0.6);
+
+        // Sprint A.6 — image-mode override. `_card-deck.scss` imports before
+        // `_billboard.scss`, so the shared `.my-sign-applet-card--image` rule
+        // there gets out-cascaded by the base bg/border above (same specificity,
+        // later declaration wins). Re-state the transparency here AFTER the
+        // base. The contour stroke + depth shadow on the <img> still come
+        // from the shared `_card-deck.scss` rule, which only loses on `bg` +
+        // `border` properties — not on the filter chain.
+        &.my-sign-applet-card--image {
+            background: transparent;
+            border: 0;
+            position: relative;  // anchor for the absolute FLIP btn
+        }
         color: rgba(var(--terUser), 1);
         padding: 0.35rem;
         position: relative;
@@ -568,6 +581,24 @@ body.page-billposts {
         }
     }
 
+    // Sprint A.6 — FLIP btn for non-polarized image-equipped decks in the
+    // applet. Nested INSIDE the .my-sign-applet-card.--image (which has
+    // position: relative) so absolute positioning anchors to the card bounds.
+    // Hidden during the rotateY animation via the [data-flipping] hook on
+    // the parent card — same pattern as the my_sign page (`_card-deck.scss:889`)
+    // and the tarot-fan view (`_card-deck.scss:459`).
+    .my-sign-applet-card .my-sign-applet-flip-btn {
+        position: absolute;
+        z-index: 10;
+        bottom: 0.6rem;
+        left: 0.6rem;
+        margin: 0;
+    }
+    .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn {
+        opacity: 0;
+        pointer-events: none;
+    }
+
     // Stat block — mirrors the stage card's footprint (same 5:8 aspect +
     // height) so the pair reads as a balanced 2-tile composition centred
     // in the applet aperture. Styling cribbed from `.sig-stat-block` in