.wdl-bar {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  height: 22px;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.wdl-bar__segments {
  position: absolute;
  inset: 0;
  display: flex;
}

.wdl-bar__segment {
  position: relative;
  min-width: 0;
}

.wdl-bar__segment--white { background: #eee9e1; }
.wdl-bar__segment--draw { background: #8b857e; }
.wdl-bar__segment--black { background: #252321; }

.wdl-bar__value {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: #ebe6df;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-shadow: none;
}

.wdl-bar__value--white {
  color: #4b4540;
}

.wdl-bar__value--draw {
  color: #241f1c;
}

.wdl-bar__segment--compact .wdl-bar__value {
  font-size: 0.58rem;
  letter-spacing: -0.08em;
}

.wdl-bar--small-sample .wdl-bar__value--white { color: #8a5a16; }
.wdl-bar--small-sample .wdl-bar__value--draw { color: #2b1b04; }
.wdl-bar--small-sample .wdl-bar__value--black { color: #f0bd68; }

#serverRepertoireWdl .wdl-bar {
  height: 28px;
  font-size: 0.82rem;
}

@media (max-width: 920px) {
  .wdl-bar {
    height: 20px;
    font-size: 0.66rem;
  }
}