@layer components {
    :root {
        --patience-card-face: light-dark(
            oklch(99.4% 0.006 85deg),
            oklch(91.5% 0.017 82deg)
        );
        --patience-card-face-low: light-dark(
            oklch(96.8% 0.012 82deg),
            oklch(87.2% 0.021 80deg)
        );
        --patience-card-edge: light-dark(
            oklch(30% 0.03 60deg / 24%),
            oklch(0% 0 0deg / 70%)
        );
        --patience-card-ink: oklch(23% 0.012 60deg);
        --patience-card-ink-red: oklch(52% 0.2 27deg);
        --patience-card-court: light-dark(
            oklch(91.5% 0.06 84deg / 85%),
            oklch(83.5% 0.065 82deg / 85%)
        );
        --patience-card-court-edge: oklch(56% 0.09 72deg / 45%);
        --patience-card-shadow: light-dark(
            oklch(30% 0.03 60deg / 16%),
            oklch(0% 0 0deg / 50%)
        );
        --patience-card-shadow-strong: light-dark(
            oklch(30% 0.03 60deg / 28%),
            oklch(0% 0 0deg / 70%)
        );
        --patience-card-ring: var(--tint);
        --patience-card-wash: color-mix(in oklch, var(--tint) 18%, transparent);
        --patience-card-glow: light-dark(
            oklch(80% 0.16 82deg / 80%),
            oklch(84% 0.15 84deg / 70%)
        );
        --patience-card-focus: var(--tint);
    }

    .patience-card {
        --patience-card-colour: var(--patience-card-ink);
        --patience-card-suit: var(--patience-shape-spades);
        --patience-card-index-block-size: calc(
            5% + 1.52 * clamp(0.9375rem, 26%, 1.125rem) + 0.1875rem
        );
        --patience-card-depth: calc(
            5cqi + 1.52 * clamp(0.9375rem, 26cqi, 1.125rem) + 0.1875rem
        );

        aspect-ratio: 5 / 7;
        background: linear-gradient(
            var(--patience-card-face) 45%,
            var(--patience-card-face-low)
        );
        border: 0.0625rem solid var(--patience-card-edge);
        border-radius: 9% / 6.43%;
        box-shadow:
            0 0.0625rem 0.125rem var(--patience-card-shadow),
            0 0.125rem 0.375rem var(--patience-card-shadow);
        box-sizing: border-box;
        color: var(--patience-card-colour);
        container-type: inline-size;
        display: block;
        font: inherit;
        forced-color-adjust: none;
        position: relative;
        text-decoration: none;
        transition:
            translate 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 140ms ease-out;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-drag: none;

        &.patience-card--red {
            --patience-card-colour: var(--patience-card-ink-red);
        }

        &.patience-card--hearts {
            --patience-card-suit: var(--patience-shape-hearts);
        }

        &.patience-card--clubs {
            --patience-card-suit: var(--patience-shape-clubs);
        }

        &.patience-card--diamonds {
            --patience-card-suit: var(--patience-shape-diamonds);
        }

        &.patience-card--jack {
            --patience-card-emblem: var(--patience-shape-jack);
        }

        &.patience-card--queen {
            --patience-card-emblem: var(--patience-shape-queen);
        }

        &.patience-card--king {
            --patience-card-emblem: var(--patience-shape-king);
        }

        &.patience-card--selected,
        &[data-lifted] {
            box-shadow:
                0 0 0 0.125rem var(--patience-card-ring),
                0 0.375rem 0.875rem var(--patience-card-shadow-strong);
            translate: 0 -0.25rem;
            z-index: 1;
        }

        &.patience-card--target,
        &[data-drop-target] {
            background:
                linear-gradient(
                    var(--patience-card-wash),
                    var(--patience-card-wash)
                ),
                linear-gradient(
                    var(--patience-card-face) 45%,
                    var(--patience-card-face-low)
                );
            box-shadow:
                0 0 0 0.125rem var(--patience-card-ring),
                0 0 0.75rem var(--patience-card-wash);
        }

        &[data-drop-over] {
            box-shadow:
                0 0 0 0.1875rem var(--patience-card-ring),
                0 0 1rem var(--patience-card-ring);
        }

        &[data-dragging] {
            box-shadow:
                0 0 0 0.0625rem var(--patience-card-edge),
                0 0.75rem 1.5rem var(--patience-card-shadow-strong);
            cursor: grabbing;
            transition: none;
            z-index: 3;
        }

        &.patience-card--stacked {
            box-shadow: none;
        }

        &[data-flip-moving] {
            box-shadow:
                0 0 0 0.0625rem var(--patience-card-edge),
                0 0.5rem 1.25rem var(--patience-card-shadow-strong);
            transition: none;
        }

        &.patience-card--complete {
            box-shadow:
                0 0 0 0.0625rem var(--patience-card-glow),
                0 0 0.875rem var(--patience-card-glow);
        }

        &.patience-card--complete[data-finale] {
            animation: patience-card-crown 760ms cubic-bezier(0.2, 0.8, 0.2, 1)
                backwards;

            &.patience-card--hearts {
                animation-delay: 90ms;
            }

            &.patience-card--clubs {
                animation-delay: 180ms;
            }

            &.patience-card--diamonds {
                animation-delay: 270ms;
            }
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--patience-card-focus);
            outline-offset: 0.125rem;
        }
    }

    a.patience-card {
        cursor: pointer;
    }

    .patience-card__index {
        display: grid;
        font-size: clamp(0.9375rem, 26cqi, 1.125rem);
        font-variant-numeric: lining-nums;
        font-weight: 700;
        inset-block-start: 5cqi;
        inset-inline-start: 4.5cqi;
        justify-items: center;
        position: absolute;
        row-gap: 0.1em;

        &.patience-card__index--end {
            display: none;
            inset-block: auto 5cqi;
            inset-inline: auto 4.5cqi;
            rotate: 180deg;
        }
    }

    .patience-card__rank {
        letter-spacing: -0.02em;
        line-height: 0.82;

        .patience-card--wide & {
            letter-spacing: -0.08em;
        }
    }

    .patience-card__suit {
        aspect-ratio: 1;
        background-color: currentColor;
        inline-size: 0.6em;
        mask: var(--patience-card-suit) center / contain no-repeat;
    }

    .patience-card__face {
        background-color: currentColor;
        inset: calc(var(--patience-card-depth) + 0.1875rem) 22% 8%;
        mask: var(--patience-card-suit) center / contain no-repeat;
        position: absolute;

        .patience-card--ace & {
            inset: calc(var(--patience-card-depth) + 0.0625rem) 15% 5%;
        }

        .patience-card--court & {
            background-color: var(--patience-card-court);
            border: 0.0625rem solid var(--patience-card-court-edge);
            border-radius: 14% / 12%;
            box-sizing: border-box;
            inset: calc(var(--patience-card-depth) + 0.125rem) 11% 6%;
            mask: none;

            &::before {
                background-color: currentColor;
                content: "";
                inset: 9% 12%;
                mask: var(--patience-card-emblem) center / contain no-repeat;
                position: absolute;
            }
        }
    }

    @container (min-width: 4.5rem) {
        .patience-card__index.patience-card__index--end {
            display: grid;
        }

        .patience-card__face {
            inset: calc(var(--patience-card-depth) + 0.125rem) 23%;

            .patience-card--ace & {
                inset: var(--patience-card-depth) 13%
                    calc(var(--patience-card-depth) - 0.75rem);
            }

            .patience-card--court & {
                inset: calc(var(--patience-card-depth) + 0.125rem) 19%;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .patience-card {
            transition: none;
        }
    }

    @keyframes patience-card-crown {
        0% {
            box-shadow:
                0 0 0 0 var(--patience-card-glow),
                0 0 0 var(--patience-card-glow);
            scale: 1;
        }

        45% {
            box-shadow:
                0 0 0 0.25rem var(--patience-card-glow),
                0 0 2rem var(--patience-card-glow);
            scale: 1.08;
        }

        100% {
            box-shadow:
                0 0 0 0.0625rem var(--patience-card-glow),
                0 0 0.875rem var(--patience-card-glow);
            scale: 1;
        }
    }
}