.settlement-reveal > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.settlement-chain-meter {
  display: inline-grid;
  grid-template-columns: repeat(3, 6px);
  align-items: center;
  gap: 3px;
  height: 12px;
  padding: 0 5px;
  border: 1px solid rgba(142, 211, 255, .22);
  border-radius: 999px;
  background: rgba(7, 18, 29, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  vertical-align: middle;
}

.settlement-chain-meter > b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(145, 194, 226, .22);
  box-shadow: 0 0 0 rgba(105, 220, 255, 0);
  transform: scale(.78);
}

.settlement-chain-meter > b.is-lit {
  background: rgba(111, 219, 255, .72);
  box-shadow: 0 0 7px rgba(78, 207, 255, .42);
  transform: scale(.94);
}

.settlement-chain-meter > b.is-current {
  background: #ddf8ff;
  box-shadow: 0 0 0 2px rgba(104, 222, 255, .13), 0 0 10px rgba(82, 216, 255, .72);
  animation: settlement-chain-current 420ms cubic-bezier(.2, .75, .2, 1) both;
}

.settlement-chain-meter[data-chain-boundary="true"] {
  border-color: rgba(255, 211, 125, .48);
  background: linear-gradient(90deg, rgba(24, 21, 18, .64), rgba(33, 25, 13, .54));
  box-shadow: inset 0 1px 0 rgba(255, 244, 206, .08), 0 0 10px rgba(255, 184, 72, .08);
}

.settlement-chain-meter[data-chain-boundary="true"] > b.is-lit {
  background: #ffd98e;
  box-shadow: 0 0 8px rgba(255, 185, 70, .58);
}

.settlement-chain-meter[data-chain-tier="large-chain"] {
  grid-template-columns: repeat(3, 7px);
  gap: 4px;
}

@keyframes settlement-chain-current {
  0% { opacity: .45; transform: scale(.55); }
  62% { opacity: 1; transform: scale(1.28); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
  .settlement-chain-meter {
    grid-template-columns: repeat(3, 5px);
    gap: 2px;
    height: 10px;
    padding: 0 4px;
  }

  .settlement-chain-meter > b {
    width: 4px;
    height: 4px;
  }
}

body[data-vfx-quality="low"] .settlement-chain-meter > b {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .settlement-chain-meter > b.is-current {
    animation: none;
    transform: scale(1);
  }
}