/* Pause button and countdown. Keep after buttons.css. */

/* Round pause button at the top center. Hidden until play */
.iconbtn{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0
}
.iconbtn svg{
  width: 16px;
  height: 16px;
  fill: currentColor
}

/* Show pause button only in play mode (data-mode from JS) */
#wrap[data-mode="play"] .iconbtn{
  display: grid
}

/* Big countdown number after resume */
.count{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: 700 clamp(72px, 24vw, 160px)/1 var(--disp);
  color: var(--bone);
  opacity: .85
}
.count.hidden{
  display: none
}