.stats {
  width: 150px;
  margin: 0 auto;
}

.stat {
  margin-bottom: 5px;
}

.bar {
  width: 150px;
  height: 5px;
  border: 1px solid var(--border-color, black);
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  width: var(--value);
  background-size: cover;
}

.bar-fill.green  { background-image: url(/images/bars_green.gif); }
.bar-fill.blue   { background-image: url(/images/bars_blue.gif); }
.bar-fill.orange { background-image: url(/images/bars_orange.gif); }
.bar-fill.purple { background-image: url(/images/bars_purple.gif); }
.bar-fill.yellow { background-image: url(/images/bars_yellow.gif); }
.bar-fill.black  { background-image: url(/images/bars_black.gif); }

.label {
  margin-top: 3px;
  font-size: 10px;
}

.blink {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.highlight {
  color: var(--highlight-color, red);
  font-weight: bold;
}

.links {
  text-align: center;
  margin-top: 4px;
}