.abcd-view {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3px;
}

.abcd-cell {
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.5rem, 9vw, 6rem);
  font-weight: 800;
  transition: transform 100ms ease, filter 150ms ease;
}

.abcd-cell--0 { background: var(--surface-navy-bg); color: var(--surface-navy-fg); }
.abcd-cell--1 { background: var(--surface-gold-bg); color: var(--surface-gold-fg); }
.abcd-cell--2 { background: var(--surface-mauve-bg); color: var(--surface-mauve-fg); }
.abcd-cell--3 { background: var(--surface-tan-bg); color: var(--surface-tan-fg); }

.abcd-cell span {
  opacity: 0.85;
  transition: opacity 150ms ease, transform 150ms ease;
  display: inline-block;
}

.abcd-view.has-reveal .abcd-cell:not(.abcd-cell--revealed) {
  filter: brightness(0.4) saturate(0.5);
}

.abcd-view.has-reveal .abcd-cell:not(.abcd-cell--revealed) span {
  opacity: 0.3;
}

.abcd-cell--revealed span {
  opacity: 1;
  transform: scale(1.15);
}

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