/* First Artis combat slice: compact health UI and one restrained target card. */
.artis-health-hud {
  display: inline-grid; gap: 2px; min-width: 84px; min-height: 34px;
  align-content: center; padding: 4px 10px; color: #eee5d3;
  background: rgba(11, 13, 17, 0.82);
  border: 1px solid rgba(190, 92, 76, 0.5); border-radius: 9px;
  font-family: var(--sans); line-height: 1;
}
.artis-health-hud span { color: #c9bba6; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.artis-health-hud strong { color: #f1dfcf; font-size: 13px; white-space: nowrap; }

.artis-target-hud {
  position: fixed; top: 76px; right: 222px; z-index: 25;
  min-width: 154px; padding: 9px 11px; pointer-events: none;
  color: #eee5d3; background: rgba(11, 13, 17, 0.9);
  border: 1px solid rgba(217, 162, 75, 0.55); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.artis-target-hud strong, .artis-target-hud span { display: block; }
.artis-target-hud strong { color: #e0ad5d; font: 700 13px/1.2 var(--serif); }
.artis-target-hud span { margin-top: 3px; font: 700 12px/1.2 var(--sans); }

@media (max-height: 560px) {
  .artis-target-hud { top: 68px; padding: 7px 9px; }
  .artis-health-hud { min-height: 30px; padding: 3px 8px; }
}

@media (max-width: 700px) {
  .artis-target-hud { top: 220px; right: 18px; }
}