.tile {
    width: 45px;
    height: 45px;
    position: relative;
    border-radius: 5px;
    border: transparent;
    background: #ffffff;
    z-index: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tile-bg {
    z-index: -1;
    padding: 1rem;
    margin: 1rem;
}

.tile.plain {
    background: rgb(255, 246, 200);
}

.tile.mountain {
    background: #ae7744;
}

.tile.mountain .tile-bg {
    background: url("../images/icons/mountain.svg") no-repeat center;
}

.tile.forest {
    background: #2d862d;
}

.tile.forest .tile-bg {
    background: url("../images/icons/tree.svg") no-repeat center;
}

.tile.water {
    background: #59d2ec;
}

.tile.water .tile-bg {
    background: url("../images/icons/wave.svg") no-repeat center;
}

.tile.farm {
    background: #e6e600;
}

.tile.farm .tile-bg {
    background: url("../images/icons/farm.svg") no-repeat center;
}

.tile.village {
    background: #b13030;
}

.tile.village .tile-bg {
    background: url("../images/icons/house.svg") no-repeat center;
}

.tile.road {
    background: #d9d9d9;
}

.tile.correct {
    border: 4px solid #1cc201;
}

.tile.incorrect {
    border: 4px solid #ff0000;
}

.tile.preview .tile-bg {
    opacity: 0.5;
}

#required-time {
    background: rgb(255, 246, 200);
    align-self: center;
    padding: .3rem;
    border-radius: 5px;
    text-align: center;
    line-height: normal;
}

@media only screen and (max-width: 768px) {
    .tile {
        width: 40px;
        height: 40px;
    }
}

@media only screen and (max-width: 500px) {
    .tile {
        width: 22px;
        height: 22px;
    }

    .tile.correct {
        border: 2px solid #1cc201;
    }

    .tile.incorrect {
        border: 2px solid #ff0000;
    }

    .tile-bg {
        z-index: -1;
        padding: .5rem;
        margin: .5rem;
    }
}

@media only screen and (max-width: 260px) {
    .tile {
        width: 17px;
        height: 17px;
    }
}