@layer components {
    :root {
        --poker-patience-grid-slot: color-mix(
            in oklch,
            var(--tint) 7%,
            var(--secondary-system-grouped-background)
        );
        --poker-patience-grid-slot-glow: color-mix(
            in oklch,
            var(--tint) 12%,
            var(--secondary-system-grouped-background)
        );
        --poker-patience-grid-slot-edge: color-mix(
            in oklch,
            var(--tint) 40%,
            transparent
        );
        --poker-patience-grid-slot-hover: color-mix(
            in oklch,
            var(--tint) 16%,
            var(--secondary-system-grouped-background)
        );
        --poker-patience-grid-slot-shade: light-dark(
            oklch(0.3 0.03 60 / 12%),
            oklch(0 0 0 / 40%)
        );
        --poker-patience-grid-slot-mark: var(--tint);
        --poker-patience-grid-ring: var(--tint);
        --poker-patience-grid-glow: color-mix(
            in oklch,
            var(--tint) 45%,
            transparent
        );
        --poker-patience-grid-chip: var(--tint-fill);
        --poker-patience-grid-chip-points: var(--tint);
        --poker-patience-grid-chip-hand: var(--label);
        --poker-patience-grid-partial: var(--secondary-label);
        --poker-patience-grid-partial-edge: var(--separator);
        --poker-patience-grid-nothing: var(--tertiary-label);
        --poker-patience-grid-best: var(--tint);
        --poker-patience-grid-best-label: var(--tint-label);
        --poker-patience-grid-total: var(--tint);
        --poker-patience-grid-best-hand: var(--label);
        --poker-patience-grid-caption: var(--secondary-label);
        --poker-patience-grid-reference: var(--secondary-label);
    }

    .poker-patience-grid {
        display: grid;
        gap: 1.5rem;
        inline-size: 100%;
    }

    .poker-patience-grid__table {
        display: grid;
        gap: 0.3125rem;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto repeat(5, auto) minmax(3.5rem, auto);
        user-select: none;
        -webkit-user-select: none;

        &.poker-patience-grid__table--size-4 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            grid-template-rows: auto repeat(4, auto) minmax(3.5rem, auto);
        }
    }

    .poker-patience-grid__head {
        align-items: end;
        display: flex;
        grid-column: 1 / -2;
        min-block-size: 3rem;
        padding-block-end: 0.375rem;
    }

    .poker-patience-grid__best {
        display: grid;
        gap: 0.125rem;
        margin: 0;
    }

    .poker-patience-grid__best-hand {
        color: var(--poker-patience-grid-best-hand);
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .poker-patience-grid__form {
        display: grid;
    }

    .poker-patience-grid__slot {
        aspect-ratio: 5 / 7;
        background:
            radial-gradient(
                circle at 50% 35%,
                var(--poker-patience-grid-slot-glow),
                transparent 70%
            ),
            var(--poker-patience-grid-slot);
        border: 0.0625rem dashed var(--poker-patience-grid-slot-edge);
        border-radius: 9% / 6.43%;
        box-shadow: inset 0 0.0625rem 0.1875rem
            var(--poker-patience-grid-slot-shade);
        color: var(--poker-patience-grid-slot-mark);
        cursor: pointer;
        display: grid;
        inline-size: 100%;
        min-block-size: 2.75rem;
        padding: 0;
        place-items: center;
        -webkit-tap-highlight-color: transparent;

        &::after {
            aspect-ratio: 1;
            background:
                linear-gradient(currentColor, currentColor) center / 100%
                    0.125rem no-repeat,
                linear-gradient(currentColor, currentColor) center / 0.125rem
                    100% no-repeat;
            content: "";
            inline-size: 32%;
            opacity: 0;
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--poker-patience-grid-ring);
            outline-offset: 0.125rem;

            &::after {
                opacity: 1;
            }
        }

        &:active {
            background: var(--poker-patience-grid-slot-hover);
            scale: 0.95;
        }

        &[data-poker-patience-target] {
            background: var(--poker-patience-grid-slot-hover);
            border-color: var(--poker-patience-grid-ring);
            border-style: solid;
            box-shadow: 0 0 0 0.1875rem var(--poker-patience-grid-glow);
            scale: 1.06;

            &::after {
                opacity: 1;
            }
        }
    }

    .poker-patience-grid__form[data-pending] .poker-patience-grid__slot {
        background: var(--poker-patience-grid-slot-hover);
        border-color: var(--poker-patience-grid-ring);
        border-style: solid;
    }

    .poker-patience-grid__placed {
        border-radius: 9% / 6.43%;
        display: grid;

        &.poker-patience-grid__placed--highlight {
            box-shadow:
                0 0 0 0.125rem var(--poker-patience-grid-ring),
                0 0 0.625rem 0.0625rem var(--poker-patience-grid-glow);
        }

        &.poker-patience-grid__placed--best {
            box-shadow:
                0 0 0 0.1875rem var(--poker-patience-grid-ring),
                0 0 1rem 0.1875rem var(--poker-patience-grid-glow);
        }
    }

    .poker-patience-grid__line {
        display: grid;
        justify-items: stretch;
        min-inline-size: 0;

        &.poker-patience-grid__line--row {
            align-items: center;
        }

        &.poker-patience-grid__line--column {
            align-items: start;
        }
    }

    .poker-patience-grid__label {
        border: 0.0625rem solid transparent;
        border-radius: 0.5rem;
        display: grid;
        gap: 0.125rem;
        justify-items: center;
        line-height: 1.05;
        padding: 0.3125rem 0.1875rem;
        text-align: center;

        &.poker-patience-grid__label--partial {
            border-color: var(--poker-patience-grid-partial-edge);
            border-style: dashed;
            color: var(--poker-patience-grid-partial);
        }

        &.poker-patience-grid__label--complete {
            background: var(--poker-patience-grid-chip);

            .poker-patience-grid__points {
                color: var(--poker-patience-grid-chip-points);
            }

            .poker-patience-grid__hand {
                color: var(--poker-patience-grid-chip-hand);
            }
        }

        &.poker-patience-grid__label--nothing {
            color: var(--poker-patience-grid-nothing);
        }

        &.poker-patience-grid__label--best {
            background: var(--poker-patience-grid-best);
            border-color: var(--poker-patience-grid-best);

            .poker-patience-grid__points,
            .poker-patience-grid__hand {
                color: var(--poker-patience-grid-best-label);
            }
        }
    }

    .poker-patience-grid__points {
        font-size: 1.125rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .poker-patience-grid__hand {
        font-size: 0.625rem;
        font-weight: 600;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .poker-patience-grid__total {
        align-content: end;
        display: grid;
        gap: 0.125rem;
        justify-items: center;
        padding-block-end: 0.375rem;
    }

    .poker-patience-grid__sum {
        color: var(--poker-patience-grid-total);
        font-size: 1.5rem;
        font-variant-numeric: tabular-nums;
        font-weight: 800;
        line-height: 1;
    }

    .poker-patience-grid__caption {
        color: var(--poker-patience-grid-caption);
        font-size: 0.6875rem;
        font-weight: 600;
    }

    .poker-patience-grid[data-poker-patience-tallying] {
        .poker-patience-grid__placed--best {
            box-shadow:
                0 0 0 0 var(--poker-patience-grid-ring),
                0 0 0 0 var(--poker-patience-grid-glow);
            transition: none;
        }

        .poker-patience-grid__label--best {
            background: var(--poker-patience-grid-chip);
            border-color: transparent;
            transition: none;

            .poker-patience-grid__points {
                color: var(--poker-patience-grid-chip-points);
                transition: none;
            }

            .poker-patience-grid__hand {
                color: var(--poker-patience-grid-chip-hand);
                transition: none;
            }
        }

        .poker-patience-grid__best {
            opacity: 0;
            transition: none;
        }
    }

    .poker-patience-grid__reference {
        color: var(--poker-patience-grid-reference);
        display: grid;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }

    .poker-patience-grid__reference-title {
        font-weight: 600;
        margin: 0;
    }

    .poker-patience-grid__reference-list {
        column-gap: 1.5rem;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto);
        margin: 0;
        row-gap: 0.125rem;

        &.poker-patience-grid__reference-list--rows-4 {
            grid-template-rows: repeat(4, auto);
        }
    }

    .poker-patience-grid__reference-row {
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;

        dd {
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            margin: 0;
        }

        dt {
            margin: 0;
        }
    }

    @keyframes poker-patience-grid-ring {
        from {
            box-shadow:
                0 0 0 0 var(--poker-patience-grid-ring),
                0 0 0 0 var(--poker-patience-grid-glow);
        }
    }

    @media (hover: hover) {
        .poker-patience-grid__slot:hover {
            background: var(--poker-patience-grid-slot-hover);
            border-color: var(--poker-patience-grid-ring);
            border-style: solid;

            &::after {
                opacity: 1;
            }
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .poker-patience-grid__slot {
            transition:
                background-color 150ms ease,
                border-color 150ms ease,
                box-shadow 150ms ease,
                scale 150ms cubic-bezier(0.2, 0.8, 0.2, 1);

            &::after {
                transition: opacity 150ms ease;
            }
        }

        .poker-patience-grid__placed {
            transition: box-shadow 300ms ease;

            &.poker-patience-grid__placed--highlight,
            &.poker-patience-grid__placed--best {
                animation: poker-patience-grid-ring 300ms 260ms ease backwards;
            }
        }

        .poker-patience-grid__label {
            transition:
                background-color 300ms ease,
                border-color 300ms ease;

            .poker-patience-grid__points,
            .poker-patience-grid__hand {
                transition: color 300ms ease;
            }
        }

        .poker-patience-grid__best {
            transition: opacity 300ms ease;
        }
    }
}