/* PIANO ARMY · the race bonuses chosen by any race (web/army-bonus-choice.css; army-game.js bonusPicks). Lionel, 10-22:
   "have each of the race bonuses currently be available for ALL the races ... (so call them non-race specific unique
   names)": the menu's Races panel, each side's bonus (yours, the opponent's) beside its race, the three bonuses' cards
   under them, each naming whose own it is. */
.bonus-picks { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.bonus-pick { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.bonus-pick .lbl { align-self: center; min-width: 96px; font: 700 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.bonus-pick button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 112px; padding: 6px 12px; border-radius: 10px; text-align: left; }
.bonus-pick button b { font: 800 15px/1.1 "Barlow Condensed", sans-serif; }
.bonus-pick button small { font-size: 11px; color: var(--dim); }
.bonus-pick button.on { background: var(--gold); color: #2a2010; border-color: var(--gold); }
.bonus-pick button.on small { color: #4a3a18; }
.race-bonus-grid .bown { margin: -6px 0 8px; font-size: 11px; color: var(--dim); }
@media (max-width: 700px) { .bonus-pick .lbl { min-width: 100%; } .bonus-pick button { min-width: 0; flex: 1 1 0; } }