#bb-scene {
  width: 100%;
  height: auto;
  display: block;
  max-height: 62vh;
  border-radius: 12px;
  background: #0e1416;
  touch-action: manipulation;
}

.bb-hi {
  color: var(--accent);
  font-family: 'Caveat', cursive;
  font-size: 1.15em;
}

/* Deck segments */
.bb-seg {
  fill: #cfc9b8;
  stroke: #3b2410;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center top;
  transition: transform 1.1s cubic-bezier(.3,.2,.7,1), opacity .8s;
}
.bb-seg--bad { fill: #ff9ab3; }
.bb-seg--fall-left  { transform: translateY(200px) rotate(-32deg); opacity: .6; }
.bb-seg--fall-right { transform: translateY(200px) rotate(32deg);  opacity: .6; }

/* Columns */
.bb-col {
  fill: url(#bb-wood);
  stroke: #3b2410;
  stroke-width: 2;
  cursor: pointer;
}
.bb-col:hover { fill: #a0703a; }

/* Column tap slots (invisible but catch clicks) */
.bb-slot {
  fill: transparent;
  cursor: pointer;
}
.bb-slot-dot {
  fill: var(--chalk-dim);
  opacity: .5;
  pointer-events: none;
}
.bb-slot-dot--taken { opacity: 0; }

/* Hint bar */
.bb-hint-bar {
  fill: var(--accent);
  opacity: .85;
}
.bb-hint-label {
  fill: var(--chalk-dim);
  font-family: 'Patrick Hand', sans-serif;
  font-size: 14px;
  text-anchor: start;
}
.bb-hint-tick {
  stroke: var(--accent);
  stroke-width: 2;
}

/* Span length labels (small numbers under each span) */
.bb-span-label {
  fill: var(--chalk-dim);
  font-family: 'Caveat', cursive;
  font-size: 18px;
  text-anchor: middle;
}
.bb-span-label--bad { fill: var(--accent-3); font-weight: 700; }

/* Truck */
.bb-truck-emoji {
  font-size: 36px;
  text-anchor: middle;
}
.bb-truck-weight {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 18px;
  fill: var(--accent);
  text-anchor: middle;
}
.bb-truck-fall {
  transition: transform 1.2s cubic-bezier(.4,.05,.95,.5);
  transform: translate(0, 200px) rotate(25deg);
}

.bb-controls {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}