.card {
  width: var(--card-w, 84px);
  height: var(--card-h, 118px);
  /* Your card PNGs have rounded corners baked in with a solid (non-
     transparent) white background around them. A perfectly square
     container lets that white sliver poke out past the rounded artwork,
     so this clips just enough to match the art's own corner radius. */
  border-radius: calc(var(--card-w, 84px) * 0.06);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--cream);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3);
  border: 1.5px solid rgba(0,0,0,0.22);
  user-select: none;
  touch-action: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), left var(--dur) var(--ease), top var(--dur) var(--ease);
  will-change: transform, top, left;
}
.card svg { width: 100%; height: 100%; display: block; border-radius: calc(var(--card-w, 84px) * 0.06); }
.card img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: calc(var(--card-w, 84px) * 0.06);
  object-fit: cover;
  /* If your uploaded PNGs have a built-in white border/margin around the
     card face, bump this up (e.g. 1.15) to crop in and make the art fill
     the slot better. 1 = no change. */
  transform: scale(var(--card-img-zoom, 1));
}

.card.red { color: var(--red); }
.card.black { color: var(--ink); }

.card.dragging {
  transition: none;
  box-shadow: 0 20px 34px rgba(0,0,0,0.4);
  z-index: 500;
  cursor: grabbing;
}
.card.draggable { cursor: grab; }
.card.selected {
  box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0,0,0,0.3);
  z-index: 100;
}
.card.hint-glow {
  animation: hintPulse 1s var(--ease) 2;
  z-index: 300 !important;
}
@keyframes hintPulse {
  0%, 100% {
    box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3);
    border-color: rgba(0,0,0,0.22);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px var(--gold), 0 0 24px 6px rgba(201,162,39,0.7), 0 10px 18px rgba(0,0,0,0.35);
    border-color: var(--gold);
    transform: scale(1.06);
  }
}

/* Destination side of a hint — a dashed empty column/cell gets this ring
   too, since there's no card there yet to glow. */
.hint-target-empty {
  animation: hintTargetPulse 1s var(--ease) 2;
}
@keyframes hintTargetPulse {
  0%, 100% { box-shadow: none; border-color: var(--felt-line); }
  50% { box-shadow: 0 0 0 5px var(--gold), 0 0 20px 4px rgba(201,162,39,0.6); border-color: var(--gold); }
}

.card.landing {
  animation: landSnap 160ms var(--ease);
}
@keyframes landSnap {
  0% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.free-cell .card, .foundation .card { position: absolute; inset: 0; left: 0; top: 0; }

.column {
  --stack-count: 0;
}

/* Deal-in animation */
.card.dealing {
  animation: dealIn 320ms var(--ease) both;
}
@keyframes dealIn {
  0% { transform: translateY(-260px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Victory cascade */
.card.victory-fly {
  animation: victoryFly 900ms var(--ease) forwards;
}
@keyframes victoryFly {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-40vh) rotate(360deg); opacity: 0; }
}

.empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  font-size: 1.6rem;
  pointer-events: none;
}