:root {
  --appBackground: 0, 0%, calc(100% - 98%);
  --appBackgroundStrong: 0, 0%, calc(100% - 96%);
  --appBackgroundStronger: 0, 0%, calc(100% - 94%);
  --appBackgroundStrongest: 0, 0%, calc(100% - 90%);
  --appBackgroundWeak: 0, 0%, calc(100% - 89%);
  --appBackgroundWeakest: 0, 0%, calc(100% - 80%);
  --appForeground: 0, 0%, calc(100% - 27%);
  --appForegroundStrong: 0, 0%, calc(100% - 10%);
  --appForegroundStrongest: 0, 0%, calc(100% - 0%);
  --appForegroundWeak: 0, 0%, calc(100% - 39%);
  --patternHSL: 0, 0%, 0%;
  --patternOpacity: 1;

  --rankLum: 67%;

}

piece gild {
  mix-blend-mode: var(--darkBlendMode);
  opacity: var(--darkPatternOpacity);
}

mode.selected piece,
piece.selected {
  box-shadow: inset 0px 0px 4px hsla(var(--appForeground), 0.7);
  background: hsl(var(--appBackgroundStrong));
}

me piece {
  box-shadow: inset 0px 5px 5px hsla(var(--appForeground), 0.5);
  background: hsl(var(--appBackgroundStrong));
}

me.pushed piece,
me piece:focus,
me piece:active {
  box-shadow: inset 0px 2px 2px hsla(var(--appForeground), 0.7);
  background: hsl(var(--appBackgroundStrong));
}

description,
labelsmall {
  color: var(--color3);
}

page button.primary, button.primary, a.button.primary {
  background-color: var(--color2);
  border-color: var(--color2);
}

button.secondary, a.button.secondary {
  background-color: var(--color1);
  border-color: var(--color1);
}

page button, page a.button {
  background-color: hsla(var(--appForeground), .4);
}


page button.on {
  background-color: hsla(var(--appForeground), .7);
}

time {
  color: var(--color3);
}

.quaternary icon {
  background-color: var(--color3);
}

rank {
  text-shadow: 0px 0px 10px black;
}

ranks rank.locked {
  background-color: hsla(0, 80%, var(--rankLum), .6);
}

ranks rank.locked name {
  color: hsla(var(--appForeground), 1)
}

page ranklabel {
  color: hsla(var(--appForegroundStrongest), .8);
  background: hsla(var(--appBackground), .4);
}

page ranklabel icon {
  background: hsla(var(--appForegroundStrongest), .8);
}

reward cost {
  background: hsl(var(--appBackground));
  color: hsl(var(--appFont));
}