/* Anchor every full-body rocker by the feet at the exact center of its field. */
.board{overflow:visible}
.game-layout>.arena{overflow:visible}
.board .pawn.member-piece{margin-left:calc(100% / 30);margin-top:calc(100% / 30);transform:translate(-50%,-100%);transform-origin:50% 100%}
.board .pawn.member-piece:hover{transform:translate(-50%,-105%) scale(1.08)}
@keyframes figure-run{0%{transform:translate(-50%,-100%) rotate(-7deg) scaleY(.96)}100%{transform:translate(-50%,-112%) rotate(7deg) scaleY(1.04)}}
@keyframes instrument-head-smash{0%,100%{transform:translate(-9%,-52%) rotate(0) scale(1)}35%{transform:translate(-21%,-65%) rotate(-24deg) scale(1.25)}68%{transform:translate(5%,-49%) rotate(25deg) scale(1.18)}}
@keyframes knocked-off-fullbody{0%{opacity:1;transform:translate(-9%,-52%) scale(1) rotate(0)}32%{transform:translate(-9%,-69%) scale(1.35) rotate(-20deg)}100%{opacity:0;transform:translate(130px,-105px) scale(.15) rotate(540deg)}}
@keyframes legal-piece-pulse{to{transform:translate(-9%,-52%) scale(1.24);filter:brightness(1.55) saturate(1.5)}}
@keyframes chosen-rocker{to{transform:translate(-9%,-63%) scale(1.16)}}
@keyframes instrument-charge{0%{transform:translate(-9%,-52%) scale(1)}70%{transform:translate(-31%,-52%) scale(1.25) rotate(-7deg)}100%{transform:translate(-17%,-52%) scale(1.18)}}
@keyframes knockout-hit{0%,35%{transform:translate(-9%,-52%) rotate(0) scale(1)}65%{transform:translate(6%,-64%) rotate(24deg) scale(1.15)}100%{transform:translate(-9%,-52%) rotate(-12deg) scale(.94);filter:grayscale(.75) brightness(1.45)}}
@keyframes bounce-spin{0%{transform:translate(-9%,-52%) rotate(0) scale(1)}30%{transform:translate(-9%,-87%) rotate(120deg) scale(.82)}65%{transform:translate(-9%,-34%) rotate(255deg) scale(.68)}100%{transform:translate(-9%,-52%) rotate(360deg) scale(.45)}}
@media(max-width:760px){
  /* Field coordinates point to the cell corner. Offset by half a cell, then
     anchor the miniature by its feet so every mobile width stays centered. */
  .board .pawn.member-piece{margin-left:calc(100% / 30)!important;margin-top:calc(100% / 30)!important;transform:translate(-50%,-100%)!important;transform-origin:50% 100%!important}
  .board .pawn.member-piece:hover{transform:translate(-50%,-100%)!important}
  .board .pawn.member-piece.running{animation:mobile-figure-run .23s ease-in-out infinite alternate!important}
}
@keyframes mobile-figure-run{from{transform:translate(-50%,-100%) rotate(-5deg) scaleY(.97)}to{transform:translate(-50%,-112%) rotate(5deg) scaleY(1.03)}}

/* On a phone, size the miniature from the board cell rather than the viewport.
   The sprite sheet has transparent padding below the shoes, so its box must
   sit slightly lower for the shoes (and the lit field) to line up. */
@media (hover:none) and (pointer:coarse), (max-width:760px){
  .board .pawn.member-piece,
  .android-app .board .pawn.member-piece{
    width:5.8%!important;
    height:7.4%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin-left:calc(100% / 30)!important;
    margin-top:calc(100% / 30)!important;
    transform:translate(-50%,-82%)!important;
    transform-origin:50% 100%!important;
  }
  .board .pawn.member-piece:hover,
  .android-app .board .pawn.member-piece:hover{transform:translate(-50%,-82%)!important}
  .board .pawn.member-piece.running,
  .android-app .board .pawn.member-piece.running{animation:phone-figure-run .23s ease-in-out infinite alternate!important}
}
@keyframes phone-figure-run{from{transform:translate(-50%,-82%) rotate(-4deg)}to{transform:translate(-50%,-91%) rotate(4deg)}}