.countdown-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  box-sizing:border-box;
  z-index:100;
  opacity:0;
  visibility:hidden;
  animation:countdown-fade 2s ease 2s forwards
}
@keyframes countdown-fade{
  from{opacity:0;visibility:visible}
  to{opacity:1;visibility:visible}
}

.countdown-units{
  display:grid;
  grid-template-columns:repeat(4,auto);
  gap:clamp(12px,3vw,48px)
}
.countdown-unit{
  display:flex;flex-direction:column;align-items:center;
  color:#fff;
  font-family:var(--heading, sans-serif)
}

.countdown-ring{
  position:relative;
  width:clamp(72px,17vw,220px);
  aspect-ratio:1
}
.countdown-ring svg{
  display:block;
  width:100%;height:100%;
  transform:rotate(-90deg)
}
.countdown-ring circle{fill:none;stroke:#fff}
.countdown-track{stroke-width:1}
.countdown-arc{
  stroke-width:3.5;
  stroke-dasharray:276.46;
  stroke-dashoffset:276.46;
  transition:stroke-dashoffset .4s linear
}
.countdown-value{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  font-size:clamp(24px,5.5vw,72px);
  font-variant-numeric:tabular-nums;
  line-height:1
}
.countdown-label{
  margin-top:clamp(8px,1.6vw,24px);
  font-size:clamp(11px,1.7vw,22px);
  letter-spacing:.08em;
  text-transform:uppercase
}
.countdown-text{
  position:absolute;
  left:0;right:0;
  bottom:calc(clamp(16px,5vh,56px) + env(safe-area-inset-bottom, 0px));
  padding:0 16px;
  color:#fff;
  font-family:var(--heading, sans-serif);
  font-size:clamp(16px,2.4vw,30px);
  letter-spacing:.08em;
  text-align:center;
  transition:opacity 1s ease
}
.countdown-text.fade-out{opacity:0}

/* desktop: docked at the bottom of the screen, no dark backdrop */
@media (min-width:1024px){
  .countdown-overlay{
    background:none;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:32px;
    pointer-events:none;
    text-shadow:0 0 8px #000
  }
  .countdown-units{gap:32px}
  .countdown-ring{width:clamp(100px,9vw,150px)}
  .countdown-ring svg{filter:drop-shadow(0 0 4px #000)}
  .countdown-value{font-size:clamp(32px,3vw,48px)}
  .countdown-label{font-size:14px;margin-top:10px}
  .countdown-text{
    position:static;
    margin-top:24px;
    font-size:20px
  }
}

@media (max-width:600px) and (orientation:portrait){
  .countdown-units{
    grid-template-columns:repeat(2,auto);
    gap:28px 24px
  }
  .countdown-ring{width:min(38vw,28vh)}
  .countdown-value{font-size:min(13vw,9.5vh)}
  .countdown-label{font-size:14px;margin-top:10px}
}