/* letter-backdrop.css
   Per-letter “tile” styling used outside of the initials plate.
   Sizing is tunable via CSS vars and won’t conflict with the plate.
*/

/* ---------- Size + spacing knobs ---------- */
:root {
  --tile-w: 20px;   /* width  */
  --tile-h: 22px;   /* height */
  --tile-r: 7px;    /* radius */
}

/* ------------- Tile appearance ------------- */
.letter-backdrop {
  background-color: #d6c7a3;          /* warm parchment */
  border: inset 3px #c3b797;          /* soft inset rim */
  border-radius: var(--tile-r);
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  margin: 0 0px;                      /* keep tight; parent controls gaps */
  box-sizing: border-box;
}

/* -------- Hidden vs. revealed states ------- */
.hidden-letter {
  color: transparent;                 /* keeps layout, hides glyph */
  text-shadow: none;
  position: relative;
  user-select: none;
}

.hidden-letter::before {
  /* Optional placeholder (underscore, middle dot, etc.) */
  content: var(--placeholder, "");    /* set via inline style if desired */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-weight: 700;
}

.revealed-letter {
  color: #222;                        /* tweak if your theme needs darker */
}