.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.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; }
#field .block:hover { outline: 1px solid white; z-index: 10; }

.block.sun-3 { filter: brightness(1.0); }
.block.sun-2 { filter: brightness(0.4); }
.block.sun-1 { filter: brightness(0.2); }
.block.sun-0 { filter: brightness(0.0); }

.morning0 .block, .morning0 #player {filter: saturate(50%) brightness(0.6) hue-rotate(-10deg); }
.morning1 .block, .morning1 #player { filter: saturate(100%) brightness(0.8) hue-rotate(-20deg); }
.morning2 .block, .morning2 #player { filter: saturate(200%) hue-rotate(-30deg); }

.morning0 .block.sun-2 { filter: brightness(0); }
.morning1 .block.sun-2 { filter: saturate(100%) brightness(0.2) hue-rotate(-20deg); }
.morning2 .block.sun-2 { filter: saturate(200%) brightness(0.4) hue-rotate(-30deg); }

.morning0 .block.sun-1,
.morning1 .block.sun-1 { filter: brightness(0); }
.morning2 .block.sun-1 { filter: saturate(200%) brightness(0.2) hue-rotate(-30deg); }

.evening0 .block, .evening0 #player { filter: brightness(0.8) hue-rotate(-10deg); }
.evening1 .block, .evening1 #player { filter: brightness(0.6) hue-rotate(-20deg); }
.evening2 .block, .evening2 #player { filter: brightness(0.4) hue-rotate(-10deg) saturate(50%); }

.evening0 .block.sun-2 { filter: brightness(0.3) hue-rotate(-10deg); }
.evening1 .block.sun-2 { filter: brightness(0.2) hue-rotate(-20deg); }
.evening2 .block.sun-2 { filter: brightness(0); }

.evening0 .block.sun-1 { filter: brightness(0.2) hue-rotate(-10deg); }
.evening1 .block.sun-1, .evening2 .block.sun-1 { filter: brightness(0); }

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

.block.sun-0,
.morning0 .block.sun-0,
.morning1 .block.sun-0,
.morning2 .block.sun-0,
.evening0 .block.sun-0,
.evening1 .block.sun-0,
.evening2 .block.sun-0,
.night .block.sun-0 { filter: brightness(0); }

#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;
}
