@layer components {
    :root {
        --kinship-board-gap: 0.375rem;
        --kinship-board-radius: 0.75rem;
        --kinship-board-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --kinship-board-clear: oklch(100% 0 0deg / 0%);
        --kinship-board-face: light-dark(
            color-mix(in oklch, var(--label) 7%, var(--system-background)),
            color-mix(in oklch, var(--label) 17%, var(--system-background))
        );
        --kinship-board-face-ink: var(--label);
        --kinship-board-face-edge: light-dark(
            color-mix(in oklch, var(--label) 19%, var(--system-background)),
            color-mix(in oklch, var(--system-background) 55%, oklch(0% 0 0deg))
        );
        --kinship-board-gloss: light-dark(
            oklch(100% 0 0deg / 55%),
            oklch(100% 0 0deg / 10%)
        );
        --kinship-board-shine: light-dark(
            oklch(100% 0 0deg / 85%),
            oklch(100% 0 0deg / 22%)
        );
        --kinship-board-shadow: light-dark(
            oklch(28% 0.03 70deg / 18%),
            oklch(0% 0 0deg / 55%)
        );
        --kinship-board-lift-shadow: light-dark(
            oklch(28% 0.04 70deg / 28%),
            oklch(0% 0 0deg / 70%)
        );
        --kinship-board-pick: var(--tint);
        --kinship-board-pick-ink: var(--tint-label);
        --kinship-board-pick-edge: oklch(from var(--tint) calc(l - 0.14) c h);
        --kinship-board-pick-shine: oklch(100% 0 0deg / 32%);
        --kinship-board-focus: var(--label);
        --kinship-board-tier-1: light-dark(
            oklch(0.89 0.115 93deg),
            oklch(0.83 0.12 93deg)
        );
        --kinship-board-tier-2: light-dark(
            oklch(0.85 0.11 142deg),
            oklch(0.78 0.115 142deg)
        );
        --kinship-board-tier-3: light-dark(
            oklch(0.82 0.085 252deg),
            oklch(0.75 0.095 252deg)
        );
        --kinship-board-tier-4: light-dark(
            oklch(0.78 0.1 318deg),
            oklch(0.71 0.115 318deg)
        );
        --kinship-board-band-ink: oklch(0.25 0.025 270deg);
        --kinship-board-band-soft-ink: oklch(0.25 0.025 270deg / 70%);
        --kinship-board-stripe: oklch(100% 0 0deg / 32%);
        --kinship-board-pill: light-dark(
            oklch(0.24 0.012 270deg),
            oklch(0.95 0.008 270deg)
        );
        --kinship-board-pill-ink: light-dark(
            oklch(0.98 0 0deg),
            oklch(0.2 0.01 270deg)
        );
        --kinship-board-word-max: 1.0625rem;
    }

    .kinship-board {
        --kinship-board-columns: 4;
        --kinship-board-tile-size: clamp(
            4rem,
            (
                    100cqi - (var(--kinship-board-columns) - 1) *
                        var(--kinship-board-gap)
                ) /
                var(--kinship-board-columns) * 0.86,
            5.25rem
        );

        container-type: inline-size;
        display: grid;
        gap: var(--kinship-board-gap);
        inline-size: min(100%, 30rem);
        position: relative;
        user-select: none;

        &.kinship-board--mini {
            --kinship-board-columns: 3;
        }

        &.kinship-board--cheer .kinship-board__band {
            animation: kinship-board-cheer 560ms var(--kinship-board-spring)
                1000ms both;

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

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

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

    .kinship-board__tiles {
        display: grid;
        gap: var(--kinship-board-gap);
        grid-template-columns: repeat(
            var(--kinship-board-columns),
            minmax(0, 1fr)
        );
        margin: 0;
        position: relative;

        &[data-pending] {
            pointer-events: none;

            .kinship-board__check:checked + .kinship-board__face {
                animation: kinship-board-wait 640ms ease-in-out infinite
                    alternate;
            }
        }
    }

    .kinship-board__tile {
        -webkit-tap-highlight-color: var(--kinship-board-clear);
        block-size: var(--kinship-board-tile-size);
        cursor: pointer;
        display: grid;
        position: relative;
        touch-action: manipulation;

        &.kinship-board__tile--shake {
            animation: kinship-board-shake 340ms
                cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }

        &[data-kinship-nudge] {
            animation: kinship-board-nudge 280ms ease-out both;
        }
    }

    .kinship-board__check {
        appearance: none;
        block-size: 100%;
        cursor: pointer;
        inline-size: 100%;
        inset: 0;
        margin: 0;
        opacity: 0;
        position: absolute;
        z-index: 1;
    }

    .kinship-board__face {
        align-content: center;
        background-color: var(--kinship-board-face);
        background-image: linear-gradient(
            to bottom,
            var(--kinship-board-gloss),
            var(--kinship-board-clear) 55%
        );
        border-radius: var(--kinship-board-radius);
        box-shadow:
            inset 0 0.0625rem 0 var(--kinship-board-shine),
            0 0.1875rem 0 var(--kinship-board-face-edge),
            0 0.375rem 0.75rem -0.25rem var(--kinship-board-shadow);
        color: var(--kinship-board-face-ink);
        container-type: inline-size;
        display: grid;
        justify-items: center;
        padding-inline: 0.3125rem;
        position: relative;
        transition:
            background-color 140ms ease,
            box-shadow 140ms ease,
            color 140ms ease,
            scale 180ms var(--kinship-board-spring),
            translate 180ms var(--kinship-board-spring);

        &::after {
            align-items: center;
            background-color: var(--kinship-board-pick-ink);
            block-size: 0.875rem;
            border-radius: 50%;
            color: var(--kinship-board-pick);
            content: "\2713";
            display: flex;
            font-size: 0.5625rem;
            font-weight: 800;
            inline-size: 0.875rem;
            inset-block-start: 0.3125rem;
            inset-inline-end: 0.3125rem;
            justify-content: center;
            opacity: 0;
            position: absolute;
            scale: 0.4;
            transition:
                opacity 120ms ease,
                scale 200ms var(--kinship-board-spring);
        }

        &.kinship-board__face--ghost {
            --kinship-board-from: var(--kinship-board-face);
            --kinship-board-from-edge: var(--kinship-board-face-edge);
            --kinship-board-from-ink: var(--kinship-board-face-ink);

            animation: kinship-board-reveal 260ms ease var(--kinship-board-wave)
                both;
            background-color: var(--kinship-board-band);
            box-shadow:
                inset 0 0.0625rem 0 var(--kinship-board-shine),
                0 0.1875rem 0 var(--kinship-board-band-edge),
                0 0.75rem 1.25rem -0.375rem var(--kinship-board-lift-shadow);
            color: var(--kinship-board-band-ink);
            transition: none;
        }

        &.kinship-board__face--picked {
            --kinship-board-from: var(--kinship-board-pick);
            --kinship-board-from-edge: var(--kinship-board-pick-edge);
            --kinship-board-from-ink: var(--kinship-board-pick-ink);
        }
    }

    .kinship-board__check:checked + .kinship-board__face {
        background-color: var(--kinship-board-pick);
        box-shadow:
            inset 0 0.0625rem 0 var(--kinship-board-pick-shine),
            0 0.25rem 0 var(--kinship-board-pick-edge),
            0 0.75rem 1.25rem -0.375rem var(--kinship-board-lift-shadow);
        color: var(--kinship-board-pick-ink);
        scale: 1.04;
        translate: 0 -0.1875rem;

        &::after {
            opacity: 1;
            scale: 1;
        }
    }

    .kinship-board__tile:active .kinship-board__face {
        box-shadow:
            inset 0 0.0625rem 0 var(--kinship-board-shine),
            0 0.0625rem 0 var(--kinship-board-face-edge),
            0 0.125rem 0.25rem -0.125rem var(--kinship-board-shadow);
        scale: 0.97;
        transition-duration: 70ms;
        translate: 0 0.125rem;
    }

    .kinship-board__tile:active
        .kinship-board__check:checked
        + .kinship-board__face {
        box-shadow:
            inset 0 0.0625rem 0 var(--kinship-board-pick-shine),
            0 0.0625rem 0 var(--kinship-board-pick-edge),
            0 0.125rem 0.25rem -0.125rem var(--kinship-board-shadow);
    }

    .kinship-board__check:focus-visible + .kinship-board__face {
        outline: 0.1875rem solid var(--kinship-board-focus);
        outline-offset: 0.1875rem;
    }

    .kinship-board__word {
        font-size: clamp(
            0.5625rem,
            100cqi / var(--kinship-board-word-ems, 4),
            var(--kinship-board-word-max)
        );
        font-weight: 700;
        hyphens: manual;
        line-height: 1.08;
        overflow-wrap: normal;
        text-align: center;
        text-transform: uppercase;
        text-wrap: balance;

        &.kinship-board__word--fit-8 {
            --kinship-board-word-ems: 4;
        }

        &.kinship-board__word--fit-9 {
            --kinship-board-word-ems: 4.5;
        }

        &.kinship-board__word--fit-10 {
            --kinship-board-word-ems: 5;
        }

        &.kinship-board__word--fit-11 {
            --kinship-board-word-ems: 5.5;
        }

        &.kinship-board__word--fit-12 {
            --kinship-board-word-ems: 6;
        }

        &.kinship-board__word--fit-13 {
            --kinship-board-word-ems: 6.5;
        }

        &.kinship-board__word--fit-14 {
            --kinship-board-word-ems: 7;
        }

        &.kinship-board__word--fit-15 {
            --kinship-board-word-ems: 7.5;
        }

        &.kinship-board__word--fit-16 {
            --kinship-board-word-ems: 8;
        }

        &.kinship-board__word--fit-17 {
            --kinship-board-word-ems: 8.5;
        }

        &.kinship-board__word--fit-18 {
            --kinship-board-word-ems: 9;
        }

        &.kinship-board__word--fit-19 {
            --kinship-board-word-ems: 9.5;
        }

        &.kinship-board__word--fit-20 {
            --kinship-board-word-ems: 10;
        }

        &.kinship-board__word--fit-21 {
            --kinship-board-word-ems: 10.5;
        }
    }

    .kinship-board__band {
        --kinship-board-band: var(--kinship-board-tier-1);
        --kinship-board-band-edge: oklch(
            from var(--kinship-board-band) calc(l - 0.13) c h
        );
        --kinship-board-wave: 0ms;

        align-items: center;
        background-color: var(--kinship-board-band);
        border-radius: var(--kinship-board-radius);
        box-shadow:
            inset 0 0.0625rem 0 var(--kinship-board-shine),
            0 0.1875rem 0 var(--kinship-board-band-edge),
            0 0.375rem 0.75rem -0.25rem var(--kinship-board-shadow);
        color: var(--kinship-board-band-ink);
        display: grid;
        gap: var(--kinship-board-gap);
        grid-template-columns: repeat(
            var(--kinship-board-columns),
            minmax(0, 1fr)
        );
        min-block-size: var(--kinship-board-tile-size);
        position: relative;
        transition:
            background-color 240ms ease,
            box-shadow 240ms ease;

        &.kinship-board__band--tier-2 {
            --kinship-board-band: var(--kinship-board-tier-2);
        }

        &.kinship-board__band--tier-3 {
            --kinship-board-band: var(--kinship-board-tier-3);
        }

        &.kinship-board__band--tier-4 {
            --kinship-board-band: var(--kinship-board-tier-4);
        }

        &.kinship-board__band--wave-1 {
            --kinship-board-wave: 420ms;
        }

        &.kinship-board__band--wave-2 {
            --kinship-board-wave: 840ms;
        }

        &.kinship-board__band--wave-3 {
            --kinship-board-wave: 1260ms;
        }

        &.kinship-board__band--wave-4 {
            --kinship-board-wave: 1680ms;
        }

        &.kinship-board__band--missed {
            background-image: repeating-linear-gradient(
                135deg,
                var(--kinship-board-stripe) 0 0.5rem,
                var(--kinship-board-clear) 0.5rem 1rem
            );
        }

        &:has(.kinship-board__ghost[data-flip-moving]) {
            background-color: var(--kinship-board-clear);
            background-image: none;
            box-shadow:
                inset 0 0 0 var(--kinship-board-clear),
                0 0 0 var(--kinship-board-clear),
                0 0 0 0 var(--kinship-board-clear);
            transition: none;

            .kinship-board__ghost {
                opacity: 1;
                transition: none;
            }

            .kinship-board__label {
                opacity: 0;
                transition: none;
            }
        }
    }

    .kinship-board__ghost {
        align-self: center;
        block-size: var(--kinship-board-tile-size);
        display: grid;
        grid-row: 1;
        opacity: 0;
        pointer-events: none;
        position: relative;
        transition: opacity 200ms ease;

        &.kinship-board__ghost--slot-1 {
            grid-column: 1;
        }

        &.kinship-board__ghost--slot-2 {
            grid-column: 2;
        }

        &.kinship-board__ghost--slot-3 {
            grid-column: 3;
        }

        &.kinship-board__ghost--slot-4 {
            grid-column: 4;
        }

        &.kinship-board__ghost--shake {
            animation: kinship-board-shake 340ms
                cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }

        &[data-flip-moving] {
            z-index: 3;
        }
    }

    .kinship-board__label {
        display: grid;
        gap: 0.125rem;
        grid-column: 1 / -1;
        grid-row: 1;
        justify-items: center;
        padding: 0.5rem 0.75rem;
        text-align: center;
        transition: opacity 240ms ease;
    }

    .kinship-board__tag {
        color: var(--kinship-board-band-soft-ink);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.05rem;
        margin: 0;
        text-transform: uppercase;
    }

    .kinship-board__name {
        font-size: 0.9375rem;
        font-weight: 800;
        letter-spacing: 0.03rem;
        line-height: 1.2;
        margin: 0;
        text-transform: uppercase;
        text-wrap: balance;
    }

    .kinship-board__words {
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.02rem;
        line-height: 1.25;
        margin: 0;
        text-transform: uppercase;
        text-wrap: balance;
    }

    .kinship-board__pill {
        animation: kinship-board-pill 2600ms ease both;
        background-color: var(--kinship-board-pill);
        border-radius: 62.5rem;
        box-shadow: 0 0.5rem 1.5rem -0.5rem var(--kinship-board-lift-shadow);
        color: var(--kinship-board-pill-ink);
        font-size: 0.9375rem;
        font-weight: 700;
        inline-size: max-content;
        inset-block-start: -1.25rem;
        inset-inline: 0;
        margin: 0 auto;
        padding: 0.5rem 1rem;
        pointer-events: none;
        position: absolute;
        z-index: 4;
    }

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

        15% {
            translate: -0.375rem 0;
        }

        30% {
            translate: 0.375rem 0;
        }

        45% {
            translate: -0.3125rem 0;
        }

        60% {
            translate: 0.25rem 0;
        }

        75% {
            translate: -0.125rem 0;
        }

        90% {
            translate: 0.0625rem 0;
        }
    }

    @keyframes kinship-board-nudge {
        0%,
        100% {
            rotate: 0deg;
        }

        30% {
            rotate: -2.5deg;
        }

        70% {
            rotate: 2deg;
        }
    }

    @keyframes kinship-board-wait {
        to {
            translate: 0 -0.375rem;
        }
    }

    @keyframes kinship-board-reveal {
        from {
            background-color: var(--kinship-board-from);
            box-shadow:
                inset 0 0.0625rem 0 var(--kinship-board-shine),
                0 0.1875rem 0 var(--kinship-board-from-edge),
                0 0.75rem 1.25rem -0.375rem var(--kinship-board-lift-shadow);
            color: var(--kinship-board-from-ink);
        }
    }

    @keyframes kinship-board-cheer {
        0%,
        100% {
            scale: 1;
            translate: 0 0;
        }

        45% {
            scale: 1.035;
            translate: 0 -0.25rem;
        }
    }

    @keyframes kinship-board-pill {
        0% {
            opacity: 0;
            scale: 0.6;
        }

        7% {
            opacity: 1;
            scale: 1.08;
        }

        12%,
        82% {
            opacity: 1;
            scale: 1;
            translate: 0 0;
        }

        100% {
            opacity: 0;
            scale: 0.96;
            translate: 0 -0.375rem;
        }
    }

    @keyframes kinship-board-fade {
        0%,
        100% {
            opacity: 0;
        }

        7%,
        82% {
            opacity: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kinship-board.kinship-board--cheer .kinship-board__band,
        .kinship-board__tile.kinship-board__tile--shake,
        .kinship-board__tile[data-kinship-nudge],
        .kinship-board__ghost.kinship-board__ghost--shake,
        .kinship-board__tiles[data-pending]
            .kinship-board__check:checked
            + .kinship-board__face {
            animation: none;
        }

        .kinship-board__face,
        .kinship-board__face::after {
            transition: none;
        }

        .kinship-board__pill {
            animation-name: kinship-board-fade;
        }
    }
}