/* The still is the baseline. JavaScript only changes the atlas cell and pose. */
.character {
  display: block;
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--character-ink);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.character { width: 100%; touch-action: manipulation; }
button.character:disabled { cursor: default; }
.character__art {
  display: block;
  width: 100%;
  aspect-ratio: var(--character-aspect);
  background-size: var(--character-sheet-size);
  background-position: var(--character-frame-x) var(--character-frame-y);
  background-repeat: no-repeat;
  transform-origin: var(--character-origin);
  transform: translate(calc(var(--character-x) * var(--character-travel)), calc(var(--character-y) * var(--character-travel))) rotate(calc(var(--character-turn) * var(--character-tilt)));
  transition: transform var(--character-response) var(--character-ease);
  pointer-events: none;
}
.character[data-character="bry"] > .character__art { background-image: var(--character-bry-sheet); }
.character[data-character="ryae"] > .character__art { background-image: var(--character-ryae-sheet); }
.character[data-character="marco"] > .character__art { background-image: var(--character-marco-sheet); }
.character[data-character="jocko"] > .character__art { background-image: var(--character-jocko-sheet); }
.character__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--character-caption-gap);
  font-size: var(--character-caption-size);
  line-height: var(--character-caption-leading);
}
.character__caption small { color: var(--character-label-color); font-size: var(--character-label-size); }
button.character:focus-visible {
  outline: var(--character-focus-width) solid var(--character-focus);
  outline-offset: var(--character-focus-offset);
  border-radius: var(--character-focus-radius);
}
@media (prefers-reduced-motion: reduce) {
  .character__art { background-position: var(--character-static-x) var(--character-static-y); transform: none; transition: none; }
}