/* PIANO ARMY · the auto draft's choice (web/army-auto.css; army-game.js the menu's row, army-stage.js paintAuto): the
   kind your towers send, on the menu under the mode, and over the field's corner in the round (beside "Units out from"
   in commander mode, above it where the field is narrow) */
.pauto { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: -6px 0 14px; }
.pauto > span { font: 700 13px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.pauto button { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--bg2); border: 2px solid var(--line); }
.pauto button img { height: 26px; }
.pauto button b { font: 800 15px/1 "Barlow Condensed", Barlow, sans-serif; }
.pauto button small { color: var(--dim); font-size: 12px; }
.pauto button.on { border-color: var(--gold); background: linear-gradient(#2e2a1c, #221f15); }
.pauto button.on b { color: var(--gold2); }

.fieldctl { position: absolute; left: 12px; bottom: 10px; z-index: 4; display: flex; flex-wrap: wrap-reverse; align-items: flex-end; gap: 8px; max-width: calc(100% - 24px); pointer-events: none; }
.fieldctl > * { pointer-events: auto; }
.fieldctl .towers { position: static; }
.autod { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 12px; background: rgba(14, 18, 28, .86); border: 1px solid var(--line); }
.autod[hidden] { display: none; }
.autod span { font: 700 12px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); margin-right: 2px; }
.autod button { display: flex; align-items: center; gap: 3px; padding: 2px 9px 2px 4px; border-radius: 999px; font: 700 13px/1 "Barlow Condensed", Barlow, sans-serif; }
.autod button img { height: 22px; }
.autod button.on { background: var(--gold); color: #2a2010; border-color: var(--gold); }
.autod .hint { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 2px; }
#stage[data-orient="portrait"] .autod .hint { display: none; }
/* (five kinds since, the race's heavy the fifth, 10-18: at a phone's width each on one line, a smaller picture) */
.autod button { white-space: nowrap; }
#stage[data-orient="portrait"] .autod { gap: 4px; }
#stage[data-orient="portrait"] .autod button { padding: 2px 6px 2px 3px; }
#stage[data-orient="portrait"] .autod button img { height: 18px; }