/* «Ball of Satan»: the squad's commands on a phone (ui/squad.js; feat/squad-command, feat/mobile-hud) — a short column at
   the left edge under the radio / the eye (ШТУРМ · СТОЙ: off the field, clear of the action corner), НАЗАД in the radio's
   menu beside the radio button (a quick tap on it). --you: cyan swat. The squad's size in the corner of ШТУРМ; the order
   it is on outlined. Flat plates, 1.5 px lines. */
#sqBar,#sqMenu{display:none}
body.touchp #sqBar:not([hidden]){display:flex;flex-direction:column;position:absolute;z-index:8;left:calc(6px + var(--safe-l,0px));top:calc(40% + 52px);gap:8px;pointer-events:none;--you:var(--cyan)}
body.touchp #sqMenu:not([hidden]){display:flex;position:absolute;z-index:9;left:calc(60px + var(--safe-l,0px));top:calc(40% - 58px);gap:6px;pointer-events:none;--you:var(--cyan);animation:sqIn .14s ease-out}
:is(#sqBar,#sqMenu) .sq-b{position:relative;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;width:48px;height:48px;padding:5px 0 0;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(7,5,11,.5);border:1.5px solid color-mix(in srgb,var(--you) 55%,transparent);color:var(--you);font:600 7.5px/1 var(--mono);letter-spacing:.04em}
#sqMenu .sq-b{background:rgba(7,5,11,.82)}
:is(#sqBar,#sqMenu) .sq-b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
:is(#sqBar,#sqMenu) .sq-b span{pointer-events:none;white-space:nowrap}
:is(#sqBar,#sqMenu) .sq-b.cur{border-color:var(--you);background:color-mix(in srgb,var(--you) 18%,rgba(7,5,11,.6))}
:is(#sqBar,#sqMenu) .sq-b.on{background:var(--you);color:#07050b;transform:scale(.95)}
#sqBar .sq-b .n{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:var(--you);color:#07050b;font:700 9px/16px var(--mono);font-style:normal;text-align:center}
#sqBar .sq-b .n:empty{display:none}
/* the radio button with its menu open: lit */
body.touchp:has(#sqMenu:not([hidden])) #radioBtn{background:color-mix(in srgb,var(--cyan) 22%,rgba(7,5,11,.6));border-color:var(--cyan)}
/* landscape: little height — the column goes beside the eye instead of under it */
@media (orientation:landscape) and (max-height:500px){body.touchp #sqBar:not([hidden]){flex-direction:row;left:calc(60px + var(--safe-l,0px));top:40%}}
@keyframes sqIn{from{opacity:0;transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){:is(#sqBar,#sqMenu) .sq-b.on{transform:none}#sqMenu{animation:none!important}}