:root {
    --black: oklch(0.13 0.028 261.692);
    --gray: oklch(0.373 0.034 259.733);
    --light-gray: oklch(44.6% 0.03 256.802);
    --text-color: oklch(70.7% 0.022 261.325);
    --text-highlight: oklch(92.8% 0.006 264.531);
    --red: oklch(0.577 0.245 27.325);
    --orange: oklch(0.646 0.222 41.116);
    --amber: oklch(0.666 0.179 58.318);
    --yellow: oklch(0.681 0.162 75.834);
    --lime: oklch(0.648 0.2 131.684);
    --green: oklch(0.627 0.194 149.214);
    --emerald: oklch(0.596 0.145 163.225);
    --teal: oklch(0.6 0.118 184.704);
    --cyan: oklch(0.609 0.126 221.723);
    --sky: oklch(0.588 0.158 241.966);
    --blue: oklch(0.546 0.245 262.881);
    --indigo: oklch(0.511 0.262 276.966);
    --violet: oklch(0.541 0.281 293.009);
    --purple: oklch(0.558 0.288 302.321);
    --fuchsia: oklch(0.591 0.293 322.896);
    --pink: oklch(0.592 0.249 0.584);
    --rose: oklch(0.586 0.253 17.585);
}

html {
    background: var(--black);
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    text-align: center;
    color: var(--text-color);
}

h1 {
    max-width: 100vw;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: var(--light-gray);
}

h2 {
    max-width: 468px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    color: var(--text-color);

    @media (width >= 64rem) {
        max-width: 572px;
        font-size: 16px;
        line-height: 24px;
    }
}

a {
    text-decoration: underline;
    color: var(--text-color);

    &:hover {
        color: var(--text-highlight);
    }
}

#board {
    width: 364px;
    height: 364px;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (width >= 40rem) {
        min-width: 468px;
        min-height: 468px;
    }

    @media (width >= 64rem) {
        min-width: 624px;
        min-height: 624px;
    }

    .col {
        display: flex;
        flex-direction: column;

        .cell {
            display: flex;
            padding: 2px;

            &.checked {
                &.red {
                    background-color: var(--red);
                }
                &.orange {
                    background-color: var(--orange);
                }
                &.amber {
                    background-color: var(--amber)
                }
                &.yellow {
                    background-color: var(--yellow);
                }
                &.lime {
                    background-color: var(--lime);
                }
                &.green {
                    background-color: var(--green);
                }
                &.emerald {
                    background-color: var(--emerald);
                }
                &.teal {
                    background-color: var(--teal);
                }
                &.cyan {
                    background-color: var(--cyan);
                }
                &.sky {
                    background-color: var(--sky);
                }
                &.blue {
                    background-color: var(--blue);
                }
                &.indigo {
                    background-color: var(--indigo);
                }
                &.violet {
                    background-color: var(--violet);
                }
                &.purple {
                    background-color: var(--purple);
                }
                &.fuchsia {
                    background-color: var(--fuchsia);
                }
                &.pink {
                    background-color: var(--pink);
                }
                &.rose {
                    background-color: var(--rose);
                }

                button {
                    border: none;
                }
            }

            button {
                width: 24px;
                height: 24px;
                background-color: transparent;
                border: 2px solid var(--gray);
                border-radius: 4px;
                cursor: pointer;

                &.pop {
                    animation: pop 0.2s ease;
                    pointer-events: none;
                }
            }
        }

        @media (width >= 40rem) {
            .cell {
                padding: 4px;

                button {
                    width: 28px;
                    height: 28px;
                }
            }
        }

        @media (width >= 64rem) {
            .cell {
                padding: 6px;

                button {
                    width: 36px;
                    height: 36px;
                }
            }
        }
    }
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}