html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: white;
  background: #000;
  font-family: "Segoe UI", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 1s ease;
  overflow: hidden;
}

/* === Layout === */
.container {
  text-align: center;
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
}

.blinds {
  font-size: clamp(2.4rem, 7vw, 6rem);
  font-weight: 800;
  text-align: center;
  color: #6ef598; /* mint green */
}

.countdown {
  font-size: clamp(5rem, 20vw, 25rem);
  font-weight: 900;
  letter-spacing: 3px;
  color: #6ef598; /* mint green */
  margin: 0.2em 0;
  line-height: 1;
  user-select: none;
  transition: color 0.3s ease;
}


.small {
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  opacity: 0.6;
  text-align: center;
}

/* === Sound gate overlay === */
.sound-gate {
  position: fixed;
  inset: 0;
  background: #000c;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2em;
  z-index: 1000;
  cursor: pointer;
}

.sound-gate .sound-subtext {
  font-size: 0.5em;
  margin-top: 0.5em;
}

/* ===== Next Blind Display ===== */
.next-blinds {
  font-size: clamp(1rem, 2vw, 1.8rem);
  color: #aaa;
  text-align: center;
  margin-top: 0.3em;
  opacity: 0.8;
}


/* === Visual effects === */
@keyframes pulseRed {
  0%   { background-color: #300; }
  50%  { background-color: #a00; }
  100% { background-color: #300; }
}
.pulse-red { animation: pulseRed 1s infinite; }

.break-bg { background-color: #003f1e; transition: background-color 0.8s ease; }


/* ===== Next Break Display ===== */
.next-break {
  font-size: clamp(0.9rem, 1.8vw, 1.4rem);
  color: #bbb;
  text-align: center;
  margin-top: 0.2em;
  opacity: 0.7;
}

.title {
  text-align: center;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 600;
  margin-bottom: 0.4em;
  color: white;
  opacity: 0.85;
  letter-spacing: 0.03em;
}

/* === TIME!! overlay === */
.time-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease forwards;
}

.time-inner {
  text-align: center;
  width: 80%;
  max-width: 600px;
}

.time-title {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  color: #ff6600;
  margin-bottom: 1rem;
}

.time-progress {
  height: 28px;
  background: #222;
  border-radius: 14px;
  overflow: hidden;
}

.time-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff0000, #ff6600);
  transform-origin: left center;
  transition: width 0.2s linear;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* smooth hiding of title & bar */
.time-title,
.time-progress {
  transition: opacity 0.5s ease;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.time-done {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 800;
  color: #6ef598;
  margin-top: 0.8rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.time-done.visible {
  opacity: 1;
}


@keyframes pulseDone {
  from { opacity: 0.8; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.08); }
}

/* === Pause Overlay === */
.pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease forwards;
}

.pause-inner {
  text-align: center;
}

.pause-title {
  font-size: clamp(4rem, 12vw, 8rem);
  color: #ffb347; /* warm amber/orange */
  font-weight: 900;
  text-shadow: 0 0 15px #000, 0 0 25px #ff8c00;
  user-select: none;
  animation: pulsePause 1.5s infinite ease-in-out;
}

@keyframes pulsePause {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}


/* === Donkey Images (decorative background) === */
.donk {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 15vw;                /* 15% of viewport width */
  opacity: 0.2;               /* subtle */
  pointer-events: none;       /* don’t block clicks */
  user-select: none;
  z-index: 0;                 /* ensure behind text */
  filter: brightness(0.9);    /* optional softening */
}

.donk-left {
  left: 1vw;
}

.donk-right {
  right: 1vw;
  transform: translateY(-50%) scaleX(-1);
}