/* One clear beat over the entire game, including its HUD. */
.match-countdown {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(3, 10, 17, .76);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease-out, visibility 240ms;
}
.match-countdown.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.match-countdown__number {
  display: block;
  padding: .12em;
  color: #ffe6a2;
  font: 400 clamp(160px, 48vmin, 430px)/1 'Tideglass Bangers', Impact, sans-serif;
  text-align: center;
  -webkit-text-stroke: clamp(2px, .65vmin, 6px) #221b15;
  paint-order: stroke fill;
  text-shadow: 0 .025em 0 #a96d2e, 0 .045em 0 #171b1d, 0 .065em .07em rgba(0, 0, 0, .55);
  transform-origin: center;
  animation: match-countdown-pop 960ms both;
}
@keyframes match-countdown-pop {
  0% { opacity: 0; transform: scale(.42) rotate(-8deg); }
  16% { opacity: 1; transform: scale(1.1) rotate(2deg); }
  30% { opacity: 1; transform: scale(1) rotate(0); }
  58% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.28) translateY(-.035em); }
}
@media (prefers-reduced-motion: reduce) {
  .match-countdown__number { animation-name: match-countdown-fade; }
  @keyframes match-countdown-fade {
    0%, 100% { opacity: 0; }
    16%, 65% { opacity: 1; }
  }
}

.match-countdown__goal { position:absolute; top:calc(50% + 22vmin); left:50%; transform:translateX(-50%); width:min(540px,90%); color:#f4eee0; text-align:center; font:600 14px/1.4 sans-serif; }
.match-countdown__goal strong { font:400 clamp(25px,5vw,36px)/1.1 'Tideglass Bangers',Impact,sans-serif; color:#89e5db; }
.match-countdown__goal p { margin:8px 0 0; }
@media(max-height:500px) { .match-countdown__number { font-size:42vmin; } .match-countdown__goal { top:70%; } }