/* PIANO ARMY · the squad strip at the field's foot (web/army-squadbar.css). Lionel, 10-18: "lets move the unit selector
   to the bottom of screen next to the current auto unit selector. make these icons bigger because right now they are
   too small and increase their oppacity even when inactive by 30%": the squad's ten slots out of the HUD, in the
   panels' row at the field's foot (.fieldctl: Units out from, Auto draft, the squad), their icons x1.5 (24 x 26 →
   36 x 39), the slots not next at .8 (they were .5), the next one whole with its gold ring; a click on one still
   changes it (commander mode). The HUD keeps the gold and the rest, a row less in portrait. */
.fieldctl .squad { display: flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 12px; background: rgba(14, 18, 28, .86); border: 1px solid var(--line); }
.fieldctl .squad i { display: block; flex: none; width: 36px; height: 39px; border-radius: 7px; background: rgba(255, 255, 255, .06); opacity: .8; }
.fieldctl .squad i img { width: 100%; height: 100%; object-fit: contain; }
.fieldctl .squad i.now { opacity: 1; background: rgba(240, 207, 133, .25); box-shadow: 0 0 0 2px var(--gold); }
#stage.commander .fieldctl .squad i { cursor: pointer; }
.fieldctl .squad i:hover { outline: 1px solid var(--gold2); }
#stage[data-orient="portrait"] .fieldctl .squad { gap: 2px; padding: 3px 5px; }
#stage[data-orient="portrait"] .fieldctl .squad i { width: 30px; height: 32px; }
/* the draft that does not pause, docked over the panels' row (two rows of them in portrait) */
#draft.live, #stage.commander #draft.live { bottom: 62px; }
#stage[data-orient="portrait"] #draft.live { bottom: 108px; transform: translateX(-50%) scale(.62); width: max-content; }
#stage[data-orient="portrait"].commander #draft.live { bottom: 154px; }
/* (portrait's docked cards in a row, not a column: low enough to stay in the field over the panels) */
#stage[data-orient="portrait"] #draft.live .cards { flex-wrap: nowrap; }
/* portrait's HUD without the squad: the gold, the timer, the armies and the buttons; the partial's bar and the cards */
#stage[data-orient="portrait"] #hud { grid-template-rows: 26px 20px; grid-template-areas: "gold timer vs btns" "pbar pbar pbar spoils"; }