* { box-sizing: border-box; }
html, body, .hud-layer { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { font-family: Inter, "Segoe UI", Arial, sans-serif; user-select: none; }
.hud-layer { position: relative; }

.player-hud {
  --scale: 1;
  --hud-opacity: 1;
  position: absolute;
  width: 230px;
  min-height: 66px;
  transform: scale(var(--scale));
  transform-origin: top left;
  border: 1px solid rgba(84, 214, 166, 0.76);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(6, 10, 12, var(--hud-opacity));
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.42);
  cursor: move;
  touch-action: none;
  will-change: left, top;
}

.hud-bar {
  height: 24px;
  padding: 0 4px 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  color: #d9f7ea;
  font-size: 10px;
  font-weight: 600;
  touch-action: none;
}
.hud-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-actions { display: flex; gap: 2px; }
.hud-actions button {
  min-width: 20px; height: 17px; padding: 0 3px;
  border: 1px solid #344149; border-radius: 4px;
  background: #10171b; color: #ecf7f2; font-size: 8px; cursor: pointer;
}
.hud-actions button[data-opacity] { min-width: 43px; }
.hud-actions button[data-opacity] { min-height: 19px; padding: 0 5px; touch-action: none; }
.hud-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #263139; }
.hud-stat { min-width: 0; padding: 3px 1px 4px; border-right: 1px solid #263139; text-align: center; }
.hud-stat:nth-child(7n) { border-right: 0; }
.hud-stat:nth-child(n + 8) { border-top: 1px solid #263139; }
.hud-stat b, .hud-stat i { display: block; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hud-stat b { color: #8db6a6; font-size: 7px; font-weight: 600; }
.hud-stat i { color: #fff; font-size: 10px; font-weight: 700; }
