+
+ &.hp10 {
+ color: #000;
+ background-color: @tile-color;
+ box-shadow: 3px 3px 2px #aaa;
+ }
+ &.hp9 {
+ color: lighten(#000, 4%);
+ background-color: lighten(desaturate(@tile-color, 10%), 1%);
+ box-shadow: 3px 3px 1.9px #aaa;
+ }
+ &.hp8 {
+ color: lighten(#000, 8%);
+ background-color: lighten(desaturate(@tile-color, 20%), 2%);
+ box-shadow: 2px 2px 1.8px #aaa;
+ }
+ &.hp7 {
+ color: lighten(#000, 12%);
+ background-color: lighten(desaturate(@tile-color, 30%), 3%);
+ box-shadow: 2px 2px 1.7px #aaa;
+ }
+ &.hp6 {
+ color: lighten(#000, 16%);
+ background-color: lighten(desaturate(@tile-color, 40%), 4%);
+ box-shadow: 2px 2px 1.6px #aaa;
+ }
+ &.hp5 {
+ color: lighten(#000, 20%);
+ background-color: lighten(desaturate(@tile-color, 50%), 5%);
+ box-shadow: 2px 2px 1.5px #bbb;
+ }
+ &.hp4 {
+ color: lighten(#000, 24%);
+ background-color: lighten(desaturate(@tile-color, 60%), 6%);
+ box-shadow: 2px 2px 1.4px #bbb;
+ }
+ &.hp3 {
+ color: lighten(#000, 28%);
+ background-color: lighten(desaturate(@tile-color, 70%), 7%);
+ box-shadow: 2px 2px 1.3px #ccc;
+ }
+ &.hp2 {
+ color: lighten(#000, 32%);
+ background-color: lighten(desaturate(@tile-color, 80%), 8%);
+ box-shadow: 1px 1px 1.1px #ddd;
+ }
+ &.hp1 {
+ color: lighten(#000, 36%);
+ background-color: spin(lighten(saturate(@tile-color, 30%), 5%), 100);
+ box-shadow: 1px 1px 1px #ddd;
+ }
+ &.hp0 {
+ cursor: default;
+ color: lighten(desaturate(@tile-color, 100%), 10%);
+ background-color: lighten(desaturate(@tile-color, 100%), 10%);
+ box-shadow: inset 1px 1px 1px #aaa;
+ }
+
+ &.selected, &.selected_word {
+ background-color: @selected-color;
+ box-shadow: inset 1px 1px 5px #444;
+ }
+ &.selected_word {
+ background-color: @selected-good-color;
+ }