/* =============================================
   LuxTool — /games/rock-paper-scissors/rock-paper-scissors.css
   Tool-specific styles only. Site chrome AND every shared
   building block used on this page (.tool-page, .tool-head,
   .panel, .stat-box/.stat-num/.stat-label, .ts-seo, .lp-seo-*,
   .lp-list, .lp-faq, .back-link-btn, .status, .btn) come from
   /style.css, which this page also loads and which is shared
   by every tool on the site. Do NOT duplicate those rules here.

   This file only holds the hand-vs-hand arena, choice buttons,
   and history chips — the parts unique to this game.
   ============================================= */

/* ── ARENA (player vs computer hands) ── */
.rps-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.rps-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.rps-side-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.rps-hand {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: rgba(30, 41, 59, .7);
  border: 2px solid var(--gold-dim);
  border-radius: 50%;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.rps-hand.rps-shaking {
  animation: rps-shake .5s ease-in-out infinite;
}

@keyframes rps-shake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-12deg);
  }

  75% {
    transform: rotate(12deg);
  }
}

.rps-hand.rps-win {
  border-color: #34d399;
  box-shadow: 0 0 18px rgba(52, 211, 153, .35);
}

.rps-hand.rps-lose {
  border-color: #f87171;
  box-shadow: 0 0 18px rgba(248, 113, 113, .3);
}

.rps-hand.rps-tie {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--gold-glow);
}

.rps-vs {
  font-size: .8rem;
  font-weight: 900;
  color: var(--gold-dim);
  letter-spacing: 1px;
}

/* ── CHOICE BUTTONS ── */
.rps-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: 1rem 0;
}

.rps-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem .5rem;
  background: rgba(251, 191, 36, .08);
  border: 1px solid var(--gold-dim);
  border-radius: .8rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: .2s;
}

.rps-choice-btn:hover {
  background: rgba(251, 191, 36, .18);
  border-color: var(--gold);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 15px var(--gold-glow);
}

.rps-choice-btn:active {
  transform: translateY(0) scale(.97);
}

.rps-choice-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.rps-choice-emoji {
  font-size: 2rem;
}

.rps-choice-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── HISTORY CHIPS ── */
.rps-history-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 700;
  border: 1px solid var(--border);
}

.rps-history-chip.rps-chip-win {
  background: rgba(52, 211, 153, .14);
  border-color: rgba(52, 211, 153, .35);
  color: #a7f3d0;
}

.rps-history-chip.rps-chip-lose {
  background: rgba(248, 113, 113, .12);
  border-color: rgba(248, 113, 113, .3);
  color: #fca5a5;
}

.rps-history-chip.rps-chip-tie {
  background: rgba(251, 191, 36, .12);
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* ── MOBILE ── */
@media (max-width: 480px) {
  .rps-hand {
    width: 76px;
    height: 76px;
    font-size: 2.2rem;
  }

  .rps-choice-emoji {
    font-size: 1.6rem;
  }

  #rt-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}