/* Bright, individually assigned puzzle pieces inspired by rounded toy blocks. */
.piece[data-colour] .piece-cell {
  border: 1px solid var(--piece-light);
  border-radius: 5px;
  background: linear-gradient(145deg, var(--piece-light) 0%, var(--piece-color) 38%, var(--piece-color) 68%, var(--piece-dark) 100%);
  box-shadow: inset 0 2px 3px #fff8, inset 0 -3px 4px #0004, 0 2px 5px #0009;
}

.piece[data-colour] .piece-cell::after {
  inset: 2px 4px auto;
  height: 28%;
  border: 0;
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(180deg, #fff9, transparent);
  opacity: .72;
}

.piece[data-colour] .piece-cell i {
  color: #071318;
  font-weight: 800;
  text-shadow: 0 1px #fff7;
}

.piece.is-selected[data-colour] .piece-cell {
  border-color: #fff;
  box-shadow: inset 0 2px 3px #fffb, inset 0 -3px 4px #0004, 0 0 0 2px #fff0a0, 0 4px 9px #000b;
}

.drag-preview[data-colour] span {
  border-style: solid;
  border-color: var(--piece-light);
  background: linear-gradient(145deg, var(--piece-light), var(--piece-color) 48%, var(--piece-dark));
  box-shadow: inset 0 2px 3px #fff7, 0 0 8px var(--piece-color);
}

.drag-preview.is-invalid[data-colour] span {
  border-color: #ff8b82;
  background: #8f263bcc;
}