@layer components {
    :root {
        --poker-patience-card-face: light-dark(
            oklch(0.995 0.004 95),
            oklch(0.93 0.012 85)
        );
        --poker-patience-card-face-shade: light-dark(
            oklch(0.965 0.009 85),
            oklch(0.865 0.016 80)
        );
        --poker-patience-card-edge: light-dark(
            oklch(0.3 0.02 60 / 16%),
            oklch(0.2 0.02 60 / 45%)
        );
        --poker-patience-card-shadow: light-dark(
            oklch(0.3 0.03 60 / 18%),
            oklch(0 0 0 / 55%)
        );
        --poker-patience-card-black: oklch(0.22 0.015 265);
        --poker-patience-card-red: oklch(0.53 0.2 27);
        --poker-patience-card-back: oklch(from var(--tint) 0.42 c h);
        --poker-patience-card-back-line: oklch(from var(--tint) 0.58 c h);
        --poker-patience-card-back-edge: oklch(from var(--tint) 0.3 c h);
    }

    .poker-patience-card {
        aspect-ratio: 5 / 7;
        background: linear-gradient(
            var(--poker-patience-card-face),
            var(--poker-patience-card-face-shade)
        );
        border-radius: 9% / 6.43%;
        box-shadow:
            inset 0 0 0 0.0625rem var(--poker-patience-card-edge),
            0 0.0625rem 0.125rem var(--poker-patience-card-shadow),
            0 0.25rem 0.625rem -0.125rem var(--poker-patience-card-shadow);
        color: var(--poker-patience-card-black);
        display: block;
        inline-size: 100%;
        min-inline-size: 0;

        &.poker-patience-card--red {
            color: var(--poker-patience-card-red);
        }

        &.poker-patience-card--back {
            background:
                repeating-linear-gradient(
                    45deg,
                    var(--poker-patience-card-back-line) 0 0.0625rem,
                    transparent 0.0625rem 0.3125rem
                ),
                repeating-linear-gradient(
                    -45deg,
                    var(--poker-patience-card-back-line) 0 0.0625rem,
                    transparent 0.0625rem 0.3125rem
                ),
                var(--poker-patience-card-back);
            box-shadow:
                inset 0 0 0 0.25rem var(--poker-patience-card-face),
                inset 0 0 0 0.3125rem var(--poker-patience-card-back-edge),
                0 0.0625rem 0.125rem var(--poker-patience-card-shadow),
                0 0.25rem 0.625rem -0.125rem var(--poker-patience-card-shadow);
        }
    }

    .poker-patience-card__face {
        block-size: 100%;
        display: block;
        inline-size: 100%;
        overflow: visible;
    }

    .poker-patience-card__rank {
        font-family: inherit;
        font-weight: 700;
    }

    .poker-patience-card__sprite {
        block-size: 0;
        inline-size: 0;
        overflow: hidden;
        position: absolute;
    }
}