@layer components {
    :root {
        --number-hunt-pad-hint: var(--secondary-label);
        --number-hunt-pad-expression: var(--label);
        --number-hunt-pad-key-top: oklch(from var(--tint) calc(l + 0.06) c h);
        --number-hunt-pad-key-bottom: oklch(
            from var(--tint) calc(l - 0.02) c h
        );
        --number-hunt-pad-key-edge: oklch(from var(--tint) calc(l - 0.17) c h);
        --number-hunt-pad-key-sheen: oklch(from var(--tint-label) l c h / 32%);
        --number-hunt-pad-key-ink: var(--tint-label);
        --number-hunt-pad-key-shadow: light-dark(
            oklch(from var(--label) l c h / 20%),
            oklch(from var(--system-background) calc(l * 0.25) c h / 80%)
        );
        --number-hunt-pad-lit-face: var(--tint-label);
        --number-hunt-pad-lit-ink: var(--tint);
        --number-hunt-pad-lit-ring: var(--tint);
        --number-hunt-pad-off-face: var(--tertiary-system-fill);
        --number-hunt-pad-off-ink: var(--tertiary-label);
        --number-hunt-pad-ring: var(--tint);
        --number-hunt-pad-transparent: oklch(from var(--tint) l c h / 0%);
    }

    .number-hunt-pad {
        display: grid;
        gap: 0.625rem;
        inline-size: min(100%, 24rem);
        margin-inline: auto;
        -webkit-user-select: none;
        user-select: none;
    }

    .number-hunt-pad__hint {
        align-items: baseline;
        color: var(--number-hunt-pad-hint);
        display: flex;
        flex-wrap: wrap;
        font-size: 0.9375rem;
        gap: 0.5rem;
        justify-content: center;
        margin: 0;
        min-block-size: 1.5rem;
        text-align: center;
    }

    .number-hunt-pad__expression {
        color: var(--number-hunt-pad-expression);
        font-size: 1.125rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .number-hunt-pad__keys {
        display: grid;
        gap: 0.625rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-block-end: 0.25rem;
    }

    .number-hunt-pad__key {
        align-items: center;
        background: linear-gradient(
            var(--number-hunt-pad-key-top),
            var(--number-hunt-pad-key-bottom)
        );
        border-radius: 0.875rem;
        box-shadow:
            inset 0 0.0625rem 0 var(--number-hunt-pad-key-sheen),
            0 0 0 0 var(--number-hunt-pad-transparent),
            0 0.25rem 0 var(--number-hunt-pad-key-edge),
            0 0.375rem 0.625rem var(--number-hunt-pad-key-shadow);
        color: var(--number-hunt-pad-key-ink);
        display: grid;
        font-size: 1.875rem;
        font-weight: 500;
        justify-items: center;
        line-height: 1;
        min-block-size: 3.25rem;
        text-decoration: none;
        touch-action: manipulation;
        transition:
            translate 80ms ease-out,
            box-shadow 80ms ease-out;
        -webkit-tap-highlight-color: transparent;

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

        &:is(a):active {
            box-shadow:
                inset 0 0.0625rem 0 var(--number-hunt-pad-key-sheen),
                0 0 0 0 var(--number-hunt-pad-transparent),
                0 0.0625rem 0 var(--number-hunt-pad-key-edge),
                0 0.125rem 0.25rem var(--number-hunt-pad-key-shadow);
            translate: 0 0.1875rem;
        }

        &.number-hunt-pad__key--picked {
            background: var(--number-hunt-pad-lit-face);
            box-shadow:
                inset 0 0 0 0.125rem var(--number-hunt-pad-lit-ring),
                0 0 0 0 var(--number-hunt-pad-transparent),
                0 0.0625rem 0 var(--number-hunt-pad-key-edge),
                0 0.125rem 0.25rem var(--number-hunt-pad-key-shadow);
            color: var(--number-hunt-pad-lit-ink);
            font-weight: 700;
            translate: 0 0.1875rem;
        }

        &.number-hunt-pad__key--off {
            background: var(--number-hunt-pad-off-face);
            box-shadow:
                inset 0 0 0 0 var(--number-hunt-pad-transparent),
                0 0 0 0 var(--number-hunt-pad-transparent),
                0 0 0 0 var(--number-hunt-pad-transparent),
                0 0 0 0 var(--number-hunt-pad-transparent);
            color: var(--number-hunt-pad-off-ink);
            cursor: not-allowed;
            translate: 0 0.25rem;
        }

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

    .number-hunt-pad__actions {
        display: grid;
        gap: 0.625rem;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .number-hunt-pad__undo,
    .number-hunt-pad__hand-in {
        display: grid;
    }

    .number-hunt-pad__undo-button {
        min-block-size: 3.25rem;

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

    .number-hunt-pad__undo-icon {
        block-size: 1.25rem;
        inline-size: 1.25rem;
    }

    .number-hunt-pad__hand-in-button {
        font-variant-numeric: tabular-nums;
        inline-size: 100%;
        min-block-size: 3.25rem;
    }

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

        20% {
            translate: -0.3125rem 0;
        }

        40% {
            translate: 0.25rem 0;
        }

        60% {
            translate: -0.1875rem 0;
        }

        80% {
            translate: 0.125rem 0;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .number-hunt-pad__key {
            transition: none;
        }

        .number-hunt-pad__key[data-number-hunt-shake],
        .number-hunt-pad__undo-button[data-number-hunt-shake] {
            animation: none;
        }
    }
}