@layer components {
    :root {
        --kinship-controls-status: var(--secondary-label);
        --kinship-controls-dot: var(--label);
        --kinship-controls-dot-lost: var(--tertiary-label);
        --kinship-controls-dot-hit: var(--system-red);
        --kinship-controls-clear: oklch(100% 0 0deg / 0%);
    }

    .kinship-controls {
        display: grid;
        gap: 0.625rem;
    }

    .kinship-controls__status {
        color: var(--kinship-controls-status);
        font-size: 0.9375rem;
        line-height: 1.3;
        margin: 0;
        text-align: center;
        text-wrap: balance;
    }

    .kinship-controls__mistakes {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin: 0;
    }

    .kinship-controls__dot {
        background-color: var(--kinship-controls-dot);
        block-size: 0.75rem;
        border-radius: 50%;
        box-shadow: inset 0 0 0 0.125rem var(--kinship-controls-dot);
        inline-size: 0.75rem;

        &.kinship-controls__dot--lost {
            background-color: var(--kinship-controls-clear);
            box-shadow: inset 0 0 0 0.125rem var(--kinship-controls-dot-lost);
        }

        &.kinship-controls__dot--fresh {
            animation: kinship-controls-pop 420ms ease-out both;
        }
    }

    .kinship-controls__actions {
        align-items: center;
        display: flex;
        gap: 0.5rem;
    }

    .kinship-controls__shuffle,
    .kinship-controls__clear {
        flex: none;
    }

    .kinship-controls__guess {
        flex: 1;
    }

    @keyframes kinship-controls-pop {
        0% {
            background-color: var(--kinship-controls-dot);
            box-shadow: inset 0 0 0 0.125rem var(--kinship-controls-dot);
            scale: 1;
        }

        30% {
            background-color: var(--kinship-controls-dot-hit);
            box-shadow: inset 0 0 0 0.125rem var(--kinship-controls-dot-hit);
            scale: 1.7;
        }

        100% {
            scale: 1;
        }
    }

    @media (scripting: none) {
        .kinship-controls__actions .kinship-controls__clear {
            display: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kinship-controls__dot.kinship-controls__dot--fresh {
            animation: none;
        }
    }
}