@layer components {
    :root {
        --sudoku-board-line: var(--opaque-separator);
        --sudoku-board-line-strong: var(--label);
        --sudoku-board-cell: var(--secondary-system-grouped-background);
        --sudoku-board-given: var(--label);
        --sudoku-board-given-background: var(--tertiary-system-background);
        --sudoku-board-entry: var(--tint);
        --sudoku-board-hinted: var(--secondary-label);
        --sudoku-board-peer: color-mix(in oklch, var(--tint) 8%, var(--sudoku-board-cell));
        --sudoku-board-match: color-mix(in oklch, var(--tint) 18%, var(--sudoku-board-cell));
        --sudoku-board-selected: color-mix(in oklch, var(--tint) 30%, var(--sudoku-board-cell));
        --sudoku-board-conflict: light-dark(oklch(0.55 0.2 27), oklch(0.72 0.17 27));
        --sudoku-board-conflict-background: color-mix(
            in oklch,
            var(--sudoku-board-conflict) 16%,
            var(--sudoku-board-cell)
        );
    }

    .sudoku-board {
        border-block-start: 0.125rem solid var(--sudoku-board-line-strong);
        border-inline-start: 0.125rem solid var(--sudoku-board-line-strong);
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        inline-size: min(100%, 27rem);
        user-select: none;
    }

    .sudoku-board__cell {
        align-items: center;
        aspect-ratio: 1;
        background-color: var(--sudoku-board-cell);
        border-block-end: 0.0625rem solid var(--sudoku-board-line);
        border-inline-end: 0.0625rem solid var(--sudoku-board-line);
        color: var(--sudoku-board-entry);
        display: flex;
        font-size: 1.25rem;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        justify-content: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;

        &.sudoku-board__cell--edge-right {
            border-inline-end: 0.125rem solid var(--sudoku-board-line-strong);
        }

        &:nth-child(9n) {
            border-inline-end: 0.125rem solid var(--sudoku-board-line-strong);
        }

        &.sudoku-board__cell--edge-bottom {
            border-block-end: 0.125rem solid var(--sudoku-board-line-strong);
        }

        &:nth-child(n + 73) {
            border-block-end: 0.125rem solid var(--sudoku-board-line-strong);
        }

        &.sudoku-board__cell--given {
            background-color: var(--sudoku-board-given-background);
            color: var(--sudoku-board-given);
            font-weight: 700;
        }

        &.sudoku-board__cell--hinted {
            color: var(--sudoku-board-hinted);
            font-style: italic;
        }

        &.sudoku-board__cell--peer {
            background-color: var(--sudoku-board-peer);
        }

        &.sudoku-board__cell--match {
            background-color: var(--sudoku-board-match);
        }

        &.sudoku-board__cell--selected {
            background-color: var(--sudoku-board-selected);
        }

        &.sudoku-board__cell--conflict {
            background-color: var(--sudoku-board-conflict-background);
            color: var(--sudoku-board-conflict);
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--tint);
            outline-offset: -0.1875rem;
        }
    }
}