/* Анимация выбора */
.choice-selected {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Анимация таймера */
.timer-circle {
  fill: none;
  stroke: var(--tg-link);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  animation: countdown 10s linear forwards;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

@keyframes countdown {
  to { stroke-dashoffset: 283; }
}

/* Переходы между экранами */
.screen-enter { opacity: 0; transform: translateX(100%); }
.screen-enter-active { opacity: 1; transform: translateX(0); transition: 300ms; }

/* RPS reveal: "трясущиеся руки" перед показом победителя */
.rps-hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 6px 0;
  align-items: center;
}
.rps-side {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.rps-side__label {
  font-size: 12px;
  color: var(--tg-hint);
  font-weight: 600;
}
.rps-hand {
  display: inline-block;
  transform-origin: 50% 80%;
  font-size: 44px;
  line-height: 1;
}
.rps-hand--left {
  animation: rpsShakeLeft 1.2s ease-in-out 1;
}
.rps-hand--right {
  animation: rpsShakeRight 1.2s ease-in-out 1;
}
.rps-hand--me {
  filter: drop-shadow(0 4px 10px rgba(51, 144, 236, 0.18));
}

.rps-opponent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
}
.rps-mult {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--tg-hint);
}
.rps-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.rps-outcome {
  margin-top: 8px;
  text-align: center;
}

@keyframes rpsShakeLeft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  12% { transform: translateY(-6px) rotate(-10deg); }
  24% { transform: translateY(0) rotate(0deg); }
  44% { transform: translateY(-6px) rotate(-10deg); }
  56% { transform: translateY(0) rotate(0deg); }
  76% { transform: translateY(-6px) rotate(-10deg); }
  88% { transform: translateY(0) rotate(0deg); }
}

@keyframes rpsShakeRight {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  12% { transform: translateY(-6px) rotate(10deg); }
  24% { transform: translateY(0) rotate(0deg); }
  44% { transform: translateY(-6px) rotate(10deg); }
  56% { transform: translateY(0) rotate(0deg); }
  76% { transform: translateY(-6px) rotate(10deg); }
  88% { transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rps-hand--left,
  .rps-hand--right {
    animation: none;
  }
}