/* ===============================
   ⏱️ COSMIC TIMER
   =============================== */

.timer-wrap{
  position:relative;
  width:56px;
  height:56px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  filter:drop-shadow(0 0 12px rgba(120,180,255,.6));
}

/* ===============================
   ⭕ TIMER RING
   =============================== */

.timer-ring{
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
}

.timer-ring circle{
  fill:none;
  stroke:#4dd6ff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:138;
  stroke-dashoffset:0;

  filter:
    drop-shadow(0 0 8px rgba(77,214,255,.8));
}

/* ===============================
   🔢 TIMER NUMBER
   =============================== */

#timer{
  position:absolute;
  font-size:.9rem;
  font-weight:600;
  color:#d8f3ff;
  z-index:3;

  text-shadow:
    0 0 10px rgba(120,180,255,.9),
    0 0 20px rgba(120,180,255,.6);
}

/* ===============================
   🕒 COSMIC CLOCK HAND
   =============================== */

.clock-hand{
  position:absolute;
  width:2px;
  height:22px;

  background:
    linear-gradient(
      to top,
      transparent,
      #9fe3ff
    );

  top:50%;
  left:50%;

  transform-origin:bottom center;
  transform:translate(-50%,-100%) rotate(0deg);

  border-radius:2px;

  box-shadow:
    0 0 12px rgba(120,200,255,.9);

  z-index:2;
}

/* ===============================
   ⚠️ DANGER MODE (LAST 5s)
   =============================== */

.timer-wrap.danger{
  animation:dangerPulse .8s infinite;
}

.timer-wrap.danger .timer-ring circle{
  stroke:#ff4d4d;
  filter:drop-shadow(0 0 10px rgba(255,80,80,.9));
}

.timer-wrap.danger #timer{
  color:#ffb3b3;
}

.timer-wrap.danger .clock-hand{
  background:
    linear-gradient(to top, transparent, #ff8a8a);
}

/* ===============================
   💥 TIME-UP BURST
   =============================== */

.timeup-burst{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,120,120,.45),
      transparent 65%
    );

  opacity:0;
  transform:scale(.7);
  pointer-events:none;
}

.timeup-burst.active{
  animation:burst .6s ease-out;
}

/* ===============================
   🎞️ ANIMATIONS
   =============================== */

@keyframes dangerPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@keyframes burst{
  from{
    opacity:1;
    transform:scale(.6);
  }
  to{
    opacity:0;
    transform:scale(1.6);
  }
}