/* Squad portraits beside the right-hand rail on the World map (client/squads.js). */
#sq-col { position: fixed; z-index: 29; display: flex; flex-direction: column; gap: 7px; overflow: hidden; pointer-events: none; }
#sq-col.hidden { display: none; }
/* fixed on the body: hidden at once under a sheet, the Queue panel, the Search drawer and a ring or card that reaches the rails */
body:has(#sheet:not(.hidden)) #sq-col, body:has(#qp.open) #sq-col, body:has(#map-search:not(.hidden)) #sq-col, body:has(#view.ring-wide) #sq-col, body:has(#view.card-wide) #sq-col { display: none; }
.sq-p { position: relative; flex: none; box-sizing: border-box; width: 46px; height: 46px; min-height: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sq-p:active { transform: scale(.94); }
.sq-face { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #4a5a6e, #1b2430 75%); box-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 0 2px #10161d; }
.sq-face .sq-img, .sq-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sq-face .pn-portrait-fallback { width: 100% !important; height: 100% !important; border-radius: 50%; font-size: 13px; }
.sq-emo { font-size: 20px; line-height: 1; }
.sq-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.sq-ring circle { fill: none; stroke-width: 3; }
.sq-ring .bg { stroke: rgba(10,14,18,.75); }
.sq-ring .fg { stroke: #78bfff; stroke-linecap: round; transition: stroke-dashoffset .45s linear; filter: drop-shadow(0 0 2px rgba(120,191,255,.7)); }
.sq-p.s-gathering .sq-ring .fg { stroke: #7fe07a; filter: drop-shadow(0 0 2px rgba(127,224,122,.7)); }
.sq-p.s-returning .sq-ring .fg { stroke: #f0c060; filter: drop-shadow(0 0 2px rgba(240,192,96,.7)); }
.sq-p.s-parked .sq-ring .fg { stroke: #b9c4cf; filter: none; opacity: .75; }
.sq-p.s-fighting .sq-ring .fg { stroke: #ff6a5a; filter: drop-shadow(0 0 3px rgba(255,106,90,.85)); }
.sq-p.s-waiting .sq-ring .fg { stroke: #ffd23f; }
/* status badge (bottom right) and squad number (top left) */
.sq-badge { position: absolute; right: -2px; bottom: -2px; min-width: 17px; height: 17px; padding: 0 2px; border-radius: 9px; display: grid; place-items: center; font: 900 10px/1 system-ui; font-style: normal;
  color: #fff; background: #2f6fb8; border: 1.5px solid #0d1620; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sq-p.s-gathering .sq-badge { background: #3f9a3a; } .sq-p.s-returning .sq-badge { background: #b07a1e; } .sq-p.s-parked .sq-badge { background: #5b6672; }
.sq-p.s-fighting .sq-badge { background: #c43a2e; animation: sqPulse 1s ease-in-out infinite; } .sq-p.s-waiting .sq-badge { background: #a38214; }
.sq-n { position: absolute; left: -3px; top: -3px; min-width: 15px; height: 15px; padding: 0 2px; border-radius: 8px; display: grid; place-items: center; font: 900 9px/1 system-ui; color: #1c1a10; background: #f0b43c; border: 1.5px solid #10161d; }
.sq-n:empty { display: none; }
@keyframes sqPulse { 50% { transform: scale(1.15); } }
#sq-col.row { flex-direction: row; } /* phone landscape: a row above the Shelter button */
#sq-col.row { align-items: flex-start; overflow: visible; height: 46px; box-sizing: content-box; padding: 3px 0 0; }

/* squads are their cars: the rig's picture on a dark round, and while a march card is open the column is the squad picker */
.sq-p.car .sq-face { overflow: visible; background: radial-gradient(circle at 50% 38%, #4b4a36, #1b1d14 72%); box-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 0 2px #2b2617, 0 0 0 3px #a8822f; }
.sq-p.car .sq-face canvas { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); pointer-events: none; }
.sq-p.s-home .sq-ring { display: none; }
.sq-p.s-home .sq-badge { display: none; }
#sq-col.pick { padding: 4px 0 0; height: auto; overflow: visible; }
#sq-col.pick .sq-p { width: 58px; height: 58px; }
.sq-p.busy { filter: grayscale(.75) brightness(.7); }
.sq-p.sel .sq-face { box-shadow: 0 0 0 3px #ffd56a, 0 0 14px 3px rgba(255,200,80,.85); animation: sqSel 1.4s ease-in-out infinite; }
.sq-p.sel::before { content: '▲'; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 12px; color: #ffd56a; text-shadow: 0 0 6px rgba(255,200,80,.9), 0 1px 2px #000; }
@keyframes sqSel { 50% { box-shadow: 0 0 0 3px #ffe59a, 0 0 20px 6px rgba(255,210,90,.95); } }
/* the rails step aside while the march card is open */
#view.mc-open:not(.land) .hud-right, #view.mc-open .hud-events.on-map { opacity: 0; pointer-events: none; }
/* the march card's car row: the cars stand free, no round frames (owner); the picked one stands in a gold spotlight */
#sq-col.pick .sq-p .sq-face { inset: 0; overflow: visible; background: none; box-shadow: none; border-radius: 0; animation: none; }
#sq-col.pick .sq-p .sq-face::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
#sq-col.pick .sq-p .sq-face canvas { filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
#sq-col.pick .sq-ring { display: none; }
#sq-col.pick .sq-p.sel .sq-face::before { left: -4px; right: -4px; bottom: 2px; height: 18px; background: radial-gradient(closest-side, rgba(255,215,110,.95), rgba(255,180,60,.45) 55%, transparent); animation: sqSpot 1.4s ease-in-out infinite; }
#sq-col.pick .sq-p.sel .sq-face canvas { filter: drop-shadow(0 0 6px rgba(255,210,90,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
#sq-col.pick .sq-n { left: 2px; top: -2px; }
#sq-col.pick .sq-badge { right: 2px; bottom: 0; }
@keyframes sqSpot { 50% { opacity: .65; transform: scaleX(1.08); } }