.bet-amount {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.rps-container {
    margin-top: 20px;
    padding: 15px;
    background: #0b1e33;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    color: #fff;
}

.img-rps {
    width: 50px;
    height: 50px;
}

.img-rps-battle {
  width: 100px;
  height: 100px;
  transition: transform 0.3s ease;
}

.spin {
  animation: spinChoice 0.1s infinite;
}

@keyframes spinChoice {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}
.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

.vs-text {
  animation: pulseVS 1s infinite;
  color: #ffcc00;
}
@keyframes pulseVS {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.rps-btn {
    font-size: 18px;
    /* width: 120px; */
    /* height: 60px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1a2a44;
    color: #fff;
    border: 2px solid #ffc107;
    border-radius: 8px;
    transition: background 0.2s, transform 0.1s;
}

.rps-btn.selected {
    background: #ffc107;
    color: #111;
}

.rps-btn:hover {
    background: #2e3b5a;
}

.result-display {
    margin-top: 20px;
    font-size: 24px;
    min-height: 40px;
    color: #ffc107;
}