body { gap: 22px; }
#score { display: flex; gap: 12px; }
#arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--surface);
  border-radius: 16px;
  padding: 24px 36px;
  box-shadow: 0 10px 40px var(--shadow);
}
.hand {
  font-size: 3.4rem;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 16px;
  transition: box-shadow 0.2s, opacity 0.2s;
}
.hand.win { box-shadow: 0 0 0 3px var(--green); }
.hand.lose { opacity: 0.5; }
.hand.shake { animation: shake 0.12s ease-in-out 3; }
@keyframes shake {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.vs { font-size: 0.9rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; }
.choices { display: flex; gap: 14px; }
.choice {
  font-size: 2.4rem;
  width: 84px;
  height: 84px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 14px var(--shadow);
  transition: background 0.15s, transform 0.1s;
}
.choice:hover { background: var(--surface-3); opacity: 1; }
.choice:active { transform: scale(0.94); }