/* Build-mode obstacle-type switcher — prev arrow / preview icon / current
   type+price / next arrow (see #obstacle-switcher in index.html, wired in
   game.ts; also reachable via the Q/E keys). Fixed, centered horizontally,
   always pinned to the bottom of the screen (previously repositioned itself
   to whichever half of the screen the build ghost wasn't in — reverted per
   explicit feedback that moving it around was a bad idea; it now stays put
   like every other HUD element). Same panel treatment (70% black) as the
   HUD bar/touch-control clusters, since like them it sits on top of the
   live canvas rather than covering the whole screen. Sized up a full notch
   from the rest of the HUD chrome — it's the one panel players stare at
   continuously while building, not just glance at. */
#obstacle-switcher {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-panel-bg);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: 1.15rem;
}
/* Brief pulse on a Q/E/arrow change (flashObstacleSwitcher in game.ts) — the label/preview already update instantly, this
   just makes the change itself impossible to miss. */
@keyframes obstacle-switcher-flash {
  from {
    transform: translateX(-50%) scale(1.08);
  }
  to {
    transform: translateX(-50%) scale(1);
  }
}
#obstacle-switcher.flash {
  animation: obstacle-switcher-flash 150ms ease-out;
}

#obstacle-preview {
  width: 48px;
  height: 48px;
  /* Its 40x40 canvas attribute (index.html) is genuinely upscaled to this CSS size — pixelated keeps
     that crisp instead of browser-smoothed, matching the pixel-art style everywhere else now. */
  image-rendering: pixelated;
  flex-shrink: 0;
}

#obstacle-label {
  min-width: 130px;
  text-align: center;
  font-variant-numeric: tabular-nums; /* same reasoning as #hud — the price digit shouldn't reflow the label's width */
}

.obstacle-switch-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  color: var(--color-button-text);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  touch-action: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.obstacle-switch-btn:active {
  background: var(--color-primary);
  color: #fff;
}