@layer components {
    :root {
        --number-hunt-board-display: light-dark(
            color-mix(in oklch, var(--label) 90%, var(--tint)),
            oklch(from var(--system-background) calc(l - 0.035) c h)
        );
        --number-hunt-board-display-ink: light-dark(
            var(--system-background),
            var(--label)
        );
        --number-hunt-board-display-muted: oklch(
            from var(--number-hunt-board-display-ink) l c h / 64%
        );
        --number-hunt-board-display-rim: light-dark(
            oklch(from var(--label) l c h / 40%),
            oklch(from var(--label) l c h / 14%)
        );
        --number-hunt-board-display-sheen: oklch(
            from var(--number-hunt-board-display-ink) l c h / 9%
        );
        --number-hunt-board-display-shadow: light-dark(
            oklch(from var(--label) l c h / 26%),
            oklch(from var(--system-background) calc(l * 0.25) c h / 80%)
        );
        --number-hunt-board-flap-top: color-mix(
            in oklch,
            var(--number-hunt-board-display) 80%,
            var(--number-hunt-board-display-ink)
        );
        --number-hunt-board-flap-bottom: color-mix(
            in oklch,
            var(--number-hunt-board-display) 87%,
            var(--number-hunt-board-display-ink)
        );
        --number-hunt-board-flap-hinge: oklch(
            from var(--number-hunt-board-display) calc(l * 0.55) c h
        );
        --number-hunt-board-flap-sheen: oklch(
            from var(--number-hunt-board-display-ink) l c h / 16%
        );
        --number-hunt-board-flap-shadow: oklch(
            from var(--number-hunt-board-display) calc(l * 0.4) c h / 70%
        );
        --number-hunt-board-lit: oklch(from var(--tint) 0.84 c h);
        --number-hunt-board-glow: oklch(from var(--tint) 0.75 c h / 70%);
        --number-hunt-board-face-top: light-dark(
            oklch(from var(--system-background) calc(l + 0.03) c h),
            oklch(from var(--system-background) calc(l + 0.2) c h)
        );
        --number-hunt-board-face-bottom: light-dark(
            oklch(from var(--system-background) calc(l - 0.025) c h),
            oklch(from var(--system-background) calc(l + 0.14) c h)
        );
        --number-hunt-board-face-edge: light-dark(
            oklch(
                from var(--system-background) calc(l - 0.2) calc(c + 0.012) h
            ),
            oklch(from var(--system-background) calc(l + 0.05) c h)
        );
        --number-hunt-board-face-highlight: light-dark(
            oklch(from var(--system-background) 1 c h / 95%),
            oklch(from var(--label) l c h / 18%)
        );
        --number-hunt-board-face-shadow: light-dark(
            oklch(from var(--label) l c h / 16%),
            oklch(from var(--system-background) calc(l * 0.25) c h / 75%)
        );
        --number-hunt-board-face-lifted: light-dark(
            oklch(from var(--label) l c h / 24%),
            oklch(from var(--system-background) calc(l * 0.2) c h / 85%)
        );
        --number-hunt-board-built-top: color-mix(
            in oklch,
            var(--number-hunt-board-face-top) 90%,
            var(--tint)
        );
        --number-hunt-board-built-bottom: color-mix(
            in oklch,
            var(--number-hunt-board-face-bottom) 86%,
            var(--tint)
        );
        --number-hunt-board-number: var(--label);
        --number-hunt-board-ring: var(--tint);
        --number-hunt-board-ring-glow: oklch(from var(--tint) l c h / 35%);
        --number-hunt-board-preview: var(--tint);
        --number-hunt-board-off-face: var(--tertiary-system-fill);
        --number-hunt-board-off-number: var(--tertiary-label);
        --number-hunt-board-well: light-dark(
            oklch(from var(--system-background) calc(l - 0.04) c h),
            oklch(from var(--system-background) calc(l + 0.03) c h)
        );
        --number-hunt-board-well-shadow: light-dark(
            oklch(from var(--label) l c h / 14%),
            oklch(from var(--system-background) calc(l * 0.2) c h / 90%)
        );
        --number-hunt-board-well-rim: light-dark(
            oklch(from var(--label) l c h / 8%),
            oklch(from var(--label) l c h / 10%)
        );
        --number-hunt-board-paper: var(--secondary-system-grouped-background);
        --number-hunt-board-paper-rim: var(--hairline);
        --number-hunt-board-operand: var(--secondary-label);
        --number-hunt-board-result: var(--label);
        --number-hunt-board-transparent: oklch(from var(--tint) l c h / 0%);
    }

    .number-hunt-board {
        display: grid;
        gap: 1rem;
        inline-size: 100%;
        -webkit-user-select: none;
        user-select: none;
    }

    .number-hunt-board__display {
        background:
            radial-gradient(
                120% 90% at 50% 0%,
                var(--number-hunt-board-display-sheen),
                var(--number-hunt-board-transparent) 70%
            ),
            var(--number-hunt-board-display);
        border-radius: 1.25rem;
        box-shadow:
            inset 0 0 0 0.0625rem var(--number-hunt-board-display-rim),
            0 0.5rem 1.25rem var(--number-hunt-board-display-shadow);
        color: var(--number-hunt-board-display-ink);
        display: grid;
        gap: 0.5rem;
        justify-items: center;
        padding: 0.75rem 1rem 0.875rem;
        position: relative;

        &.number-hunt-board__display--hit {
            animation: number-hunt-board-glow 900ms ease-out 260ms both;
        }
    }

    .number-hunt-board__display-label {
        color: var(--number-hunt-board-display-muted);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.08rem;
    }

    .number-hunt-board__target-text {
        block-size: 0.0625rem;
        clip-path: inset(50%);
        inline-size: 0.0625rem;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    .number-hunt-board__target-value {
        display: flex;
        gap: 0.375rem;
        perspective: 20rem;
    }

    .number-hunt-board__flap {
        background: linear-gradient(
            var(--number-hunt-board-flap-top) 0 50%,
            var(--number-hunt-board-flap-bottom) 50% 100%
        );
        border-radius: 0.5rem;
        box-shadow:
            inset 0 0.0625rem 0 var(--number-hunt-board-flap-sheen),
            0 0.1875rem 0.375rem var(--number-hunt-board-flap-shadow);
        color: var(--number-hunt-board-display-ink);
        display: grid;
        font-size: 3.5rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        inline-size: 3.25rem;
        line-height: 1.15;
        place-items: center;
        position: relative;

        &::after {
            background: var(--number-hunt-board-flap-hinge);
            block-size: 0.125rem;
            content: "";
            inset-block-start: calc(50% - 0.0625rem);
            inset-inline: 0;
            position: absolute;
        }

        &.number-hunt-board__flap--hit {
            animation: number-hunt-board-flip 560ms
                cubic-bezier(0.3, 0.7, 0.3, 1) 260ms both;
            color: var(--number-hunt-board-lit);
            text-shadow: 0 0 1rem var(--number-hunt-board-glow);

            &:nth-child(2) {
                animation-delay: 330ms;
            }

            &:nth-child(3) {
                animation-delay: 400ms;
            }

            &:nth-child(4) {
                animation-delay: 470ms;
            }
        }
    }

    .number-hunt-board__closest {
        color: var(--number-hunt-board-display-muted);
        font-size: 0.9375rem;
        font-variant-numeric: tabular-nums;
        margin: 0;
        min-block-size: 1.375rem;
        text-align: center;

        &.number-hunt-board__closest--hit {
            color: var(--number-hunt-board-lit);
            font-size: 1.0625rem;
            font-weight: 700;
        }
    }

    .number-hunt-board__closest-value {
        color: var(--number-hunt-board-display-ink);
        font-weight: 700;
    }

    .number-hunt-board__tiles {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-block: 0.25rem 0.375rem;

        &.number-hunt-board__tiles--size-4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            inline-size: min(100%, 15rem);
            justify-self: center;
        }
    }

    .number-hunt-board__slot {
        aspect-ratio: 5 / 4;
        display: grid;
        position: relative;
    }

    .number-hunt-board__form {
        display: grid;
    }

    .number-hunt-board__form[data-pending] {
        opacity: 0.8;
    }

    .number-hunt-board__tile {
        align-items: center;
        appearance: none;
        background: linear-gradient(
            var(--number-hunt-board-face-top),
            var(--number-hunt-board-face-bottom)
        );
        border: none;
        border-radius: 0.875rem;
        box-shadow:
            inset 0 0.0625rem 0 var(--number-hunt-board-face-highlight),
            0 0 0 0 var(--number-hunt-board-transparent),
            0 0.25rem 0 var(--number-hunt-board-face-edge),
            0 0.375rem 0.75rem var(--number-hunt-board-face-shadow);
        box-sizing: border-box;
        color: var(--number-hunt-board-number);
        cursor: pointer;
        display: grid;
        font-family: inherit;
        font-size: 2.25rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        justify-items: center;
        letter-spacing: -0.03rem;
        line-height: 1;
        margin: 0;
        min-block-size: 2.75rem;
        padding: 0;
        position: relative;
        text-decoration: none;
        touch-action: manipulation;
        transition:
            translate 90ms ease-out,
            box-shadow 90ms ease-out;
        -webkit-tap-highlight-color: transparent;

        &:focus-visible {
            outline: 0.1875rem solid var(--number-hunt-board-ring);
            outline-offset: 0.25rem;
        }

        &:is(a, button):active {
            box-shadow:
                inset 0 0.0625rem 0 var(--number-hunt-board-face-highlight),
                0 0 0 0 var(--number-hunt-board-transparent),
                0 0.0625rem 0 var(--number-hunt-board-face-edge),
                0 0.125rem 0.25rem var(--number-hunt-board-face-shadow);
            translate: 0 0.1875rem;
        }

        &.number-hunt-board__tile--built {
            background: linear-gradient(
                var(--number-hunt-board-built-top),
                var(--number-hunt-board-built-bottom)
            );
        }

        &.number-hunt-board__tile--picked {
            box-shadow:
                inset 0 0.0625rem 0 var(--number-hunt-board-face-highlight),
                0 0 0 0.1875rem var(--number-hunt-board-ring),
                0 0.25rem 0 var(--number-hunt-board-face-edge),
                0 0.875rem 1.25rem var(--number-hunt-board-face-lifted);
            translate: 0 -0.25rem;
        }

        &.number-hunt-board__tile--picked:is(a, button):active {
            box-shadow:
                inset 0 0.0625rem 0 var(--number-hunt-board-face-highlight),
                0 0 0 0.1875rem var(--number-hunt-board-ring),
                0 0.0625rem 0 var(--number-hunt-board-face-edge),
                0 0.25rem 0.5rem var(--number-hunt-board-face-shadow);
            translate: 0 0.0625rem;
        }

        &.number-hunt-board__tile--off {
            background: var(--number-hunt-board-off-face);
            box-shadow:
                inset 0 0.0625rem 0.125rem var(--number-hunt-board-well-shadow),
                0 0 0 0 var(--number-hunt-board-transparent),
                0 0 0 0 var(--number-hunt-board-transparent),
                0 0 0 0 var(--number-hunt-board-transparent);
            color: var(--number-hunt-board-off-number);
            cursor: not-allowed;
            translate: 0 0.25rem;
        }

        &.number-hunt-board__tile--still {
            cursor: default;
        }

        &.number-hunt-board__tile--spent {
            opacity: 0.5;
        }

        &.number-hunt-board__tile--final {
            box-shadow:
                inset 0 0.0625rem 0 var(--number-hunt-board-face-highlight),
                0 0 0 0.1875rem var(--number-hunt-board-ring),
                0 0.25rem 0 var(--number-hunt-board-face-edge),
                0 0.5rem 1rem var(--number-hunt-board-face-lifted);
        }

        &.number-hunt-board__tile--hit {
            animation: number-hunt-board-hit 640ms
                cubic-bezier(0.3, 0.7, 0.3, 1) 380ms both;
        }

        &.number-hunt-board__tile--ghost {
            inset: 0;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            transition: opacity 120ms ease-out;

            &[data-flip-moving] {
                opacity: 1;
                transition: none;
            }
        }

        &.number-hunt-board__tile--sunk {
            box-shadow:
                inset 0 0.0625rem 0 var(--number-hunt-board-face-highlight),
                0 0 0 0 var(--number-hunt-board-transparent),
                0 0 0 var(--number-hunt-board-face-edge),
                0 0.0625rem 0.125rem var(--number-hunt-board-face-shadow);
            translate: 0 0.3125rem;
        }

        &.number-hunt-board__tile--digits-4 {
            font-size: 1.875rem;
        }

        &.number-hunt-board__tile--digits-5 {
            font-size: 1.5rem;
        }

        &.number-hunt-board__tile--digits-6 {
            font-size: 1.25rem;
        }

        &.number-hunt-board__tile--digits-7 {
            font-size: 1.0625rem;
        }

        &[data-number-hunt-shake] {
            animation: number-hunt-board-shake 300ms ease-in-out;
            animation-composition: add;
        }
    }

    .number-hunt-board__preview {
        color: var(--number-hunt-board-preview);
        font-size: 0.8125rem;
        font-weight: 600;
        inset-block-end: 0.4375rem;
        inset-inline: 0;
        letter-spacing: 0;
        position: absolute;
        text-align: center;

        &.number-hunt-board__preview--off {
            color: var(--number-hunt-board-off-number);
            font-weight: 500;
        }
    }

    .number-hunt-board__well {
        background: var(--number-hunt-board-well);
        border-radius: 0.875rem;
        box-shadow:
            inset 0 0.125rem 0.375rem var(--number-hunt-board-well-shadow),
            inset 0 0 0 0.0625rem var(--number-hunt-board-well-rim);
    }

    .number-hunt-board__sums {
        align-items: baseline;
        background: var(--number-hunt-board-paper);
        border-radius: 0.875rem;
        box-shadow: inset 0 0 0 0.0625rem var(--number-hunt-board-paper-rim);
        display: grid;
        font-size: 1.125rem;
        font-variant-numeric: tabular-nums;
        gap: 0.25rem 0.5rem;
        grid-template-columns: repeat(5, auto);
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0.625rem 1rem;
    }

    .number-hunt-board__sum {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }

    .number-hunt-board__operand {
        color: var(--number-hunt-board-operand);
        text-align: end;
    }

    .number-hunt-board__operator {
        color: var(--number-hunt-board-operand);
        text-align: center;
    }

    .number-hunt-board__result {
        color: var(--number-hunt-board-result);
        font-weight: 700;
        text-align: end;

        &.number-hunt-board__result--final {
            color: var(--number-hunt-board-ring);
        }
    }

    @keyframes number-hunt-board-flip {
        0% {
            color: var(--number-hunt-board-display-ink);
            rotate: x 0deg;
        }

        55% {
            color: var(--number-hunt-board-lit);
        }

        100% {
            color: var(--number-hunt-board-lit);
            rotate: x -360deg;
        }
    }

    @keyframes number-hunt-board-glow {
        0% {
            box-shadow:
                inset 0 0 0 0.0625rem var(--number-hunt-board-display-rim),
                0 0.5rem 1.25rem var(--number-hunt-board-display-shadow);
        }

        35% {
            box-shadow:
                inset 0 0 0 0.0625rem var(--number-hunt-board-ring),
                0 0 0 0.5rem var(--number-hunt-board-ring-glow);
        }

        100% {
            box-shadow:
                inset 0 0 0 0.0625rem var(--number-hunt-board-display-rim),
                0 0.5rem 1.25rem var(--number-hunt-board-display-shadow);
        }
    }

    @keyframes number-hunt-board-hit {
        0% {
            scale: 1;
        }

        35% {
            scale: 1.1;
        }

        100% {
            scale: 1;
        }
    }

    @keyframes number-hunt-board-shake {
        0%,
        100% {
            translate: 0 0;
        }

        20% {
            translate: -0.375rem 0;
        }

        40% {
            translate: 0.3125rem 0;
        }

        60% {
            translate: -0.1875rem 0;
        }

        80% {
            translate: 0.125rem 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .number-hunt-board__display.number-hunt-board__display--hit,
        .number-hunt-board__flap.number-hunt-board__flap--hit,
        .number-hunt-board__tile.number-hunt-board__tile--hit,
        .number-hunt-board__tile[data-number-hunt-shake] {
            animation: none;
        }

        .number-hunt-board__tile {
            transition: none;
        }
    }
}