/* ################ TUNNELS / DIGGING ################ */

:root {
    --tunnel-tile-cell-width: calc(100% / 5);
    --tunnel-tile-cell-height: calc(100% / 7);
}


.building.empty.tunnel > .img-wrap {
    background: url("../images/webp/building-tunnel_100.webp") no-repeat;
    background-size: var(--cell-size) var(--cell-size);
    background-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 0);
    /*image-rendering: crisp-edges;*/

    mask-image: url("../images/webp/tunnel-full_100.webp");
    mask-size: 600% 800%;
    mask-clip: border-box;
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 0);

    -webkit-mask-image: url("../images/webp/tunnel-full_100.webp");
    -webkit-mask-size: 600% 800%;
    -webkit-mask-clip: border-box;
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 0);
}

.building.empty.tunnel[data-tile-number="1"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 0);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 0);
}
.building.empty.tunnel[data-tile-number="2"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 0);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 0);
}
.building.empty.tunnel[data-tile-number="3"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 0);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 0);
}
.building.empty.tunnel[data-tile-number="4"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 0);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 0);
}
.building.empty.tunnel[data-tile-number="5"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 0);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 0);
}
.building.empty.tunnel[data-tile-number="6"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 0);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 0);
}
.building.empty.tunnel[data-tile-number="7"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 1);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 1);
}
.building.empty.tunnel[data-tile-number="8"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 1);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 1);
}
.building.empty.tunnel[data-tile-number="9"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 1);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 1);
}
.building.empty.tunnel[data-tile-number="10"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 1);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 1);
}
.building.empty.tunnel[data-tile-number="11"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 1);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 1);
}
.building.empty.tunnel[data-tile-number="12"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 1);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 1);
}
.building.empty.tunnel[data-tile-number="13"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 2);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 2);
}
.building.empty.tunnel[data-tile-number="14"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 2);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 2);
}
.building.empty.tunnel[data-tile-number="15"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 2);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 2);
}
.building.empty.tunnel[data-tile-number="16"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 2);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 2);
}
.building.empty.tunnel[data-tile-number="17"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 2);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 2);
}
.building.empty.tunnel[data-tile-number="18"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 2);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 2);
}
.building.empty.tunnel[data-tile-number="19"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 3);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 3);
}
.building.empty.tunnel[data-tile-number="20"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 3);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 3);
}
.building.empty.tunnel[data-tile-number="21"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 3);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 3);
}
.building.empty.tunnel[data-tile-number="22"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 3);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 3);
}
.building.empty.tunnel[data-tile-number="23"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 3);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 3);
}
.building.empty.tunnel[data-tile-number="24"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 3);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 3);
}
.building.empty.tunnel[data-tile-number="25"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 4);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 4);
}
.building.empty.tunnel[data-tile-number="26"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 4);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 4);
}
.building.empty.tunnel[data-tile-number="27"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 4);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 4);
}
.building.empty.tunnel[data-tile-number="28"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 4);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 4);
}
.building.empty.tunnel[data-tile-number="29"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 4);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 4);
}
.building.empty.tunnel[data-tile-number="30"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 4);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 4);
}
.building.empty.tunnel[data-tile-number="31"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 5);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 5);
}
.building.empty.tunnel[data-tile-number="32"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 5);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 5);
}
.building.empty.tunnel[data-tile-number="33"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 5);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 5);
}
.building.empty.tunnel[data-tile-number="34"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 5);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 5);
}
.building.empty.tunnel[data-tile-number="35"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 5);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 5);
}
.building.empty.tunnel[data-tile-number="36"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 5);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 5);
}
.building.empty.tunnel[data-tile-number="37"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 6);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 6);
}
.building.empty.tunnel[data-tile-number="38"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 6);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 6);
}
.building.empty.tunnel[data-tile-number="39"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 6);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 6);
}
.building.empty.tunnel[data-tile-number="40"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 6);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 6);
}
.building.empty.tunnel[data-tile-number="41"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 6);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 6);
}
.building.empty.tunnel[data-tile-number="42"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 6);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 6);
}
.building.empty.tunnel[data-tile-number="43"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 7);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 0) calc(var(--tunnel-tile-cell-height) * 7);
}
.building.empty.tunnel[data-tile-number="44"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 7);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 1) calc(var(--tunnel-tile-cell-height) * 7);
}
.building.empty.tunnel[data-tile-number="45"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 7);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 2) calc(var(--tunnel-tile-cell-height) * 7);
}
.building.empty.tunnel[data-tile-number="46"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 7);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 3) calc(var(--tunnel-tile-cell-height) * 7);
}
.building.empty.tunnel[data-tile-number="47"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 7);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 4) calc(var(--tunnel-tile-cell-height) * 7);
}
.building.empty.tunnel[data-tile-number="48"] > .img-wrap{
    mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 7);
    -webkit-mask-position: calc(var(--tunnel-tile-cell-width) * 5) calc(var(--tunnel-tile-cell-height) * 7);
}