.game {
    /* --ratio is set with Js on init */
    --ratio-width: 9;
    --ratio-height: 5;
    aspect-ratio: var(--ratio-width) / var(--ratio-height);
    display: grid;
    grid-template-columns: repeat(var(--ratio-width), 1fr);
    grid-template-rows: repeat(var(--ratio-height), 1fr);
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    margin-inline: auto;
    position: relative;
    background: #1f1f1f;
}

.cell {
    position: relative;
    z-index: 0;
    text-align: center;
    align-content: center;
    font-size: 0.75em;
    color: #3c3c3c84;
    border: 0px solid hsla(0, 0%, 100%, 0);
    transition: border 0.15s ease;
    filter: brightness(2.3) contrast(1.2);

    &::after {
        /* --background is set with Js on cell-click */
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
        background: var(--background);
        background-size: cover;

        /* Hack to hide seam gap */
        transform: scale(1.01);

        
    }

    &:nth-child(even) {
        background: hsl(0, 0%, 10%);
    }

    &:hover {
        background: hsl(0, 0%, 15%);
        cursor: pointer;
        border: 0.5rem solid transparent;
        filter: brightness(2.5) contrast(1.2);
    }

    &[data-type="river"]::after {
        filter: hue-rotate(155deg) contrast(1.3) brightness(1.5);
    }

    &[data-type="town"]::after {
        filter: hue-rotate(340deg) contrast(1.6) brightness(1.1) grayscale(0.2) ;
    }
}