```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Battle Game</title>
<style>
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.attack-button {
  font-size: 2em;
  padding: 10px;
  width: calc(100% - 20px);
  margin: 10px;
  animation: none;
}
.attack-button:active {
  animation: shake 0.5s;
}
.coin-button {
  font-size: 1.5em;
  margin: 10px;
}
@keyframes coin-flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}
.coin {
  animation: coin-flip 1s infinite;
}
</style>
</head>
<body>

<div style="width: 400px; height: 400px; border: 2px solid #000; text-align: center; margin: auto; position: relative;">
  <div id="enemy" style="font-size: 3em; margin-top: 50px;">👹</div>
  <div id="hp" style="font-size: 1.5em; margin-top: 10px;">HP: 20</div>
  <button class="attack-button" onclick="attack()">👊 Attack</button>
  <div id="coin" style="font-size: 1.5em; margin-top: 20px;">💰: 0</div>
  <button class="coin-button" onclick="upgrade()">Upgrade Attack (Cost: 10💰)</button>
  <button class="coin-button" onclick="attack()">👊 For Mobile</button>
</div>

<script>
let hp = 20;
let maxHP = 20;
let attackPower = 1;
let coins = 0;

function attack() {
  hp -= attackPower;
  if (hp <= 0) {
    coins += 5;
    maxHP = Math.floor(maxHP * 1.1);
    hp = maxHP;
    document.getElementById('enemy').innerHTML = getRandomEmoji();
  }
  updateDisplay();
}

function upgrade() {
  if (coins >= 10) {
    attackPower += 1;
    coins -= 10;
  }
  updateDisplay();
}

function updateDisplay() {
  document.getElementById('hp').innerHTML = `HP: ${hp}`;
  document.getElementById('coin').innerHTML = `💰: ${coins}`;
}

function getRandomEmoji() {
  const emojis = ['👹', '👺', '👻', '💀', '😈', '👽', '🤖', '🐲', '💩', '🥶'];
  return emojis[Math.floor(Math.random() * emojis.length)];
}
</script>

</body>
</html>
```