/* ------------- Appearance of every answer “tile” ------------- */
.letter-backdrop {
  /* visual style (unchanged) */
  background-color: #d6c7a3;
  border: inset 3px #c3b797;
  margin: 0 0px;
  border-radius: 7px;
  font-weight: 700;

  /* --- NEW: fixed size & centering --- */
  width: 20px;          /* pick a value that fits your font */
  height: 22px;         /* same as width → square tile */
  display: inline-flex;  /* flexbox lets us center the span easily */
  justify-content: center;
  align-items: center;

  /* optional: tighter or looser padding if you want space inside */
  padding: 0px;
}

  /* -------- Hidden vs. revealed states (unchanged logic) ------- */
  .hidden-letter {
    color: transparent;
    position: relative;
    user-select: none;
  }
  
  .hidden-letter::before {
    content: "";                     /* underscore placeholder */
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--placeholder, #555);
    font-weight: 700;
  }
  
  .revealed-letter {
    color: #222;                      /* or whatever fits your theme */
  }