@layer components {
    :root {
        --molehills-board-turf: color-mix(
            in oklch,
            var(--tint) 24%,
            var(--secondary-system-grouped-background)
        );
        --molehills-board-turf-pressed: color-mix(
            in oklch,
            var(--tint) 36%,
            var(--secondary-system-grouped-background)
        );
        --molehills-board-soil: var(--system-background);
        --molehills-board-line: color-mix(
            in oklch,
            var(--tint) 34%,
            var(--secondary-system-grouped-background)
        );
        --molehills-board-number: var(--label);
        --molehills-board-near-1: var(--tint);
        --molehills-board-near-2: light-dark(oklch(0.5 0.13 250), oklch(0.76 0.1 250));
        --molehills-board-near-3: light-dark(oklch(0.52 0.17 25), oklch(0.74 0.14 25));
        --molehills-board-near-4: light-dark(oklch(0.45 0.12 300), oklch(0.76 0.1 300));
        --molehills-board-mound: light-dark(oklch(0.48 0.07 55), oklch(0.62 0.07 55));
        --molehills-board-mole: light-dark(oklch(0.32 0.03 50), oklch(0.42 0.03 50));
        --molehills-board-eye: light-dark(oklch(0.97 0.01 80), oklch(0.95 0.01 80));
        --molehills-board-nose: light-dark(oklch(0.72 0.11 15), oklch(0.78 0.1 15));
        --molehills-board-pole: var(--label);
        --molehills-board-pennant: var(--tint);
        --molehills-board-struck: color-mix(
            in oklch,
            var(--molehills-board-near-3) 22%,
            var(--molehills-board-soil)
        );
    }

    .molehills-board {
        inline-size: min(100%, 22rem);
        user-select: none;

        &.molehills-board--size-9 {
            inline-size: min(100%, 27rem);
        }

        &.molehills-board--size-14 {
            inline-size: min(100%, 32rem);
        }
    }

    .molehills-board__lawn {
        background-color: var(--molehills-board-line);
        border: 0.0625rem solid var(--molehills-board-line);
        border-radius: 0.75rem;
        display: grid;
        gap: 0.0625rem;
        grid-template-columns: repeat(6, 1fr);
        overflow: hidden;

        .molehills-board--size-9 & {
            grid-template-columns: repeat(9, 1fr);
        }

        .molehills-board--size-14 & {
            grid-template-columns: repeat(14, 1fr);
        }
    }

    .molehills-board__tile {
        align-items: center;
        aspect-ratio: 1;
        background-color: var(--molehills-board-soil);
        border: none;
        color: var(--molehills-board-number);
        display: flex;
        font: inherit;
        font-size: 1.25rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        justify-content: center;
        min-inline-size: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;

        .molehills-board--size-9 & {
            font-size: 1.125rem;
        }

        .molehills-board--size-14 & {
            font-size: 0.875rem;
        }

        &.molehills-board__tile--turf {
            background-color: var(--molehills-board-turf);

            &:is(button) {
                cursor: pointer;
            }

            &:is(button):active {
                background-color: var(--molehills-board-turf-pressed);
            }
        }

        &.molehills-board__tile--near-1 {
            color: var(--molehills-board-near-1);
        }

        &.molehills-board__tile--near-2 {
            color: var(--molehills-board-near-2);
        }

        &.molehills-board__tile--near-3 {
            color: var(--molehills-board-near-3);
        }

        &.molehills-board__tile--near-4,
        &.molehills-board__tile--near-5,
        &.molehills-board__tile--near-6,
        &.molehills-board__tile--near-7,
        &.molehills-board__tile--near-8 {
            color: var(--molehills-board-near-4);
        }

        &.molehills-board__tile--struck {
            background-color: var(--molehills-board-struck);
        }

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

    .molehills-board__icon {
        aspect-ratio: 1;
        block-size: auto;
        display: block;
        inline-size: 72%;
    }

    .molehills-board__mound {
        fill: var(--molehills-board-mound);
    }

    .molehills-board__mole {
        fill: var(--molehills-board-mole);
    }

    .molehills-board__eye {
        fill: var(--molehills-board-eye);
    }

    .molehills-board__nose {
        fill: var(--molehills-board-nose);
    }

    .molehills-board__pole {
        stroke: var(--molehills-board-pole);
        stroke-linecap: round;
        stroke-width: 1.75;
    }

    .molehills-board__pennant {
        fill: var(--molehills-board-pennant);
        stroke: var(--molehills-board-pennant);
        stroke-linejoin: round;
        stroke-width: 1.5;
    }
}