/* 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; }