.magnet-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 5px;
  padding: 21px 7px;
  border: 1px solid #d2d9e3;
  border-radius: 4px;
  background: #f3f6fa;
}
.magnet-animal {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid #c9d1dc;
  border-radius: 3px;
  background: #e5ebf1;
  touch-action: manipulation;
}
.magnet-animal[aria-label="Dog"] { touch-action: none; }
.magnet-animal img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.magnet-animal[data-correct] { outline: 3px solid var(--green); outline-offset: -3px; }
.magnet-field[data-pointer="mouse"], .magnet-field[data-pointer="mouse"] .magnet-animal[aria-label="Dog"] { cursor: none; }
.magnet-pointer, .magnet-mark { position: absolute; z-index: 1; pointer-events: none; }
.magnet-pointer {
  width: 15px;
  height: 21px;
  background: #22324a;
  filter: drop-shadow(0 0 1px white);
  clip-path: polygon(0 0, 100% 63%, 62% 65%, 80% 93%, 60% 100%, 41% 70%, 15% 95%);
}
.magnet-field[data-pointer="touch"] .magnet-pointer,
.magnet-mark { width: 13px; height: 13px; translate: -50% -50%; border-radius: 50%; }
.magnet-field[data-pointer="touch"] .magnet-pointer { background: #eaf2ff; border: 2px solid var(--blue); clip-path: none; }
.magnet-mark { border: 2px solid var(--red); box-shadow: 0 0 0 1px #fffc; }
.magnet-field[data-aim="settling"] .magnet-pointer { background-color: #2454c4; }
.magnet-field[data-aim="ready"] .magnet-pointer { background-color: #54cf94; }
.magnet-field[data-aim="ready"] .magnet-animal[aria-label="Dog"] { outline: 2px solid #54cf94; outline-offset: -2px; }