/* ui/BotTags: the labels over the other bots, square daylight blocks (the design canvas's Arena HUD). */
.tk-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--tk-ink);
  font-family: var(--tk-font-ui);
  user-select: none;
}
.tk-tags__tag {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tk-tags__plate {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 2px;
  background: var(--tk-paper);
  border: var(--tk-border);
  box-shadow: var(--tk-ledge-sm);
  box-sizing: border-box;
  white-space: nowrap;
}
.tk-tags__tier {
  padding: 2px 4px;
  background: var(--tk-sky);
  color: var(--tk-paper);
  font: 400 11px/1 var(--tk-font-display);
}
.tk-tags__tag[data-danger="true"] .tk-tags__tier {
  background: var(--tk-coral);
}
.tk-tags__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 700 12px/1.1 var(--tk-font-ui);
}
.tk-tags__hull {
  width: 56px;
  height: 7px;
  background: var(--tk-paper);
  border: 2px solid var(--tk-ink);
  box-sizing: border-box;
}
.tk-tags__tag[data-own="true"] .tk-tags__hull { width: 64px; height: 9px; }
.tk-tags__tag[data-own="true"] .tk-tags__fill { background: var(--tk-lime); }
.tk-tags__tag[data-own="true"] .tk-tags__fill[data-low="true"] { background: var(--tk-coral); }
.tk-tags__fill {
  height: 100%;
  background: var(--tk-teal);
}
.tk-tags__fill[data-low="true"] {
  background: var(--tk-coral);
}