.mem-grid {
  display: grid; gap: 8px; margin: 0 auto; width: max-content; max-width: 100%;
}
.mem-cell {
  width: 60px; height: 60px; min-width: 60px; min-height: 60px;
  border: 2px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--grape), #7d4ff0);
  color: #fff; font-size: 30px; font-weight: 900;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
  user-select: none;
}
.mem-cell:active { transform: scale(.94); }
.mem-cell.revealed { background: #fff; box-shadow: inset 0 0 0 2px var(--grape); }
.mem-cell.matched { background: var(--mint); color: #fff; box-shadow: inset 0 0 0 2px #fff; cursor: default; }
.mem-cell .q { opacity: .85; }
@media (max-width: 380px) {
  .mem-cell { width: 48px; height: 48px; min-width: 48px; min-height: 48px; font-size: 24px; }
}