/* STAGE SIDES (js/stage-sides.js): moves the portraits to the edge their team stands on, and the satchel to Jim's side.
   play-stage.css puts the first person at the left edge, Jim (and the satchel) at the right; these rules say where each tile really stands. */
.ps-face[data-edge="left"]{left:max(6px,env(safe-area-inset-left))!important;right:auto!important}
.ps-face[data-edge="right"]{right:max(6px,env(safe-area-inset-right))!important;left:auto!important}
/* a second person on the same edge stands beside the first, on the side nearer the middle */
.ps-face[data-edge="left"][data-inset="1"]{left:calc(max(6px,env(safe-area-inset-left)) + var(--ps-face) + 8px)!important}
.ps-face[data-edge="right"][data-inset="1"]{right:calc(max(6px,env(safe-area-inset-right)) + var(--ps-face) + 8px)!important}
/* the satchel goes with Jim */
body.ps-jim-left .ps-sat{right:auto;left:max(6px,env(safe-area-inset-left))}
body.ps-jim-left .ps-sat-chips{align-items:flex-start}
/* Jim's tile is the one over the satchel: when the satchel opens it covers Jim wherever he stands */
@media (prefers-reduced-motion:no-preference){ .ps-face img{transition:none} }
/* the Bag left / Bag right button (stage-sides.js): the arrows keep their own size when a narrow header goes icon-only (font-size:0) */
#handBtn .hd-ic{font-size:15px;line-height:1}
#handBtn[data-side=left] .hd-ic{display:inline-block;transform:scaleX(-1)}