@layer components {
    :root {
        --chess-puzzle-pad-muted: var(--secondary-label);
        --chess-puzzle-pad-wrong: light-dark(
            oklch(0.5 0.19 27),
            oklch(0.75 0.15 27)
        );
        --chess-puzzle-pad-solved: light-dark(
            oklch(0.5 0.12 60),
            oklch(0.82 0.12 75)
        );
        --chess-puzzle-pad-step: var(--tertiary-system-fill);
        --chess-puzzle-pad-step-ring: var(--separator);
        --chess-puzzle-pad-current: var(--tint);
        --chess-puzzle-pad-first-try: light-dark(
            oklch(0.72 0.15 80),
            oklch(0.8 0.14 82)
        );
        --chess-puzzle-pad-solved-step: light-dark(
            oklch(0.62 0.09 60),
            oklch(0.7 0.08 62)
        );
        --chess-puzzle-pad-skipped: var(--system-gray);
    }

    .chess-puzzle-pad {
        display: grid;
        gap: 0.375rem;
        text-align: center;
    }

    .chess-puzzle-pad__track {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        justify-content: center;
        list-style: none;
        margin: 0 0 0.125rem;
        padding: 0;
    }

    .chess-puzzle-pad__step {
        background-color: var(--chess-puzzle-pad-step);
        block-size: 0.625rem;
        border-radius: 50%;
        box-shadow: inset 0 0 0 0.0625rem var(--chess-puzzle-pad-step-ring);
        inline-size: 0.625rem;

        &.chess-puzzle-pad__step--current {
            background-color: var(--chess-puzzle-pad-current);
            box-shadow: none;
            inline-size: 1.375rem;
            border-radius: 999rem;
        }

        &.chess-puzzle-pad__step--first-try {
            background-color: var(--chess-puzzle-pad-first-try);
            box-shadow: none;
        }

        &.chess-puzzle-pad__step--solved {
            background-color: var(--chess-puzzle-pad-solved-step);
            box-shadow: none;
        }

        &.chess-puzzle-pad__step--skipped {
            background-color: var(--chess-puzzle-pad-skipped);
            box-shadow: none;
            opacity: 0.6;
        }
    }

    .chess-puzzle-pad__status {
        align-items: center;
        display: flex;
        font-weight: 600;
        gap: 0.375rem;
        justify-content: center;
        margin: 0;
    }

    .chess-puzzle-pad__side {
        block-size: 1.5rem;
        flex: none;
        inline-size: 1.5rem;
        margin-block: -0.25rem;
    }

    .chess-puzzle-pad__goal {
        margin: 0;
    }

    .chess-puzzle-pad__hint {
        color: var(--chess-puzzle-pad-muted);
        font-size: 0.9375rem;
        margin: 0;
        min-block-size: 2.5rem;
    }

    .chess-puzzle-pad__notice {
        color: var(--chess-puzzle-pad-muted);
        font-size: 0.9375rem;
        margin: 0;

        &.chess-puzzle-pad__notice--wrong {
            color: var(--chess-puzzle-pad-wrong);
            font-weight: 600;
        }

        &.chess-puzzle-pad__notice--wrong.chess-puzzle-pad__notice--fresh {
            animation: chess-puzzle-pad-nudge 360ms ease-in-out 200ms both;
        }

        &.chess-puzzle-pad__notice--solved {
            color: var(--chess-puzzle-pad-solved);
            font-weight: 600;
        }
    }

    .chess-puzzle-pad__promotion {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(4, 1fr);
    }

    .chess-puzzle-pad__piece {
        flex-direction: column;
        gap: 0.125rem;
        inline-size: 100%;
        min-block-size: 4.25rem;
    }

    .chess-puzzle-pad__figure {
        block-size: 2.25rem;
        inline-size: 2.25rem;
    }

    .chess-puzzle-pad__piece-name {
        font-size: 0.75rem;
    }

    @keyframes chess-puzzle-pad-nudge {
        0%,
        100% {
            translate: 0 0;
        }

        25% {
            translate: -0.25rem 0;
        }

        50% {
            translate: 0.1875rem 0;
        }

        75% {
            translate: -0.125rem 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .chess-puzzle-pad__notice {
            animation: none;
        }
    }
}