@layer components {
    :root {
        --cross-sums-board-paper: light-dark(
            color-mix(
                in oklab,
                var(--system-background) 40%,
                oklch(100% 0 0deg)
            ),
            var(--tertiary-system-background)
        );
        --cross-sums-board-ink: light-dark(
            color-mix(in oklab, var(--label) 86%, var(--system-background)),
            color-mix(in oklab, var(--system-background) 70%, oklch(0% 0 0deg))
        );
        --cross-sums-board-clue: light-dark(
            var(--system-background),
            var(--label)
        );
        --cross-sums-board-diagonal: color-mix(
            in oklab,
            var(--cross-sums-board-clue) 42%,
            transparent
        );
        --cross-sums-board-entry: var(--tint);
        --cross-sums-board-given: var(--label);
        --cross-sums-board-given-paper: color-mix(
            in oklab,
            var(--label) 7%,
            var(--cross-sums-board-paper)
        );
        --cross-sums-board-hover: color-mix(
            in oklab,
            var(--label) 5%,
            transparent
        );
        --cross-sums-board-peer: color-mix(
            in oklab,
            var(--tint) 12%,
            transparent
        );
        --cross-sums-board-selected: color-mix(
            in oklab,
            var(--tint) 8%,
            var(--cross-sums-board-paper)
        );
        --cross-sums-board-ring: var(--tint);
        --cross-sums-board-focus: var(--label);
        --cross-sums-board-lift: light-dark(
            oklch(0% 0 0deg / 24%),
            oklch(0% 0 0deg / 60%)
        );
        --cross-sums-board-shadow: light-dark(
            oklch(0% 0 0deg / 10%),
            oklch(0% 0 0deg / 40%)
        );
        --cross-sums-board-active: color-mix(
            in oklab,
            var(--tint) 62%,
            var(--cross-sums-board-clue)
        );
        --cross-sums-board-on-active: var(--cross-sums-board-ink);
        --cross-sums-board-success: var(--system-teal);
        --cross-sums-board-settled: color-mix(
            in oklab,
            var(--cross-sums-board-success) 10%,
            var(--cross-sums-board-paper)
        );
        --cross-sums-board-clue-satisfied: color-mix(
            in oklab,
            var(--cross-sums-board-success) 45%,
            var(--cross-sums-board-clue)
        );
        --cross-sums-board-conflict: light-dark(
            oklch(0.55 0.2 27),
            oklch(0.72 0.17 27)
        );
        --cross-sums-board-conflict-paper: color-mix(
            in oklab,
            var(--cross-sums-board-conflict) 15%,
            var(--cross-sums-board-paper)
        );
        --cross-sums-board-on-conflict: light-dark(
            oklch(100% 0 0deg),
            var(--cross-sums-board-ink)
        );
        --cross-sums-board-flash: color-mix(
            in oklab,
            var(--cross-sums-board-success) 45%,
            var(--cross-sums-board-paper)
        );
    }

    .cross-sums-board {
        --cross-sums-board-size: 7;
        --cross-sums-board-gap: 0.0625rem;
        --cross-sums-board-frame: 0.125rem;
        --cross-sums-board-gutter: 0.25rem;
        --cross-sums-board-reserve: calc(21rem + var(--safe-area-block-end));
        --cross-sums-board-cell: clamp(
            2.2rem,
            min(
                (
                        100vw - 2 * var(--cross-sums-board-gutter) - 2 *
                            var(--cross-sums-board-frame)
                    ) /
                    var(--cross-sums-board-size) - var(--cross-sums-board-gap),
                (
                        100dvh - var(--cross-sums-board-reserve) - 2 *
                            var(--cross-sums-board-gutter) - 2 *
                            var(--cross-sums-board-frame)
                    ) /
                    var(--cross-sums-board-size) - var(--cross-sums-board-gap)
            ),
            3.25rem
        );
        --cross-sums-board-width: calc(
            var(--cross-sums-board-size) *
                (var(--cross-sums-board-cell) + var(--cross-sums-board-gap)) -
                var(--cross-sums-board-gap) + 2 *
                var(--cross-sums-board-frame) + 2 *
                var(--cross-sums-board-gutter)
        );

        box-sizing: border-box;
        inline-size: min(100vw, var(--cross-sums-board-width));
        justify-self: start;
        margin-inline: calc(
            (100% - min(100vw, var(--cross-sums-board-width))) / 2
        );
        max-block-size: calc(100dvh - var(--cross-sums-board-reserve));
        overflow: auto;
        overscroll-behavior: contain;
        padding: var(--cross-sums-board-gutter);
        user-select: none;

        &.cross-sums-board--size-10 {
            --cross-sums-board-size: 10;
        }

        &.cross-sums-board--size-13 {
            --cross-sums-board-size: 13;
        }
    }

    .cross-sums-board__grid {
        background-color: var(--cross-sums-board-ink);
        border: var(--cross-sums-board-frame) solid var(--cross-sums-board-ink);
        border-radius: 0.5rem;
        box-shadow:
            0 0.0625rem 0.125rem var(--cross-sums-board-shadow),
            0 0.75rem 1.5rem -1rem var(--cross-sums-board-lift);
        display: grid;
        gap: var(--cross-sums-board-gap);
        grid-auto-rows: var(--cross-sums-board-cell);
        grid-template-columns: repeat(
            var(--cross-sums-board-size),
            var(--cross-sums-board-cell)
        );
        inline-size: max-content;
        margin-inline: auto;
        overflow: clip;
    }

    .cross-sums-board__block {
        background-color: var(--cross-sums-board-ink);
        position: relative;

        &.cross-sums-board__block--clue::after {
            background-color: var(--cross-sums-board-diagonal);
            block-size: 0.0625rem;
            content: "";
            inline-size: 141.4214%;
            inset-block-start: 0;
            inset-inline-start: 0;
            position: absolute;
            rotate: 45deg;
            transform-origin: 0 0;
        }
    }

    .cross-sums-board__clue {
        color: var(--cross-sums-board-clue);
        display: flex;
        font-size: calc(var(--cross-sums-board-cell) * 0.32);
        font-variant-numeric: tabular-nums;
        font-weight: 650;
        inset: 0;
        line-height: 1;
        padding: calc(var(--cross-sums-board-cell) * 0.09);
        position: absolute;

        &.cross-sums-board__clue--across {
            align-items: flex-start;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            justify-content: flex-end;
        }

        &.cross-sums-board__clue--down {
            align-items: flex-end;
            clip-path: polygon(0 0, 0 100%, 100% 100%);
            justify-content: flex-start;
        }

        &.cross-sums-board__clue--satisfied {
            color: var(--cross-sums-board-clue-satisfied);
            font-weight: 800;
        }

        &.cross-sums-board__clue--active {
            background-color: var(--cross-sums-board-active);
            color: var(--cross-sums-board-on-active);
        }

        &.cross-sums-board__clue--wrong {
            background-color: var(--cross-sums-board-conflict);
            color: var(--cross-sums-board-on-conflict);
            font-weight: 800;
        }

        &.cross-sums-board__clue--broken {
            text-decoration: underline 0.125rem;
            text-underline-offset: 0.125rem;
        }

        &.cross-sums-board__clue--incomplete {
            text-decoration: underline dotted 0.125rem;
            text-underline-offset: 0.125rem;
        }
    }

    .cross-sums-board__cell {
        align-items: center;
        background-color: var(--cross-sums-board-paper);
        color: var(--cross-sums-board-entry);
        display: flex;
        font-size: calc(var(--cross-sums-board-cell) * 0.56);
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        justify-content: center;
        outline-offset: -0.25rem;
        position: relative;
        text-decoration: none;
        transition:
            scale 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 140ms ease-out;
        -webkit-tap-highlight-color: transparent;

        &.cross-sums-board__cell--given {
            background-color: var(--cross-sums-board-given-paper);
            color: var(--cross-sums-board-given);
            font-weight: 750;
        }

        &.cross-sums-board__cell--settled {
            background-color: var(--cross-sums-board-settled);
        }

        &.cross-sums-board__cell--conflict {
            background-color: var(--cross-sums-board-conflict-paper);
            color: var(--cross-sums-board-conflict);
            text-decoration: underline wavy 0.0625rem;
            text-underline-offset: 0.1875rem;
        }

        &.cross-sums-board__cell--peer {
            background-image: linear-gradient(
                var(--cross-sums-board-peer),
                var(--cross-sums-board-peer)
            );
        }

        &.cross-sums-board__cell--selected {
            background-color: var(--cross-sums-board-selected);
            box-shadow:
                inset 0 0 0 0.125rem var(--cross-sums-board-ring),
                0 0.375rem 0.875rem -0.25rem var(--cross-sums-board-lift);
            scale: 1.06;
            z-index: 1;
        }

        &.cross-sums-board__cell--broken {
            outline: 0.125rem dashed var(--cross-sums-board-conflict);
        }

        &[href]:active {
            scale: 0.94;
        }

        &:focus-visible {
            outline: 0.125rem solid var(--cross-sums-board-focus);
        }

        @media (hover: hover) {
            &[href]:hover:not(.cross-sums-board__cell--selected) {
                box-shadow: inset 0 0 0 10rem var(--cross-sums-board-hover);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }

    .cross-sums-board__digit {
        line-height: 1;
    }
}