/* Isolated branch countdown. No modal or [hidden] rules live here. */
#round-status.branch-countdown-active {
  top: 42%;
  left: 50%;
  z-index: 42;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

#round-status.branch-countdown-active .branch-countdown-word {
  position: relative;
  display: inline-block;
  min-width: 1ch;

  font: 900 clamp(82px, 10vw, 150px) / .82 system-ui, sans-serif;
  letter-spacing: -.055em;

  /* Almost invisible frosted body. */
  color: rgb(224 244 255 / .002);
  -webkit-text-fill-color: rgb(224 244 255 / .002);

  /* Very thin icy edge. */
  -webkit-text-stroke: .32px rgb(242 253 255 / .74);

  /* Narrow, bright halo: crisp icy edge instead of a soft blur. */
  text-shadow:
    0 0 1px rgb(239 255 255 / .98),
    0 0 3px rgb(207 242 255 / .9),
    0 0 7px rgb(162 215 255 / .68),
    0 0 12px rgb(112 178 255 / .4);

  transform-origin: 50% 65%;
  animation: branchCountdownIce .82s cubic-bezier(.2, .72, .24, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  isolation: isolate;
}

/* Soft luminous halo following the exact text contour. */
#round-status.branch-countdown-active .branch-countdown-word::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: -1;

  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .46px rgb(228 249 255 / .5);

  text-shadow:
    0 0 2px rgb(232 252 255 / .82),
    0 0 5px rgb(185 229 255 / .6),
    0 0 9px rgb(126 188 255 / .36);

  pointer-events: none;
}

/* Tiny top highlight gives a hint of volume without making the glyph solid. */
#round-status.branch-countdown-active .branch-countdown-word::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 1;

  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .18px rgb(255 255 255 / .86);

  text-shadow:
    0 -1px 0 rgb(255 255 255 / .28),
    0 0 1px rgb(244 255 255 / .42);

  pointer-events: none;
}

#round-status.branch-countdown-active .branch-countdown-word.is-final {
  font-size: clamp(58px, 7vw, 108px);
  letter-spacing: .015em;
  white-space: nowrap;
  animation-duration: 1s;
}

@keyframes branchCountdownIce {
  0% {
    opacity: 0;
    transform: scale(.66);
  }
  13% {
    opacity: .62;
    transform: scale(.8);
  }
  48% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: .94;
    transform: scale(1.045);
  }
  84% {
    opacity: .62;
    transform: translateY(3px) scaleX(1.07) scaleY(1.11);
  }
  100% {
    opacity: 0;
    transform: translateY(15px) scaleX(1.11) scaleY(1.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  #round-status.branch-countdown-active .branch-countdown-word {
    animation: branchCountdownReduced .42s ease both;
    transform: none;
  }
}

@keyframes branchCountdownReduced {
  0% { opacity: 0; }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

/* Stable branch timer layout across waiting, ready and catching states. */
#branch-timer {
  width: 150px;
  justify-content: center;
}

#branch-timer.is-ready,
#branch-timer.is-round {
  width: 190px;
}

#branch-timer.is-round .branch-timer-ornament {
  display: none;
}

#branch-timer.is-round #timer {
  min-width: 0;
}



/* Wheel-style magic sparks appear only while branches are ready to catch. */
#branch-timer {
  isolation: isolate;
}

#branch-timer > :not(.branch-ready-sparks) {
  position: relative;
  z-index: 3;
}

.branch-ready-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(100% + 92px);
  height: calc(100% + 72px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#branch-timer:not(.is-ready) .branch-ready-sparks {
  display: none;
}