.tile {
  border: 3px solid #f3dfb7;
  border-radius: 11px;
  background: linear-gradient(145deg, #fffef8 0%, #fff4d3 58%, #dbc397 100%);
  overflow: hidden;
  text-shadow: none;
  box-shadow: inset 3px 3px 4px rgba(255, 255, 255, .9), inset -3px -4px 4px rgba(125, 91, 38, .16), 0 2px 3px rgba(0, 0, 0, .16);
  filter: saturate(1.22);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 3px 5px auto;
  height: 38%;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.tile::after { font-weight: 800; text-shadow: none; }
.tile.red { color: #f02f36; }
.tile.blue { color: #087ee5; }
.tile.black { color: #101615; }
.tile.yellow { color: #f19a00; }
.tile.false { color: #a638d1; }
.tile.selected {
  border-color: #ffd65a;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .85), 0 0 0 2px rgba(255, 214, 90, .4), 0 4px 8px rgba(0, 0, 0, .2);
}