@layer components {
    :root {
        --chess-puzzle-board-light: light-dark(
            oklch(0.9 0.045 80),
            oklch(0.77 0.05 75)
        );
        --chess-puzzle-board-dark: light-dark(
            oklch(0.66 0.08 58),
            oklch(0.53 0.065 55)
        );
        --chess-puzzle-board-light-ink: light-dark(
            oklch(0.56 0.08 58),
            oklch(0.45 0.06 55)
        );
        --chess-puzzle-board-dark-ink: light-dark(
            oklch(0.94 0.035 80),
            oklch(0.84 0.035 76)
        );
        --chess-puzzle-board-rim: light-dark(
            oklch(0.44 0.06 52),
            oklch(0.33 0.04 52)
        );
        --chess-puzzle-board-shadow: oklch(0.2 0.03 50 / 0.3);
        --chess-puzzle-board-last: oklch(0.9 0.14 96 / 0.42);
        --chess-puzzle-board-selected: oklch(0.84 0.17 88 / 0.62);
        --chess-puzzle-board-solution: oklch(0.72 0.13 235 / 0.42);
        --chess-puzzle-board-hint: oklch(0.24 0.04 50 / 0.3);
        --chess-puzzle-board-over: oklch(0.99 0.02 90 / 0.55);
        --chess-puzzle-board-pressed: oklch(0.2 0.03 50 / 0.14);
        --chess-puzzle-board-check: oklch(0.63 0.24 28);
        --chess-puzzle-board-check-fade: oklch(0.63 0.24 28 / 0);
        --chess-puzzle-board-missed: oklch(0.6 0.22 28 / 0.5);
        --chess-puzzle-board-glow: oklch(0.88 0.17 86);
        --chess-puzzle-board-glow-fade: oklch(0.88 0.17 86 / 0);
        --chess-puzzle-board-scrim: oklch(0.18 0.02 50 / 0.5);
        --chess-puzzle-board-choice: light-dark(
            oklch(0.985 0.01 85),
            oklch(0.34 0.02 58)
        );
        --chess-puzzle-board-choice-hover: light-dark(
            oklch(0.9 0.05 80),
            oklch(0.44 0.04 60)
        );
        --chess-puzzle-board-lift-shadow: oklch(0.15 0.03 50 / 0.45);
        --chess-puzzle-board-focus: var(--tint);
    }

    .chess-puzzle-board {
        border-radius: clamp(0rem, (100vw - 24rem) * 0.05, 0.375rem);
        box-shadow:
            0 0 0 clamp(0rem, (100vw - 24rem) * 0.08, 0.4375rem)
                var(--chess-puzzle-board-rim),
            0 1rem 2.5rem -1rem var(--chess-puzzle-board-shadow);
        container-type: inline-size;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        inline-size: min(
            100% + var(--site-gutter-start, 0rem) + var(--site-gutter-end, 0rem),
            27rem
        );
        isolation: isolate;
        justify-self: center;
        position: relative;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;

        &::after {
            border-radius: inherit;
            content: "";
            inset: 0;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            z-index: 7;
        }

        &.chess-puzzle-board--celebrate::after {
            animation: chess-puzzle-board-glow 900ms ease-out 220ms both;
            box-shadow:
                inset 0 0 0 0.1875rem var(--chess-puzzle-board-glow),
                0 0 1rem 0.125rem var(--chess-puzzle-board-glow);
        }

        &[data-dragging] {
            cursor: grabbing;
        }

        &:is([data-dragging], [data-releasing]) {
            .chess-puzzle-board__square:is(
                    .chess-puzzle-board__square--target,
                    .chess-puzzle-board__square--capture
                ):not([data-drop])::after {
                content: none;
            }

            .chess-puzzle-board__square--selected:not(
                    [data-drag-origin]
                )::before {
                background-color: transparent;
            }

            .chess-puzzle-board__piece--lifted:not([data-lifting])
                .chess-puzzle-board__figure {
                filter: none;
                scale: 1;
                translate: 0 0;
            }
        }
    }

    .chess-puzzle-board__square {
        align-items: stretch;
        aspect-ratio: 1;
        background-color: var(--chess-puzzle-board-light);
        border: none;
        border-radius: 0;
        color: inherit;
        display: grid;
        font: inherit;
        justify-items: stretch;
        margin: 0;
        min-inline-size: 0;
        outline: none;
        padding: 0;
        position: relative;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;

        &.chess-puzzle-board__square--dark {
            background-color: var(--chess-puzzle-board-dark);
        }

        &::before {
            content: "";
            inset: 0;
            pointer-events: none;
            position: absolute;
        }

        &.chess-puzzle-board__square--last::before {
            background-color: var(--chess-puzzle-board-last);
        }

        &.chess-puzzle-board__square--solution::before {
            background-color: var(--chess-puzzle-board-solution);
        }

        &.chess-puzzle-board__square--selected::before,
        &[data-drag-origin]::before {
            background-color: var(--chess-puzzle-board-selected);
        }

        &.chess-puzzle-board__square--check {
            background-image: radial-gradient(
                circle,
                var(--chess-puzzle-board-check) 0%,
                var(--chess-puzzle-board-check) 22%,
                var(--chess-puzzle-board-check-fade) 72%
            );
        }

        &.chess-puzzle-board__square--missed::after {
            animation: chess-puzzle-board-missed 800ms ease-out 120ms both;
            background-color: var(--chess-puzzle-board-missed);
            content: "";
            inset: 0;
            pointer-events: none;
            position: absolute;
        }

        &.chess-puzzle-board__square--target::after,
        &[data-drop="move"]::after {
            background-color: var(--chess-puzzle-board-hint);
            border-radius: 50%;
            content: "";
            inset: 36%;
            pointer-events: none;
            position: absolute;
        }

        &.chess-puzzle-board__square--capture::after,
        &[data-drop="capture"]::after {
            background-image: radial-gradient(
                circle closest-side,
                transparent 0 79%,
                var(--chess-puzzle-board-hint) 81% 100%
            );
            border-radius: 50%;
            content: "";
            inset: 1%;
            pointer-events: none;
            position: absolute;
        }

        &[data-drop-over] {
            box-shadow: inset 0 0 0 0.25rem var(--chess-puzzle-board-over);
        }

        &[data-drop-over]::after {
            opacity: 0;
        }

        &.chess-puzzle-board__square--win::after {
            animation: chess-puzzle-board-ripple 720ms ease-out 240ms both;
            background-image: radial-gradient(
                circle,
                var(--chess-puzzle-board-glow-fade) 38%,
                var(--chess-puzzle-board-glow) 52%,
                var(--chess-puzzle-board-glow-fade) 70%
            );
            border-radius: 50%;
            content: "";
            inset: -30%;
            pointer-events: none;
            position: absolute;
            z-index: 3;
        }

        &.chess-puzzle-board__square--promotion {
            z-index: 6;
        }

        &:is(a, button) {
            cursor: pointer;
        }

        &:is(a, button):active::before {
            background-color: var(--chess-puzzle-board-pressed);
        }

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

    .chess-puzzle-board__piece,
    .chess-puzzle-board__ghost {
        display: grid;
        grid-area: 1 / 1;
        min-inline-size: 0;
        pointer-events: none;
        position: relative;
    }

    .chess-puzzle-board__piece {
        &.chess-puzzle-board__piece--lifted .chess-puzzle-board__figure,
        &[data-lifting] .chess-puzzle-board__figure {
            filter: drop-shadow(
                0 0.25rem 0.25rem var(--chess-puzzle-board-lift-shadow)
            );
            scale: 1.1;
            translate: 0 -4%;
        }

        &[data-dragging] {
            z-index: 10;
        }

        &[data-placed],
        &[data-returning] {
            z-index: 9;
        }

        &[data-dragging] .chess-puzzle-board__figure {
            filter: drop-shadow(
                0 0.5rem 0.5rem var(--chess-puzzle-board-lift-shadow)
            );
            scale: 1.2;
            transition: none;
        }

        &[data-dragging="touch"] .chess-puzzle-board__figure {
            scale: 1.45;
            translate: 0 -30%;
        }

        &.chess-puzzle-board__piece--refused .chess-puzzle-board__figure,
        &[data-refused] .chess-puzzle-board__figure {
            animation: chess-puzzle-board-shake 340ms ease-in-out 200ms both;
        }

        &.chess-puzzle-board__piece--promoted .chess-puzzle-board__figure {
            animation: chess-puzzle-board-pop 340ms
                cubic-bezier(0.2, 0.9, 0.3, 1.25) 160ms both;
        }

        &.chess-puzzle-board__piece--promoted-late .chess-puzzle-board__figure {
            animation: chess-puzzle-board-pop 340ms
                cubic-bezier(0.2, 0.9, 0.3, 1.25) 560ms both;
        }

        &.chess-puzzle-board__piece--winner .chess-puzzle-board__figure {
            animation: chess-puzzle-board-hop 600ms
                cubic-bezier(0.3, 0.7, 0.4, 1) 240ms both;
        }

        &.chess-puzzle-board__piece--promoted.chess-puzzle-board__piece--winner
            .chess-puzzle-board__figure {
            animation:
                chess-puzzle-board-pop 340ms cubic-bezier(0.2, 0.9, 0.3, 1.25)
                    160ms both,
                chess-puzzle-board-hop 600ms cubic-bezier(0.3, 0.7, 0.4, 1)
                    520ms;
        }

        &.chess-puzzle-board__piece--shown .chess-puzzle-board__figure {
            animation: chess-puzzle-board-pulse 700ms ease-in-out 380ms 2;
        }
    }

    .chess-puzzle-board__ghost {
        animation: chess-puzzle-board-leave 240ms ease-in 140ms both;

        &.chess-puzzle-board__ghost--late {
            animation-delay: 520ms;
        }
    }

    .chess-puzzle-board__figure {
        align-self: start;
        block-size: 92%;
        inline-size: 92%;
        justify-self: center;
        margin-block-start: 1%;
        transition:
            scale 140ms ease-out,
            translate 140ms ease-out,
            filter 140ms ease-out;
    }

    .chess-puzzle-board__coordinate {
        color: var(--chess-puzzle-board-dark-ink);
        font-size: clamp(0.5625rem, 2.4cqi, 0.75rem);
        font-weight: 700;
        line-height: 1;
        pointer-events: none;
        position: absolute;

        &.chess-puzzle-board__coordinate--rank {
            inset-block-start: 4%;
            inset-inline-start: 5%;
        }

        &.chess-puzzle-board__coordinate--file {
            inset-block-end: 3%;
            inset-inline-end: 5%;
        }
    }

    .chess-puzzle-board__square--light .chess-puzzle-board__coordinate {
        color: var(--chess-puzzle-board-light-ink);
    }

    .chess-puzzle-board__ending {
        animation: chess-puzzle-board-ending 320ms ease 1150ms both;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        inset: 0;
        position: absolute;
        z-index: 20;

        &.chess-puzzle-board__ending--skipped {
            animation-delay: 1900ms;
        }

        &.chess-puzzle-board__ending--solved::after {
            animation: chess-puzzle-board-glow 900ms ease-out 220ms both;
            box-shadow:
                inset 0 0 0 0.1875rem var(--chess-puzzle-board-glow),
                0 0 1rem 0.125rem var(--chess-puzzle-board-glow);
            content: "";
            inset: 0;
            position: absolute;
            z-index: 7;
        }
    }

    .chess-puzzle-board__scrim {
        animation: chess-puzzle-board-fade-in 160ms ease-out both;
        background-color: var(--chess-puzzle-board-scrim);
        cursor: default;
        inset: 0;
        position: absolute;
        -webkit-tap-highlight-color: transparent;
        z-index: 5;
    }

    .chess-puzzle-board__picker {
        animation: chess-puzzle-board-fade-in 180ms ease-out both;
        background-color: var(--chess-puzzle-board-choice);
        block-size: 400%;
        border-radius: 999rem;
        box-shadow: 0 0.75rem 1.5rem -0.25rem var(--chess-puzzle-board-shadow);
        display: grid;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        inset-block-start: 0;
        inset-inline: -6%;
        position: absolute;
    }

    .chess-puzzle-board__choice {
        appearance: none;
        background: none;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: grid;
        margin: 0;
        min-block-size: 0;
        padding: 6%;
        place-items: center;
        -webkit-tap-highlight-color: transparent;
        transition: scale 120ms ease-out;

        &:hover,
        &:focus-visible {
            background-color: var(--chess-puzzle-board-choice-hover);
        }

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

        &:active {
            scale: 0.92;
        }
    }

    .chess-puzzle-board__choice-figure {
        aspect-ratio: 1;
        block-size: 100%;
        inline-size: auto;
        max-inline-size: 100%;
    }

    .chess-puzzle-board[data-draggable]
        .chess-puzzle-board__square[data-targets] {
        cursor: grab;
        touch-action: none;
    }

    @keyframes chess-puzzle-board-leave {
        to {
            opacity: 0;
            scale: 0.55;
            visibility: hidden;
        }
    }

    @keyframes chess-puzzle-board-shake {
        0%,
        100% {
            translate: 0 0;
        }

        20% {
            translate: -10% 0;
        }

        40% {
            translate: 9% 0;
        }

        60% {
            translate: -6% 0;
        }

        80% {
            translate: 3% 0;
        }
    }

    @keyframes chess-puzzle-board-pop {
        from {
            opacity: 0.3;
            scale: 0.45;
        }

        to {
            opacity: 1;
            scale: 1;
        }
    }

    @keyframes chess-puzzle-board-hop {
        0% {
            scale: 1;
            translate: 0 0;
        }

        35% {
            scale: 1.1;
            translate: 0 -18%;
        }

        62% {
            scale: 1;
            translate: 0 0;
        }

        80% {
            translate: 0 -5%;
        }

        100% {
            scale: 1;
            translate: 0 0;
        }
    }

    @keyframes chess-puzzle-board-pulse {
        0%,
        100% {
            scale: 1;
        }

        50% {
            scale: 1.1;
        }
    }

    @keyframes chess-puzzle-board-ripple {
        from {
            opacity: 0.95;
            scale: 0.35;
        }

        to {
            opacity: 0;
            scale: 2.6;
        }
    }

    @keyframes chess-puzzle-board-glow {
        0% {
            opacity: 0;
        }

        30% {
            opacity: 0.85;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes chess-puzzle-board-missed {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes chess-puzzle-board-ending {
        to {
            opacity: 0;
            visibility: hidden;
        }
    }

    @keyframes chess-puzzle-board-fade-in {
        from {
            opacity: 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .chess-puzzle-board__ending,
        .chess-puzzle-board__ghost {
            display: none;
        }

        .chess-puzzle-board,
        .chess-puzzle-board__ending,
        .chess-puzzle-board__scrim,
        .chess-puzzle-board__picker,
        .chess-puzzle-board__square,
        .chess-puzzle-board__figure {
            &,
            &::before,
            &::after {
                animation: none;
                transition: none;
            }
        }
    }
}