/* HUD de moedas/cristais — canto superior direito */
#hud-currency {
  position: fixed; top: 16px; right: 16px;
  width: 180px;
  background: url('/textures/hud/hudd_moedas_cristais.png') center/100% 100% no-repeat;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 55;
  font-family: 'Fredoka', system-ui, sans-serif;
  image-rendering: pixelated;
}

/* ===== LINHA DE MOEDAS ===== */
#currency-coins {
  display: flex;
  align-items: center;
  gap: 6px;
}

#currency-coins .cur-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  image-rendering: pixelated;
  transform: translate(9px, 1px);
}

#currency-coins .cur-bar {
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#currency-coins .cur-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

#currency-coins .cur-plus {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: url('/textures/hud/hud_buttom_moedas_cristais.png') center/100% 100% no-repeat;
  cursor: pointer;
  image-rendering: pixelated;
  transition: transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-5px, 2px);
}

#currency-coins .cur-plus img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

#currency-coins .cur-plus:hover {
  /* sem animação */
}

/* ===== LINHA DE CRISTAIS ===== */
#currency-gems {
  display: flex;
  align-items: center;
  gap: 6px;
}

#currency-gems .cur-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  image-rendering: pixelated;
  transform: translate(10px, -6px);
}

#currency-gems .cur-bar {
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-8px);
}

#currency-gems .cur-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

#currency-gems .cur-plus {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: url('/textures/hud/hud_buttom_moedas_cristais.png') center/100% 100% no-repeat;
  cursor: pointer;
  image-rendering: pixelated;
  transition: transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-5px, -6px);
}

#currency-gems .cur-plus img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

#currency-gems .cur-plus:hover {
  /* sem animação */
}