From 5b6a1be3473ddcb9ccb65acdb10a56d5e3760deb Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 1 Jun 2026 13:59:06 -0400 Subject: [PATCH] =?UTF-8?q?my-sea=20spread:=20reversed=20CROSS=20card=20fi?= =?UTF-8?q?nally=20reads=20as=20reversed=20=E2=80=94=20upright=20cross=20t?= =?UTF-8?q?op=20points=20left=20(270=C2=B0),=20reversed=20points=20right?= =?UTF-8?q?=20(90=C2=B0),=20180=C2=B0=20apart=20=E2=80=94=20TDD-adjacent?= =?UTF-8?q?=20CSS=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Celtic-Cross crossing card is rotated to lie landscape. Two equal-specificity rules set its rotation: `.sea-pos-cross .sea-card-slot` (upright) and `.sea-pos-cross .sea-card-slot--reversed` (reversed) — both (0,2,0). The upright rule sits LATER in source, so it won the cascade for reversed cross cards too: every crossing card rendered at 90° (top-right) and a reversed card never indicated reversal in the spread (the modal was fine). The inline comment claiming the reversed rule had 'higher specificity' was simply wrong. Fix (user-spec: reversed cross top points rightward): keep the reversed card at 90° (top-right) and flip the UPRIGHT to 270° (top-left), so the two read 180° apart. The reversed rule is re-specified as `.sea-pos-cross .sea-card-slot.sea-card-slot--reversed` (0,3,0) so it genuinely out-specifies the base rule and wins regardless of source order. [[feedback-scss-import-order-specificity]] Pure CSS in _card-deck.scss; covers both live draws (_fillSlot) and saved hands (_my_sea_slot.html), which share the .sea-card-slot--reversed/.sea-pos-cross classes. Modal reversal (.stage-card--reversed, 180°) untouched. No tests pin the rotation degrees. Verified in the compiled output.css cascade. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/static_src/scss/_card-deck.scss | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 4e94991..160ac6b 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -1676,9 +1676,15 @@ $sea-card-h: 6.5rem; // not just each character upside-down in place. .sea-card-slot--reversed { transform: rotate(180deg); } -// Cross-position adds 90° already; reversed cross combines to 270°. Higher -// specificity than the .sea-pos-cross .sea-card-slot rule so it wins. -.sea-pos-cross .sea-card-slot--reversed { transform: rotate(270deg); } +// Reversed crossing card: top toward the RIGHT (90° CW) — 180° from the +// upright cross (270°, top-left) so the reversal is visually unmistakable in +// the spread (the modal indicates it separately). MUST out-specify the +// `.sea-pos-cross .sea-card-slot` rule above — chaining `.sea-card-slot +// .sea-card-slot--reversed` makes this (0,3,0) vs that (0,2,0); the prior +// `.sea-pos-cross .sea-card-slot--reversed` was only (0,2,0) — EQUAL — so the +// later upright rule won the cascade and reversed cross never read as reversed. +// [[feedback-scss-import-order-specificity]] +.sea-pos-cross .sea-card-slot.sea-card-slot--reversed { transform: rotate(90deg); } // Long Roman numerals (≥ 5 chars: XVIII, XXIII, XXVIII, XXXIII, XXXVIII, // XLIII, XLVIII) — squeeze horizontally via scaleX so they fit the slot @@ -1783,7 +1789,12 @@ $_sea-card-glow: 0 0 0.5rem 0.5rem rgba(var(--ninUser), 0.3), 0 0 0.4rem rgba(0, .sea-pos-label { opacity: 0.6; } } -.sea-pos-cross .sea-card-slot { transform: rotate(90deg); } +// Upright crossing card lies across with its top toward the LEFT (270° CW), +// so a reversed crossing card (below) reads 180° opposite — top toward the +// RIGHT — instead of looking identical. (Bug pre-2026-06-01: the reversed +// rule lost the cascade and every cross card pointed right, so reversal was +// never indicated. user-spec: reversed cross top points rightward.) +.sea-pos-cross .sea-card-slot { transform: rotate(270deg); } // Sig card in center slot — compact rank + icon display; tilted CCW so Cover slot peeks through .sea-sig-card {