.timer-container {
  position: relative;
  display: inline-block;
}

.effects-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#timer-box {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.particles-wrapper .particle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: var(--size, 10px);
  height: var(--size, 10px);
  opacity: 0;
}

.star-particle {
  position: absolute;
  width: var(--size, 100px);
  height: var(--size, 100px);
  background: rgba(255, 255, 255, 0.6);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 0;
}

#status-finished {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  font-size: 22px;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  color: #ffcc00;
  text-shadow: 0 0 8px #ff6600, 0 0 16px #ff3300;
}

#timer-box.finished {
  animation: shrink 2s cubic-bezier(0.65, 0.05, 0.36, 1) forwards,
             blink-red 0.8s step-start 3;
}

#timer-box.finished ~ .effects-overlay .star-rotate-container {
  animation: initial-rotate 1s ease-out forwards;
}

#timer-box.finished ~ .effects-overlay .star-rotate-container .star-particle {
  animation:
    star-expand 1s cubic-bezier(0.67, 0.01, 0.36, 1.53) forwards,
    star-rotate 5s linear 1s infinite;
}

#timer-box.finished ~ .effects-overlay .particles-wrapper .particle {
  animation: explode var(--duration, 1s) ease-out forwards;
  animation-delay: 1.3s;
}

#timer-box.finished ~ .effects-overlay #status-finished {
  animation: finished-anim 1.5s cubic-bezier(0.85, 0, 0.83, 1.28) forwards;
}

#timer-box.late {
  animation: blink-red 0.8s step-start 3;
}

@keyframes shrink {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes initial-rotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(144deg); }
}

@keyframes star-expand {
  0% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

@keyframes star-rotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes explode {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  80%  { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.8); opacity: 0; }
}

@keyframes finished-anim {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
}

@keyframes blink-red {
  0%, 100% { background-color: #F08C50; }
  50% { background-color: #ff0000; }
}