/* ───────── Utility ───────── */
.word-button-greyed {
  opacity: 0.4;
  pointer-events: none;   /* prevents double-clicks */
}

/* ───────── Shared geometry / typography ───────── */
.word-button-monday,
.word-button-tuesday,
.word-button-wednesday,
.word-button-thursday,
.word-button-friday,
.word-button-saturday,
.word-button-sunday {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  border-radius: 10px;
  border-width: 2px;
  border-style: outset;   /* flips to inset when pressed */
  cursor: pointer;
  white-space: nowrap;
  margin: 2px;
  transition: transform 0.05s, border 0.05s;
}

/* pressed flag (added by Python) */
.word-clicked {
  transform: translateY(2px);   /* visual dip */
  cursor: default;
  border-style: inset !important;
}

/* ─────────────────  WEEKDAY COLOURS  ───────────────── */

/* Monday */
.word-button-monday            { background: #b9ab73; border-color: #978c63; }
.word-button-monday.word-clicked {
  background: #6e704f;           /* was border colour */
  border-color: #b9ab73;         /* was fill colour   */
}

/* Tuesday */
.word-button-tuesday           { background: #b089ab; border-color: #8e6d89; }
.word-button-tuesday.word-clicked {
  background: #734e6c;
  border-color: #b089ab;
}

/* Wednesday */
.word-button-wednesday         { background: #cc9970; border-color: #a97e5c; }
.word-button-wednesday.word-clicked {
  background: #8c6749;
  border-color: #cc9970;
}

/* Thursday */
.word-button-thursday          { background: #839ca9; border-color: #6d838e; }
.word-button-thursday.word-clicked {
  background: #5d727c;
  border-color: #839ca9;
}

/* Friday */
.word-button-friday            { background: #937b6a; border-color: #ada387; }
.word-button-friday.word-clicked {
  background: #786756;
  border-color: #937b6a;
}

/* Saturday */
.word-button-saturday          { background: #c87e7e; border-color: #a05e5e; }
.word-button-saturday.word-clicked {
  background: #8c4a4a;
  border-color: #c87e7e;
}

/* Sunday */
.word-button-sunday            { background: #87a985; border-color: #6f8b6e; }
.word-button-sunday.word-clicked {
  background: #5e7a5c;
  border-color: #87a985;
}

/* ───────── Container behind the buttons ───────── */
.w-button-container {
  background-color: #dbcfb1;
  border: inset 5px #d6c7a3;
  margin: 4px;
  text-align: left;
}