/* Base container (kept) */
.q-mark-container {
  /* visual frame */
  background-color: #d6c7a3;
  border: inset 3px #c3b797;
  border-radius: 50px;

  /* size / spacing */
  width: 32px;
  height: 32px;
  margin: 0 4px;
  padding: 0;

  /* center the <span> both ways */
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* optional typography */
  font-weight: 700;
  text-align: center;
}

/* Gold variant */
.q-mark-container.gold {
  background-color: #f2cb4d;  /* darker */
  border: inset 3px #ffe169;  /* lighter */
}

/* Silver variant */
.q-mark-container.silver {
  background-color: #cfcfcf;  /* darker */
  border: inset 3px #b8b8b8;  /* lighter */
}

/* Bronze variant */
.q-mark-container.bronze {
  background-color: #9b6621;  /* darker */
  border: inset 3px #bb802e;  /* lighter */
}