.tf-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tf-zone {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 100ms ease, filter 150ms ease, opacity 150ms ease;
}

.tf-zone--true { background: var(--surface-mauve-bg); }
.tf-zone--false { background: var(--surface-red-bg); }

.tf-zone--selected {
  color: #fff;
  filter: brightness(1.15);
}

.tf-view.has-selection .tf-zone:not(.tf-zone--selected) {
  opacity: 0.4;
  filter: brightness(0.4) saturate(0.5);
}

.tf-zone:active { transform: scale(0.98); }