Rock Paper Scissors Game

<div class="rps-card">
  <div class="rps-scoreboard">
    <div class="score-item">
      <span>PLAYER</span>
      <h3 id="p-score">0</h3>
    </div>
    <div class="score-item">
      <span>STREAK</span>
      <h3 id="streak-score" style="color:#eab308">0</h3>
    </div>
    <div class="score-item">
      <span>COMPUTER</span>
      <h3 id="c-score">0</h3>
    </div>
  </div>

  <div class="arena">
    <div class="fighter" id="p-fighter"><i class="fas fa-hand-rock"></i></div>
    <div class="vs">VS</div>
    <div class="fighter" id="c-fighter"><i class="fas fa-hand-rock"></i></div>
  </div>

  <h2 id="result-msg" class="result-msg">Choose your weapon!</h2>

  <div class="choices-row">
    <button class="choice-btn" data-choice="rock">✊ Rock</button>
    <button class="choice-btn" data-choice="paper">✋ Paper</button>
    <button class="choice-btn" data-choice="scissors">✌️ Scissors</button>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: #0f172a;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rps-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 24px;
  padding: 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.rps-scoreboard {
  display: flex;
  justify-content: space-around;
  background: #0f172a;
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 24px;
  border: 1px solid #334155;
}
.score-item span {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 700;
}
.score-item h3 {
  font-size: 1.5rem;
  font-weight: 800;
}
.arena {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  height: 120px;
}
.fighter {
  font-size: 4rem;
  color: #38bdf8;
  transition: transform 0.2s;
}
#c-fighter {
  color: #f43f5e;
  transform: scaleX(-1);
}
.vs {
  font-weight: 900;
  color: #64748b;
  font-size: 1.2rem;
}
.result-msg {
  font-size: 1.25rem;
  margin-bottom: 24px;
  min-height: 32px;
}
.choices-row {
  display: flex;
  gap: 10px;
}
.choice-btn {
  flex: 1;
  background: #334155;
  color: #f8fafc;
  border: 1px solid #475569;
  padding: 14px 8px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.choice-btn:hover {
  background: #0284c7;
  border-color: #38bdf8;
}

let pScore = 0;
let cScore = 0;
let streak = 0;

const pFighter = document.getElementById('p-fighter');
const cFighter = document.getElementById('c-fighter');
const resultMsg = document.getElementById('result-msg');
const pScoreEl = document.getElementById('p-score');
const cScoreEl = document.getElementById('c-score');
const streakEl = document.getElementById('streak-score');

const icons = {
  rock: 'fa-hand-rock',
  paper: 'fa-hand-paper',
  scissors: 'fa-hand-scissors'
};

document.querySelectorAll('.choice-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const playerChoice = btn.dataset.choice;
    playRound(playerChoice);
  });
});

function playRound(playerChoice) {
  const choices = ['rock', 'paper', 'scissors'];
  const computerChoice = choices[Math.floor(Math.random() * 3)];

  pFighter.innerHTML = `<i class="fas ${icons[playerChoice]}"></i>`;
  cFighter.innerHTML = `<i class="fas ${icons[computerChoice]}"></i>`;

  if (playerChoice === computerChoice) {
    resultMsg.textContent = "It's a Tie! 🤝";
    resultMsg.style.color = '#facc15';
  } else if (
    (playerChoice === 'rock' && computerChoice === 'scissors') ||
    (playerChoice === 'paper' && computerChoice === 'rock') ||
    (playerChoice === 'scissors' && computerChoice === 'paper')
  ) {
    resultMsg.textContent = "You Win! 🎉";
    resultMsg.style.color = '#10b981';
    pScore++;
    streak++;
  } else {
    resultMsg.textContent = "Computer Wins! 💻";
    resultMsg.style.color = '#ef4444';
    cScore++;
    streak = 0;
  }

  pScoreEl.textContent = pScore;
  cScoreEl.textContent = cScore;
  streakEl.textContent = streak;
}