/* PIANO ARMY · the docked cards' toggle (web/army-dtoggle.css). Lionel, 10-18: "the card selector needs to be
   minimizable (toggle button on the bottom in landscape mode) even if there are active card sto be selected (instead
   the toggle button can have a superscript 1 or 2 or whatever number of card stacks are available)": a button at the
   end of the panels' row at the field's foot (.fieldctl), there only while the cards do not pause the battle. Hidden,
   the docked draft is out of sight (#draft.min), its deal kept, and the button wears the count of cards to choose in
   a gold superscript; F♯, G♯ and A♯ are notes again. In portrait the stack and the count alone, beside the squad. */
.fieldctl .dtoggle { position: relative; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 10px; border-radius: 12px; background: rgba(14, 18, 28, .86); font: 700 13px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.fieldctl .dtoggle[hidden] { display: none; }
.fieldctl .dtoggle:hover { color: var(--ink); }
.fieldctl .dtoggle b { font: inherit; }
/* a stack of two cards, the back one offset */
.dtoggle .stack { position: relative; width: 18px; height: 24px; flex: none; }
.dtoggle .stack::before, .dtoggle .stack::after { content: ""; position: absolute; width: 14px; height: 19px; border-radius: 3px; border: 1.5px solid var(--gold); background: #262e44; }
.dtoggle .stack::before { left: 4px; top: 0; opacity: .6; }
.dtoggle .stack::after { left: 0; top: 5px; }
/* the arrow: down to hide them, up to bring them back */
.dtoggle .arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
.dtoggle.min .arrow { border-top: 0; border-bottom: 6px solid currentColor; }
.dtoggle.min { color: var(--ink); border-color: var(--gold); }
/* the cards waiting, as a superscript on the button's corner */
.dtoggle sup { position: absolute; top: -9px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #2a2010; font: 800 13px/20px "Barlow Condensed", Barlow, sans-serif; text-align: center; box-shadow: 0 0 0 2px rgba(14, 18, 28, .9); }
.dtoggle sup:empty { display: none; }
/* hidden: the docked draft out of sight, its deal kept */
#draft.live.min { display: none; }
/* portrait: the stack and the count only, in the squad's row */
#stage[data-orient="portrait"] .fieldctl .dtoggle { height: 32px; padding: 0 6px; gap: 3px; }
#stage[data-orient="portrait"] .fieldctl .dtoggle b, #stage[data-orient="portrait"] .fieldctl .dtoggle .arrow { display: none; }
#stage[data-orient="portrait"] .dtoggle sup { top: -8px; right: -7px; min-width: 18px; height: 18px; line-height: 18px; font-size: 12px; padding: 0 4px; }