@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700');

/* Variables */

:root {
    --cell-color: rgb(212, 200, 223);
    --cell-undiscovered-color: rgb(184, 163, 192);
    --cell-clicked-color: rgb(117, 92, 148);
    --cell-bomb-clicked-animation-color: rgba(110, 85, 141, 0.75);
    --cell-size: 25px;

    --cell-number-color-1: rgb(47, 131, 199);
    --cell-number-color-2: rgb(49, 177, 104);
    --cell-number-color-3: rgb(212, 85, 166);
    --cell-number-color-4: rgb(177, 0, 177);
    --cell-number-color-5: rgb(192, 0, 42);
    --cell-number-color-6: rgb(49, 192, 192);
    --cell-number-color-7: black;
    --cell-number-color-8: white;
}

/* Elements */

.field {
    display: grid;
    cursor: pointer;
}

.cell {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: var(--cell-color);
    margin: 1px;
    border: 1.5px solid transparent;
    border-radius: 2px;
}

.cell-number {
    font-family: 'Work Sans';
    font-weight: bold;
    font-size: 15pt;
}

.cell-flag {
    background: var(--cell-color) url(./icons/game/flag.svg) no-repeat;
    background-origin: content-box;
    padding: 3px;
}

.cell-bomb {
    background: var(--cell-color) url(./icons/game/bomb.svg) no-repeat;
    background-origin: content-box;
    padding: 3px;
    pointer-events: none;
}

.cell-bomb-clicked {
    background: var(--cell-color) url(./icons/game/bomb.svg) no-repeat;
    background-origin: content-box;
    padding: 3px;
    z-index: 0;
    animation: cell-bomb-clicked-animation .5s ease infinite alternate;
}

.cell-bomb-wrong {
    background: var(--cell-color) url(./icons/game/bomb-wrong.svg) no-repeat;
    background-origin: content-box;
    padding: 3px;
}

@keyframes cell-bomb-clicked-animation {
    from {
        box-shadow: 0 0 0 0 transparent;
    }
    to {
        box-shadow: 0 0 0 4px var(--cell-bomb-clicked-animation-color)
    }
}

.cell-undiscovered {
    background-color: var(--cell-undiscovered-color);
}

.cell-undiscovered:active {
    background-color: var(--cell-clicked-color);
}

.cell-undiscovered-active {
    background-color: var(--cell-clicked-color);
}

.cell-locked {
    background-color: var(--cell-undiscovered-color);
}