diff --git a/src/apps/epic/static/apps/epic/sea.js b/src/apps/epic/static/apps/epic/sea.js index 51a8dd9..3865b5d 100644 --- a/src/apps/epic/static/apps/epic/sea.js +++ b/src/apps/epic/static/apps/epic/sea.js @@ -269,7 +269,10 @@ var SeaDeal = (function () { if (!pos || !_seaHand[pos]) return; if (slot.classList.contains('sea-card-slot--focused')) { - // Second tap/click — open modal + // Second tap/click — dismiss selection glow, open modal + overlay.querySelectorAll('.sea-card-slot--focused').forEach(function (s) { + s.classList.remove('sea-card-slot--focused'); + }); var h = _seaHand[pos]; _viewingPos = pos; _populate(h.card, h.isLevity); diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 5adc783..d6508ad 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -835,28 +835,44 @@ $sea-card-h: 6.5rem; // Levity drawn card — secUser bg, priUser text + border (matches stage card polarity) .sea-card-slot--filled.sea-card-slot--levity { color: rgba(var(--priUser), 0.9); - background: rgba(var(--secUser), 0.85); + background: rgba(var(--secUser), 1); border-color: rgba(var(--priUser), 1); } // Gravity drawn card — priUser bg, secUser text + border .sea-card-slot--filled.sea-card-slot--gravity { color: rgba(var(--secUser), 0.9); - background: rgba(var(--priUser), 0.85); + background: rgba(var(--priUser), 1); border-color: rgba(var(--secUser), 0.6); } // Deposited — fully opaque by default; Cover/Cross are semi-transparent -.sea-card-slot--visible { opacity: 1; transition: opacity 1s ease; } +.sea-card-slot--visible { opacity: 1; transition: opacity 1s ease, box-shadow 0.15s ease; } -.sea-pos-cover .sea-card-slot--visible { opacity: 0.3; } -.sea-pos-cross .sea-card-slot--visible { opacity: 0.15; } +@keyframes sea-cover-appear { + 0% { opacity: 0; } + 50% { opacity: 1; } + 100% { opacity: 0.3; } +} + +@keyframes sea-cross-appear { + 0% { opacity: 0; } + 50% { opacity: 1; } + 100% { opacity: 0.15; } +} + +.sea-pos-cover .sea-card-slot--visible { opacity: 0.3; animation: sea-cover-appear 2s ease; } +.sea-pos-cross .sea-card-slot--visible { opacity: 0.15; animation: sea-cross-appear 2s ease; } // Hover: reveal fully (snappy) .sea-pos-cover .sea-card-slot--visible:hover, .sea-pos-cross .sea-card-slot--visible:hover { opacity: 1; transition: opacity 0.15s ease; } -// Focused (first tap): persist at opacity 1 until clicked outside -.sea-card-slot--focused { opacity: 1 !important; transition: opacity 0.15s ease; } +// Focused (first tap): persist at opacity 1 + selection glow until modal opens +.sea-card-slot--focused { + opacity: 1 !important; + transition: opacity 0.15s ease, box-shadow 0.15s ease; + box-shadow: 0 0 2rem 0.75rem rgba(var(--ninUser), 0.35), 0 0 0.4rem rgba(0, 0, 0, 0.85); +} // Cover + Cross — absolutely overlaid on the Sig card in .sea-pos-center .sea-pos-center { position: relative; }