/* PIANO ARMY · commander mode and the cards that do not pause (web/army-commander.css): the menu's choice of mode, the
   "Units out from" chooser over the field, the squad strip that takes a click, and the draft docked at the foot of the
   field when it does not pause the battle (army-stage.js) */
.pmode { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: -4px 0 16px; }
.pmode button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 230px; padding: 10px 16px; border-radius: 14px; background: var(--bg2); border: 2px solid var(--line); text-align: left; }
.pmode button b { font: 800 19px/1.1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .3px; }
.pmode button small { color: var(--dim); font-size: 12.5px; }
.pmode button.on { border-color: var(--gold); background: linear-gradient(#2e2a1c, #221f15); }
.pmode button.on b { color: var(--gold2); }

.towers { position: absolute; left: 12px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(14, 18, 28, .86); border: 1px solid var(--line); }
.towers span { font: 700 12px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); margin-right: 2px; }
.towers button { padding: 5px 12px; border-radius: 999px; font: 700 14px/1 "Barlow Condensed", Barlow, sans-serif; }
.towers button.on { background: var(--gold); color: #2a2010; border-color: var(--gold); }
.towers button:disabled { opacity: .4; cursor: default; }
/* a fallen tower (✕): greyed, still to be chosen, its units out at its place (Lionel, 10-18: "just because a tower is
   destroyed doesnt mean it gets deselected from the positioning selector") */
.towers button.fallen { opacity: .6; }
.towers button.fallen.on { opacity: 1; }
#stage.commander #hud .squad i { cursor: pointer; }
#hud .squad i:hover { outline: 1px solid var(--gold2); }

/* the draft that does not pause: docked at the foot of the field, smaller, the battle seen round it */
#draft.live { top: auto; bottom: 8px; transform: translateX(-50%) scale(.8); transform-origin: bottom center; padding: 10px 16px; background: rgba(18, 22, 34, .9); }
#draft.live h3 { font-size: 22px; }
#draft.live .cards { margin: 8px 0 6px; }
#stage.commander #draft.live { bottom: 56px; }
.towers button.even { border-style: dashed; }
.towers button.even.on { border-style: solid; }
.towers .hint { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 4px; }