#buildPlacementPanel {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: clamp(72px, calc(50% - 180px), 230px);
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #80e6aa;
  border-radius: 5px;
  color: #f0f3ee;
  background: rgba(14, 22, 19, .96);
  font: 12px/1.45 system-ui, sans-serif;
  pointer-events: auto;
  touch-action: manipulation;
}
#buildPlacementPanel[hidden] { display: none; }
#buildPlacementPanel[data-valid="no"] { border-color: #ff665f; }
#buildPlacementPanel strong,
#buildPlacementPanel .buildStatus,
#buildPlacementPanel .buildDetail { display: block; }
#buildPlacementPanel strong { letter-spacing: .09em; }
#buildPlacementPanel .buildStatus { color: #80e6aa; margin: 4px 0; }
#buildPlacementPanel[data-valid="no"] .buildStatus { color: #ff938d; }
#buildPlacementPanel .buildDetail,
#buildPlacementPanel small { color: #b9c5bf; }
#buildPlacementPanel .buildActions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 9px 0 5px; }
#buildPlacementPanel button {
  min-height: 44px;
  border: 1px solid #6f8276;
  border-radius: 3px;
  color: #f0f3ee;
  background: #293830;
  cursor: pointer;
  font: 600 11px system-ui, sans-serif;
}
#buildPlacementPanel button[data-action="confirm"] { color: #10241a; background: #80e6aa; }
#buildPlacementPanel button:disabled { color: #b1b9b3; background: #353a37; cursor: not-allowed; }
#buildPlacementPanel button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.touch #buildPlacementPanel small { font-size: 10px; }
body.build-placing #fire, body.build-placing #fire2 { opacity: .2; pointer-events: none; }
@media (max-height: 430px) {
  #buildPlacementPanel { top: 54px; padding: 7px 10px; }
  #buildPlacementPanel small { display: none; }
  #buildPlacementPanel .buildStatus { margin: 0; }
  #buildPlacementPanel button { min-height: 44px; }
  #buildPlacementPanel .buildActions { margin: 5px 0 0; }
}