.block, #player {
  transition: filter .5s linear;
}
.block {
  flex: 0 0 auto;
  width: var(--block-size);
  height: var(--block-size);
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.block::after {
  content: '';
  position: absolute;
  width: var(--block-size);
  height: var(--block-size);
  background-color: transparent;
  background-image: url(/break.png);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: calc(var(--block-size) * -7);
  background-size: cover;
}

.block.damage-0::after { background-position-x: 0px; }
.block.damage-1::after { background-position-x: calc(var(--block-size) * -1); }
.block.damage-2::after { background-position-x: calc(var(--block-size) * -2); }
.block.damage-3::after { background-position-x: calc(var(--block-size) * -3); }
.block.damage-4::after { background-position-x: calc(var(--block-size) * -4); }
.block.damage-5::after { background-position-x: calc(var(--block-size) * -5); }
.block.damage-6::after { background-position-x: calc(var(--block-size) * -6); }

.block.grass   { background-image: url(/Tiles/dirt_grass.png); }

.block.treeCrown, .block.treeLeaves { background-image: url(/Tiles/leaves_transparent.png); }
.block.treeTrunk { background-image: url(/Tiles/trunk_mid.png); }
.block.treeRoot  { background-image: url(/Tiles/trunk_bottom.png); }

.block.soil        { background-image: url(/Tiles/dirt.png); }
.block.soilGravel  { background-image: url(/Tiles/gravel_dirt.png); }
.block.stoneGravel { background-image: url(/Tiles/gravel_stone.png); }
.block.stone       { background-image: url(/Tiles/stone.png); }
.block.bedrock     { background-image: url(/Tiles/greystone.png); }
.block.cave        { background-color: #000; }

.block.brickWall   { background-image: url(/Tiles/brick_grey.png); }

#field .block:hover { outline: 1px solid white; z-index: 10; }

.morning0 .block, .morning0 #player {filter: saturate(50%); }
.morning1 .block, .morning1 #player { filter: saturate(100%); }
.morning2 .block, .morning2 #player { filter: saturate(120%); }

.evening0 .block, .evening0 #player { filter: saturate(90%); }
.evening1 .block, .evening1 #player { filter: saturate(70%); }
.evening2 .block, .evening2 #player { filter: saturate(50%); }

.night .block, .night #player { filter: saturate(30%); }

#blocks {
  position: absolute;
  top: calc(var(--block-size) * (var(--spare-blocks) / -2));
  left: calc(var(--block-size) * (var(--spare-blocks) / -2));
  width: calc(var(--field-width) + var(--spare-blocks) * var(--block-size));
  height: calc(var(--field-height) + var(--spare-blocks) * var(--block-size));
  display: flex;
  flex-flow: row wrap;
}

#light-mask {
  position: absolute;
  top: calc(var(--block-size) * -1);
  left: calc(var(--block-size) * -1);
  width: calc(100% + var(--block-size) * 2);
  height: calc(100% + var(--block-size) * 2);
  mix-blend-mode: multiply;
  pointer-events: none;
}
