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 {