.kingdom-strip {
  --kingdom-bg-y: 0%;
  --kingdom-bg: url("/assets/kingdom-backgrounds/human_tribe.background.sheet.png?v=20260619m");
  --kingdom-building-sheet: url("/assets/kingdom-buildings/human_tribe.buildings.sheet.png?v=20260619m");
  background-image: var(--kingdom-bg);
  background-position: center var(--kingdom-bg-y);
  background-repeat: no-repeat;
  background-size: 100% 300%;
}

.kingdom-strip .strip-art {
  display: none;
}

.kingdom-strip .building-node {
  width: 68px;
  min-width: 68px;
  height: 70px;
  min-height: 70px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.kingdom-strip .building-node::before {
  top: auto;
  bottom: 8px;
  left: 50%;
  z-index: 0;
  width: 54px;
  height: 42px;
  transform: translateX(-50%);
  background-image: var(--kingdom-building-sheet);
  background-position: var(--building-x, 0%) var(--building-y, 0%);
  background-size: 600% 300%;
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .38));
}

.kingdom-strip .building-node span {
  position: relative;
  z-index: 1;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(10, 16, 16, .68);
  color: #fff3bf;
  font-size: 10px;
  line-height: 1.2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .65);
  white-space: nowrap;
}

.kingdom-strip .building-node span {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
}

.kingdom-strip .building-node em {
  display: none;
}

.kingdom-strip .building-node.unbuilt {
  opacity: .62;
  filter: saturate(.72);
}

.kingdom-strip .building-node.upgrading::after {
  inset: 3px -5px -3px;
  z-index: 2;
  border-color: rgba(255, 226, 126, .72);
  box-shadow: 0 0 16px rgba(255, 216, 93, .32);
}

.kingdom-strip .building-node[data-building="shrine"] { --building-x: 0%; }
.kingdom-strip .building-node[data-building="field"] { --building-x: 20%; }
.kingdom-strip .building-node[data-building="mine"] { --building-x: 40%; }
.kingdom-strip .building-node[data-building="lodge"] { --building-x: 60%; }
.kingdom-strip .building-node[data-building="barracks"] { --building-x: 80%; }
.kingdom-strip .building-node[data-building="wall"] { --building-x: 100%; }

.kingdom-strip .shrine { left: 50.46%; top: 26.9%; }
.kingdom-strip .field { left: 14.27%; top: 33.47%; }
.kingdom-strip .mine { left: 66.52%; top: 43.95%; }
.kingdom-strip .lodge { left: 82.68%; top: 34.66%; }
.kingdom-strip .barracks { left: 34.44%; top: 22.4%; }
.kingdom-strip .wall { left: 36.51%; top: 43.92%; }

@media (max-width: 520px) {
  .kingdom-strip .building-node {
    width: 60px;
    min-width: 60px;
    height: 58px;
    min-height: 58px;
  }

  .kingdom-strip .building-node::before {
    width: 46px;
    height: 36px;
  }

  .kingdom-strip .building-node span {
    bottom: 44px;
    font-size: 9px;
  }
}