.confirmation-with-batter{display:flex;align-items:center;gap:14px;padding-block:12px}
.confirmation-session{flex:1;min-width:0;overflow-wrap:anywhere}
.confirmation-batter{flex:0 0 114px;align-self:center;line-height:1;text-align:center}
.confirmation-batter[hidden]{display:none}
.batter-sprite{display:block;width:114px;aspect-ratio:3/4;background-image:url('/images/knuckleheads-batter.png');background-size:400% 200%;background-repeat:no-repeat;background-position:100% 100%;pointer-events:none}
.batter-sprite.is-swinging{animation:batter-swing 3.6s steps(1,end) infinite both}
.batter-hint{display:block;font-size:8px;font-weight:700;letter-spacing:1px;color:#46572b;padding:3px 0 6px}
@keyframes batter-swing{
  0%,18%{background-position:0% 0%}
  27%{background-position:33.333333% 0%}
  35%{background-position:66.666667% 0%}
  42%{background-position:100% 0%}
  49%{background-position:0% 100%}
  59%{background-position:33.333333% 100%}
  72%{background-position:66.666667% 100%}
  85%,100%{background-position:100% 100%}
}
@media(max-width:480px){
  .confirmation-with-batter{gap:8px;padding-inline:13px}
  .confirmation-batter{flex-basis:90px}
  .batter-sprite{width:90px}
}
@media(max-width:360px){
  .confirmation-with-batter{flex-direction:column;align-items:stretch}
  .confirmation-batter{flex-basis:auto}
}
@media(prefers-reduced-motion:reduce){
  .batter-sprite.is-swinging{animation:none}
}