/* Bus Demolition Derby (shared: sim3d.css + car-kit.css); layout based on Bumper Arena */
#game-root .sim-controls-help { margin-top: 14px; }
.bd-top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; max-width: 92%; }
.bd-time { background: rgba(8, 16, 28, .72); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 2px 14px; font: 900 22px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.bd-left { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.bd-left span { background: rgba(8, 16, 28, .7); border: 2px solid var(--c); border-radius: 999px; padding: 1px 9px; font: 800 12px system-ui, sans-serif; white-space: nowrap; }
.bd-left span.is-human { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.bd-left span.is-out { opacity: .35; text-decoration: line-through; }
.bd-feed { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; max-width: 36%; }
.bd-feed__item { background: rgba(8, 16, 28, .72); border-radius: 8px; padding: 3px 9px; font: 600 12px system-ui, sans-serif; animation: bd-in .25s ease-out; }
@keyframes bd-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.bd-tag { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bd-tag span { font: 800 11px system-ui, sans-serif; background: rgba(8, 16, 28, .7); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.bd-tag.is-human span { background: rgba(37, 99, 235, .88); font-size: 12px; }
.bd-tag i { display: block; width: 46px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.bd-tag b { display: block; height: 100%; background: #4ade80; }
.bd-tag.is-low b { background: #ef4444; }
.bd-tag.is-out { opacity: .5; }
.bd-hp { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; background: rgba(8, 16, 28, .78); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px 12px; font: 800 14px system-ui, sans-serif; }
.bd-hp div { width: 150px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.bd-hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ef4444, #facc15 40%, #4ade80); }
.bd-hp b { font-variant-numeric: tabular-nums; min-width: 28px; }
.bd-hp.is-low { border-color: #ef4444; animation: bd-blink .6s steps(2) infinite; }
@keyframes bd-blink { 50% { filter: brightness(1.5); } }
.bd-pop { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font: 900 clamp(20px, 3.4vw, 32px) system-ui, sans-serif; color: #fde047; text-shadow: 0 2px 6px rgba(0, 0, 0, .75); opacity: 0; pointer-events: none; white-space: nowrap; }
.bd-pop.is-on { animation: bd-pop 1.1s ease-out forwards; }
@keyframes bd-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }
.sim-has-touch .bd-hp { bottom: 100px; }
@container (max-width: 480px) {
  .bd-top { top: 92px; }
  .bd-time { font-size: 17px; }
  .bd-feed { top: auto; bottom: 190px; max-width: 70%; }
  .bd-hp div { width: 100px; }
  .sim-has-touch .bd-hp { bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) { .bd-feed__item { animation: none; } .bd-pop.is-on { animation: none; opacity: 1; } .bd-hp.is-low { animation: none; } }