/* Flip Clock Animation Styles */

.flip-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.flip-card {
  position: relative;
  display: inline-block;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.flip-card-digit {
  display: block;
}

/* Whisper-soft transition - almost invisible */
.flip-card.flipping .flip-card-digit {
  animation: smoothTransition 0.2s ease-in-out;
}

@keyframes smoothTransition {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
  100% {
    opacity: 1;
  }
}

/* Timer text sizing - Mobile first approach */
.timer-text {
  /* Default mobile portrait sizing - conservative to prevent clipping */
  font-size: clamp(2.5rem, 11vw, 5.5rem);
}

/* Smaller font when showing minutes:seconds (under 1 minute) */
.timer-display.showing-seconds .timer-text {
  font-size: clamp(2rem, 8vw, 4.5rem) !important;
}

/* Even smaller on portrait mobile to prevent clipping */
@media (orientation: portrait) and (max-width: 640px) {
  .timer-text {
    font-size: clamp(2rem, 9vw, 4.5rem) !important;
  }

  .timer-display.showing-seconds .timer-text {
    font-size: clamp(1.5rem, 7vw, 3.5rem) !important;
  }
}

/* Small mobile landscape (phones in landscape) */
@media (orientation: landscape) and (max-height: 500px) {
  .timer-text {
    font-size: clamp(3rem, 12vh, 6rem);
  }

  .flip-clock {
    gap: clamp(0.25rem, 1vw, 1rem);
  }
}

/* Medium landscape (tablets in landscape) */
@media (orientation: landscape) and (min-height: 500px) and (max-height: 800px) {
  .timer-text {
    font-size: clamp(4rem, 15vh, 10rem);
  }
}

/* Small tablets and larger phones in portrait */
@media screen and (min-width: 640px) {
  .timer-text {
    font-size: clamp(6rem, 20vw, 12rem);
  }
}

/* Desktop and larger tablets */
@media screen and (min-width: 768px) {
  .timer-text {
    font-size: clamp(8rem, 22vw, 16rem);
  }
}

/* Large desktop displays */
@media screen and (min-width: 1024px) {
  .timer-text {
    font-size: clamp(10rem, 20vw, 20rem);
  }
}

/* Extra large displays (TV screens) */
@media screen and (min-width: 1536px) {
  .timer-text {
    font-size: clamp(12rem, 18vw, 24rem);
  }
}