/* ───────── 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: 20px;
  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: 1px;
  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;
}

#play-background {
  position: relative;
  width: 375px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#word-button-container {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;

  background-color: #c3b797;
  border: inset 5px #ada387;
  text-align: left;
}

/* ───────── Tease sweep (left→right, row by row) ───────── */
@keyframes qvii-tease {
  0%   { transform: translateY(0); filter: brightness(1); box-shadow: none; }
  6%   { transform: translateY(-1px) scale(1.10); filter: brightness(1.35); box-shadow: 0 0 6px rgba(255,255,255,0.6); }
  12%  { transform: translateY(0);   filter: brightness(1.1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  100% { transform: translateY(0);   filter: brightness(1); }
}

/* Tease all buttons when wrapper has .tease-on */
.w-button-container.tease-on button {
  --tease-cycle: 14s; /* reduced from 40s to cut idle time */
  animation-name: qvii-tease;
  animation-duration: var(--tease-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* Stagger start by index */
  animation-delay: calc(var(--i) * 600ms);
  animation-fill-mode: both;
}


/* Don’t animate already-clicked buttons */
.word-clicked { animation: none !important; }

/* Optional: pause the marquee while user hovers the tray */
.w-button-container:hover .word-button-monday,
.w-button-container:hover .word-button-tuesday,
.w-button-container:hover .word-button-wednesday,
.w-button-container:hover .word-button-thursday,
.w-button-container:hover .word-button-friday,
.w-button-container:hover .word-button-saturday,
.w-button-container:hover .word-button-sunday {
  animation-play-state: paused;
}

/* Force word buttons to stay white */
.word-button-monday,
.word-button-tuesday,
.word-button-wednesday,
.word-button-thursday,
.word-button-friday,
.word-button-saturday,
.word-button-sunday {
  color: #ffffff !important;
}

/* Keep clicked buttons white too */
.word-button-monday.word-clicked,
.word-button-tuesday.word-clicked,
.word-button-wednesday.word-clicked,
.word-button-thursday.word-clicked,
.word-button-friday.word-clicked,
.word-button-saturday.word-clicked,
.word-button-sunday.word-clicked {
  color: #ffffff !important;
}

/* Ensure icons don't block clicks - pass through to button */
.word-button-monday i,
.word-button-monday svg,
.word-button-tuesday i,
.word-button-tuesday svg,
.word-button-wednesday i,
.word-button-wednesday svg,
.word-button-thursday i,
.word-button-thursday svg,
.word-button-friday i,
.word-button-friday svg,
.word-button-saturday i,
.word-button-saturday svg,
.word-button-sunday i,
.word-button-sunday svg {
  pointer-events: none;
}