/* Exercise Timer Styles */
.exercise-timer {
  font-size: 3.5em;
  font-weight: bold;
  text-align: center;
  margin: 1.5em 0;
  padding: 0.8em;
  background: rgba(240, 240, 240, 0.6);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}

.exercise-timer:hover {
  background: rgba(220, 220, 255, 0.8);
  transform: scale(1.02);
}

.timer-display {
  color: inherit;
}

.timer-hint {
  font-size: 0.45em;
  color: #555;
  margin-top: 0.4em;
  font-weight: normal;
}

/* Optional: make it look paused initially */
.exercise-timer:not(.running) .timer-display {
  color: #888;
}

/* Blink Overlay */
.blink-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  pointer-events: none;          /* clicks pass through */
  z-index: 9999;                 /* above everything */
  opacity: 0;
  transition: opacity 0.12s ease; /* smooth but fast */
  will-change: opacity;          /* performance */
}

/* Active states */
.blink-overlay.on-yellow  { background-color: rgba(255, 250, 205, 0.75); opacity: 1; } /* #fffacd */
.blink-overlay.on-red     { background-color: rgba(255, 204, 203, 0.75); opacity: 1; } /* #ffcccb */
.blink-overlay.on-white   { background-color: rgba(255, 255, 255, 0.75); opacity: 1; }
.blink-overlay.on-final   { background-color: rgba(255, 204, 204, 0.75); opacity: 1; }