* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; }
html, body { height: 100%; }
body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #24467a 0%, #0F1B2D 55%, #060a12 100%);
  background-size: 200% 200%;
  animation: bgshift 10s ease-in-out infinite;
  position: relative; overflow: hidden;
}
@keyframes bgshift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.dots { position: absolute; inset: 0; opacity: 0.10;
  background-image: radial-gradient(circle, #ffffff 2px, transparent 2px);
  background-size: 44px 44px; }

.ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(82vw, 820px); height: min(82vw, 820px); border-radius: 50%;
  border: 3px dashed rgba(253, 202, 65, 0.35);
  animation: spin 40s linear infinite, pulse-ring 3.5s ease-in-out infinite;
}
.ring2 {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(66vw, 660px); height: min(66vw, 660px); border-radius: 50%;
  border: 2px solid rgba(61, 123, 220, 0.4);
  animation: spin-rev 55s linear infinite;
}
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-rev { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes pulse-ring {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

.content { position: relative; width: 92%; max-width: 940px; text-align: center; padding: 24px;
  animation: riseIn 1.1s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes riseIn {
  0% { opacity: 0; transform: translateY(40px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.label-top { font-size: clamp(16px, 2.6vw, 30px); letter-spacing: 8px; font-weight: 800; color: #FDCA41;
  text-transform: uppercase; margin-bottom: 26px;
  text-shadow: 0 0 24px rgba(253, 202, 65, 0.65);
  animation: flicker 4s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { text-shadow: 0 0 24px rgba(253, 202, 65, 0.65); }
  50% { text-shadow: 0 0 40px rgba(253, 202, 65, 1); }
}

.timer { display: flex; justify-content: center; gap: clamp(14px, 4vw, 40px); flex-wrap: wrap; }
.unit-block { min-width: 120px; }
.number { font-size: clamp(60px, 12vw, 150px); font-weight: 900; color: #ffffff; line-height: 1;
  text-shadow: 0 0 50px rgba(61, 123, 220, 0.85), 0 0 100px rgba(239, 72, 61, 0.35);
  font-variant-numeric: tabular-nums;
  animation: glow-pulse 2.2s ease-in-out infinite; }
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 50px rgba(61, 123, 220, 0.85), 0 0 100px rgba(239, 72, 61, 0.35); }
  50% { text-shadow: 0 0 80px rgba(61, 123, 220, 1), 0 0 140px rgba(239, 72, 61, 0.6); }
}
.unit { font-size: clamp(13px, 1.8vw, 20px); font-weight: 800; color: #ffffff; letter-spacing: 5px;
  text-transform: uppercase; opacity: 0.8; margin-top: 6px; }

.divider { width: 160px; height: 5px; background: linear-gradient(90deg, #3027E2, #FDCA41, #EF483D);
  background-size: 200% 100%; animation: shimmer 2.5s linear infinite;
  margin: 44px auto 44px auto; border-radius: 3px;
  box-shadow: 0 0 20px rgba(253, 202, 65, 0.6); }
@keyframes shimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

.teaser { font-size: clamp(24px, 3.6vw, 42px); font-weight: 700; color: #ffffff; line-height: 1.4; }
.teaser .accent { color: #FDCA41; text-shadow: 0 0 30px rgba(253, 202, 65, 0.7); }

.sub { margin-top: 32px; font-size: clamp(15px, 2vw, 24px); color: rgba(255,255,255,0.6); font-style: italic;
  letter-spacing: 1px; }

.done .timer { display: none; }