.aa-cell {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
.aa-cell:active {
  transform: scale(0.96);
}

.aa-cell,
.aa-letter {
  user-select: none;
  -webkit-user-select: none;
}

.aa-letter {
  position: relative;
  z-index: 3;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.aa-cell.selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--paper));
}
.aa-cell.is-start,
.aa-cell.is-end {
  background: color-mix(in srgb, var(--accent) 24%, var(--paper));
}

.aa-cell::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 999px;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}

.aa-cell.selected::after {
  background: color-mix(in srgb, var(--accent) 45%, var(--paper));
}

.aa-cell.is-end::after {
  inset: 18%;
  background: color-mix(in srgb, var(--accent) 58%, var(--paper));
}

.aa-link {
  position: absolute;
  display: none;
  background: color-mix(in srgb, var(--accent) 45%, var(--paper));
  z-index: 1;
  pointer-events: none;
}

.aa-cell.link-up .aa-link-up,
.aa-cell.link-right .aa-link-right,
.aa-cell.link-down .aa-link-down,
.aa-cell.link-left .aa-link-left {
  display: block;
}

.aa-link-up,
.aa-link-down {
  left: 38%;
  width: 24%;
  height: 50%;
}

.aa-link-left,
.aa-link-right {
  top: 38%;
  width: 50%;
  height: 24%;
}

.aa-link-up {
  top: 0;
}

.aa-link-right {
  right: 0;
}

.aa-link-down {
  bottom: 0;
}

.aa-link-left {
  left: 0;
}

.aa-cell:active {
  transform: scale(0.97);
}