.CodeTile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 126px;
  background: url("../img/letter-tile.svg") center / 100% 100% no-repeat;
  color: #fff;
  cursor: pointer;
  transition: transform .2s ease, filter .25s ease;
}

.CodeTile-letter {
  font-size: 92px;
  line-height: 1;
  transform: translateY(2px);
}

.CodeTile--filled .CodeTile-letter {
  animation: CodeTilePop .28s cubic-bezier(.3, 1.8, .5, 1);
}

@keyframes CodeTilePop {
  from { transform: translateY(2px) scale(.3); opacity: 0; }
  to   { transform: translateY(2px) scale(1); opacity: 1; }
}

/* Blinking caret on the tile being typed */
.CodeTile--current::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 34px;
  left: 50%;
  width: 7px;
  margin-left: -3px;
  border-radius: 3px;
  background: #fff;
  animation: CodeTileCaret 1s steps(1) infinite;
}

@keyframes CodeTileCaret {
  50% { opacity: 0; }
}

.CodeTile--current {
  transform: scale(1.06);
}

.CodeTile--pressed {
  transform: scale(.92);
  transition-duration: .08s;
}

.CodeTile--error {
  filter: brightness(.55) saturate(.6);
}

.CodeTile--success {
  animation: CodeTileSuccess .6s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes CodeTileSuccess {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-34px) scale(1.1); filter: brightness(1.25); }
  100% { transform: translateY(0) scale(1); }
}

/* Typographic apostrophe between two tiles (not typed) */
.CodeTile-mark {
  position: absolute;
  top: -40px;
  right: -21px;
  width: 30px;
  font-size: 92px;
  line-height: 1;
  text-align: center;
  color: var(--color-ink);
  pointer-events: none;
}