@layer components {
    :root {
        --patience-board-slot: color-mix(
            in oklch,
            var(--label) 6%,
            transparent
        );
        --patience-board-slot-edge: color-mix(
            in oklch,
            var(--label) 15%,
            transparent
        );
        --patience-board-slot-shade: color-mix(
            in oklch,
            var(--label) 9%,
            transparent
        );
        --patience-board-watermark: color-mix(
            in oklch,
            var(--label) 14%,
            transparent
        );
        --patience-board-target: var(--tint);
        --patience-board-target-wash: color-mix(
            in oklch,
            var(--tint) 18%,
            transparent
        );
        --patience-board-focus: var(--tint);
    }

    .patience-board {
        --patience-board-width: max(
            100% + 1.5rem,
            min(46rem, 100vw - 3rem, (100svh - 14rem) * 1.4)
        );
        --patience-board-gap: clamp(0.1875rem, 1.1cqi, 0.625rem);

        container-type: inline-size;
        display: grid;
        inline-size: var(--patience-board-width);
        margin-block: 0;
        margin-inline: calc((100% - var(--patience-board-width)) / 2);
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .patience-board__top,
    .patience-board__columns {
        display: grid;
        gap: var(--patience-board-gap);
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .patience-board__columns {
        margin-block-start: calc(var(--patience-board-gap) * 3 + 0.25rem);
    }

    .patience-board__gap {
        min-inline-size: 0;
    }

    .patience-board__slot {
        aspect-ratio: 5 / 7;
        background-color: var(--patience-board-slot);
        border-radius: 9% / 6.43%;
        box-shadow:
            inset 0 0 0 0.0625rem var(--patience-board-slot-edge),
            inset 0 0.125rem 0.3125rem var(--patience-board-slot-shade);
        box-sizing: border-box;
        min-inline-size: 0;
        position: relative;

        &.patience-board__slot--foundation::before {
            background-color: var(--patience-board-watermark);
            content: "";
            inset: 30% 22%;
            mask: var(--patience-shape-spades) center / contain no-repeat;
            position: absolute;
        }

        &.patience-board__slot--hearts::before {
            mask-image: var(--patience-shape-hearts);
        }

        &.patience-board__slot--clubs::before {
            mask-image: var(--patience-shape-clubs);
        }

        &.patience-board__slot--diamonds::before {
            mask-image: var(--patience-shape-diamonds);
        }

        &.patience-board__slot--column {
            background: none;
            border: 0.0625rem dashed var(--patience-board-slot-edge);
            box-shadow: none;
        }

        &.patience-board__slot--target,
        &[data-drop-target] {
            background-color: var(--patience-board-target-wash);
            border-color: transparent;
            box-shadow:
                0 0 0 0.125rem var(--patience-board-target),
                0 0 0.75rem var(--patience-board-target-wash);
        }

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

    .patience-board__pile-card {
        inset: 0;
        position: absolute;
    }

    .patience-board__column {
        --patience-board-fan: 1;

        display: flex;
        flex-direction: column;
        min-inline-size: 0;
        position: relative;

        &:has(> .patience-board__card:nth-child(13)) {
            --patience-board-fan: 0.86;
        }

        &:has(> .patience-board__card:nth-child(16)) {
            --patience-board-fan: 0.72;
        }

        &:has(> .patience-board__card:nth-child(19)) {
            --patience-board-fan: 0.6;
        }
    }

    .patience-board__card {
        flex: none;
        min-inline-size: 0;

        & + .patience-board__card {
            margin-block-start: calc(
                var(--patience-card-index-block-size) *
                    var(--patience-board-fan) - 140%
            );
        }

        &[data-from] {
            cursor: grab;
            touch-action: none;
        }
    }

    .patience-board__drop {
        appearance: none;
        background: none;
        border: 0;
        border-radius: 0.5rem;
        color: inherit;
        cursor: pointer;
        font: inherit;
        inset: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 2;
        -webkit-tap-highlight-color: transparent;

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

    .patience-board--finished .patience-board__card {
        cursor: default;
    }
}