.mino {
  --color: hsl(var(--hue), var(--saturation), 40%);
  --light: hsl(var(--hue), calc(0.66 * var(--saturation)), 84%);
  background-color: var(--color);
  background-image:
    radial-gradient(
      ellipse 22% 8% at 25% 22%,
      #ffffff66,
      #ffffff33 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 140% 85% at 50% -15%,
      var(--light) 0%,
      #ffffff77 40%,
      #00000005 55%
    ),
    radial-gradient(
      ellipse 120% 220% at 50% 140%,
      var(--light) 0%,
      var(--color) 55%,
      #00000066 95%
    );
  border: 4px ridge var(--color);
  border-top-color: var(--light);
  border-radius: 3px;
  box-shadow:
    inset 2px 0 4px rgba(0,0,0,.06),
    inset -2px 0 4px rgba(0,0,0,.12);
  filter: saturate(1.1) contrast(1.05);
}

.I {
  --hue: 193;
  --saturation: 100%;
}

.J {
  --hue: 215;
  --saturation: 100%;
}

.L {
  --hue: 25;
  --saturation: 100%;
}

.O {
  --hue: 42;
  --saturation: 100%;
}

.S {
  --hue: 95;
  --saturation: 100%;
}

.T {
  --hue: 300;
  --saturation: 56%;
}

.Z {
  --hue: 357;
  --saturation: 84%;
}

.ghost {
  border: 3px solid #fff2;
  padding: 2px;
  background-color: #fff2;
  background-clip: content-box;
  background-image: none;
}