/* Live build view (BuildView.dc.html): one canvas drawn in art pixels and scaled up by whole numbers,
   so the sprites stay crisp. The box takes its size from the parent. */
.bv {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  overflow: hidden;
  background: #0b0a09;
}
.bv-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Exploring (explore="true"): pick an agent to follow, drag to look around (sideways only on touch,
   so up and down swipes still scroll the page), zoom with the buttons, ctrl/cmd + wheel or a pinch */
.bv.is-explore .bv-canvas {
  cursor: grab;
  touch-action: pan-y;
}
.bv.is-explore .bv-canvas.is-drag {
  cursor: grabbing;
}
.bv-canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.bv-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
}
.bv-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  background: rgba(11, 10, 9, 0.88);
  color: #fff;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--px-notch);
}
.bv-btn--txt {
  padding: 0 12px;
}
.bv-btn:hover {
  background: var(--surface-2);
}
.bv-btn[aria-pressed="true"] {
  background: var(--accent);
}
.bv-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
.bv-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bv-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 7px 10px;
  background: rgba(11, 10, 9, 0.88);
  color: var(--copper-400);
  text-transform: uppercase;
  clip-path: var(--px-notch);
  pointer-events: none;
}
@media (max-width: 639px) {
  .bv-hint {
    top: 48px;
    left: auto;
    right: 10px;
  }
}