@layer components {
    :root {
        --island-bridges-board-sea: var(--secondary-system-grouped-background);
        --island-bridges-board-island: var(--system-background);
        --island-bridges-board-number: var(--label);
        --island-bridges-board-rim: var(--label);
        --island-bridges-board-bridge: var(--label);
        --island-bridges-board-reach: color-mix(in oklch, var(--tint) 45%, transparent);
        --island-bridges-board-selected: var(--tint);
        --island-bridges-board-selected-number: var(--tint-label);
        --island-bridges-board-target: color-mix(in oklch, var(--tint) 16%, var(--system-background));
        --island-bridges-board-complete: var(--tertiary-system-background);
        --island-bridges-board-complete-number: var(--secondary-label);
        --island-bridges-board-over: light-dark(oklch(0.55 0.2 27), oklch(0.72 0.17 27));
        --island-bridges-board-over-background: color-mix(
            in oklch,
            var(--island-bridges-board-over) 16%,
            var(--system-background)
        );
    }

    .island-bridges-board {
        aspect-ratio: 1;
        background-color: var(--island-bridges-board-sea);
        border-radius: 0.75rem;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(7, 1fr);
        inline-size: min(100%, 36rem);
        margin: 0;
        position: relative;
        user-select: none;

        &.island-bridges-board--size-10 {
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
        }

        &.island-bridges-board--size-13 {
            grid-template-columns: repeat(13, 1fr);
            grid-template-rows: repeat(13, 1fr);
        }
    }

    .island-bridges-board__bridges {
        block-size: 100%;
        inline-size: 100%;
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

    .island-bridges-board__bridge {
        stroke: var(--island-bridges-board-bridge);
        stroke-linecap: round;
        stroke-width: 0.09;
    }

    .island-bridges-board__reach {
        stroke: var(--island-bridges-board-reach);
        stroke-dasharray: 0.12 0.12;
        stroke-linecap: round;
        stroke-width: 0.06;
    }

    .island-bridges-board__water {
        min-inline-size: 0;
    }

    .island-bridges-board__island {
        align-items: center;
        appearance: none;
        aspect-ratio: 1;
        background-color: var(--island-bridges-board-island);
        border: 0.125rem solid var(--island-bridges-board-rim);
        border-radius: 50%;
        box-sizing: border-box;
        color: var(--island-bridges-board-number);
        cursor: pointer;
        display: flex;
        font: inherit;
        font-size: 1.25rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        justify-content: center;
        margin: 6%;
        min-inline-size: 0;
        padding: 0;
        position: relative;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;

        &.island-bridges-board__island--complete {
            background-color: var(--island-bridges-board-complete);
            border-color: var(--island-bridges-board-complete-number);
            color: var(--island-bridges-board-complete-number);
        }

        &.island-bridges-board__island--over {
            background-color: var(--island-bridges-board-over-background);
            border-color: var(--island-bridges-board-over);
            color: var(--island-bridges-board-over);
        }

        &.island-bridges-board__island--target {
            background-color: var(--island-bridges-board-target);
            border-color: var(--island-bridges-board-selected);
            border-style: dashed;
        }

        &.island-bridges-board__island--selected {
            background-color: var(--island-bridges-board-selected);
            border-color: var(--island-bridges-board-selected);
            color: var(--island-bridges-board-selected-number);
        }

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

    .island-bridges-board--size-10 .island-bridges-board__island {
        font-size: 1rem;
    }

    .island-bridges-board--size-13 .island-bridges-board__island {
        border-width: 0.09375rem;
        font-size: 0.875rem;
        margin: 4%;
    }

    .island-bridges-board--finished .island-bridges-board__island {
        cursor: default;
    }
}