/* Only main display cards opt into this interaction. Source image layers stay intact. */
.card-tilt {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --light-x: 50%;
  --light-y: 50%;
  --tilt-energy: 0;
  transform: perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry));
  transform-origin: 50% 50%;
  touch-action: auto;
  outline: none;
}
.card-tilt.is-tilting { will-change: transform; }
.card-tilt:focus-visible:not(.is-pointer-focused) {
  outline: 2px solid var(--accent, #cdb888);
  outline-offset: 5px;
  border-radius: 10% / 6.67%;
}
.card-tilt-hit {
  position: absolute;
  inset: 0;
  z-index: 11;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.card-tilt.is-dragging .card-tilt-hit { cursor: grabbing; }
.card-tilt > .ability {
  z-index: 12 !important;
  pointer-events: auto;
  touch-action: pan-y;
}
.export-mode .card-tilt { transform: none; }
.export-mode .card-tilt-hit { display: none; }