/* ───────── Row layout (keeps spacing/centering) ───────── */
.guess-keys-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;                 /* space between keys */
  margin-top: 5px;

  /* knobs */
  --tile-size: 64px;
  --tile-radius: 8px;
}

/* Subrows of the guess keys (centers horizontally) */
.guess-keys-subrow {
  display: flex;
  justify-content: center;
  gap: 24px;
}


/* ───────── Base geometry / typography (matches word-button contract) ───────── */
.guess-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--tile-size);
  height: var(--tile-size);

  color: #ffffff;
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.48);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);

  border-radius: var(--tile-radius);
  border-width: 5px;
  border-style: outset;      /* flips to inset when pressed */
  cursor: pointer;
  user-select: none;

  /* match word buttons spacing + animation timings */
  margin: 2px;
  transition: transform 0.05s, border 0.05s;
}

/* click press dip (same idea as .word-clicked) */
.guess-key:active {
  transform: translateY(2px);
  border-style: inset !important;
}

/* Blank placeholders keep slot but don’t show/receive input */
.guess-key.blank {
  visibility: hidden;
  pointer-events: none;
}

/* ───────────────── WEEKDAY COLOURS (1:1 with word buttons) ───────────────── */

/* Monday */
.guess-key-monday           { background: #b9ab73; border-color: #978c63; }
.guess-key-monday:active    { background: #6e704f; border-color: #b9ab73; }

/* Tuesday */
.guess-key-tuesday          { background: #b089ab; border-color: #8e6d89; }
.guess-key-tuesday:active   { background: #734e6c; border-color: #b089ab; }

/* Wednesday */
.guess-key-wednesday        { background: #cc9970; border-color: #a97e5c; }
.guess-key-wednesday:active { background: #8c6749; border-color: #cc9970; }

/* Thursday */
.guess-key-thursday         { background: #839ca9; border-color: #6d838e; }
.guess-key-thursday:active  { background: #5d727c; border-color: #839ca9; }

/* Friday */
.guess-key-friday           { background: #937b6a; border-color: #ada387; }
.guess-key-friday:active    { background: #786756; border-color: #937b6a; }

/* Saturday */
.guess-key-saturday         { background: #c87e7e; border-color: #a05e5e; }
.guess-key-saturday:active  { background: #8c4a4a; border-color: #c87e7e; }

/* Sunday */
.guess-key-sunday           { background: #87a985; border-color: #6f8b6e; }
.guess-key-sunday:active    { background: #5e7a5c; border-color: #87a985; }