diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 7ccc484..caacc67 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -652,16 +652,26 @@ html:has(.sig-backdrop) { width: 100%; height: 100%; object-fit: contain; - // 4 cardinal-direction drop-shadows track the PNG's alpha - // channel → contour-following stroke. 1.5px each → ~3px - // combined apparent stroke. Mobile-safe: opacity-based effects - // per [[feedback-mobile-svg-glow]] (filter on raster images - // works fine across browsers, the dead-end was SVG glow). + // Filter chain (order matters — each drop-shadow operates on + // the prior result): + // 1-4: 4 cardinal-direction drop-shadows at 0.2rem (~3.2px) + // each → contour-following stroke. Combined apparent width + // ~6.4px. Bump to 8-direction stack if we ever go past + // ~0.5rem so curved edges stay even. + // 5: down-right black 1,1 offset 2px-blur drop-shadow + // matches the silhouette shadow `.tray-cell > img` carries + // (`_tray.scss:272`) — "lifted off the felt" depth cue. + // Comes AFTER the strokes so it traces the stroked + // silhouette, not just the original PNG alpha. + // Mobile-safe: filter on raster images works fine cross-browser + // (the [[feedback-mobile-svg-glow]] dead-end was specifically + // SVG glow, not raster drop-shadow). filter: - drop-shadow( 1.5px 0 0 var(--img-stroke-color)) - drop-shadow(-1.5px 0 0 var(--img-stroke-color)) - drop-shadow( 0 1.5px 0 var(--img-stroke-color)) - drop-shadow( 0 -1.5px 0 var(--img-stroke-color)); + drop-shadow( 0.2rem 0 0 var(--img-stroke-color)) + drop-shadow(-0.2rem 0 0 var(--img-stroke-color)) + drop-shadow( 0 0.2rem 0 var(--img-stroke-color)) + drop-shadow( 0 -0.2rem 0 var(--img-stroke-color)) + drop-shadow( 1px 1px 2px rgba(0, 0, 0, 1)); } } }