/* Visuals and animations for Rock Paper Scissors page */

.rps-buttons button{
  border: 2px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 244, 255, 0.95));
  border-radius:16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(10px);
}
.rps-buttons button:hover{
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(240, 244, 255, 1));
}
.rps-buttons button:active{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.15);
}

/* highlight winner/loser */
.btn-win{
  animation: winnerGlow 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3) !important;
}
.btn-lose{
  animation: loserShake 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
  background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2) !important;
}

@keyframes winnerGlow{
  0%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.12) rotate(-3deg)}
  50%{transform:scale(1.08) rotate(3deg)}
  75%{transform:scale(1.12) rotate(-3deg)}
  100%{transform:scale(1) rotate(0deg)}
}

@keyframes loserShake{
  0%{transform:translateX(0) rotate(0deg)}
  15%{transform:translateX(-8px) rotate(-2deg)}
  30%{transform:translateX(8px) rotate(2deg)}
  45%{transform:translateX(-8px) rotate(-2deg)}
  60%{transform:translateX(8px) rotate(2deg)}
  75%{transform:translateX(-4px) rotate(-1deg)}
  90%{transform:translateX(4px) rotate(1deg)}
  100%{transform:translateX(0) rotate(0deg)}
}

/* result animation */
.result{
  transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.result.win{
  color: #10b981;
  transform: translateY(-6px) scale(1.1);
  animation: resultPulse 0.6s ease;
}
.result.loss{
  color: #ef4444;
  transform: translateY(-6px) scale(1.1);
  animation: resultPulse 0.6s ease;
}
.result.tie{
  color: #6b7280;
  transform: translateY(-4px);
  animation: resultPulse 0.6s ease;
}

@keyframes resultPulse{
  0%{opacity: 0; transform: translateY(10px) scale(0.8);}
  50%{opacity: 1; transform: translateY(-8px) scale(1.15);}
  100%{opacity: 1; transform: translateY(-6px) scale(1.1);}
}

/* confetti pieces */
.rps-confetti{
  pointer-events:none;
  position:fixed;
  left:0;top:0;right:0;bottom:0;z-index:9999;overflow:visible;
}
.confetti-piece{
  position:absolute; width:10px; height:16px; opacity:0.95; transform-origin:center;
  animation: confetti-fall 900ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes confetti-fall{
  0%{transform: translateY(-10vh) rotate(0deg); opacity:1}
  100%{transform: translateY(100vh) rotate(540deg); opacity:0}
}

/* subtle scoreboard highlight */
.scorebox{transition: transform 0.3s ease, box-shadow 0.3s ease}
.scorebox.pulse{
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.2);
  animation: scoreboardPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scoreboardPulse{
  0%{transform: scale(1) translateY(0);}
  50%{transform: scale(1.15) translateY(-6px);}
  100%{transform: scale(1.1) translateY(-4px);}
}

/* Series display removed - cleaner UI */

/* debug banner */
.rps-debug{position:fixed;right:12px;bottom:12px;z-index:10000;background:#fee2e2;color:#7f1d1d;padding:10px 14px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.12);font-family:monospace;display:none}
.rps-debug.show{display:block}
.rps-debug small{display:block;opacity:0.8;font-size:12px;margin-top:6px}

/* series message (for computer-win jokes or short messages) */
.series-msg{
  position:fixed;
  left:50%;
  top:40%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:10001;
  min-width:320px;
  max-width:80vw;
  padding:24px 32px;
  border-radius:16px;
  background:rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  color:#0f172a;
  box-shadow:0 20px 50px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(148, 163, 184, 0.3);
  text-align:center;
  opacity:0;
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.9,.3,1);
}
.series-msg.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.series-msg .title{
  font-size:24px;
  font-weight:800;
  margin-bottom:10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.series-msg .body{font-size:16px;color:#475569}

@keyframes popIn{
  0%{transform:translate(-50%,-50%) scale(.9);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.04);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1)}
}
.series-msg.pop{animation:popIn .45s cubic-bezier(.2,.9,.2,1) both}