.buildingValue {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 74px;
  padding: 5px 9px;
  color: #f0e6cd;
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 8px;
  background: rgba(10, 14, 20, .84);
  box-shadow: 0 4px 12px rgba(2, 6, 10, .4);
  transform: translateX(-50%);
  font-family: var(--utility);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.05;
  pointer-events: none;
  text-align: left;
  white-space: nowrap;
  transition: transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out, background .16s ease-out, opacity .16s ease-out;
}

.buildingValue span {
  overflow: hidden;
  max-width: 15ch;
  color: rgba(240, 230, 205, .82);
  text-overflow: ellipsis;
}

.buildingValue b {
  color: var(--game-bronze, #d4af37);
  font-variant-numeric: tabular-nums;
}

.buildingValue b::before { content: "· "; color: rgba(212, 175, 55, .5); font-weight: 400; }

.bld:not(:disabled):hover .buildingValue,
.bld:focus-visible .buildingValue,
.bld.visual-focused .buildingValue {
  border-color: rgba(212, 175, 55, .85);
  box-shadow: 0 0 14px rgba(212, 175, 55, .38), 0 4px 12px rgba(2, 6, 10, .4);
  transform: translateX(-50%) scale(1.04);
}

.bld.is-selected .buildingValue,
.bld.visual-selected .buildingValue {
  color: #141c28;
  border-color: #e5c65c;
  background: linear-gradient(180deg, #e5c65c, #d4af37);
  box-shadow: 0 0 18px rgba(212, 175, 55, .45), 0 4px 12px rgba(2, 6, 10, .4);
}

.bld.is-selected .buildingValue span,
.bld.visual-selected .buildingValue span { color: rgba(20, 28, 40, .85); }
.bld.is-selected .buildingValue b,
.bld.visual-selected .buildingValue b { color: #0a0e14; }
.bld.is-selected .buildingValue b::before,
.bld.visual-selected .buildingValue b::before { color: rgba(20, 28, 40, .45); }

.bld.is-locked .buildingValue,
.bld:disabled .buildingValue {
  border-color: rgba(148, 163, 184, .25);
  opacity: .4;
}

.bld.is-completed .buildingValue,
.bld.done .buildingValue {
  border-color: rgba(212, 175, 55, .6);
  opacity: .92;
}

.game.has-pixi-scene .buildingValue {
  z-index: 7;
  top: auto;
  right: auto;
  bottom: calc(100% + clamp(2px, .28vw, 4px));
  left: 50%;
  min-width: 0;
  max-width: 96%;
  padding: 4px 9px;
  border-color: rgba(229, 198, 92, .6);
  border-radius: 7px;
  background: rgba(6, 9, 15, .93);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 4px 14px rgba(2, 6, 10, .6);
  font-size: clamp(8px, .9vw, 12.5px);
  letter-spacing: .035em;
}

/* The multiplier is the number a player reads first: ivory, tabular, heavier than the risk word. */
.game.has-pixi-scene .buildingValue b { color: #fff3d2; font-weight: 900; }
.game.has-pixi-scene .bld.is-locked .buildingValue,
.game.has-pixi-scene .bld:disabled .buildingValue { opacity: .86; }
.game.has-pixi-scene .bld.is-selected .buildingValue b,
.game.has-pixi-scene .bld.visual-selected .buildingValue b { color: #0a0e14; }

/* The picked storefront keeps its price in view: a gold plate with dark figures. */
.game.has-pixi-scene .bld.is-selected .buildingValue,
.game.has-pixi-scene .bld.visual-selected .buildingValue {
  color: #141c28;
  border-color: #f2d877;
  background: linear-gradient(180deg, #f0d470, #d4af37);
  box-shadow: 0 0 20px rgba(229, 198, 92, .6), 0 4px 14px rgba(2, 6, 10, .6);
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}

.game.has-pixi-scene .buildingValue > span { display: none; }
.game.has-pixi-scene .buildingValue b::before { content: none; }

@media (prefers-reduced-motion: no-preference) {
  .bld.done .buildingValue::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(229, 198, 92, .95);
    border-radius: inherit;
    animation: chipGoldBurst .7s ease-out 2;
    pointer-events: none;
  }

  @keyframes chipGoldBurst {
    from { opacity: .95; transform: scale(1); }
    to { opacity: 0; transform: scale(1.6); }
  }

  .bld.busted .buildingValue {
    animation: chipBustFlash .28s ease-out 3;
  }

  @keyframes chipBustFlash {
    0%, 100% { border-color: rgba(148, 163, 184, .25); box-shadow: 0 4px 12px rgba(2, 6, 10, .4); }
    50% { border-color: #e23b4d; background: rgba(80, 14, 24, .92); box-shadow: 0 0 18px rgba(226, 59, 77, .75); }
  }
}

@media (max-width: 620px) {
  .game.has-pixi-scene .buildingValue {
    gap: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buildingValue { transition: none; }
}