.card {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 62px;
  padding: 4px 6px;
  background: white;
  border: 2px solid var(--cobalt-900);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  user-select: none;
  transition: transform 80ms ease, box-shadow 80ms ease;
  position: relative;
}
.card:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-sm);
}
.card:active {
  transform: translate(0, 0);
  box-shadow: none;
}
.card--red { color: var(--suit-red); }
.card--black { color: var(--suit-black); }
.card--used {
  opacity: 0.18;
  cursor: not-allowed;
  pointer-events: none;
}
.card__rank {
  font-size: 18px;
  line-height: 1;
  text-align: left;
}
.card__suit {
  font-size: 22px;
  line-height: 1;
  text-align: right;
}

.slot {
  display: inline-flex;
  width: 44px;
  height: 62px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  transition: border-color 80ms, background 80ms;
}
.slot:hover { border-color: var(--cobalt-300); }
.slot--active {
  border-color: var(--canary-500);
  border-style: solid;
  background: var(--canary-300);
  color: var(--cobalt-900);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}