/* V.48: one fixed dock and one grid coordinate system for every action. */
@media(pointer:coarse){
 body.playing #mobile-controls .mobile-actions{--key:48px;--gap:10px;--fire:88px;display:grid;grid-template-columns:repeat(3,var(--key)) var(--fire);grid-template-rows:var(--key) var(--key);gap:var(--gap);width:max-content;height:max-content;left:auto;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:none;pointer-events:none}
 body.playing #mobile-controls .skill-dock{display:contents;position:static;transform:none;width:auto;height:auto}
 body.playing #mobile-controls .mobile-actions button,body.playing #mobile-controls .mobile-actions #dash-skill,body.playing #mobile-controls .mobile-actions #ultimate-skill{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:flex;align-items:center;justify-content:center;width:var(--key);height:var(--key);min-height:var(--key);margin:0;padding:7px;clip-path:none;border-radius:50%;border:1.5px solid #f2e9d699;background:#101b25b8;box-shadow:0 1px 5px #0005;color:#f3e6ca;opacity:1;pointer-events:auto;touch-action:none}
 body.playing #mobile-controls .mobile-actions button::after{content:none}
 body.playing #mobile-controls [data-mobile=grenade]{grid-column:1;grid-row:1}
 body.playing #mobile-controls [data-mobile=reload]{grid-column:2;grid-row:1}
 body.playing #mobile-controls #ultimate-skill{grid-column:3;grid-row:1;border-color:#a8e5efc9}
 body.playing #mobile-controls [data-mobile=bash]{grid-column:1;grid-row:2}
 body.playing #mobile-controls #dash-skill{grid-column:2;grid-row:2;border-color:#a8e5efc9}
 body.playing #mobile-controls [data-mobile=jump]{grid-column:3;grid-row:2}
 body.playing #mobile-controls .mobile-actions [data-mobile=fire]{grid-column:4;grid-row:1 / span 2;align-self:center;width:var(--fire);height:var(--fire);min-height:var(--fire);border:2px solid #ec994c;background:#211d1ac9;box-shadow:0 0 0 3px #ec994c14,0 2px 6px #0005}
 body.playing #mobile-controls .mobile-actions .touch-icon{width:70%;height:70%;fill:currentColor;filter:none;shape-rendering:geometricPrecision}
 body.playing #mobile-controls [data-mobile=reload] .touch-icon{width:62%;height:62%}
 body.playing #mobile-controls .weapon-touch-icon{width:80%;height:65%;filter:none;image-rendering:auto}
 body.playing #mobile-controls .mobile-actions button.held{background:#6f543be6;border-color:#fff4d6;box-shadow:0 0 0 3px #fff0c733;color:#fff4d6}
 body.playing #mobile-controls .mobile-actions [data-mobile=fire].held{background:#664025e6;border-color:#ffc480;box-shadow:0 0 0 3px #ee964d33}
 body.playing #mobile-controls .mobile-actions button.cooldown{background:#101b25b8;border-color:#9da9ab77;color:#f3e6ca}
 body.playing #mobile-controls .mobile-actions button.cooldown .touch-icon{opacity:.4}
 body.playing #mobile-controls .mobile-actions button small{position:absolute;right:4px;bottom:3px;padding:1px 3px;border-radius:5px;background:#111922a6;font:700 11px/1 Arial,sans-serif;color:#f3e6ca}
 body.playing #mobile-controls #mobile-ammo{grid-column:4;grid-row:2;position:absolute;left:0;right:0;bottom:-19px;width:auto;font:700 12px/1 Arial,sans-serif;text-align:center;color:#f3e6ca;pointer-events:none}
 body.playing #mobile-controls .mobile-actions button small:empty{display:none}
 body.playing #move-stick{width:116px;height:116px;opacity:0;transition:opacity .1s}
 body.playing #move-stick.floating{opacity:.8}
 body.playing #stick-knob{width:40px;height:40px;left:38px;top:38px;border:1px solid #f3e6caaa;background:#f3e6ca33;box-shadow:none}
}
@media(pointer:coarse) and (min-height:430px) and (min-width:750px){body.playing #mobile-controls .mobile-actions{--key:56px;--gap:10px;--fire:100px}}

/* Keep Guardian's head inside the portrait frame at every roster size. */
body.choosing #pick-guardian img{object-position:50% 0%}