/*
 * Shared start screen of speed games: «Добро пожаловать в «<игра>»», «Приготовьтесь» and a big
 * 3 · 2 · 1 · «Поехали!» before round 1. Markup and timing: shared/client/start-countdown.ts.
 * Colours come from the game's *-theme.css: --bg-primary, --text-primary, --text-secondary and
 * --rp-countdown-accent (falls back to --onboarding-accent) with --rp-countdown-accent-ink for text on it. No emoji, no icons: type and rings only.
 */
.rp-countdown {
  --rp-cd-accent: var(--rp-countdown-accent, var(--onboarding-accent, #a677ef));
  position: fixed;
  inset: 0;
  /* Above the game-end screen (990: «Сыграть ещё» starts the next game from it), below confirm dialogs (1000). */
  z-index: 995;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(56px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
  color: var(--text-primary, #fff);
  text-align: center;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--rp-cd-accent) 28%, transparent) 0, transparent 46%),
    var(--bg-primary, #2a1758);
  opacity: 0;
  transition: opacity 260ms ease-out;
  user-select: none;
  -webkit-user-select: none;
}
.rp-countdown.visible { opacity: 1; }
.rp-countdown.leaving { opacity: 0; transition-duration: 300ms; }

.rp-countdown-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 420px;
  transition: opacity 300ms ease, transform 300ms ease;
}
.rp-countdown-welcome {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary, rgba(255, 255, 255, .8));
}
.rp-countdown-game {
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.rp-countdown-ready {
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rp-countdown-accent-ink, #17191f);
  background: var(--rp-cd-accent);
}

/* The middle: one number at a time over a still track ring. */
.rp-countdown-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 240px;
  display: grid;
  place-items: center;
}
.rp-countdown-stage::before {
  content: '';
  position: absolute;
  width: min(62vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--text-primary, #fff) 14%, transparent);
}
.rp-countdown-step {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  width: min(62vw, 270px);
  aspect-ratio: 1;
}
.rp-countdown-value {
  font-size: clamp(140px, 44vw, 230px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 0 rgba(0, 0, 0, .22);
}
.rp-countdown-step.go .rp-countdown-value {
  font-size: clamp(50px, 15vw, 88px);
  color: var(--rp-cd-accent);
  white-space: nowrap;
}
.rp-countdown-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--rp-cd-accent);
  opacity: 0;
}
.rp-countdown-step.leaving { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .rp-countdown.visible .rp-countdown-welcome { animation: rp-cd-drop 420ms cubic-bezier(.2, .9, .3, 1.2) both; }
  .rp-countdown.visible .rp-countdown-welcome.after { animation-delay: 220ms; }
  .rp-countdown.visible .rp-countdown-game { animation: rp-cd-pop 560ms cubic-bezier(.2, .9, .3, 1.35) 120ms both; }
  .rp-countdown.visible .rp-countdown-ready { animation: rp-cd-rise 420ms cubic-bezier(.2, .9, .3, 1.25) 520ms both, rp-cd-breathe 1000ms ease-in-out 1000ms infinite; }
  .rp-countdown.going .rp-countdown-head { opacity: .55; transform: translateY(-8px) scale(.96); }
  .rp-countdown.going .rp-countdown-ready { animation: none; }

  .rp-countdown-step .rp-countdown-value { animation: rp-cd-number-in 520ms cubic-bezier(.2, .9, .3, 1.3) both; }
  .rp-countdown-step .rp-countdown-ring { animation: rp-cd-ring 900ms cubic-bezier(.2, .7, .3, 1) both; }
  .rp-countdown-step.go .rp-countdown-value { animation: rp-cd-stamp 420ms cubic-bezier(.2, .9, .3, 1.4) both; }
  .rp-countdown-step.leaving { opacity: 1; animation: rp-cd-number-out 300ms ease-in both; }
}

@keyframes rp-cd-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes rp-cd-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rp-cd-rise { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes rp-cd-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes rp-cd-number-in {
  0% { opacity: 0; transform: scale(2.3); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.9); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rp-cd-number-out { to { opacity: 0; transform: scale(.55) translateY(-24px); } }
@keyframes rp-cd-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes rp-cd-stamp {
  0% { opacity: 0; transform: scale(1.8) rotate(-8deg); }
  60% { opacity: 1; transform: scale(.94) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}