[data-motion-card]:not(:disabled), [data-motion-deck]:not(:disabled) {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.card-motion-dragging { opacity: .3 !important; }

.card-motion-drag-ghost {
  position: fixed !important;
  z-index: 10020 !important;
  left: 0;
  top: 0;
  width: 82px !important;
  height: 118px !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) rotate(4deg) !important;
  filter: drop-shadow(0 18px 13px rgba(0,0,0,.38));
}

.card-motion-drag-ghost[data-stack-count]::after {
  content: "+" attr(data-stack-count);
  position: absolute;
  top: -12px;
  right: -14px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border: 2px solid #171714;
  border-radius: 50%;
  background: #f7d91e;
  color: #171714;
  font: 900 12px/1 "Courier New", monospace;
}

.card-motion-drop-ready {
  outline: 4px solid #f7d91e !important;
  outline-offset: 7px;
  filter: drop-shadow(0 0 18px rgba(247,217,30,.72));
}

.card-motion-layer {
  position: fixed;
  z-index: 10010;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.card-motion-card {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 64px;
  height: 90px;
  transform-origin: center;
  filter: drop-shadow(0 12px 9px rgba(0,0,0,.34));
}

.card-motion-back, .card-motion-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 3px solid #171714;
  border-radius: 5px;
}

.card-motion-back {
  background: repeating-linear-gradient(45deg, #171714 0 6px, #f7d91e 6px 9px);
  box-shadow: inset 0 0 0 4px #f7f0db;
}

.card-motion-face {
  grid-template-rows: auto 1fr;
  align-items: start;
  justify-items: start;
  padding: 6px;
  background: #fffdf6;
  color: #171714;
  font-family: Georgia, serif;
}

.card-motion-face b { font-size: 18px; line-height: 1; }
.card-motion-face i { place-self: center; font-size: 34px; font-style: normal; }
.card-motion-face.is-red { color: #d32721; }

.card-motion-badge {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -135%);
  white-space: nowrap;
  border: 3px solid #171714;
  padding: 8px 12px;
  background: #f7d91e;
  color: #171714;
  box-shadow: 4px 4px 0 #171714;
  font: 900 12px/1 "Courier New", monospace;
  letter-spacing: .06em;
  animation: card-motion-badge-in 1600ms cubic-bezier(.2,.8,.2,1) both;
}

.card-motion-layer.is-fjommer .card-motion-badge,
.card-motion-layer.is-penalty .card-motion-badge {
  background: #e42b25;
  color: white;
}

.card-motion-player-impact { animation: card-motion-player-hit 760ms ease both; }
.card-motion-player-impact.is-fjommer,
.card-motion-player-impact.is-penalty { animation-name: card-motion-penalty-hit; }
.card-motion-pile-impact { animation: card-motion-pile-hit 680ms ease both; }

@keyframes card-motion-badge-in {
  0% { opacity: 0; transform: translate(-50%, -100%) scale(.72) rotate(-4deg); }
  26%, 74% { opacity: 1; transform: translate(-50%, -135%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -155%) scale(.96); }
}

@keyframes card-motion-player-hit {
  45% { transform: translateY(-4px) scale(1.025); filter: brightness(1.22); }
}

@keyframes card-motion-penalty-hit {
  22% { transform: translateX(-5px); }
  42% { transform: translateX(5px); filter: saturate(1.6); }
  64% { transform: translateX(-3px); }
}

@keyframes card-motion-pile-hit {
  50% { transform: scale(1.08) rotate(-1deg); filter: brightness(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .card-motion-badge { animation-duration: 1ms; }
  .card-motion-player-impact,
  .card-motion-pile-impact { animation: none; }
}